Code&Data Insights

[ Implicit Type vs Explicit Type ]변수 선언할때는 굳이 type을 지정해줄 필요 없음 => typescript의 typechecker가 inter추론하게 두는게  더좋음! // implicit typelet x = 5;// explicit typelet x: number = 5;  [ object type에서 변수를 선언할때, 선택적으로 사용할 경우 ]?를 넣어주면 됨! ==> 변수 ? 로 사용할 경우, 변수가 존재하는지 확인하고 쓰는 과정이 필요!const person = { name : string, email?: string }if ( person.email && person.email.includes('google') {}  [ 똑같은 형식의 객체를 계속 생성할 경우 -..

문제상황- git pull 안하고(다른사람이 변경한거 체크안하고..ㅋㅎ: 내실수) 커밋해서 conflict 남 - 다시 commit했는데 처음꺼 그대로 남아있고 내가 올리고 싶지않은 다른 파일로 다시 커밋이 되버림 해결방법1) 리베이스 시작:git rebase -i HEAD~2 (or git rebase -i HEAD^^): 최근 두개 커밋을 보여줌, 내가 삭제하고 싶은 커밋 pick -> drop으로 수정-> esc 안먹힘, 그냥 :wq 치고 (write(저장)와 quit(종료)) 엔터 누르면 된다  -- 푸시하기 전에 잘 없어졌는 지 확인 가능! --   2) 리베이스 OK, 원격 저장소에 변경사항을 푸시하기git push origin master --force  완료!!  (교훈: Git Pull ..

NodeJS 란? : 크롬의 자바스크립트 해석 엔진 V8로 이루어져 있음 -> 자바스크립트 실행 환경(런타임)  (ex) 유저가 공지 페이지에 접속했을 때, 공지를 띄어주는 것 app.get('/notice', function(req, res){ res.send('공지입니다')})  NodeJS를 쓰는 이유? : 브라우저 말고도 다른 환경에서도 JS를 실행 할 수 있게 도와줌 - 큰 처리를 필요로 하는 요청이 들어올 시, 대기 시간/처리 시간이 오래 걸림, 요청을 다 처리할 때 까지 다른 요청을 받지 않음 => 반면, NodeJS는 Non-blocking IO=> 요청 순서대로 처리하는 것이 아닌, 처리 순서가 빠른 것 부터 처리함, 요청을 계속 받음  - 코드가 짧고 쉬워서 빠른 개발이 가능하지만, 웹..

아주 기본적인 실수지만,그래도 기록하기..!  커밋할 때, vscode에서 staged에 올려야 되는데, 일부 수정 반영 필요 없는 파일들을 올리지 않을 경우 commit해도 바로 push 버튼이 활성화가 안된다! -> 명령어로 push 해도 되는데 처음이라 여러 방법을 찾다가 파일을 다 삭제해버림.. ㅋㅎ 문제가 된 명령어 git rm --cached . -rf 인덱스에서 모든 파일을 제거하기 때문에, 잘못 사용하면 다음 커밋에서 모든 파일이 삭제된 것으로 나타날 수 있음! 사용시 주의!!! [ 해결 방법 ] (1) 내가 커밋한 내용들도 같이 사라졌기 때문에, git init 하기전에 저장해야 함 (따로 저장해놓기)  (2) 깃 초기화 하기 - git init (3) 기존 저장소 다시 연결git rem..

git pull : git fetch + git merge 두 명령어의 조합  - git fetch : 원격 저장소의 변경사항을 로컬로 가져옴 - git merge: 가져온 변경사항을 현재 브랜치에 병합  => 커밋 히스토리가 꼬여버린 경우..git reset --hard로 하고 -> git pull git reset 하면 잘 안됨 -> git reset --hard로 하고=> git pull 하기!  ** hard는 절대 절대!!! local에서만 실행하세요..!!! 안된다고 원격 repo에서 했다가 대참사가 일어날 수 있습니다..(웬만하면 원격 repo에서 작업하지 마세요..ㅎ) git pull --rebase: git fetch + git rebase 두 명령어의 조합 - git fetch : 원격..

상태관리 라이브러리를 상황에 따라 선택해야됨! 각 라이브러리에 맞게 성능 향상 방법을 고민하는 것이 중요함!  [ 라이브러리 분류 ] 1) Flux: Redux, Zustand2) Proxy: Mobx, Valtio3) Atomic: Recoil, Jotai Redux - 모든 상태 업데이트를 액션으로 정의하고, 액션 정보에 기반하여 리듀서에서 상태를 업데이트하기 때문에 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에서 좋음 - 서버 사이드 렌더링이 가능- redux toolkit [단점]- 보일러 플레이트와 장황한 코드가 필요함 - 방대한 코드량, 익숙하지 않은 원리와 직관적이지 않은 코드 => 러닝 커브 높음 - 리액트 전용 라이브러리가 아니기 때문에, 리액트 내부 스케줄러에 접근하기 어려웠음-..

동기(Synchronous) vs 비동기(Asynchronous)동기(Synchronous) 프로그래밍- 코드가 작성된 순서대로 차례대로 실행- 각 작업이 완료될 때까지 다음 작업이 시작되지 않음 비동기(Asynchronous) 프로그래밍- 코드가 작성된 순서와 상관없이 실행- 한 작업이 완료될 때까지 기다리지 않고 다른 작업을 동시에 수행할 수 있음 비동기를 사용하는 주요 이유? => 멀티태스킹을 구현하여 시스템 자원을 효율적으로 사용하기 위해서! => 여러 스레드나 프로세스가 동시에 실행됨    비동기 프로그래밍의 발전 순서 1) Callback 함수:  함수를 등록하고, 어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출해서 실행하는 함수 - 초기 비동기 프로그래밍에서는 콜백 함수를 ..

Flux 패턴 & 단방향 데이터 흐름: 리액트는 단방향 데이터 흐름(Action → Dispatch → Reducer → Store)을 기반으로 하는 Flux 패턴을 사용 Action: 상태 변경을 트리거하는 객체Dispatch: Action 객체를 Store에 전달하는 함수Reducer: Action에 따라 상태를 업데이트하는 함수Store: 애플리케이션의 전역 상태를 관리하는 객체View: Dispatch된 Action을 통해 상태를 변경하고, 상태가 변경되면 UI가 자동으로 업데이트됨 Redux: Flux 패턴을 구현한 라이브러리로, 애플리케이션의 상태를 단방향 데이터 흐름으로 관리 [장점]- 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고 전달할 수 있어 효율적- 상태 변경이 예측 가능..