@ResponseBody 작동 원리 @ResponseBody 어노테이션을 사용하지 않는 메서드와 @ResponseBody 어노테이션을 사용하는 두 개의 메서드를 비교하여 살펴본다. @ResponseBody 어노테이션을 사용하여 페이지에 데이터만을 전달할 수 있다. @RepsonseBody 사용 안 함 첫 번째로는 @RepsonseBody를 사용하지 않는 일반적인 메서드이다. 스프링 부트의 경우 웹 브라우저에서 (ex) localhost:8080/mvc를 통해 사이트에 접속하면 내장 톰캣 서버에서 mvc를 스프링에 넘겨주고, 스프링에서는 컨트롤러에 있는 Mapping을 따라 찾아간다. Mapping 된다면 ViewResolver로 토스되어(View를 통해서) 처리된다. @GetMapping("mvc") p..
Vue CLI 설치 Node.js는 기본적으로 설치되어있다는 가정 하에 설치를 진행한다. Node.js 버전은 16.14.1이고, npm 버전은 8.5.0이다. yarn이 아닌 npm을 사용하여 설치를 진행한다. Vue CLI 홈페이지 https://cli.vuejs.org/guide/installation.html Installation | Vue CLI Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall i..
메모리 공간 C언어에서 main 함수의 원형 char* argv[] : 첫 번째 문자열 argv[0]은 프로그램의 실행 경로로, 항상 고정된 값이다. 메모리 할당 메모리 영역에서 Data Segment, Block Started by Symbol, Stack, Heap의 위치 관계 스택(Stack) 동적 할당 직접 공부하여 작성한 내용이므로 불펌을 금합니다
데이터 바인딩(Data Binding) 데이터 바인딩은 일반적으로 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용된다. v-bind 디렉티브 값으로 들어가는 표현식은 문자열 외에도 객체 또는 배열을 사용할 수 있다. 클래스 지정 클래스를 동적으로 토글 하기 위해 v-bind:class에 객체를 전달할 수 있다. Error 태그에 v-bind 디렉티브를 사용했다. v-bind:class 값에 {warning: isError}라는 객체 값을 담는다. 만약 isError가 true인 경우 태그에 warning이라는 클래스가 지정될 것이다. 현재는 false로 설정해놓았기 때문에 단순 Error로만 출력될 것이다. Vue.js Devtools를 사용해서 isError 값을 true와 false로 번..
Vue CLI를 사용하여 Vue 프로젝트 생성 시도 중 오류가 발생하였다. vue : 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 첫 번째 방법 Execution Policy와 관련한 문제로 추정. Windows PowerShell을 관리자 권한으로 실행한다. Get-ExecutionPolicy Set-ExecutionPolicy RemoteSigned 현재 정책이 어떤 것으로 설정되어있는지 확인한 뒤, Restricted인 경우 RemoteSigned로 변경한다. 변경 후 다시 Vue 프로젝트 ..
윈도우 관리자 모드 cmd에서 사용 중인 포트 kill cmd 창에서 taskkill 명령어 실행 시 액세스가 거부되었다는 문구가 뜨면 관리자 모드로 실행했을 때는 된다고 한다. 근데 나는 안 된다. 😡 /pid 대신 /im으로 성공하긴 했는데 java.exe 녀석은 대체 무엇이었을까..... 현재 사용 중인 프로그램 포트와 PID 값 확인 netstat -ano -a : 모든 포트 표시 -n : IP주소:포트 형태로 표시 -o : PID 표시 특정 포트를 사용 중인 프로세스 확인 netstat -ano | findstr [포트번호] -ano는 필수로 입력할 필요는 없지만 작성 시 눈으로 보기에 편리하다. 위 명령어 사용 시 해당 포트 번호를 사용 중인 프로세스의 PID 값을 알아낼 수 있다. 특정 PI..
이 정도면 슈퍼 면역자라고 떵떵거렸던 내가 코로나 양성이라니 오늘은 증상이 나타난 지 6일째이다. 오늘이 돼서야 조금 살만한 거 같다. 첫째 날에 목감기 증상인 거 같긴 했지만 처음 느껴보는 이상한 목 느낌이라서 이거는 무조건 코로나라고 확신을 했다. 그동안 확진자와 밥도 같이 먹고 했었지만 걸린 적이 없었기 때문에 가족이 걸렸어도 안 걸리겠지~라고 안일하게 생각하고 있었다. 증상이 나타난 첫날에 몸 관리를 좀 해주면 괜찮아지지 않을까 했지만 이튿날도 여전했고, 셋째 날부터 심해져서 병원에 가서 전문가용 신속항원 검사를 받았다. 그동안 자가 키트나 보건소에서 하는 신속항원 검사만 했었지, 전문가용 신속항원 검사는 처음이었는데 진짜 눈물이 찔끔 났다... 코 깊숙한 곳에서부터 면봉을 돌리면서 뺐는데 충격적..
computed와 watch 속성 computed {{ num }} {{ doubleNum }} computed 속성 사용 시 데이터에 대한 의존성을 가진다. 그리고 기본적으로 getter 함수를 가지고 있다. vm.doubleNum 값은 vm.num 값에 의존하게 된다. doubleNum에 대한 로직이 실행될 때 기준이 되는 값이 num인 것이다. 따라서 num 값이 변경될 때마다 doubleNum 값도 변경된다. computed 속성 대신 methods 속성을 사용하여 doubleNum 값을 불러올 수도 있다. ..., methods: { doubleNum: function() { return this.num * 2; } } ... 이는 결과 값을 불러오는 데에 있어서는 똑같다. 그러나 의존성이라는 ..
Axios 뷰에서 권고하는 Promise 기반 HTTP 통신 라이브러리이다. CDN 방식 또는 NPM 방식을 통해 사용할 수 있다. 예제 get user {{ users }} https://jsonplaceholder.typicode.com JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com JSON 데이터를 불러올 때 시험하기 좋은 사이트이다..
뷰 라우터(Vue Router) 뷰 라이브러리를 사용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다. 뷰 라우터를 사용하여 뷰로 만든 페이지 간 자유로운 이동이 가능하다. 뷰 라우터 사용을 위해서는 CDN 방식과 NPM 방식으로 사용할 수 있는데, 아래 예제에서는 CDN 방식을 사용한다. 뷰 라우터 구현은 와 태그를 사용한다. 페이지 표시 태그이다. 변경되는 URL에 따라 해당 컴포넌트를 뿌려준다. 페이지 이동 태그이다. 화면 코드에서는 태그로 표시된다. 클릭하면 to에 지정한 URL로 이동한다. 이때 to는 태그의 href 속성과 같은 의미인 것이다. 예제 뷰 라우터 사용을 위해 VueRouter를 생성하여 router 변수에 저장하였다. VueRouter는 페이지의 라우팅 정보로, ..
컴포넌트(Component) 조합하여 화면을 구성할 수 있는 블록을 뜻한다. 화면 영역을 각각 Header, Content, Footer, Aside, Main으로 구분한 것이다. 이를 아래와 같은 트리 형태로 나타낼 수 있다. 트리 구조로 컴포넌트를 살펴보면 컴포넌트가 어떻게 구성되어있는지 더 알아보기 쉽다. Root는 화면 전체 영역을 의미한다. 화면 전체를 Header, Content, Footer 세 개의 컴포넌트로 분할하였다. 이후 Content 컴포넌트에서도 Aside, Main 두 개의 컴포넌트로 분할한다. Content를 부모 컴포넌트 또는 상위 컴포넌트라 하고, Aside, Main을 자식 컴포넌트 또는 하위 컴포넌트라 말한다. 이는 Root와 Header, Content, Footer ..
