TIL

[TIL] 2023-0924 : 유연하고 확장되기 쉽고 교체되기 쉬운 코드를 작성하자.

Facts - 미완성 상태긴 하지만 영화 리뷰 STEP1 PR을 올렸다. - 로또 미션 STEP 3 리팩토링 진행 Feelings - 어쨌든 PR 을 올렸다는 것 자체가 마음을 조금 편하게 해줌. - 한 번 재미있다고 생각하면 또 너무 재밌어서 계속 하고 싶음 - 날씨가 좋아서 기분이 좋았다. Findings - 오늘 받은 피드백 중에는 '다른 서비스가 여러 플랫폼에 서비스를 제공하기 위해 어떤 노력을 할지 고민해보면 많은 공부가 될 것이다' 라는 내용이 있었다. 이미 성장한 큰 서비스가 어떻게 생겨먹었고 굴러가는지 관심을 가지고 인사이트를 얻는 것도 큰 공부가 되겠음... - 지난 PR 에서는 일단 로또 게임이 웹 UI 에서 돌아가게 만드는 것에 초점을 맞춰서 메서드고 코드 정리고 하나도 하지 않았었는..

[TIL] 2023-0922

Facts - NextStep 영화리뷰 1단계 미션, 역할 나누고 객체 분리 및 구현 - parcel 도입 - 지속적인 이슈에 대한 디버깅 & 회의 & 버그 픽스 등등... Feelings - 이틀 전 TIL 이라 어떤 감정이었는지 잘 기억이 안난다. ㅋ - 아마 금요일이라서 기분이 아주 좋았을거야... Findings - 말로만 듣던 Parcel 을 써봤는데 config 가 정말 하나도 없고 가볍고 빨랐다. 정말 소규모 프로젝트에는 간편하게 쓰기 좋은듯. yarn add -D parcel # scripts 추가 "preview": "parcel ./index.html --open chrome --port 3000", "build": "parcel build ./index.html", - 특정 path ..

[TIL] 2023-0921

한동안 개발 기록이 뜸했던 것 같아 멈춰두었던 TIL을 다시 써보려고 한다. 매일 기록을 하지 않았더니 나중에 더 큰 기록을 할 때 정리할 양이 너무 방대해서 힘든 것 같음. 모든 성장은 점진적 과부하다… Facts - 출근길에 객체지향의 사실과 오해 읽고 정리함 - 사내 프로젝트 EsLint 룰 공통화, 그에 따라 필요한 세팅 추가하고 룰 별로 주석 추가함 - NextStep 과제 리뷰 (미완성이지만) 어쨌든 리뷰 요청함 - 테스트가 커버하지 못한 이슈 디버깅하고 해결함.. - Vite 마이그레이션 진행한 내용 정리해서 블로깅 Feelings - 가장 독서가 잘되는 공간은 출근길 지하철 - 분명 개선하려고 리팩토링을 했는데, 계속 이슈만 생기고 아주 죽겠음. - 하나라도 리뷰를 요청했다는게 아주 뿌듯하..

[TIL] 2023-0126 : 새 프로젝트 / 딥다이브 스터디 / 과제

🐈Facts 새로운 프로젝트를 시작했다. 악보를 사고 팔 수 있는 커머스 사이트이다. 오늘은 디자인 작업을 했다. 알루 주간모임을 진행했다. 오늘은 3명이서 도란도란 이야기했다. 딥다이브 1회독 스터디를 참여중인데, 부랴부랴 읽고 오늘 모임에도 참석했다. 월요일부터 진행했던 사전 과제를 제출했다. 첫 과제여서 잘하고 싶었는데, 아쉬운 점도 많지만 어쨌든 제출했다. 🐈Feelings 집중해서 작업할 수 있는 프로젝트를 시작한게 기쁘다. 처음 접하는 기술 스택이 몇 개 있는데, 부딪혀보면서 많이 공부할 수 있을 것 같다. 다만 취업 준비도 빡세게 해야하는데 프로젝트만 하다가 시간이 다 가버리는건 아닐지 걱정이 되기도 한다. 오늘 딥다이브 모임에서는.. 딱 내가 이상하게 적어둔 부분을 짚어서 질문을 하셔서 좀..

[TIL] 2023-0117 : 순수 함수 / 4주차 과제 진행과정 -1 / 캡처링, 버블링

🐈오늘 공부한 것 ✔️순수 함수란? 알고 있는 것 순수 함수란 사이드 이펙트를 일으키지 않는 함수를 의미한다. 즉 동일한 input 에 대해 동일한 output을 리턴한다. 사이드 이펙트란 부수 효과라고도 불리며 함수가 함수 외부의 상태를 변경하는 것을 의미한다. 순수 함수를 지향해야 하는 이유는 사이드 이펙트가 일어났을 때 어떤 동작이 일어날지 예측할 수 없기 때문이다. 그래서 리액트의 컴포넌트도 순수 함수의 형태를 유지한다. 리액트의 컴포넌트는 왜 순수 함수처럼 동작해야 하는가? 리액트의 컴포넌트가 순수 함수처럼 동작해야한다는 의미는, 컴포넌트로 주입된 props 를 읽기전용으로 다룬다는 뜻이다. 읽기 전용으로 다룬다는 의미는 props에 직접 접근해서 값을 변경하지 않고, state인 경우 setS..

[TIL] 2023-0112 : 3주차 과제 진행 과정 -2 디바운싱, 캐싱, 키보드 이벤트

🐈오늘 배운 것 ✔️ 프리온보딩 인턴쉽 3주차 과제 w. TS 삽질 등.. 언제나 그렇듯 마크업은 힐링되면서 킹받는단 말이지(?) 1. useState의 두 값 state, setState 함수 props로 전달하기 state는 기존 초기값의 타입을 지정하면 되고, setState는 리액트에서 제공하는 setState 함수 타입을 적용할 수 있다. type SearchBarProps = { isDropDownOpen: boolean; setIsDropDownOpen: React.Dispatch; }; 타입을 모르겠을땐 커서를 올려보자...! 2. typescript input Element 의 이벤트 객체 타입 : React.ChangeEvent 3. 디바운싱을 적용하여 API 호출 최적화하기 디바운싱이..

[TIL] 2023-0111 : useRef / 3주차 과제 진행 과정

🐈오늘 배운 것 ✔️useRef는 언제 사용? 오늘의 면접 질문 : useRef가 필요한 상황을 예시를 들어 설명해 주세요. 현재 알고있는 내용 1. DOM 에 직접 접근하고자 할 때 2. 리렌더링이 되어도 값을 유지하고 싶지만, 해당 값에 따라 리렌더링이 될 필요는 없는 경우 DOM 에 직접 접근을 해야할 필요가 있을 때는, 컴포넌트 렌더링 되자마자 input 에 focus 를 주거나, input 값을 clear 할 때가 있을 것이다. input 이라는 요소에 직접적으로 접근을 해야되기 때문에 useRef 로 ref 객체를 선언해주고, 접근하고자 하는 컴포넌트의 ref 속성으로 ref 객체를 전달해준다. 아! 그리고 스크롤을 조작할 때도 ref를 사용해야한다. 지난 프로젝트에서 답변 작성 후 해당 게시..

의존성, 의존성 역전 원칙(DIP)

지난 원티드 프리온보딩 인턴쉽 강의에서 의존성에 대한 내용을 설명해주셨는데, 잘 이해가 되지 않아 다시 정리해보려고 한다. 내용의 일부분은 강의 자료를 참고해서 작성했음을 밝힌다. ✔️의존성 의존성이란 특정 모듈의 동작을 위해서 다른 모듈을 필요로 하는 것을 의미한다. 여기서 모듈이란 하나의 기능을 수행하는 함수 혹은 클래스를 의미한다. 예를 들어 함수A를 실행하기 위해 B라는 요소가 필요하다면 '함수 A는 B에 의존성을 갖고 있다' 혹은 'B는 A의 의존성이다' 라고 표현할 수 있다. 의존성에 대해 현재(내가..) 이해할 수 있는 가장 실질적인 예시로 useEffect 훅의 두 번째 매개변수인 의존성 배열이 있다. const issues = useRecoilValue(issuesAtom); useEff..

[TIL] 2023-0106 : 프리온보딩) 2주차 과제 제출, Custom hook과 관심사 분리

🐈오늘 배운 것 ✔️2주차 과제 제출 이번 2주차 과제는 dnd 기능이 있는 이슈 트래커였다. 개인적으로는 dnd 기능을 만드느라 crud 구현을 제대로 하지 못했는데, 주말중으로 해당 부분을 완성하고 리팩토링해서 마무리할 계획이다. 이번에 recoil 을 사용하면서 전혀 몰랐던 기능인 effects 나, selectFamily 같은 기능을 팀원들 덕분에 알게되었다. effects 란 함수를 배열에 의존성으로 전달하면 해당 effects 항목이 있는 atom state 가 업데이트 될 시 자동으로 그 함수가 실행된다. 예를들어 업데이트시 매번 localStorage에 접근한다면 적용해볼 수 있다. selectFamily 같은 경우도 해당 state 에 업데이트가 있을 때 자동적으로 특정하게 처리된 값을 ..

[TIL] 2023-0104 : 프리온보딩) 1주차 과제 리뷰, 리액트 렌더링 최적화

🐈오늘 배운 것 ✔️1주차 과제 리뷰 지난 1주차 과제는 사전과제였던 todo list 를 리팩토링하는 것이었다. 팀 내에서 Best Practice 를 정해서 산출하는 것이었는데 오늘 라이브 세션에서는 그 과제를 전체적으로 리뷰해주시는 시간을 가졌다. 변수,함수명 짓기 이름만 보고도 어떤 역할을 하는지 파악할 수 있도록 잘 지어야 하는데, 오늘 피드백에서는 정확히 어떤 점을 주의하면 더 잘 지을 수 있는지 구체적으로 말씀해주셔서 좋았다. 예를 들어, const regexp = getRegexVerification(name as 'email' | 'password', value) 위와 같은 코드가 있다고 할 때, regexp 가 최종적으로 가지게 되는 값은 Verification 을 거쳐 산출된 어떤 b..