목록Front-end/React (20)
우당탕탕 개발일지
Styled Components CSS-IN-JS의 대표적인 라이브러리 중 하나로, CSS와 같이 class, id, tag name을 가져와 쓰지 않고 스타일 지정된 컴포넌트 생성하여 Tag 쓰듯이 사용하는 라이브러리이다. 즉, 리액트에서 UI단위를 나누어 컴포넌트화 하듯, 스타일을 컴포넌트화 하여 재사용이 가능하다. // for npm $ npm i styled-components 웹 이용자가 늘어나면서 디자인에 대한 요구가 커졌고, HTML을 꾸며주는 언어인 CSS가 등장했다. 하지만 웹이 점점 복잡해지고 동적 기능 요구가 증가하면서 이를 해결하기 위한 여러 가지 웹 애플리케이션 스타일 구성 방식이 나타났다. CSS - IN - JS는 단어 그대로 자바스크립트 코드에..
metadata 작성 및 관리 모든 dependencies 일괄 설치 또는 업데이트 dependencies 추가, 업데이트, 삭제 스크립트 실행 패키지 퍼블리쉬 보안 검사 모든 패키지 매니저는 모든 중요한 메타 정보를 package.json에 저장하고, 각자 다른 형태의 lock 파일이 존재한다. lock 파일이란 매 설치시 결정적이고 예측가능한 특성을 보장하기 위하여, 각 버전의 정확한 의존성 버전을 저장하고 있는 파일이다. lock 파일이 없다면 매 설치마다 설치하는 버전이 달라질 수 있다. npm : node package management $npm install 또는 $npm i 명령어를 실행하면, package-lock.json이 생성되고 node_modul..
고대의 웹 개발 방법 - HTML, CSS, JS를 각각 짜고 서버에 올림 현대의 웹 개발 방법 - 사람들이 JS 라이브러리를 쉽게 설치해주는 npm을 사용 JS 라이브러리를 모아놓은 플랫폼 npm 사용할 거면 bundle tools도 이용해야 함 ⇒ npm + bundle tools 문제1. node_modules 폴더 용량 매우 큼 문제2. import/require 문법은 브라우저 친화적이지 않음 의존하고 있는 라이브러리 파일( EX. JS )을 하나로 합쳐주는 작업 다 합치는 게 아닌 필요로 하는 것만 가져와서 용량 절약 ex ) Webpack, Rollup, Parcel 1세대 번들팩 : webpacks 콜드 - 스타트* 방식으로 개발 서버를 구동할..
npm npm은 ‘Node.js’라 불리는 별도의 실행 환경에서 동작 node 명령을 이용한 버전 확인 : node -v 새 디렉터리 만들기와 npm을 이용한 프로젝트 초기화 - npx create-react-app react-for-beginner 프로젝트 중복 생성시 - npm uninstall -g create-react-app 파일 제거 src/App.css src/App.test.js src/logo.svg 건들면 안되는 파일들 public/index.html → 페이지 템플릿 src/index.js → 자바스크립트 시작점 기본 디렉토리 생성 src/components : 컴포넌트들이 위치하는 디렉토리 src/pages : 각 라우터들이 위치하는 디렉토리 src/client : 브라우저 측에서 ..