공부 기록일지📚

[ Class 사용 시, extends를 남발하지 말자 ] 상속(extends 키워드)를 사용하면 코드의 중복을 줄일 수 있다는 장점이 있다. 하지만 장점만 존재하는 것이 아니다. 상속을 사용하면 코드가 "강 결합" 형태가 된다. 이렇게 되면 부모 클래스가 변경됐을 때, 다른 코드들에 모든 영향이 가게 된다. => 유지보수가 힘들어진다! 그렇기 때문에 코드의 결합은 신중하고 최대한 느슨하게 하는 것이 좋다. (꼭 상속을 한다면 1단계, 2단계 정도만) 그렇다면 대안은? 상속 대신, 의존성을 주입해주는 형태로 쓰면 된다. => 인자로 받는다는 소리 [ Class 내부에서만 사용하는 상수는 Class 안으로 넣어주기 ] 좋은 코드의 큰 기준점 2가지: 결합도와 응집도 (낮은 결합도와 높은 응집도) 함수(fu..

[진행 기간]: 23.07.03(월) ~ 07(금) [교육 내용] 자소서를 작성하는 방법에 대해서 알려주는 세션(개발자로서의 장점) 과제 피드백을 통한 개선 방향 제시(클린코드,비동기 코드 에러 핸들링, 함수 단일 책임 원칙, 좋은 주석, 불필요한 state 제거) React 렌더링 최적화 & 메모이제이션을 해야하는 상황 [느낀 점] 관심사 분리? 제어의 역전? 잘 와닿지 않는 개념을 쉽게 풀어 설명해준다. 물론 코드에 알려준 개념들을 자연스럽게 녹여서 적용하기는 아직은 어렵지만 생각하지 못한 방법에 대해서 알게되어 좋은 경험이라고 생각한다. 함수형 컴포넌트 위주로 작성하다보니 획일적인 방법만을 사용하려는 경향이 생겼었는데 ES6 class 문법을 통해서(물론 bind()를 써줘야 하지만) 횡단 관심사를..

npm install 과 npm ci 차이? 둘 다 의존성 패키지를 설치하는 명령어이다. 차이점은 기준이 되는 파일 npm install은 package.json을 기준으로 의존성을 설치한다. npm ci(clean install)은 package-lock.json을 기준으로 의존성을 설치한다. => 최종 빌드 시에 사용하면 good 위의 차이점을 알기 위해서는 Semantic versioning 개념에 대한 이해가 있어야 한다. Semantic versioning(SemVer) npm은 시멘틱 버저닝(SemVer)이란 버전 표기법을 따른다. - 이 시점에는 이 기능을 제공할 겁니다!라는 의미(버전 업이 된다면 새로운 기능을 제공(혹은 업데이트)할 거야) 이 개념을 알면 라이브러리의 상세를 보지 않더라도..

[진행 기간]: 23.06.26(월) ~ 30(금) [교육 내용] FE 개발자끼리의 협업을 위한 기본 세팅(환경 설정), 생산성을 높여주는 배포 자동화 등.. 서버와 클라우드 컴퓨팅 AWS 개념, CI/CD with GitHub Actions 5명 이상의 개발자끼리의 공유 리포, git 연습(best practice를 추합해서 main에 병합하는 식으로 진행) 서로 코드를 공유하고 best practice 선정하기 (어떤 코드가 좋을 지, 어떻게 더 개선할 수 있을 지, 스택 선정 사유 등) [느낀 점] 1. git CLI 및 컨벤션 프로젝트를 여러 번 진행했고 3명 이상의 FE 취준생들과 같이 github으로 작업을 했음에도 불구하고 막상 다시 브랜치를 분기해서 PR을 올리고 PR형식과 commit 형..

🛠사용 스택: typescript + craco(웹팩 설정 override) + CRA 사용 🛠상세: 리액트 18 버전, 리액트 라우터 돔 6버전 이상, 타입스크립트 4버전 이상 🛠운영체제: 윈도우 [문제 상황] vercel로 github과 연동된 SPA프로젝트를 배포하려고 했다. 배포는 성공했으나 페이지 접속 시, 리액트 라우터로 url을 변경하면 동작이 되지 않았다. 예를 들어, 헤더에 포함된 Link to="/path" 가 동작하지 않았다는 것이다. 대신에 새로고침을 하면 해당 경로의 페이지가 렌더링됐었는데 이유를 짐작하기 어려웠다. [문제 원인 분석] 1. 타입스크립트가 JS로 변환되지 않아서 발생하는 문제일 것이다. 배포된 사이트의 소스를 확인해보니 JS로 컴파일된 형태가 아니라 TS문법으로된 ..

이 문제로 3일을 소요했는데.. 차후에 강의를 보다보니 이 부분에 대해서 팁을 주는 부분이 있었다. 물론 강의에서 설명해주기 전에 직접 해결하여서 문제는 없었지만.. 시간을 너무 많이 소요한 거 같아서 분했다.⛏ [상황] 리액트로 만든 프로젝트에서 서버와 통신하는 도중에 값은 들어오는데 해당 값이 내가 원하던 JSON 객체가 아니라 HTML 문서가 304상태코드와 response 값으로 옴 [원인 분석] 1. 304상태 코드라면 브라우저의 캐시된 데이터를 쓰는 것이고 그렇다면 SWR의 데이터 캐시 문제일 것이다. (예상) 처음에는 SWR로 데이터가 undefined이면 화면에 컴포넌트를 띄우지 않는 것으로 처리해놨었는데 이상하게 값은 들어오는 것으로 확인되는데 화면에 컴포넌트에는 데이터가 뿌려지지 않는 ..

마지막 강의는 여태 배웠던 큰 흐름에 대해서 복습하고 추가적으로 깊게 다룰 개념들에 대해서 강의했다.📚복습로그인이란? - 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차이다. 로그인 과정은 사용자가 누구인가? 라는 '인증'부터 시작한다. (신원 식별 과정) 우리는 토큰 방식 로그인과 세션 방식 로그인에 대해서 배웠다.토큰 방식: 엑세스 토큰이 유효한지 아닌지 확인 후 없으면 새 토큰 발급(리프레시 토큰 활용), 아니라면 토큰 유효성 검증세션 방식: 토큰과 동일하나 프론트에서 추가적으로 조작할 일이 없음(간단)세션이란?- 사용자가 로그인하고 로그아웃할 때까지의 시간이다. (세션이 만료되었습니다. 를 생각해보세요) 위에서 신원을 식별했으면 권한을 제어해야 한다. 필..

📚Day3 우선 세션의 정의에 대해서 알아보는 시간을 가졌다. 실체가 있는 것과 실체가 없는 추상적인 개념(e.g. 질감)에 빗대어 이해하기 쉽게 설명해주신다. 세션은 정확히 어떤 개념이다 라고 정의내리긴 어렵고 문맥상 "사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간" 으로 통한다. 정확히 우리가 말하는 "로그인 할 때, 세션을 활용해요." 에서 세션이란 정확히는 세션 방식 로그인을 말한다. 세션 방식 로그인이란 사용자 로그인이 유효한 시간 동안 서버에 세션 아이디를 기록해 두고 인증에 사용하는 방식을 말한다. 보통 내가 알고 있던 세션 방식 로그인이란 서버에 세션아이디를 저장해두는 방식으로 진행되는데, 그래서 어떻게 하는 건지는 정확히 알 수 없었다. JWT처럼 엑세스 토큰이나 리프레쉬 토..