JS' 공부흔적

이번에 사이드 프로젝트를 진행하면서 jest와 react-testing-library를 사용하여 테스트 코드를 작성하는 연습을 해보고 있다. 그중에서 svg 파일과 관련해서 내가 겪었던 에러들을 정리하고자 한다. 첫 번째 에러 이 에러는 jest와 관련된 것은 아니다. 그러나 Vite 기반의 React로 개발을 진행하고 있다면 알고 있어야 한다. svg와 관련한 첫 번째 에러는 vite 환경에서 svg를 사용하기 위한 설정을 하지 않아서 발생했었다. 이때는 vite-plugin-svgr이라는 라이브러리를 설치하여 해결했었다. // vite.config.js ... import svgr from "vite-plugin-svgr"; ... export default ({ mode }) => { ... ret..

사이드 프로젝트를 하다가 아래처럼 예쁜 체크박스를 구현할 일이 생겼다. 사실 예전에 React-Native에서도 비슷하게 체크박스 커스텀을 했었는데, 그 당시에는 button으로 구현했었다. CheckBox 컴포넌트가 있던데 왜 안 썼을까.. 그래서 이번에는 다른 방법으로 구현해보고자 했다. 우선 기본 틀을 잡았다. 기본 아이디어는 다음과 같다. input을 숨기고, label로 input 값을 컨트롤한다. 이때 전체를 label로 감싸서 텍스트 클릭으로도 컨트롤 할 수 있도록 한다. input 값의 변화에 따라 div 스타일이 달라진다. style 파일에는 기본적인 스타일링과 특히 input이 체크되었을 때와 아닐 때의 div 스타일을 정의한다. 이렇게 하면 아래와 같이 예쁜 커스텀 체크박스가 완성된다!

올 상반기에 인턴으로 근무하면서 사내 코드 컨벤션에 의거하여 import 순서에 대해서 처음으로 신경 써봤다. 그러나 일일이 수작업으로 진행했던지라 가끔씩 지켜지지 않을 때도 있었고, 이런 경우 코드 리뷰 과정에서 수정하곤 했다. 이 부분에서 불편함을 느꼈기에 이번 사이드 프로젝트에서는 import 순서를 자동으로 정렬해 주는 Lint 설정을 직접 적용해 보자고 마음먹었다. 우선 eslint-plugin-import라는 라이브러리를 설치해야 한다. 이를 설치함으로써 import/export 구문에 대한 Lint를 지원한다. 문서를 확인해 보니 .eslintrc 파일에 추가 설정을 하라고 한다. extends: - eslint:recommended - plugin:import/recommended # al..

lint 검사를 돌리던 중 아래 에러가 발생했다. 처음 보는 에러에 CR은 또 뭔지.. 바로 검색해봤다. 위는 요약하자면 Windows 환경에서 발생하는 에러이며, Windows와 Prettier의 줄 바꿈 방식이 달라서 발생한다. 원래 평소에는 Mac 환경에서 개발했었는데, 이번에는 집에 데스크탑이 있어서 Windows 환경에서 개발 중이었다. (최근에 최신형 맥북으로 업그레이드해서 다시 맥으로 개발할 예정 ㅎㅎ..) 두 OS는 각각 새로운 줄 바꿈을 하는 방식이 다르다. 줄 바꿈 방식에는 2가지가 있는데 아래와 같다. LF: Line Feed(\n) CR: Carriage Return(\r) 이는 과거에 타자기를 사용하던 시절에 줄바꿈을 위해 사용하던 방식이라고 한다. LF는 현재 커서의 위치를 유지..

이전 글에서 함수 컴포넌트는 인스턴스를 갖지 않기 때문에 ref가 존재하지 않는다고 잠깐 언급하였다. 이를 보고 인스턴스가 무엇인지, 그리고 컴포넌트와의 차이는 무엇인지가 궁금해져서 더 알아보았다. 또한 엘리먼트와도 함께 비교해보았다. Element 엘리먼트는 UI를 나타내기 위한 가장 작은 단위이다. 보통 일반 자바스크립트 객체(plain JavaScript object)로 표현되는데, 이는 type과 props 필드로 구성되며 아래와 같이 나타낸다. { type: "button", props: { className: "btn-style" } } 위 엘리먼트는 React의 JSX 문법을 통해 아래와 같이 표현된다. const element = Click; Component 컴포넌트는 특정 기능을 수행하..

최근 합류한 사이드 프로젝트의 코드를 테스트하던 중 아래와 같은 Warning을 발견했다. Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()? 함수 컴포넌트에는 ref가 존재하지 않는데, forwardRef()를 쓰려고 했던 것이 아니냐는 Warning이었다. 해당 부분 코드를 확인해보니 자식 컴포넌트에 쓰이는 ref를 부모 컴포넌트에서 관리하고 있었다. 대략적인 코드를 보자. // CalendarContainer.jsx (부모 컴포넌트) const CalendarContainer = ({ type }) => { const calendarRef = useRef(null); ... return (..

얼마 전에 사이드 프로젝트 팀에 중간 합류했다. 기존에는 로컬 서버를 띄워놓고 테스트를 해왔는데, 며칠 전에 서버 개발자 분께서 서버를 배포하셔서 이제 배포된 서버에서 테스트 할 수 있게 되었다. 코드를 보니 이전에 작업하시던 프론트 개발자 분께서 CORS 에러에 대해 proxy 설정으로 대응해놓으셨다. "/back": { target: "http://localhost:8000", changeOrigin: true, rewrite: (path) => path.replace(/^\/back/, ""), }, 이제 실서버 주소를 적어야 하는데, 노출 방지를 위해 .env 파일에 환경변수를 등록해놓고 이를 불러와서 아래와 같이 쓰고자 했다. "/back": { target: import.meta.env.VIT..

1차원 배열 내에서 중복된 원소를 제거하고 싶다면 Set을 사용하여 쉽게 구현할 수 있었다. const arr = [1, 1, 2]; const set = new Set(arr); const uniqueArr = [...set]; console.log(uniqueArr); // [1, 2] 그러나 2차원 배열에 적용해 본 결과, 의도한 대로 동작하지 않았다. const arr = [ [1, 2, 3], [1, 2, 3], [1, 3, 4], ]; const set = new Set(arr); const uniqueArr = [...set]; console.log(uniqueArr); // [ [ 1, 2, 3 ], [ 1, 2, 3 ], [ 1, 3, 4 ] ] -> 중복 제거 X 이때는 아래와 같이 배..

같은 버튼을 클릭해도 마우스로 클릭할 때와 키보드로 클릭할 때 다르게 동작하도록 구현할 필요가 생겼다. 원래는 키보드를 눌렀을 때 useState()를 통해 boolean state로 관리하려고 했지만, 의도한 대로 동작하지 않았다. 이를 event 객체의 detail을 사용하여 해결했다. event.detail이란? event.detail은 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타낸다. 버튼이 한 번 눌렸다면 1, 더블 클릭을 했다면 2, 그 이상 다중 클릭을 했다면 해당 숫자만큼 표시된다. 아래 각 경우에 해당하는 예시를 보자. 위에서 언급했듯이 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타내기 때문에, 만약 키보드 동작으로 버튼을 클릭한다면 event.detail 값은 0이 나온..

forEach()와 map() 메서드는 둘다 배열 전체를 탐색한다는 공통점이 있다. 둘의 명백한 차이는 아래와 같다. let arr = [1, 2, 3]; let forEachArr = arr.forEach((d) => { return d * 2; }); let mapArr = arr.map((d) => d * 2); console.log(forEachArr); // undefined console.log(mapArr); // [2, 4, 6] 위처럼 가장 큰 차이는 forEach()는 배열을 단순히 탐색하기만 하고, map()은 배열을 탐색하여 새로운 배열을 반환한다는 것이다. 몇 가지 차이와 함께 더 알아보자. forEach() VS map() 반환 값 forEach()는 단순히 배열의 각 요소에 대..