목록프로그래머스 데브코스_FE/TIL (54)

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

[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
[Vue3] Vue(5) 상태관리

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

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