코드노트

useContext - 데이터를 가지고 있는 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달해줄 수 있다. - 같은 데이터를 사용할때 컴포넌트마다 들고와서 사용하지 않아도 된다. - C, E가 만약 data가 필요하다면? 단계별로 하나하나 거쳐서 데이터를 전달해줘야한다. - A -> C \ B -> D -> E - useContext를 사용하면 단계별로가 아닌 바로바로 데이터가 필요한 컴포넌트로 전달을 해준다. props를 사용하면 되지 않냐고? - props를 여러개 전달한다면..? 컴포넌트들마다 단계별로 2중, 3중 ... 등으로 props를 전달한다고 생각해보자 - 혹시모를 수정에 있어서도 벌써부터 머리가 아파진다. - 내가 모르는 에러가 발생한다면? props를 사용한 컴포넌트들을 살펴보게 될것이..

useEffect - 리액트 컴포넌트가 렌더링이 될 때, 될 때마다 특정 작업을 실행할 수 있는 리액트 hook이다. - mount : 화면에 첫 렌더링 - Update : 리렌더링 - Unmount : 화면에서 사라질 때 이 3개의 상황에서 useEffect 내부에 있는 코드가 실행된다고 생각하면 된다. - useEffect는 2개의 인자를 받는다. - 첫번째는 콜백함수, 두번째는 배열( [], dependency array )을 받는다. 그래서 일반적으로 두가지 사용법이 있다. useEffect(() => { }) - 컴포넌트가 화면에 처음 렌더링 될때, - 컴포넌트가 리렌더링이 될때 useEffect(() => { }, [value]) - 컴포넌트가 화면에 처음 렌디링이 될때, - [value]배열..

useRef - 값을 저장하는 공간 - State와는 다르게 값이 바뀌더라도 새로 렌더링이 되지 않는다. - State가 변화하여 렌더링이 되더라도 Ref의 값은 유지된다. 변경이 될때 값이 유지되어야한다면? useRef를 사용할 수 있다. useRef는 .current 프로퍼티로 전달되어 초기화된 변경 가능한 ref객체를 반환한다. const ref = useRef(value); {current: value} - 컴포넌트가 계속 렌더링이 되더라도 언마운트가 되기 전까지 값을 유지한다. useState 와 useRef의 차이점 See the Pen useState VS useRef by beomjunkwon (@bjkwon) on CodePen. - useState는 값이 변경이될때마다 바로바로 렌더링이..

길고길었던 팀프로젝트가 끝이 났다. 우리는 처음에는 5명이였지만 결국 마무리는 4명으로 끝이 났다. 아쉽지만 팀원 한명은 과정을 drop..하였다. 그렇게 4명이서 팀프로젝트를 마무리하였다. 바닐라 자바스크립트로 진행되었던 프로젝트였고, 처음 기획부터 순조롭게 시작하다보니 별 걱정없이 프로젝트를 진행하였다. 기획, 퍼블리싱을 진행하며 피그마를 통해 협업을 진행했고, 우리팀원들은 다들 참여도도 높았고, 적극적으로 팀프로젝트에 임했던거 같다. 그러다보니 충돌?도 없었고 작업하는내내 웃으면서 즐겁게 작업을 했다. 이렇게 좋은 사람들을 만나는것도 운인거 같은데.. 또 다시 이렇게 즐겁게 팀프로젝트를 할 수 있을까? 라는 생각도 든다. 다들 다음 팀프로젝트에서도 같이 하고싶다는 말들을 나누었다.. 매니저님들 저희..

팀프로젝트 현재 진행하고 있는 바닐라 자바스크립트로 진행하고 있는 쇼핑몰 프로젝트가 마무리가 되어가고 있다. 자바스크립트 구현은 끝났고, 나누어 작업했던 파트들을 github에 올려 PR후 라우터를 정리하는데 꽤 오랜시간이 걸린거 같다. 아직 처리하지못한 것들 - scss 정리, 스켈레톤UI - JS 리팩토링 - 비동기 네트워크 시간 - 현재 거래내역API가 시간이 너무 오래 걸린다.. 다른 api는 괜찮은데 거래내역만 들고오면... 답답... indexedDB를 활용하는방법이 있는것 같기도하다.. 서버를 수정할 수 없고 네트워크 제한으로 모든 데이터를 가져와야하는 상황이다보니 로컬 스토리지 등등을 사용해서 클라이언트 측에서 데이터를 캐시하는것이 해결책이라고 생각중이다.. 현재는 프로젝트를 빨리 마무리하..

현재 패스트캠퍼스에서 팀프로젝트를 진행하고있다. 거래 API가 주어졌고, 상품관리부터 거래내역관리까지 그리고 관리자페이지도! 처음에는 어디서부터 시작해야할지 고민을 했었던거 같다. 기획부터 시작해서 결과물을 만들어야내는 과제는 처음하다보니 막히는부분들도 있었지만 figam, github를 통해서 협업을 진행하였다. 기획을 진행하면서 쇼핑몰을 만들기로 하였고, 주제를 정하면서 너무 재밌었던거 같다. 식품 쇼핑몰이지만 마켓컬리홈페이지를 벤치마킹하기로 하였고 오뚜기로 이름을 지었다. 그리고 들어가는 제품은 농심이다.. ㅋㅋㅋㅋㅋㅋㅋㅋ 아 우리의 팀 이름은 전국 팔도이다. 팀원 전체가 사는곳이 달랐고 오뚜기 -> 농심 -> 팔도... 스토리가 완성되었다...! ㅋㅋㅋㅋㅋ 기획과 레이아웃 그리고 디자인을 정하는데..

팀원들하고 브랜치로 작업을하다가 pr후 CONFLICT를 만날 때 해결 방법은? - 첫 브랜치 TIL에서도 느꼈지만 다시 보게 되니깐 또 혼란스러웠다. - pull을 했는데 왜 안들어와지지? 그렇게 pull, fetch에 대해서도 알아보려고 한다. 우선 Merge가 되면서 충돌을 일으킨거다. 같은 파일을 작업하게 된다면 더욱 만나게 되는...! CONFLICT githup에서 pr을 하면서 충돌이 계속 났고, 단계적으로 pr을 하고 충돌이 나지 않게 에러가 나지않게 확인하며 작업을 해야한다. - pr을 연속적으로 팀원들이 하게 되면 안되는걸 알게 되었다. - pr을 하더라도 꼭 팀리더에게 확인요청을 하고 컨펌 후 다음 pr을 하자. - 순차적으로 pr을 보내고 merge를 하면 CONFLICT 에러도 가..

리액트를 들어가기전 자바스크립트로 팀프로젝트를 진행하고 있다. 팀프로젝트를 진행하면서 SPA(단일 페이지 애플리케이션)을 개발하기로 했고, 바닐라로 라우터를 구현하려고 했지만.. 기간이 있는 팀프로젝트에서 라우터 기능하나를 잡고 구현하기에는 시간이 너무 촉박했다.. 그렇게 다른 수강생분의 도움으로 navigo라는 라이브러리를 알게 되었다. 그전 카카오엔터 FE 기술블로그에 올라온 라이브러리 없이 라우터(Router) 만들기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 라이브러리 없이 라우터 만들기라는 글을 보게 되었고, 바닐라 JS로 라우팅 시스템을 개발하기 위해서는 2가지 방법이 있는걸 알게 되었다. - 첫 번째, 해시 라우터 : Fragment 해시를 이용하는 방..

Parcel 번들러를 사용하면서 이번에 처음 만난 에러이다. 평소와 같이 git에서 clone을 했고 똑같이 번들러를 설치 후 autoprefixer를 설정하면서 버전을 변경했다. prostcss와 버전 호환문제가 있어서 버전을 다시 변경하고 시작했는데 똑같이 Error: Could not locate the bindings file. Tried: 이 Error코드를 만나게 되었다. https://github.com/nodejs/node-gyp/issues/1511 Error: Could not locate the bindings file · Issue #1511 · nodejs/node-gyp Facing the below issue while running the node in VSC: Node Ve..

쿠키 Cookie - 브라우저에 저장되는 작은 크기의 문자열 - 웹 서버가 웹 브라우저에게 보내져 저장 후 서버의 부가적인 요청이 있으면 다시 서버로 보내주는 문자열을 가진 정보 - 웹페이지 방문 시 방문기록 등의 정보들이 저장된 텍스트 파일 - 최대 4KB 저장 가능 - 쿠키는 서버를 대신해서 웹 브라우저에 저장하고 요청을 할 때 그 정보를 서버에 보내 사용자를 식별할 수 있다. - 서버에서 쿠키를 저장할 수 있기 때문에 서버에서 주로 사용된다. - 요청시 Headers에 전송된다. 쿠키 종류 - 기술적 쿠키 : 검색하는 주체가 사람 또는 App인지 이용자를 구분하는 기능 - 분석 쿠키 : 검색하는 종류, 검색량, 시간, 언어 대상의 정보를 수집 - 광고 쿠키 : 검색 내용, 국가, 언어에 따라 광고 ..