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

❗❗ 데브코스 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: [ //..

✅ API 폴더 구조 첫 번째로 계획한 API 모듈 분리화를 위해 실제 서비스에서는 어떤 식으로 코드를 작성하는지 멘토님께 여쭤보았다. apis폴더 > api폴더 (api를 요청하고 응답만 받는 용도) > user.js (user관련 api 요청 함수들) > services (응답결과를 데이터를 정제 해주는 함수들) > post.js (post응답 값을 정제해줌 ) > utils (공통적인 함수) > config or constants (baseurl과 같은 설정) > store (ducks를 사용한다면 api 보관 용도) 멘토님은 위와 같은 형식으로 사용한다고 알려주셨다. 위의 방법을 토대로 간략하게 프로젝트에 적용해 봤다. ✅ utils 폴더 - axios 인스턴스 생성 이후, 공통적으로 사용하는 b..

📆 프로젝트 기간 2021.10.15 ~ 2021.11.3 프로그래머스 프론트엔드 데브 코스에서 진행 한 2주간의 프로젝트가 끝이 났다. 약 2주간의 기간 동안 기획부터 개발까지 이루어졌다. (백엔드 API 기능은 제공) 우리 팀의 목표는 제공된 필수 기능을 모두 구현하는 것을 목표로 두었다. 기능 중심적 개발을 도입하기 위해 Top-Down 방식으로 개발을 진행하였다. 프로젝트 기간이 끝난 뒤, 다시 프로젝트를 들여다보니, 기능 구현에 급급하여, 컴포넌트 관리 및 최적화 작업이 하나도 이루어지지 않았다. 한 컴포넌트에서 api 요청과 개발 로직을 다 때려 박안 대참사 코드가 되어있었다. 지금까지 리액트를 사용하면서 어느 정도 기능 구현에는 자신이 있었지만, 컴포넌트 분리에 신경 쓰거나, 최적화를 생각해..

❗❗ 데브코스 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를 처음 학습하면 이 문법이 좋은지 이해가 안 될 것이다. 리..