RAILEND
2021-09-26 TIL
Facts (사실, 객관) 코드숨 6주차 과정 리뷰 Findings (배운 점) Link를 포함하는 컴포넌트의 테스트를 작성할 때 Link를 Router 바깥에서 사용하고 있다는 에러를 확인할 수 있다. 테스트 코드 내에서 이를 해결하기 위한 세 가지 방법이 있다. 컴포넌트를 Memory Router로 감싸준다. 그러나 하위 컴포넌트에서 Link를 직접 불러오는 것은 관심사 분리에 도움이 되지는 않는다. 상위 컴포넌트에서, 예를 들어 라우트와 매칭된 페이지 컴포넌트에서 하위 컴포넌트로 Link를 전달해준다. 테스트 코드 내에서도 Link를 함수로 정의한 다음에 컴포넌트를 렌더시켜준다. 상위 컴포넌트에서 링크가 클릭되면 라우트를 주소와 매칭시켜주는 함수를 전달해준다. 하위 컴포넌트에서는 Link가 아닌 a..
2021-09-24 TIL
Facts (사실, 객관) 알고리즘 공부를 시작했다. 여전히 운동은 안 하고 있다. Feelings (느낌, 주관) 엘리스 코딩 교육과정에 지원하게 되면서 알고리즘 공부를 시작했다. 교육과정에 참여하기 위해서는 서류, 코딩 테스트, 면접 등의 관문을 통과해야 한다. 엘리스 코딩에서는 시험을 대비하여 여러 문제를 미리 풀어볼 수 있도록 도구를 제공해준다. 덕분에 그동안 미뤄왔던 알고리즘 문제들을 직접 풀어보며 접하게 되었는데..., 요약하자면 아주 절망스러운 경험을 했다. 기초라고 제공되는 문제조차 내게는 너무 어려웠고 많은 시간을 할애해도 결국 풀지 못하는 문제도 많았다. 아무래도 시험을 통과하지는 못할 것 같고 이번 기회를 통해 알고리즘에 관심을 갖고 강의를 들어보며 꾸준히 준비해 나가야 겠다. 공부해..
코드숨_React_6주차_주간회고
Facts (사실, 객관) 코드숨 6주차 강의 듣기 - 라우팅 과제 1: 레스토랑 상세 페이지 구현하기 Feelings (느낌, 주관) MemoryRouter를 활용하여 테스트를 작성하는 중에 단순히 코드를 따라 치는 모습을 자각했다. 내가 지금 쓰고 있는 코드가 어떤 의미가 있는 건지, 알고는 있는 건지 먼저 생각하자고 다짐했다. 비교적 이른 시점에 과제의 기능 구현을 모두 끝마쳤다고 생각했지만 e2e테스트를 통과하지 못했다. 처음에는 식당 목록을 클릭할 때 이벤트로서 fetch 하도록 했는데, 생각해보니 주소를 직접 입력하는 경우에는 당연하게도 데이터를 불러오지 않았다. 바보 같은 실수이긴 했지만 테스트의 필요성을 느끼게 되는 경험이었다. 주소창에 id값을 직접 입력하는 경우에 페이지를 불러오지 못하..
Guard Clauses로 예외처리를 해보자
코드숨 과정을 통해 Guard Clauses에 대해 알게 되었다. 이는 조건문에 관한 것이다. if-else 로직을 리팩토링하여 좀 더 읽기 쉽고 깔끔한 코드를 작성하는데 그 의의가 있다. function checkMaster(user) { if (user.role === 'admin') { if (user.master === true) { return true; } else { return false; } } else { return false; } } if-else 로직으로 작성하는 것은 편리하다. 하지만 가독성이 좋지 않다는 단점이 있다. 중첩이 깊어질 수록 내용을 명확하게 파악하기 힘들고 이는 유지보수에 도움이 되지 않는다. Guard Clauses에 의한 작성법은 과감하게 if-else 로직을 ..
의존성 주입이란 무엇인가?
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. 객체지향 프로그래밍에서는 필연적으로 객체들 간의 협력을 요구한다. 각 객체들이 협력한다는 것은 서로 연결되어 있다는 것을 의미하고 이러한 특징을 의존성이라고 한다. 협력을 위해 의존은 필요하지만 과도한 의존은 코드의 유지보수를 어렵게 만들기도 한다. 객체들 간에 서로 주고 받는게 많아지다 보면 코드의 복잡도가 증가할 것이다. 하나의 기능을 수정하기 위해 수많은 코드를 수정해야만 하는 상황이 연출되기도 한다. 따라서 코드는 다양한 문맥에서 재사용할 수 있도록 작성하는 것이 바람직하다. 재사용하기에 용이하다는 것은 다른 요소와 유연하..
2021-09-16 TIL
Facts (사실, 객관) 수면 패턴을 바꾸는 데 성공했다. 코드숨 6주차 과정: 라우팅 Feelings (느낌, 주관) 보통 아침 해가 뜨고서야 잠에 들었는데 그 시간이 점점 미뤄져서 최근에는 오후가 되어서야 잠이 오는 최악의 수면 패턴을 경험했다. 아르바이트에도 지장이 있었고 컨디션이 영 좋지 않았다. 이건 아니다 싶어서 바꾸려던 차에, 결국 잠을 못 잔 채로 카페에 출근한 이후로 밤에 자는 패턴이 될 수 있었다. 얼마나 갈지는 모르겠지만 이대로 유지하기 위한 노력 중이다. 오늘은 새벽 다섯 시에 일어났는데, 다섯 시간도 못 자서 너무 이른 감이 있었다. 하지만 더 이상 잠이 오진 않았고 패턴을 유지하기 위해 낮잠은 최대한 자제하고 있다. 아마 오늘을 일찍 잠에 들어야 할 것 같다. 코드 숨 6주차 ..
코드숨_React_5주차_주간회고
Facts (사실, 객관) 코드숨 5주차 강의 듣기 과제1: 레스토랑 조회 구현하기 Feelings (느낌, 주관) 제대로 된 순서로 TDD를 하는 것이 쉽지 않았다. 지난 번에는 너무 이른 시점에 컨테이너를 만들어 분리했는데, 이번에는 처음부터 컴포넌트의 분리없이 모든 기능을 구현하려고 하다 보니, 코드의 구조가 쓸데없이 복잡해진 경향이 있었다. 형태만 먼저 만들어 둔 다음 리팩토링을 통해 기능과 컴포넌트를 점점 추가하는 것이 올바른 방향인 것 같다. 리덕스를 최대한 늦게 사용했다. 두 가지 모두 익숙해지기 위해 useState로 먼저 상태관리를 했는데, 테스트 작성에 큰 어려움이 있었다. fetch는 비동기적으로 이루어지기 때문에 getBy- 매쳐로 원하는 요소를 찾지 못했다. fetching이 끝나..
이벤트 핸들러를 어떻게 할당해줘야 할까?
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. 이벤트 핸들러를 붙여주는 방식엔 크게 3가지가 있다. //index.html //첫 번째 //index.js //두 번째 button.onclick = function() {...} //세 번째 button.addEventListener('Click', handleClick1); button.addEventListener('Click', handleClick2); button.addEventListener('Click', handleClick3); 속성으로 onClick을 넣어주는 것과 이벤트리스너 메서드를 붙여주는 것은 단지 방..
React-Thunk를 활용한 비동기적 상태관리
학습했던 내용을 정리하기 위해 작성된 글이며 다소 부정확한 내용이 포함될 수 있음을 양해바랍니다. 이미 게시된 글이라도 복습하는 과정에서 내용이 보완 또는 수정될 수 있습니다. 리덕스는 기본적으로 동기적인 상태 업데이트를 수행한다. 만약 비동기적으로 상태를 업데이트해야 한다면, redux-thunk라는 미들웨어를 사용할 수 있다. thunk를 사용하면 액션 크리에이터가 액션을 리턴하는 대신 함수를 리턴할 수 있다. thunk가 action creator에 직접 개입하는 것은 아니다. 리듀서가 순수한 액션 객체를 인수로 받는 것과 달리, 미들웨어는 특정한 액션(여기서는 함수를 리턴하는 액션)을 인식하여 커스텀된 로직을 실행한다. 즉 미들웨어를 통해 커스텀 된 dispatch를 실행할 수 있다. 그래서 특정..