본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section16] 243. 코치 세부사항 컴포넌트 구축하기 CoachDetail.vue에 포함된 더미 컨텐츠를 실제 컨텐츠로 변경해보자. CoachDetail.vue에서 id를 props로 가져와보자. 왜 id를 props로 가져올까? → 이 컴포넌트가 로드되는 방식을 생각해보자. 라우팅을 통해 로드된다. CoachDetail.vue 컴포넌트는 '/coaches/:id' 경로를 통해 로드된다. const router = createRouter({ routes: [ { path: '/coaches/:id', component: CoachDetail, }, ], }); 따라서 이론적으로는 어떤 props도 가져오지 않는다. 컴포넌트를 로드하는 라우터는 기본적으로 어떤 props도 전달하지 않으므로. 하지만 라우트 구성에서 props를 true로 설정하면 해당 URL..
[Udemy Vue 완벽가이드 Section16] 241. 코치 목록 및 목록 항목 작성하기 코치 항목을 위해 별개의 컴포넌트를 사용할거다. 이 항목과 관련된 많은 양의 마크업과 스타일링을 사용할 예정인데, 이들 전부를 CoachesList.vue에 포함시키고 싶지 않으므로. 물론 그렇게 해도 작동은 한다. 이론적으로 한 vue앱 전체를 컴포넌트 하나로 구축할 수도 있지만, 컴포넌트의 목적 자체가 코드를 재사용 가능한 작은 부분으로 나누는 것! → 따라서 components 폴더 내에 coaches라는 하위 폴더를 만들어, 코치 관련 컴포넌트는 모두 이 폴더에 집어넣자. 그중 하나는 CoachItem.vue 파일. coachContactLink(){}에서 아래와 같이 해도 되지만, //CoachItem.vue coachContactLink() { return '/coaches/' + this.i..
[Udemy Vue 완벽가이드 Section16] 240. Vuex 및 코치 데이터 추가하기 데이터 추가를 시작해보자. 데이터 관리는 당연히 Vuex를 사용할 예정. 절대 변하지 않을 정적인 데이터뿐만 아니라 코치를 추가할 수 있어야 하므로. pages, components 폴더 옆에 store폴더를 만들고, index.js파일을 추가해 이 파일에 저장소를 설정한다. 하지만 모듈로도 작업할 거다. 코치와 요청이라는 두 개의 주요 기능이 있고, 각 기능 그리고 기능에 속하는 state, action을 모듈로 만들 예정. 한 파일에 전체 모듈을 넣을 수도 있고, 여러 개의 파일로 나누어도 된다. 이번에는 여러 개의 파일에 모듈을 나누어서 넣는 방식으로 해보자. 불필요한 작업일 수도 있다. 반드시 이렇게 하지 않아도 된다. //store>index.js import { createStore } fro..
[Udemy Vue 완벽가이드 Section16] 239. 페이지 연결하기 Header의 "Requests"메뉴를 클릭하여 이동할 수 있는 페이지인" RequestsReceived.vue"파일을 작업해보자. 현재는 요청이 없지만, "REQUESTS"라는 글자를 출력해서 제대로 로딩되는지 확인해보자. 현재 CoachesList에 등록된 코치는 없지만, "LIST OF COACHES"글자를 출력하여 컴포넌트 내의 내용으로 추가해보자. 여기에 ul이 있다고 해보자. ul 위에 버튼 두개를 정의해보자. - 하나는 코치 목록을 새로고침할 수 있는 버튼. 이후에 웹 내의 데이터베이스에 코치들이 저장되어 있는데 이 버튼을 통해 해당 최신 데이터를 fetch하는 것. - 다른 버튼은 코치로서 등록을 위한 것. 사실 이 경우에는 버튼이 아니라 router-link가 되어야 한다. CoachR..
[Udemy Vue 완벽가이드 Section16] 238. 메인 레이아웃 및 스타일링 작업하기 가장 먼저 볼 페이지는 CoachesList.vue 페이지이다. 마지막에는 꽤 복잡한 페이지가 될 것이다. 코치들의 목록 뿐만 아니라, 필터링 로직 또한 추가되어 표시된 코치 목록을 필터링할 수 있게끔 만든다. 코치의 목록을 출력하려면 일단 코치가 필요하다. 지금 당장은 관리하고 있는 데이터가 존재하지 않고 있다. CoachList.vue 컴포넌트에 이렇게 두 개의 메인 영역이 있다. FILTER LIST OF COACHES 이에 대해서는 두 개의 개별 하위 컴포넌트를 생성해 CoachList컴포넌트의 내용을 비교적 간단하게 유지할 예정. 먼저 지금과 다른 폰트를 사용하기 위해 전역 스타일링을 설정해보자. → App.vue에 기본 스타일링을 추가하면 전체 앱으로 적용된다. 일부분의 스타일링이 아니라 전역..
CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript # Flexbox란? - box(container)와 item들을 행, 열로 자유자재로 배치시켜줄 수 있는 유용한 것. - CSS의 꽃이라고 불린다. - Flexbox만 잘 이해해도 웹사이트의 layout을 잘 구성할 수 있다. 예전에는 layout을 만들기 위해서 position, float, table을 이용했었다. 가능은 했지만, 너무 복잡하고 시간도 많이 소요됐다. ** float에 대하여 원래의 목적 : 이미지와 텍스트들을 어떻게 배치할 것인가에 대해서 정의하기 위해 나타난 것. "float: left"로 지정하면 이미지가 왼쪽으로 지정되고 텍스트들이 이미지를 감싸면서 배치된다. # Flexbox에서 중요한 2가지 Flexbox는 2가지만 이해하면 된다. 1/ container-item cont..
프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ by 드림코딩 언제, 어떤 경우에 어떤 unit을 쓰는게 좋은지 한번 알아보자! 많은 unit은 두가지 카테고리로 나눠질 수 있다. - 절대적 unit : px - 상대적 unit : %, v*, em, rem 언제, 어떤걸 쓰는게 좋을까? 1/ 부모요소의 사이즈에 따라서 사이즈가 변경되어야 한다면 → %, em 2/ 부모요소의 사이즈에 상관없이 브라우저 사이즈에 따라 변경되어야 한다면 → v*, rem 3/ 요소의 너비와 높이에 따라서 사이즈가 변경되어야 한다면 → %, v* 4/ font 사이즈에 따라서 사이즈가 변경되어야한다면 → em, rem # em vs rem 어떤 차이점이 있나요? - em: relative to parent element - rem : relative to root element em v..
[Udemy Vue 완벽가이드 Section16] 237. 라우트 페이지 컴포넌트 추가하기 src폴더에 pages 폴더를 추가한다. 이 폴더에는 라우팅을 통해 페이지로서 로딩되는 컴포넌트들이 포함된다. 반드시 이렇게 pages 폴더를 생성할 필요는 없지만, 페이지로서 로딩되지 않는 다른 컴포넌트들과 구분하는 편을 선호한다. pages폴더 내에는 두 개의 하위폴더를 만든다. → coaches, requests 이 앱의 두 가지 주요 기능에 해당하는 폴더가 된다. 그리고 pages 폴더 내에는 NotFound.vue 컴포넌트 파일을 추가해준다. Not Found 페이지에 대한 컴포넌트. coaches 하위폴더 내에는 코치 관련 내용, 코치로 등록하는 페이지 등 코치에 관련된 페이지가 모두 포함된다. # App.vue App.vue 컴포넌트를 생성해보자. 이 파일이 우리 애플리케이션의 일종의 메인 ..

티스토리툴바