daisylee

이슈 antd로 불러온 컴포넌트에 styled-components를 적용할 때, 이미 컴포넌트가 상단에 정의되어 있어서 동일한 변수명을 가진 styled-components를 만들 수 없어서 난감했습니다. 같은 이름을 쓰자니 상단에 있어서 중복되고, 다른 이름을 쓰자니 이미 정해져 있는 antd 컴포넌트명을 함부로 바꾸면 안 되는거 아닌가...? 라는 생각이 들었습니다. 해결 방법 해결 방법은 의외로 간단했는데, styled(컴포넌트) 처럼 사용해서 가져다써도 상관없었습니다! styled-component로 활용하는 방법으로는 1. 스타일링된 엘리먼트를 만들어서 가져다 쓰기 2. 이미 만들어진 컴포넌트를 스타일링해서 가져다 쓰기 로 나눠볼 수 있겠습니다. 1번 방법은 styled.태그명 처럼 작성하고, ..

강의를 듣거나 혼자 토이 프로젝트를 만들 때, 아무 생각 없이 습관적으로 CRA(Create React App)를 통해 개발을 시작하다보니 리액트가 동작하는 기본적인 원리를 지나치게 되는 것 같습니다. CRA 없이 index.html에 리액트를 적용하는 방법을 정리해보았습니다. 우선 대부분의 설정은 리액트 공식문서에 나와있으므로 공식 문서만 따라해도 잘 작동할 것입니다. 저는 제가 보기 쉽게 정리를 하고 싶어서 블로그에 적고있습니다😊 https://ko.reactjs.org/docs/add-react-to-a-website.html 웹사이트에 React 추가 – React A JavaScript library for building user interfaces ko.reactjs.org 1. 태그 안에 ..

yarn start로 실행시키려고 하는데 다음과 같은 에러가 발생했습니다. 구글링을 해보니, npm을 최신 버전으로 해결하면 되는 문제였습니다. 터미널에 npm update 를 입력하고 다시 npm start나 yarn start를 하면 됩니다. 혹시 npm audit 이 보이면 그대로 실행하면 됩니다. (취약성 검사) https://kim-mj.tistory.com/269 [React/에러] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 리액트를 시작하거나 git clone을 받은 후, npm install을 하고 npm start를 했음에도 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 ..

styled-components는 CSS in JS라는 기술을 사용하는 라이브러리입니다. CSS in JS는 말그대로 CSS 파일을 생성해 스타일링 관련 코드를 분리하는 대신에, JS 안에 CSS를 작성하는 것입니다. 이와 같이 CSS in JS를 적용하는 라이브러리들이 있는데, 가장 대표적인 것이 styled-components입니다. 저는 기초적인 사용법을 익히기 위해 아주 간간한 버튼을 컴포넌트화 한다음 styled-component를 적용해보았습니다. 공부하기 위해 다음과 같은 링크를 참고하여 정리했습니다. styled-component를 공부할 때 꼭 참고하시길 바랍니다😎 https://bit.ly/3mAfpIp [React] Styled Components 사용법 Engineering Blog..

1. 라이브러리 설치 yarn add react-router-dom 또는 npm install react-router-dom (최신 버전보다 다운그레이드된 버전을 사용하고 싶은 경우: react-router-dom@5(5버전)과 같이 입력합니다. 2. import하기 3. App 감싸기 import와 App 감싸기는 index.js 파일에서 한 번에 하면 됩니다. react-router-dom이라는 라이브러리를 설치하고 거쳐야 할 단계를 정리하고, 나중에 다른 프로젝트에 적용할 때 더우 쉽게 찾을 수 있도록 썼습니다.😊 happy hacking 하세요!

프로젝트에 폰트를 적용하는 방법은 크게 2가지로, 1. 웹폰트를 적용하거나 2. ttf 형식의 파일을 다운로드 받아 프로젝트에 저장해서 사용하는 방법이 있습니다. 저도 처음에는 웹폰트를 적용했었는데요! 구글링을 하다보니 웹폰트 적용 방식으로 폰트를 서버-클라이언트 방식으로 폰트 파일을 받아오는데, 용량이 크고 사용자의 환경에 따라 로딩 속도가 느려지는 단점이 있다고 합니다. 따라서 ttf 형식의 폰트 파일을 다운로드 받아 저장해 사용해보려고 합니다. 1. 폰트 사이트에서 폰트를 고릅니다. 가장 유명하고 사용하기 쉬운 사이트는 구글 웹폰트와 눈누가 있습니다. 구글은 영어와 한국어 이외에도 다양한 국가의 언어를 지원하고, 눈누는 한글 폰트를 지원합니다. 언어별로 적용할 때 영어는 구글 웹폰트, 한국어는 눈누..