CodingCredit

이 글은 아래의 글을 읽고 이해한 바를 정리하는 목적으로 작성된 글입니다. [번역] useEffect 완벽가이드 모든 랜더링은 고유의 이펙트를 가진다. useEffect 안에서 이펙트는 어떻게 최신화된 상태를 읽어들일까? count라는 상태가 있을 때 count는 특별한 값이 아닌 특정 컴포넌트 랜더링에 포함되는 상수이다. 만약 어떤 이벤트핸들러가 count를 참조한다면 이벤트핸들러는 그 랜더링에 속한 count상태를 본다. count는 특정 랜더링에 속하는 변수이기 때문이다. 이펙트에서도 마찬가지이다. 각각의 이펙트 함수는 랜더링마다 별도로 존재하며, 해당 이펙트는 매번 랜더링에 속한 count 값을 본다. 따라서 이펙트 함수는 겉으론 같지만 사실 매 랜더링 마다 다른 함수이다. 각각의 이펙트함수는 그..

프로젝트를 진행하면서 useEffect에 대한 개념적인 정리가 필요하다고 느꼈다. 그러던 중 Dan Abramov가 작성한 'A Complete Guide to useEffect'를 번역한 글을 찾았고 프로젝트가 끝나면 정독해보자고 다짐했다. [번역] useEffect 완벽 가이드 오늘부터 조금씩이라도 꼼꼼이 읽어보면서 정리하고자 한다. useEffect를 완전히 이해하기 위해서는, useEffect 훅을 클래스 컴포넌트의 라이프 사이클이라는 익숙한 프리즘을 통해 바라보는 것을 그만둬야 한다. 모든 랜더링은 고유의 Props와 state를 가진다. function Counter() { const [count, setCount] = useState(0); return ( You clicked..

프로젝트 중에 커밋을 잘못해서 되돌리느라 git reset을 사용한 적이 있다. 사용하면서 어떤 방식으로 커밋을 되돌리는지 궁금했었는데 오늘에서야 찾아봤다. Git git workFlow Git의 주목적은 프로젝트의 스냅샷을 지속적으로 저장하는 것이다. git init명령어를 실행하면 Git 저장소가 생성된다. 이 시점에는 워킹 디렉토리에만 데이터가 있다. git add 명령어를 실행하면 워킹디렉토리의 내용을 Index로 복사한다. (인덱스에 파일 상태를 기록하는 것을 Staging이라고 부르기 때문에, 인덱스는 Staging Area 라고도 부른다. ) git commit명령어를 실행하면 Index의 내용을 스냅샷(HEAD)으로 영구히 저장하고 그 스냅샷을 가리키는 커밋 객체를 만든다. 그리고는 mas..

마지막 H.A도 끝났겠다, 이제 2주 프로젝트 준비를 시작해야한다.. 비!장! 아마 2주 프로젝트에서는 혼자 백단을 맡게될 것 같으니, 미리미리 준비를 많이 해둬야할 것 같다. 오늘은 몽구스의 사용법에대해 조금 정리해보려고한다. 이외에도 할게 많다.. schema나 api등 미리 생각해놔야할 것도 많고 잡다한 tool도 공부해야하고 .. 느아아아아😱 What is mongoose ? mongoose는 MongoDB의 ODM 중 하나이다. ODM은 Object Document Mapping, 즉 문서를 DB에서 조회할 대 자바스크립트 객체로 바꿔주는 역할을 한다. mongoose의 장점으로는 강제 스키마의 부활, populate, 프로미스와 콜백 사용가능, 편리한 쿼리 빌더 등을 꼽을 수 있다. '뭐?? ..

테스트코드를 보면서, 불라불라 == null 이라는 조건을 보면서 왜 null일까 undefined로 하면안될까? 왜 strict equality operator(===)가 아닌 ==를 쓸까? 같은 질문들이 생겨서 조금 찾아봤다! null과 undefined JavaScript에는 '없음'를 나타내는 값이 두 개 있는데, 바로 null와 undefined이다. 두 값의 의미는 비슷하지만, 각각이 사용되는 목적과 장소가 다르다. JavaScript는 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환한다. let foo; foo // undefined const obj = {}; obj.prop; // undefined null은 객체가 없음을 나타낸다. 실제로 t..

axios를 사용하여 httml통신을 했을 때, catch로 잡아낸 에러에 접근하는 방법은 아래와 같다. axios.get('/user/12345') .catch(function (error) { if (error.response) { // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다. console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 요청이 이루어 졌으나 응답을 받지 못했습니다. // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또..