프론트엔드 프레임워크

💡 `Cannot find module '...' or its corresponding type declarations.` 오류를 해결해보자! 목표 위 오류에 대한 해결방법을 정리할 수 있다. 동일한 오류가 발생했을 때, 스스로 해결할 수 있다. Vue Quick Starter를 통해 프로젝트를 생성했음에도 'Cannot find module '...' or its corresponding type declarations.' 라는 오류 메시지가 출력됐다. 이를 해결하기 위해서는 어떻게 해야할까? 해결 /src 폴더 안에 shims-vue.d.ts 파일을 생성 후, 해당 파일에 .vue 파일에 대한 타입을 정의해야 한다. Vue 3 import 구문에 *.vue를 사용하면 '*.vue'라고 기입하고, 컴포..

💡 Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 직면했다면, 이제는 당황하지 말자! 목표 'LF', 'CRLF'가 무엇인지 설명할 수 있다. ESLint 적용 후, Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 빠르게 해결할 수 있다. VSCODE에서 ESLint를 적용하고, Windows PC와 Mac PC를 동시에 사용하게 된다면, Expected linebreaks to be 'LF' but found 'CRLF'. 오류를 자주 직면하게 된다. 여기서, 'LF'는 무엇이고, 'CRLF'는 대체 무엇을 의미할까? `LF`와 `CRLF` 둘 다 줄바꿈(개행)을 의미한다. 그러다면, 왜 서로 다른걸까? LF..

💡 styled-components를 적용하는 김에 정리도 한 방에 해보자. 목표 styled-components가 무엇인지 설명할 수 있다. styled-components를 적용해보고 간단한 예제를 작성할 수 있다. styled-components를 적용할 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다. styled-components를 활용한 유용하고 다양한 예제를 기록해두는 공간으로 활용한다. styled-components styled-component는 스타일 값으로 함수를 전달할 수 있기 때문에, 기존 HTML/CSS 처럼 새로운 클래스를 추가하는 것이 아니라 prop 값을 기반으로 스타일을 적용할 수 있다. 이는 코드량을 크게 줄일 수 있으이며, styled-component 처음 도..

💡 스타일린트(stylelint)를 적용하는 김에 정리도 한 번에 해보자! 목표 Stylelint가 무엇인지 설명할 수 있다. Stylelint를 적용해보고 설정값에 대해 설명할 수 있다. Stylelint를 적용할 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다. 보통 코딩 컨벤션으로써 ESLint를 대부분 사용하고 있을 것이다. 스타일을 적용할 때, 항상 그 날의 마음가는 대로 작성하는 것을 최대한 피하고자 Stylelint를 도입해봤다. Stylelint stylelint는 스타일 작성에 코딩 컨벤션을 적용하도록 도와주는 강력한 도구라고 언급한다. 스타일 작성 시 오류를 방지하고 대중적인 네이밍룰을 따르도록 강제한다. stylelint 스타터 가이드 `npm`을 사용한다는 가정하에 설치 방법을 ..

💡 리액트 프로젝트에서 import시, 더 이상 ../../../ 를 쓰지 않도록 src를 기준으로 경로 설정을 해보자! 목표 import를 상대경로뿐만 아니라 절대경로로 설정할 수 있다. Craco를 통해 원하는 관심사의 경로 매핑과 커스터마이징 할 수 있다. 다들 상대경로 `../../../` 지옥에서 벗어나기 위해 왔을 것이라고 확신한다 : ) import문 작성 시 상대경로는 물론 절대경로도 인식 가능하게 하고, 개발의 편의를 위해 필요에 따라 관심사별로 미리 경로를 지정하여 커스터마이징하게 매핑할 수 있는 방법을 정리해본다. 특정 관심사란, components, containers, services, views 등이 있을 수 있다. 각각의 역할은 본인이 정한 것으로 하자. 절대경로 설정이 필요한..

💡 CRA 후 항상 구글링해서 설정하는 부분을 정리해보자. 나만의 리액트 스타터 템플릿이 되것지 : ) 목표 CRA(Create React App)을 적극 활용할 수 있다. 필요에 따라 ESLint, Prettier, Babel 등을 추가 연동 설정 할 수 있다. 신규 리액트 프로젝트를 만들 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다. 페이스북에서 개발한 CRA(create react app)을 통해 리액트 프로젝트를 쉽고 빠르게 생성할 수 있다. CRA 관련 내용은 맨 하단에서 설명하기로 하고, 리액트 스타터 가이드를 작성해보자. 📣 CRA 리액트 스타터 가이드 npx create-react-app # typescript를 사용하실 분들은(권장) $ npx create-react-app 서비스..