남남이루의 고군분투 🌳

테스트 도구 사용 동기 혈당당 Frontend 개발을 맡으며, ESlint를 사용해도, API요청이 컨텍스트에 있을 경우, 실제 배포 후에야 확인하게 되는 오류가 많았다. 또한, 한 개의 컴포넌트를 페이지 단위로 작성해버리니 모듈화도 잘 안 되고, 오류 파악도 어려웠다. 이것은 클린코드에서 지향하는 코드와 거리가 멀다고 생각했다! 따라서 단위 테스트에 대해 더 공부해볼 필요를 느꼈다. 자료는 Udemy의 React 완벽 가이드를 참고했다. 테스트 도구의 종류 Jest : 브라우저 (특히 렌더링)를 시뮬레이션 하는 도구, 흔하게 사용함, CRA에 이미 설치 되어 있음 React Testing Library : CRA에 이미 설치 되어 있음 기타 라이브러리 Jest 사용해보기 세팅하기 CRA는 별도의 세팅이..

포스팅 동기 : npm은 node package manager 인 건 알겠으나, 언제 패키지를 설치하고, 또 언제 초기화해야 하는 지 잘 몰랐다. 따라서 의존성 문제로 에러가 나면 기계적으로 npm init, npm i, -g 옵션 붙였다 뗐다를 했었다. 이 김에 정리해보자. npm 명령어 사용 위치 보통 프로젝트 단위(어플리케이션 단위)에서 써왔다. 아마 실무에서는 멀티레포지토리를 쓰는 경우 의존성을 다르게 관리할 것이므로, 레포 범위에서 사용할 것이다. (node_modules를 폴더로 가지고 있는 레포의 최상위 경로) 패키지 관련 명령어 • npm init npm init 명령어는 보통 npm을 처음 프로젝트를 만들거나 패키지를 만들 때 사용한다. 프로젝트 폴더 최상단에 package.json을 만..

작성일 2023. 2. 6 범위 Clean Code 도서, Chaper 5. 형식맞추기 [Clean Code] 5. 형식맞추기 형식을 맞추는 목적 👌 코드 형식은 의사소통의 일환이다. 의사소통은 전문 개발자의 일차적인 의무다. 적절한 행 길이를 유지하라 세로 위치가 조금만 차이나도(코드 길이) 실제 크기는 크게 달라진다. 신문 기사처럼 작성하라 개요 → 구체화 내용을 정확하게 요약하고 있는 제목(함수명, 변수명) 의 형식을 갖추고 있는 신문기사 처럼 코드를 작성하라 개념은 빈 행으로 분리하라 빈 행 다음에는 집중도가 올라간다. 빈 행은 새로운 개념을 시작한다는 시각적 단서이다. 세로 밀집도 서로 밀접한 코드행은 세로로 가까이 놓아야 한다. 수직거리 같은 파일에 속할 정도로 밀접한 두 개념은 세로 거리로 ..

작성일 2023. 1. 23 범위 Clean Code 도서, Chaper 3. 함수 [Clean Code] 3. 함수 함수를 만드는 규칙들 1. 작게 만들어라 함수는 작을 수록 좋다. (중첩 구조 X, 들여쓰기 수준은 2개 이하) 2. 한 가지만 해라 함수가 여러 일을 할 수록 이해하기 어려워진다. 3. 함수당 추상화 수준은 하나로 4. 서술적인 이름을 사용하라 함수의 이름은 함수의 일을 잘 표현하는 이름일 수록 좋다. 5. 이상적인 인수의 개수 : 0개 인수가 많아질 수록 읽는 사람에게 혼동을 준다. 따라서 인수는 적을 수록 좋다, 0개에서 1개를 유지하라. 6. 부수 효과를 일으키지 마라 7. 명령과 조회를 분리하라 함수는 뭔가를 수행하거나 답하는 하나의 일만 해야한다. 8. 오류코드보다 예외처리하라..

작성일 2023. 1. 16 범위 Clean Code 책, Chapter 2. 의미있는 이름 Clean Code 2. 의미있는 이름 1. 의도를 분명히 밝혀라 좋은 변수의 예시 : elapsedTimeInDays daysSinceCreation daysSinceModification fileAgeInDays 코드의 맥락이 코드 자체에 명시적으로 드러나도록 한다 코드에 함축성을 부여한다, 의미를 명확하게 담고 있는 명명이 필요하다. 2. 그릇된 정보를 피하라 일관성이 떨어지지 않도록 한다 ex. add를 리스트에 추가하는 메서드에 넣었다면 append 등의 단어와 혼용하지 않도록 한다 3. 의미있게 구분하라 list에 추가하는 메서드와 data 포맷에 특정 용도로 추가하는 메서드가 있다고 가정했을 때 굳이..

''.join(map(lambda x: morse[x], letter.split())) ''.join([morse[x] for x in letter.split()]) 리스트를 조인하거나, map으로 나온 객체들을 조인할 수 있다. map 사용할 때 람다식을 함께 사용하는 방법을 익혀두면 좋다. 예시 문제 : 키를 기준으로 값에 해당하는 문자열들을 병합해 return 프로그래머스 모스부호(1} 문제 바로가기 제출 코드

키워드 리액트란? MVC에서 View (유저에게 보여주는 화면)에 최적화된 라이브러리 템플릿과 컴포넌트 템플릿 : HTML태그 형식을 문자열로 반환 (재사용이 어렵) 컴포넌트 : 재사용이 가능한 API, 수많은 기능을 내장 (재사용 용이, React의 방식) 렌더링 : 사용자 화면에 뷰를 띄우는 것 리액트는 동적으로 화면을 구성하기에 최적화 되어 있음 Virtual DOM, 변경되는 부분을 기존 돔과 비교해서 차이만 반영해서 렌더링 되도록 함 리액트 적용하기 CDN 삽입 (리액트, 리액트돔, 바벨) 하위에 script 태그생성, 해당 태그에 타입 지정 "type"="text/babel" 삽입할 위치를 querySelector로 할당한 돔 객체로 생성 삽입할 내용 생성 : 변수명 = (JSXHTML문법 작..

문제 해결 과정 문제 상황 : 파이썬 파일 실행하는데, input 파일 상대 경로를 못 읽어온다. 액션 1 : 기준이 되는 경로를 찾자 print(os.getcwd()) 결과 : 예상했던 루트가 아니다, 실행 경로가 상위 폴더로 되어 있다. ➔ 경로 기준은 뭐로 결정되는 걸까? 액션 2 : 출력된 경로를 살펴보니, 켜져있던 터미널 창이 파이썬 파일을 실행할 때 기준이 된다는 것을 알게 됨 액션 3 (해결) : 터미널 경로를 실행파일로 맞춰주고 ctrl + F5 실행하니 성공 추가 개선 추가 문제 상황 : 매 실행파일마다 터미널 경로를 바꿔야 하나?, 터미널을 끈 채로 실행할 때, 자동으로 상위 폴더로 설정되어 실행됨 액션 : debug 설정파일인 launch.json의 파라미터 탐색 후 관련 코드 추가 ..

플러그인 주소 기본 단축키 hjkl : 이동, i, v , esc : 모드 변경 그 외 참고 !!! 가장 중요한 필수 기본 설정 vimium option > show advanced option > ignore keyboard layout 체크 ignore keyboard layout 을 하면 한영변환을 하지 않아도 단축키를 사용할 수 있다. 참고 1 참고 2 : 일일이 매핑하기

성능측정 : time, timeEnd 함수의 호출 전후에 console.time('id');, console.timeEnd('id') 입력하면 id: --ms 형식으로 걸린 시간이 출력 됨. console.time("for loop"); for (let i = 0; i < 10; i++) { i++; } console.timeEnd("for loop"); 호출 횟수 출력 : count 함수 내부에 console.count('x count'); 삽입하면, 함수가 호출될 때마다 x count : 횟수 형식으로 출력됨. 호출 경로, 디버깅에 용이 : trace 호출된 코드를 감싸는 함수를 기점으로 상위 코드를 줄줄이 출력해줌 그 외 console.table(Object) console.info(msg) con..