2022/07 6

[정규식] Javascript 정규 표현식

정규 표현식은 언어를 떠나서 사용하지만 내가 자바스크립트를 사용하기 때문에 예시는 모두 자바스크립트를 사용하려 한다. 정규 표현식이란 문자열에서 특정 문자 조합을 찾기 위한 패턴이며, Javascript에서 정규 표현식도 객체이다. RegExp의 메서드 exec() 일치 정보를 나타내는 배열 또는 null을 반환 test() 일치하면 true, 일치하지 않으면 false를 반환 String의 메서드 match() 캡처 그룹을 포함해 모든 일치를 담은 배열을 반환, 없으면 null을 반환 matchAll() 캡처 그룹을 포함해 모든 일치를 담은 반복을 반환 replace() 일치하는 부분을 대체 문자열로 바꾼다. replaceAll() 일치하는 부분을 모두 찾고, 모두 대체 문자 열고 바꾼다. search..

[스터디] 클린코드 9장 (2022년 7월 20일)

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

[Axios] axios interceptors 사용해보자

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

[스터디] 클린코드 8장 (2022년 7월 13일)

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

[React] 리다이렉트를 이용한 로그인 후 이전 페이지 이동

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

React 2022.07.08

[스터디] 클린코드 7장 (2022년 7월 5일)

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