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

❗❗ 데브코스 72일차 (11.9) 72일차에는 71일차에 학습한 TS를 이용하여 TodoList를 만드는 실습을 진행한다. TodoList의 모든 파일의 코드를 다루면서 소개하기 보다는 특정 일부분만 코드와 주석으로 간략하게 설명할 예정이다. ✅ useToggle.tsx 사용자 정의 hook으로 todoList에서 완료, 미완료를 처리하는 토글 버튼의 기능을 정의한다. import { useCallback, useState } from 'react' //props의 타입 정의 return값 정의 const useToggle = (initialState: boolean): [boolean, typeof toggle] => { const [state, setState] = useState(initialSt..

❗❗ 데브코스 71일차 (11.8) 오늘은 TS에 대해 학습을 진행한다. JS을 좀 더 똑똑하고 안정성 있게 사용할 수 있을 뿐만 아니라 모집 공고에서 볼 수 있듯이 요즘 TS는 무조건 알아야 하는 지식 중에 하나이다. ✅ TypeScript 타입스크립트 말 그대로 타입이 적용된 자바스크립트이다. 장점 안정성 : 컴파일 단계에서 미리 오류를 감지할 수 있다. 가독성 : 타입을 보고 무엇을 하는지 미리 알 수 있다. 단점 초기 설정을 해야한다. (초기 설정 하는법 포스팅 해두었으니 참고) 스크립트 언어의 유연성이 낮아진다. 컴파일 시간이 길어질 수 있다. ✅ 타입스크립트 문법 ✍ 1. 타입 주석과 타입 추론 타입 주석은 변수, 상수 혹은 반환 값이 무슨 타입인지를 나타내는 것을 의미 타입 추론은 해당 변수..

❗❗ 데브코스 70일차 (11.5) 중간 프로젝트가 끝난 뒤, React 강의가 계속 진행됐다. React 심화과정으로 진행이 된다. 오늘은 간단한 사용자 정의 Hook 하나와 (언급 x) 컴포넌트 설계에 대해 간략하게 다뤄볼 예정이다. ✅ 컴포넌트는 어떻게 설계해야 하는가? 아키텍처는 우리가 일을 잘 하기 위한 방법 그러기 위해 모듈의 구현과 나누는 방법을 정한다. 모듈에서 중요한 것은 응집도와 결합도 ✅ 응집도 모듈 내에 포함된 요소들이 서로 연관되어 있는 정도 모듈 내 기능들이 하나의 책임으로 잘 뭉쳐있는지를 나태냄 높은 응집도일 수록 좋은 설계 응집도가 높을 수록 하나의 책임에 집중하고 독립성을 높이면서 수정하기 위한 요소를 빠르게 찾을 수 있기 때문 ✍ 높은 응집도를 위한 방법 공통 폐쇄 원칙 ..

❗❗ 데브코스 56~69일차 (10.18 ~ 11.4) 주말 포함 약 3주 기간 동안 기획, 개발, 발표, 팀별 발표 영상 시청으로 일정이 진행됐고 실제 기획과 개발 기간은 약 2주 정도였다. 3~4인이 한 팀이 되어 React, Vue 중에 원하는 스택을 골라서 진행하면 된다. 우리 팀은 3명으로 구성되었고, 회의 끝에 React를 조금 더 학습하고 싶고, 생태계를 고려하여 React로 개발을 하기로 했다. 주제와 백엔드 기능은 프로젝트를 담당해 주는 강사님께서 제공을 해주셨다. ✅ 주제 : 관심사 기반 소셜 네트워크 프로젝트 제공되는 백엔드 기능 인증 회원가입 로그인 로그아웃 인증 확인 및 내 정보 유저 유저 목록 현재 접속 중인 유저 목록 유저 정보 프로필 이미지 변경 설정 내 정보 변경 비밀번호 ..

❗❗ 데브코스 55일차 (10.15) 오늘은 프론트 수강생들이 처음으로 오프라인으로 만나는 날이다. 두 달간 온라인으로 하다가 오프라인으로 첫 만남을 생각하니깐 뭔가 어색했다. 여튼 모이게 되는 이유는 처음으로 팀으로 중간 프로젝트를 진행하기 전에 팀끼리 회의 및 친목 다짐의 이유로 모인 것 같았다. 이전에 이미 팀은 정해진 상태이고 만나서 팀원들이랑 정해진 주제에 대해 어떤 컨셉과 어떤 개발로 진행할지 의논을 했다. 이에 대한 얘기는 다음 글에서 포스팅하고 그 전에 React(9) 파트에 대해 설명하겠다. ✅ Axios (학습 가이드) HTTP Cilent 라이브러리 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. ✍ 설치 NPM 설치 ..

❗❗ 데브코스 54일차 (10.14) React7에 이어서 Custom Hook 만들어보기 과정으로 계속 진행된다. ✅ useAsync- Custom Hook 비동기 로직을 제거하기 위해 사용되는 hook 네트워크 로직이나 타임아웃과 같은 로직에 있을 때 사용할 수 있다. useAsync 또한 두 가지 버전으로 만들 수 있다. 함수 호출로 실행되는 hook 컴포넌트가 로드되면 실행되는 hook ✍ 1. 함수 호출을 통한 방법 (useAsyncFn) import { useCallback, useRef, useState } from "react"; // props로 함수, 의존성 받기 const useAsyncFn = (fn, deps) => { // 실행에 대한 Id const lastCallId = us..