프론트엔드 개발자의 기록 공간

❗❗ 데브코스 48~50일차 (10.06 ~ 10.10) 지금까지 배웠던 Vue를 활용하여 미니 프로젝트를 수행했다. 주제는 Vue와 영화 검색 API를 활용해 프로젝트를 만드는 것이었다. 🎥 영화 검색 프로젝트 O : 구현 X : 미 구현 ✅ 기본 요구사항 [O] 검색어를 입력해 영화를 검색할 수 있어야 합니다. [O] 검색된 결과를 통해 영화의 상세 정보를 볼 수 있어야 합니다. [O] 클라이언트에서 API Key(7035c60c)가 노출되지 않아야 합니다. [O] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. ✅ 선택 요구사항 [O] API 요청(Request)에 대한 로딩 애니메이션을 추가해 보세요. [O] 영화 상세 검색으로 출력할 영화 포스터를 더 높은 해상도 사용해 보세요. 영..

❗❗ 데브코스 47일차 (10.05) 7일차에서는 지금까지 배웠던 Vue 개념을 종합적으로 사용해 보면서 실습하는 강의로 진행되었다. 그 후 개발한 프로젝트를 배포하고 간단하게 Nuxt JS를 소개해 주셨다. 간단한 Nuxt JS와 배포 진행 시, API 값과 같은 중요한 정보들을 외부에 노출이 안되게 숨기는 방법을 다뤄볼 예정이다. ✅ Nuxt JS Vue에서 SSR을 지원하는 공식 템플릿이다. SEO 검색엔진을 제공한다. 블로그 작성하는 시점에서 Nuxt3 beta 버전이 출시가 되었지만 설명하는 부분에서는 크게 달라질 부분이 없을 것이다. 아직까진 내가 생각하는 가장 큰 장점은 SSR을 지원할 뿐만 아니라 기존 Vue에서는 Routers 폴더를 만들고 index.js 파일을 만들고 페이지들을 구분하..

❗❗ 데브코스 46일차 (10.04) 6일차에는 Vue에서 Router를 활용하여 페이지 이동을 다루는 방법을 다룬다. 간략하게 Vue Router에 대해 기본적인 개념만 다룰 예정이다. ✅ Installation npm install vue-router@4 yarn add vue-router@4 Vue3 버전에 맞게 사용할려면 router4버전을 설치해주면 된다. (포스팅 당시 기준) ✅ Router 사용법 - Router 구성 방법 import { createRouter, createWebHistory } from 'vue-router' import "필요한 컴포넌트 경로" export default createRouter({ history: createWebHistory(), routes: [ //..

❗❗ 데브코스 45일차 (10.01) 밀리고 밀리다 한 달 만에 다시 이어서 작성하는 Vue 강의... 5일차에는 Vue의 상태 관리 개념을 익힌다. 같은 레벨의 컴포넌트에서의 여러 단계의 props 전달과, 중앙 상태 관리인 Vuex에 대해 다뤄 볼 것이다. ✅ Provide / Inject 일반적으로 데이터를 부모에서 자식 컴포넌트로 전달해야 할 때 props를 사용한다. 상위에서 하위의 deth가 깊어지면 지속적으로 props를 사용해서 전달해야 할까? ex) root -> parent -> child1 -> child2 ->.... child5의 컴포넌트 구조가 있을 때, root에서 child5로 데이터를 넘긴다면 수많은 컴포넌트에서 props가 타고 타고 내려갈 것이다. 같은 계층에서 이러한 ..

❗❗ 데브코스 44일차 (09.30) 4일차는 Vue 강의 뿐만 아니라 라이브러리 통한 개발 과정에서 필요한 환경설정인 Webpack에 대한 강의로 이루어진다. ✅ Webpack 자바스크립트 기반으로 개발 규모가 커지면서 js, jsp, cjs, sass 등의 파일들과 모듈들이 많아지게 되면서 이를 관리하는 시스템이 필요해지게 된다. Webpack은 여러개의 파일을 실제로 웹 브라우저에서 동작할 수 있도록 하나의 파일로 합쳐서 반환해주는 모듈 번들러(Module bundler)이다. 이러한 Webpack은 개발 환경에서 webpack.config.js로 생성해서 필요한 옵션을 지정해서 사용해주면 된다. 몇 가지 기본적인 예시를 보자 const path = require('path') module.expo..

❗❗ 데브코스 43일차 (09.29) Vue3일차...React가 그리워지기 시작했다... Vue의 강력한 장점 양방향 바인딩과 Vue 프로젝트를 사용하기에 앞서, 환경세팅을 위한 node, npm에 대해서 강의가 진행 됐다. ✅ 양방향 바인딩 "v-model" 디렉티브를 사용하면 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성할 수 있다.코드 예시를 통해 알아보자. 1. Input 예시 //Vue 코드 Message is: {{ message }} data() { return { message: '' } } 위의 코드를 실행하면 input값에 적힌 내용에 따라 "message" 변수가 실시간으로 바뀐다. Vue를 처음 학습하면 이 문법이 좋은지 이해가 안 될 것이다. 리..