입사 첫 주차가 지나갔다.앞으로 매주 TWIL과 회고를 진행하려고 하는데, 오늘은 회사의 코드를 파악하면서 익숙하지 않은 새로운 개념들을 하나씩 정리해두려고 한다.회사에서는 Next.js를 별도로 사용하고 있지는 않고 React 자체에서 코드 스플리팅을 사용하고 있다.

react-testing-library를 설치하려 했더니 이런 에러가 발생했다.npm ERR! Could not resolve dependency:npm ERR! peer react@"^18.0.0" from @testing-library/react@13.1.1npm

새로 리액트앱을 만들다 보니 이런 에러가 발생했다.Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your

CRA에서는 기본적인 webpack설정이 숨겨져있는데, 절대경로를 사용하기 위해서는 tsconfig.json과 더불어 webpack의 설정을 변경해주어야 한다.이를 위해서는 eject로 숨겨진 webpack 설정을 바꾸어주어야 한다.eject?해당 프로젝트에 숨겨져 있

지금까지 사용해보았던 CSS, SASS, SCSS, Styled-components 외에 새로운 CSS를 프로젝트에 도입해보기로 했다.tailwindcss는 utility-first를 개념으로 만들어진 CSS Framework이다.utility-first클래스에 유틸리

어플리케이션 개발단계부터 배포까지 자동적으로 진행할 수 있도록 만드는 것버그 수정/새 기능 추가될 경우 메인 레퍼지토리에 주기적으로 자동으로 머지되는 것개발자는 코드 변경사항을 지속적으로 머지해야한다.통합을 위한 단계(빌드, 테스트, 머지)의 자동화코드의 퀄리티 향상,

웹팩에서 제공하는 플러그인으로, 노드 런타임에서 process.env에 저장되는 환경변수를 전역변수로 등록해준다.appID라는 값을 인자로 넘기면 process.env.appID라는 값이 환경변수로 설정되어 전역 변수에 할당된다.https://hjuu.tist

브라우저의 저장소를 말한다.로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있어 데이터의 영구성이 보장된다.따라서 지속적으로 필요한 데이터를 저장할 때 활용할 수 있다.ID 저장하기 항목 체크시 저장할 아이디, 비회원 카트 정보 등UI 정보: 에

정확히 잘 모르겠다! 프로그래밍 패러다임 목표에 따라 적절한 방법과 기법을 활용해 프로그램을 만들게 되는데, 이것을 프로그래밍 패러다임이라고 한다. 함수형 프로그래밍 언어는 객체지향 언어보다도 일찍 탄생했지만, 수학의 원리와 연관되어 있고 다소 난해해 처음에는 사람

기존의 일반 객체는 Object.entries()를 사용했다면. map객체는 내장메서드인 entries()를 사용하면 된다.

tsconfig 설정을 고쳐 에러를 해결했더니,또 다른 오류를 만났다.tsconfig.json 설정상의 문제인 것 같아서 계속해서 살펴봤었는데, 여러 스택오버플로우의 문의글 중 하나가 눈에 들어왔다.웹팩에 대해 간단히 알아보긴 했지만, 그래서 정작 어떻게 사용하는지는

어떤 컴파일 설정을 사용할지에 대한 속성어떤 버전의 자바스크립트로 컴파일할지 지정프로그램에서 사용할 모듈 시스템모듈 내보내기/불러오기 코드가 어떠한 방식의 코드로 컴파일 될지 결정비상대적 import의 모듈 해석시 기준이 되는 경로 지정프로젝트 루트 디렉토리에 존재하는

이번 포스팅에서는 웹팩과 모듈시스템에 대해 더 구체적으로 정리해보려 한다.그동안 다른 소스코드를 참고하면서 require 키워드를 많이 봐왔는데, 정확히 어떤 키워드이고 왜 쓰는지, import와 비슷한 역할을 하는 건데 무슨 차이인지, 그냥 Node.js의 문법일 뿐

https://kitty-geno.tistory.com/62https://donghunee.github.io/study/2019/11/15/heroku/https://ksmfou98.github.io/ETC/Nodejs%20+%20expres

Node.js와 Express를 공부했던 적은 없었지만, 이번 토이 프로젝트를 진행하면서 api를 구축해야했기 때문에 공부하면서 진행하고 있었는데, CORS 이슈에 맞닥뜨리게 되었다.Access to fetch at 'urlA' from origin 'urlB' has

현수는 송아지를 잃어버렸다. 다행히 송아지에는 위치추적기가 달려 있다. 현수의 위치와 송아 지의 위치가 수직선상의 좌표 점으로 주어지면 현수는 현재 위치에서 송아지의 위치까지 다음 과 같은 방법으로 이동한다. 송아지는 움직이지 않고 제자리에 있다.현수는 스카이 콩콩을

하고 싶은 것은 다음과 같다.타입스크립트로 OOP를 구현한다.텍스트와 웹페이지 링크디자인 시스템을 참고한다.깃허브 api를 사용하여 리드미 프로필에 넣을 수 있도록 한다.내용은 2가지로 구성한다. \- 요즘 관심있는 포스트내가 쓴 글

커스텀 훅에 핵심 로직이 포함되어 있었으므로 꼭 테스트 코드를 작성해둘 필요를 느꼈다.E2E테스트로 잘 작동하는지 사용성 테스트는 완료했지만,코드의 유지보수 측면에서 작동여부 뿐 아니라 로직 자체를 테스트할 수 있는 코드를 꼭 작성해두는 것이 좋을 것 같았다.여기에 더

아래 부분은 커스텀 훅을 테스트 SyntaxError: Cannot use import statement outside a module 이 에러가 발생했는데, 노드에서 import문을 해석하고 실행할 수 없기 때문이므로 바벨을 사용해주어야 한다.필요한 바벨 패키지

이렇게 체크인 날짜를 선택했을 때, 예약 불가 날짜가 있다면 해당 날짜 전까지만 체크아웃날짜를 선택할 수 있도록 블락 처리를 해야 한다. .gif) 그런데 이렇게 안되는 경우가 발생했다. .gif) 내가 만들었지만... 내가 봐도 희한하다..🥲 명확한 테스트