프로그램 설치 목록 - 프리티어 ( 코드정렬) - 테일윈드CSS ( CSS 스타일링 ) - 헤드윈드 ( 테일윈드 CSS 클래스 분류기 ) - 포스트CSS ( CSS 구문 강조 표시 ) 색 테마 변경 VSCode의 테마 변경 방법은 [File -> Preferences -> Color Theme ] 한국어 언어팩 설치 마켓플레이스에서 Korean을 검색하고 한국어 언어 팩을 설치 후 VSCode를 다시 시작하면 된 편집기 설정 [파일 -> 기본 설정 -> 설정] 메뉴에서 소스 코드의 탭 크기를 기본값 4에서 2로 바꾼다. VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해 놓는다. ctrl + shift + p 버튼을 누르고 user settings를 입력하면 [기본설정:사용자..

윈도우에서 개발환경 만들기 설치할 개발 도구 - Node.js - VSCode - scoop - Homebrew - touch - Chrome scoop 윈도우용 설치 프로그램으로 brew나 apt 같은 방식으로 명령 줄에서 프로그램을 쉽게 설치하게 해준다. scoop로 설치한 도구들은 파워셀에 scoop update * 명령으로 한번에 update 할 수있다. - 윈도우 시작 단추를 마우스 오른쪽 클릭후 [Window PowerShell] 선택 - 환경변수 설정 $env:SCOOP='C:\Scoop' [Environment]::SetEnvironmentVariable('Scoop', $env:SCOOP, 'User') - 윈도우 실행 규칙 변경 Set-ExecutionPolicy -ExecutionPo..

리액트 프레임워크는 가상 DOM과 JSX라는 새로운 방식을 동작하는 프레임워크다. SPA란? 브라우저에서 서버로 요청을 보내고 서버는 요청에 맞는 데이터를 응답해줘서 응답한 데이터를 화면에 나타내는데 이것을 렌더링이라고 한다. 이렇게 화면에 나타내고 다음 요청에 대한 응답데이터를 또 받으면 그전에 렌더링 한 내용을 모두 지우는데 이때 깜박거림(새로고침)이 생긴다. 웹 브라우저에서 주소창으로 다양한 요청하는 방식은 깜박임 현상을 피할 수 없다. 깜박거리지 않으려면 요청하는 자원이 하나만 있어야한다. 리액트는 index.html파일 한개로 동작한다. 그래서 서버에 자원을 한 번만 요청해서 깜박이는 현상이 없는거다. 즉 백엔드에서 받은 json 데이터를 해석해서 화면의 새로 요청한 부분만 동적으로 화면을 생성..

main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(store).use(router).mount('#app') 위에서 router와 store를 사용하기 위해 use 메소드 안에 넣어줬다. App.vue Home | About 라우터가 있는 프로젝트를 생성하면 다음과 같이 Home과 About 메뉴가 생성되고 그 메뉴를 보면 각각 router-link가 있다. Home은 / , About 은 /about으로 연결되어 있다. 이것을 실제 화면에서 f12 눌러서 소스를 보면 a태그로 나오고 to 속성은 ..

vue create 프로젝트 이름을 입력하면 Manually 로 시작하는게 있다. 그게 수동으로 설정을 해서 프로젝트를 만드는 거다. 수동 생성을 하면 다음과 같이 어떤것들을 사용할건지 고르는게 나온다. 선택은 스페이스바를 통해 선택가능하고 한번 더 누르면 선택 해제된다. ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press to select, to toggle all, to invert selection, and to proceed) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) V..

main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') index.html에서 body부분 npm run serve를 입력하고 가장먼저 실행되는게 main.js라고 생각하면 된다. vue 모듈에서 createApp이라는 메소드를가져오고 App.vue를 App으로 가져온다. createApp메소드에 App을넣어서 앱을 생성하겠다는 의미이다. 그리고 mount를 통해서 public의 index.html에 있는 id가 app인 것을 찾아서 App.vue에다가 mount를 하겠다는 의미이다. 결국 작성할 코드들을 index.html 작성해 service가 되는거다 App.vue template ..