작심삼일 개발이야기

9장 단위 테스트 테스트하면 TDD가 떠오르는데 일단 공부해야 될 목록에 추가는 해두었지만... 그냥 테스트를 어떻게 하면 좋을지? 기준을 두고 읽어 보았다. TDD 법칙 세 가지 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다. 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다. 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다. 깨끗한 테스트 코드 유지하기 테스트코드는 실제 코드 못지않게 깨끗하게 짜야한다. 클린 코드 책을 읽다 보면 모든 코드를 구분 없이 깨끗하게 짜야 되는 것 같다. 물론 당연한 말이지만... 그래도 책으로 한번 보면 더 각인된다고 해야 되나? 테스트는 유연성, 유지보수성, 재사용성을 제공한다. 테스트 케이스가 있으면 변경이 ..

interceptors란 API 요청과 응답을 가로채는 것을 말한다. 사용하는 이유 API통신에서 공통적으로 전, 후처리가 필요할 때 token이 만료되었을 때를 감지하고 처리하기 위해서 에러가 발생했을 때 aleart창 띄어주기 일단 내가 사용하는 이유는 위와 같다. 위에서 언급한 것과 같이 axios를 사용할 때 interceptors를 사용하게 된다면 모든 API 통신은 interceptors를 거치기 때문에 공통적인 작업을 처리하기가 좋다. 사용법 // 요청 interceptors instance.interceptors.request.use( function (config) { // 요청하기전에 필요한 작업 return config; }, function (error) { // 요청에 오류가 있을..

8장의 제목은 경계이다. 경계란 외부 코드를 내 코드에서 호출하는 부분을 뜻한다. 이번 장은 외부 코드를 어떻게 내 코드에 녹일 것인지에 대해 중점을 두고 보면 될 것 같다. 경계 살피고 익히기 외부 코드를 사용하면 적은 시간에 더 많은 기능을 출시하기 쉬워진다. 외부 패키지 테스트는 우리 책임은 아니지만 우리가 사용할 코드를 테스트하는 편이 바람직하다. 개발을 하며 직접 만들어서 사용하기도 하지만 라이브러리 같은 외부 코드를 사용하면 많은 시간을 절약할 수 있다. 하지만 무조건적으로 라이브러리를 사용하지말고 잘 비교해보고 사용해야 한다. 학습 테스트는 공짜 이상이다 학습 테스트란 기능 구현을 위한 테스트라기 보다 어떻게 동작하는지를 검증하기 위한 테스트이다. 학습 테스트에 드는 비용은 없다. 오히려 필..

만약 링크를 통해 웹 페이지에 접근할 때 해당 페이지에서 로그인 정보가 필요하다면 로그인 페이지로 바로 이동시켜준다. 로그인을 성공하게 되었을 때 처음 링크를 통해 접근한 페이지로 이동하는 방법을 적어두려 합니다. 여기서 소개하는 방법이 정답이라고 할 수는 없으니 다른 방법을 아시는 분 있으면 댓글에 알려주시면 감사하겠습니다. 사용한 기술스택 react react-router-dom V6 js-cookie 로직 순서 private 페이지(로그인이 필요한 페이지)에 접근했을 때 cookie를 통한 유저 token 확인 cookie에 유저 token이 없는 것을 확인 로그인 페이지로 이동하기 전 현재의 path를 useNavigate의 state로 저장 후 로그인 페이지로 이동 로그인 실행 useNaviga..

7장은 오류처리에 관한 단원이다. 프론트 개발을 하다 보면 개발자가 원했던 입력 값을 사용하지 않는 경우는 흔하다. 오류처리는 가이드라인을 정하는 그런 느낌으로 책을 읽어보았다. 오류 코드보다 예외를 사용하라 try catch 문을 사용해라 함수 내에서 오류코드를 확인해라 form에서 try catch문으로 예외상황을 처리한다. Try-Catch-Finally 문부터 작성하라 try-catch-finally 문에서 try 블록에 들어가는 코드를 실행하면 어느 시점에서든 실행이 중단된 후 catch 블록으로 넘어갈 수 있다. try-catch 구조로 범위를 정의했으니 TDD를 사용해 나머지 논리를 추가한다. 미확인(unchecked) 예외를 사용하라 사실 미확인 예외라는 말을 처음 들어봐서 검색해보았다. ..

6장의 제목은 객체와 자료 구조이다. 제목부터 어렵다... 확실히 자바를 공부하지 상태에서 읽으니 모르겠다... 요약정리만 간단히 했다. 자료 추상화 추상 인터페이스를 제공해 사용자가 구현을 모른 채 자료의 핵심을 조작할 수 있어야 진정한 의미의 클래스다. 자료를 세세하게 공개하는 것보다 추상적인 개념으로 표현하는 편이 좋다. 구현을 모른 채 자료를 조작하는 것이 진정한 의미의 클래스이다. 자료/객체 비대칭 객체는 추상화 뒤로 자료를 숨긴 채 자료를 다루는 함수만 공개한다. 자료 구조는 자료를 그대로 공개하면서 별다른 함수를 제공하지 않는다. 다형성이란 하나의 객체가 여러 가지 타입을 가질 수 있는 것 객체와 자료 구조는 근본적으로 양분된다. 디미터 법칙 디미터 법칙은 잘 알려진 휴리스틱이다. 휴리스틱 ..

짧게나마 YouTube 클론 코딩을 했었다. API 연결해보니 뭔가 내가 생각했던 데이터가 아니라서 하고 싶은 맘이 뚝떨어졌다. 나중에 한 번은 하지 않을까 하는 마음으로 잠깐이나마 사용해본 것을 정리해두려 한다. API 키 발급 https://console.cloud.google.com/ 에서 프로젝트를 등록 등록된 프로젝트에 어떤 API를 사용할 것인지 등록해주어야 한다. YouTube Data API v3을 검색해서 등록해주면 된다. 등록을 다 마치면 API 키를 발급받는다. (노출되지 않도록 관리를 잘해야 한다.) 발급받은 API 키 주소창에 검색하면 정상적으로 동작하는지 확인 할 수 있다. https://www.googleapis.com/youtube/v3/search?part=snippet&q..

5장. 형식 맞추기 5장은 코드를 조금 더 깔끔하게? 보이게 하는 법을 적어놓은 것 같다. 형식을 맞추는 코드 코드 형식 -> 의사소통의 일환 -> 의사소통은 개발자의 일차적 의무 유지보수의 용이성과 확장성을 위해 가독성이 좋은 코드를 작성해야 한다. 적절한 행 길이를 유지하라 긴 코드를 보는 것보다 짧은 코드를 보는 것이 이해하기 쉽다. 개념은 빈 행으로 분리하라 빈 행을 사용함으로써 개념적으로 분리되어있는 것을 표현할 수 있다. 세로 밀집도 서로 밀접한 코드는 세로로 가까이 놓아야 한다. 수직 거리 변수는 사용하는 위치에서 가장 가까지 선언한다. 종속 함수 한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치한다. 가능하다면 호출하는 함수를 호출되는 함수보다 먼저 배치한다 (?) 이 구절은..

4장. 주석 4장의 포인트 주석이 과연 좋을까? 솔직히 소제목만 읽어도 4장을 다 읽은 거나 다름이 없다. 주석은 나쁜 코드를 보완하지 못한다 주석 대신 코드를 사용해서 의도를 충분히 전달 가능하다. 주석을 달아야겠다는 것은 코드를 정리하라는 신호이다. 코드로 의도를 표현하라! 주석을 사용할 것이면 주석 대신 함수로 표현해라 예를 들어 긴 계산식을 적어놓고 주석을 달지 말고 함수로 만들어서 함수명으로 알아보기 쉽게 해라 좋은 주석 법적인 주석 정보를 제공하는 주석 의도를 설명하는 주석 의미를 명료하게 밝히는 주석 결과를 경고하는 주석 TODO 주석 중요성을 강조하는 주석 가장 와닿는 주석은 TODO 주석이다. TODO 주석을 위한 extenstion도 설치했었다. 하지만 TODO주석도 주석이므로 주기적으..

3장. 함수 3장의 포인트 함수를 잘 작성하는 법 작게 만들어라! 함수는 무조건 작게 만들어라 중첩 구조는 피해라 ( 중첩 구조가 생길 만큼 함수가 커져서는 안 된다 ) 함수는 짧게 만들수록 좋다 한 가지만 해라! 함수는 한 가지의 일만 해야 하며 그 한 가지를 잘해야 한다 함수 내에서 의미 있는 이름으로 추출이 된다면 여러 작업을 하는 것이다 서술적인 이름을 사용하라! 함수의 이름은 길고 서술적인 이름을 사용해라 함수가 하는 일을 잘 표현하는 이름을 사용해라 함수가 작을수록 서술적인 이름 짓기가 쉽다 이름을 정하느라 많은 시간을 들여도 좋으니 많이 고민해라 함수 인수 제일 좋은 인수의 개수는 0개이다 (상상에나 존재할 듯...) 1개~2개는 적당하나 3개 이상은 최대한 피해라 3개 이상으로 인수를 사용..