목록KDT 프로그래머스 데브코스 프론트엔드 (50)

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

[React] React(1)

❗❗ 데브코스 51일차 (10.11) 고대하던 React 파트가 시작되었다. 일주일이라는 짧은 기간 동안 React에 대해 학습하게 된다. (Vue 프로젝트 기간에 강의가 제공되기 때문에 총 2주간이다.) 영상이 짧기 때문에 핵심 위주로 학습이 진행된다. ✅ 컴포넌트 이론 재사용 성과 확장성을 처음부터 생각하는 것은 쉽지 않다. 컴포넌트 구조, 아키텍처, 클린 코드는 잠시 잊고 눈에 보이는 UI를 컴포넌트로 구현해 보자. 컴포넌트 구조는 팀마다 다르기 때문에 규칙을 정하는 것이 중요하다. ex) 도메인으로 분류, 역할로 분류, 크기로 분류 등 크기로 분류하는 Atomic Design에 대한 추천 블로그 https://kciter.so/posts/effective-atomic-design Effective..
프로그래머스 데브코스_FE/TIL 2022. 1. 17. 18:03
[Vue3] 영화 검색 사이트 프로젝트

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

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

❗❗ 데브코스 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: [ //..
프로그래머스 데브코스_FE/TIL 2021. 11. 24. 05:30
리팩토링_API 모듈 분리

✅ 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. 11. 17. 02:56
리팩토링 계획

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