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

❗❗ 데브코스 54일차 (10.14) 오늘도 자주 사용되는 컴포넌트 로직을 함수로 뽑아내는 연습을 진행한다. 프론트 개발을 하다 보면, 프론트에서 자체적으로 저장해야 하는 데이터들이 있다. (임시저장 데이터, 토큰 등) 이를 위해서 localStorage, sessionStorage를 이용하게 된다. 또한, 특정 이벤트가 발생하고 몇 초 뒤에 어떠한 로직을 수행하는 setTimeOut() 함수도 자주 사용된다. 몇 초 뒤 다른 페이지로 이동 등등... 이 두 가지를 Custom Hook으로 만들어보는 과정을 설명하겠다. ✅ useLocalStorage - Custom Hook import { useState } from "react"; // localStorage 저장할 key값, 초기값 const us..

🙆‍♂️ 5개월간 개발자로서 한 단계 성장하다.. 프로그래머스 프론트엔드 데브코스 국비 지원 과정 2021/07/30 ~ 12/23 5개월 과정이 끝이났다. 이런저런 상황이 있었지만 내가 프로그래머스 데브 코스를 선택한 이유는 커리큘럼 봤는데 무작정 이것저것 많지 않았고, 딱 실무에서 많이 사용하는 것들과 기본기 위주로 짜인 커리큘럼을 보고 마음에 들었다. (다른 곳에서는 짧은 기간에 말도 안 되게 이것저것 끼워 넣은 게 많지만 여긴 되게 현실적이라고 생각했다.) 또한 프로그래머스에서 코딩 테스트 공부를 하고 있던 나에게 "프로그래머스"라는 회사의 신뢰감이 있었다. 이 두 가지 이유로 지원을 결심했고 운 좋게 붙었다. (지원 후기 포스팅) 밑에 목차의 순서에 맞게 프로그래머스 국비 지원 후기에 대해 느낀..

❗❗ 데브코스 53일차 (10.13) 53일차 두 번째 시간 또한, 컴포넌트 연습하기로 진행된다. 또한 사용자 정의 Hook 만드는 연습도 진행된다. 사용자 정의 Hook 코드 하나를 예시로 설명을 하겠다. ✅ useHover - 마우스 hover Hook 마우스를 컴포넌트에 올렸을 때, 올리지 않았을 때 처리를 위한 Hook이다. 이와 같은 useHover Hook은 많이 사용된다. 버튼에 hover 했을 때 css 처리, 이벤트 발생 등등 다양하게 사용할 수 있다. import { useCallback, useEffect, useState, useRef } from "react"; const useHover = () => { const [state, setState] = useState(false);..

❗❗ 데브코스 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 }) =>..