작심삼일 개발이야기

10장 클래스 클래스... 자바를 1도 모르는 나에겐 너무 먼 얘기다. 점점 클린 코드 책도 멀어지는 것 같다. 클래스 체계 클래스를 정의하는 표준 자바 관례라는 것이 있다. 가장 먼저 변수 목록이 나온다. 정적 공개 상수 -> 정적 비공개 상수 -> 비공개 인스턴스 그다음 공개 함수가 나온다. 자신을 호출하는 공개 함수 직후에 넣는다. 즉 추상화 단계가 순차적으로 내려간다. 함수 파트에서도 나온 말이지만 추상화 단계가 순차적으로 내려가 신문 기사처럼 읽힌다는 얘기를 여기서 또 하고 있다. 그만큼 중요하신 거겠지... 현재 리액트를 사용하면서도 추상화 레벨을 맞추려고 노력하고 있는데 노력한 만큼 코드는 깔끔해지는 것 같다. 캡슐화 이 부분을 읽고 이해를 하지 못해 조금 더 찾아보았다. 클래스를 사용하는 ..

한번쯤은 사용하는 정규식들 모아두면 좋겠다고 생각해서이렇게 알아보는 김에 차곡차곡 모아 두자 물론 아래의 예시가 모두 정답은 아닙니다.틀린 예시가 있다면 댓글로 알려주시면 수정하도록 하겠습니다.물론 더 좋은 예시도 알려주시면 감사하겠습니다.전화번호, 휴대전화 정규식조건일반전화, 휴대전화 모두 만족02, 010, 011, 070 등등 앞자리 만족중간 3,4 자리 번호 만족/\d{2,3}-\d{3,4}-\d{4}/g 이메일 정규식/^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/i 아이디 정규식조건영문자와 숫자만 사용 가능 (영문자, 숫자 두 가지 모두 사용)길이는 8~16자로 가능첫 글자는 영문자로 시작/^[a-zA-Z][0-9a-zA-Z]{8,16}$/g 비밀번호..

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

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

interceptors란API 요청과 응답을 가로채는 것을 말한다.  사용하는 이유API통신에서 공통적으로 전, 후처리가 필요할 때token이 만료되었을 때를 감지하고 처리하기 위해서에러가 발생했을 때 aleart창 띄어주기일단 내가 사용하는 이유는 위와 같다. 위에서 언급한 것과 같이 axios를 사용할 때 interceptors를 사용하게 된다면모든 API 통신은 interceptors를 거치기 때문에 공통적인 작업을 처리하기가 좋다. 사용법// 요청 interceptorsinstance.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..