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

❗❗ 데브코스 53일차 (10.13) 오늘은 Base 컴포넌트 중에서 많이 사용되는 것을 위주로 컴포넌트 만들기 연습으로 진행된다. 여러 컴포넌트를 만들어보는 실습을 통해 컴포넌트를 구성하고 사용하는 스킬을 기를 수 있다. 여러 개의 컴포넌트 중 예시로 1~2개만 예시로 설명하겠다. ✅ Upload - 파일 업로드 컴포넌트 파일을 업로드해야 하는 경우 파일 업로드 기능도 컴포넌트로 구현할 수 있다. 파일 업로드를 선택해서 파일을 추가할 수도 있고, 파일 드래그를 통해 파일을 넣어줄 수 있다. import styled from "@emotion/styled"; import { useRef, useState } from "react"; //emotion styled컴포넌트 const UploadContain..

❗❗ 데브코스 52일차 (10.12) 오늘은 상태관리 라이브러리 중 하나인 Context API에 대해 다룬다. 바로 본론으로 고고! ✅ Context API React에서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 props을 통해 전달이 된다. 반대의 과정에서는 props를 타고 올라가야 한다. 만약 컴포넌트가 무수히 많다면 여러 컴포넌트들을 거쳐가게 된다. 이 과정에서 계속 props로만 전달받게 되면 Prop Drilling 문제가 생기게 된다. Prop Drilling을 해결하기 위해 Redux, Recoil, Mobx, Context API 등이 존재한다. 이번에는 React 라이브러리에서 기본으로 제공되는 Context API에 대해 다뤄 볼 예정이다. 상태 관리 춘추전국시대라고 ..

❗❗ 데브코스 52일차 (10.12) React를 잘 다루기 위해서는 컴포넌트를 잘 만들 줄 알아야 한다. 중요도를 따지면 컴포넌트가 8할 나머지가 2 할이다. 다른 기능들도 컴포넌트를 잘 쓰기 위함이라고 생각한다. 이번 React를 진행하는 강사님께서 말씀해 주신 문장이다. React는 컴포넌트 기반이기 때문에 위의 글에 공감한다. 때문에 기반이 되는 컴포넌트에 익숙해지기 위해 계속 컴포넌트를 만드는 연습으로 강의가 진행된다. 우선 React + emotion +StoryBook 조합으로 진행된다. ✅ Text 컴포넌트 const Text = ({ children, size, strong, underline, delete: del, color, block, paragraph, ...props }) =>..

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

❗❗ 데브코스 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 파일을 만들고 페이지들을 구분하..