본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section16] 236. 라우트 등록하기 이제 코드를 작성해 볼 시간이다. 애플리케이션에 필요한 라우트와 페이지를 설정 → 필요한 핵심 컴포넌트를 구축 → 단계별로 필수적인 데이터와 기능을 추가. 가장 먼저 새 프로젝트에 필요한 두 개의 추가 패키지를 설치해보자. vuex, router npm install --save vue-router vuex로 두 패키지를 설치해보자. src폴더 안에 router.js파일을 만들어, 여기에 모든 라우트와 라우팅 조직을 저장하여 main.js를 깔끔하게 해보자. 1/ 가장 먼저 vue-router로부터 createRouter함수를 불러오자. createRouter를 호출해 router를 생성. 이 router를 다른파일, 주로 main.js파일에서도 사용할 수 있도록 export를 한다. createRout..
[Udemy Vue 완벽가이드 Section16] 235. 레이아웃/컴포넌트 계획하기 레이아웃이라는 말에는 모든게 포함된다. 컴포넌트, 라우트 등 모든 것이 다 해당된다. 1/ 라우트 라우트부터 시작해보자. 이 애플리케이션에서 사용할 메인 페이지들이 된다. 코치에 대해서 /coaches 라우트 : 코치 목록을 로딩 → CoachesList 컴포넌트 /coaches/:id 동적 매개변수 라우트 : → CoachDetails 컴포넌트. 여기서 코치에 대한 상세정보를 확인한다. /register : 코치를 등록하는데 사용 → CoachRegisteration 컴포넌트 이렇게 코치에 관련된 라우트는 다 끝났다. 요청에 대해서 /contact : 양식을 열어서 코치에게 메시지를 전송 → ContactCoach 컴포넌트 /requests : 들어오는 요청을 확인 → RequestsReceived 컴..
[Udemy Vue 완벽가이드 Section16] 234. 데이터 요구 사항 계획하기 그럼 data부터 시작해보자. 우리에게는 두 가지 주요기능이 있다. Coaches가 있고, Requests, 즉 메시지가 있다. 그러면 coach들의 list, requests들의 list가 필요하다. 여러 개의 requests들이 전송될 수 있고, 또한 동일 coach에게 여러 개의 request가 전송될 수 있다. 그리고 모든 요청 아이템들은 당연히 코치를 가리켜야 한다. 따라서 요청은 아주 중요한 데이터가 된다. request에는 무엇이 있어야 할까? - 코치 id(request이 전송될 때 request이 코치에게로 연결되어 있어야하므로.) - 메시지(즉, 코치에게 전송될 텍스트. 그래야 코치가 답변할 수 있다.) - (요청자의) 이메일 주소 이렇게 요청 내에는 세 개의 중요 데이터가 포함된다. ..
[Udemy Vue 완벽가이드 Section16] 메인 프로젝트:"코치 찾기" 웹앱 233. 프로젝트/웹앱 계획하기 강의 과정의 메인 프로젝트인 Coach Finder 앱을 구축해보자. 이 웹앱, Vue.js로 구축한 웹사이트를 통해 원하는 코치를 찾을 수 있게 된다. 우리가 구축하게 될 이 웹사이트, 이 웹앱에는 두 가지의 주요 기능이 있다. 1/ Find a Coach : 코치 찾기 기능 1) List all available coaches - available한 코치들의 목록을 생성할 수 있어야 한다. 2) View coach details - 이 애플리케이션에 가입한 모든 코치들의 상세정보를 표시할 수 있도록 만든다. 3) Register as a coach - 코치로서 가입하는 기능 4) Contact a coach - 코치에게 연락할 수 있는 기능 2/ 연락하고자 하는 관심있는 코치에게 요청 메시지를 보내..
실행 컨텍스트 # 소스코드의 타입 소스코드(실행 가능한 코드)를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드 전역에 존재하는 소스코드 함수 코드 함수 내부에 존재하는 소스코드 eval 코드 빌트인 전역함수인 eval함수에 인수로 전달되어 실행되는 소스코드 모듈 코드 모듈 내부에 존재하는 소스코드 ## 소스코드를 4가지 타입으로 구분하는 이유 → 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르다. 전역, 함수, eval, 모듈 코드가 각각 평가가 되면, 전역, 함수, eval, 모듈 실행 컨텍스트가 생성된다. # 소스코드의 평가와 실행 자바스크립트 엔진은 소스코드를 2개의 과정, '소스코드의 평가'와 '소스코드의 실행' 과정을 나..
실행 컨텍스트 스택 const x = 1; function foo() { const y = 2; function bar() { const z = 3; console.log(x + y + z); }; bar(); }; foo(); 위 예제는 소스코드의 타입으로 분류할 때, 전역코드와 함수 코드로 이루어져 있다. 자바스크립트 엔진은 먼저 1) 전역 코드를 평가하여 실행 컨텍스트를 생성한다. 그리고 2) 함수가 호출되면 3) 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다. 코드가 실행되는 시간의 흐름에 따라 실행 컨텍스트 스텍에는 다음과 같이 실행 컨텍스트가 추가되고, 제거된다. 1/ 전역코드의 평가와 실행 1) 전역 코드 평가 자바스크립트 엔진은 먼저 전역코드를 평가 → '전역 실행 컨텍스트' 생성 → 실행 컨텍스트 스택..
'빌드'란? # 빌드란? 작가들이 책을 쓸 때는 챕터마다 워드파일들을 만들고, 수많은 사진 및 참고자료들을 다루면서 작업을 하다가 이를 책으로 낼때는 PDF파일 하나로 묶어서 공개한다. 프로그래밍도 마찬가지이다. 소프트웨어는 보통 몇백줄 코드로 되는게 아니기 때문에 개발자가 작업하는 프로젝트는 일반적으로 수십, 수백개가 넘는 폴더와 파일들로 이루어져있다. 이중에는 개발자가 작성하는 코드파일들도 있고, 다른 곳에서 작성한 코드들(즉, 라이브러리들), 그리고 이미지나 기타 소프트웨어에 필요한 파일들이 포함된다. 소프트웨어의 특성마다 다르지만, 일반적으로는 이를 출시할 때에는 이들을 다른 형태로 변형 또는 압축해서 내보낸다. 이를 '빌드한다'라고 한다. # 빌드 목적 빌드를 하는 목적과 이유는 다양하다. 윈도우의 .ex..
Node.js에 대하여 # Node.js가 뭘까? Node.js에 대해서 찾아보면 "자바스크립트 런타임"이라는 답변이 많다. ## HTML - 웹페이지에 글쓰고 그림 넣는 언어. 그냥 정적인 페이지를 만들 수 있었다. 워드 문서랑 똑같다. 글있고 그림있고. 사이트를 돌아다니다 보면 버튼 누르면 모달뜨고, 스크롤바 내리면 상단 메뉴가 디자인이 바뀌고 이런 동적인건 JS가 담당한다. ## JavaScript - 웹페이지를 다이나믹하게 바꿔줄 수 있다. JS는 HTML 조작을 할 수 있기 때문. 웹개발자들이 HTML을 조금더 다이나믹하게 만들고싶어서 JS를 HTML안에 끄적임. - HTML에 종속된 언어이다. 즉, HTML 페이지를 위해 만든 언어. 프로그래밍을 위해 1+1 = 2 이런걸 하기위해 만들어진 언어가 아니다. HTML ..

티스토리툴바