본문 바로가기

Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

Build tool

(2)
[CRA] CRA(Create React App)로 리액트 프로젝트 만들기 CRA(Create React App)로 리액트 프로젝트를 만들어보자! 1. 프로젝트를 진행 할 파일을 만들고 VSCode에서 연다. 필자는 emotion-diary 라는 폴더를 바탕화면에 만들었다. 2. CRA 실행 명령어를 입력한다. npx create-react-app emotion-diary 아래와 같이 뜨면 정상적으로 실행 된 것임. 3. (선택사항) 파일을 전부 잘라내기 해서 상위 디렉토리로 옮긴다. 4. 서버를 실행시키는 명령어를 입력한다. npm start 아래와 같이 뜨면 성공! 5. 안쓰는 파일 지우기 필자는 아래의 파일들을 삭제하였다. App.test.js logo.svg reportWebVitals.js setupTests.js
[Vite] Vite로 리액트 프로젝트 만들기 (Vite를 사용하는 이유) 목차 1. VIte 공식 사이트 2. Vite란? 3. Vite가 CRA보다 좋은 점 4. 에러 해결 Vite 공식 사이트 https://ko.vitejs.dev/ Vite란? Vite는 프랑스어로 "빠르다(Quick)"를 의미하며, Vue.js의 창시자인 Evan You가 만든 최신 빌드 도구 및 개발 서버이다. 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있다. 1) 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다. 2) 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configu..