본문 바로가기

전체 글

 (118)
22.11.28: git commit message 잘못 쓰고 있었던 커밋 라벨: style 코드 수정없이 code formatting 스타일 변경이 있을 때 써야하는 것. 나는 컴포넌트 styling 할 때 그 스타일으로 이해하고 썼다. 그리고 예전에도 fix, refactor 라벨을 잘못 붙여서 사용했던 경험이 있다. 다시 한번 정리해보며 반성하는 시간을 가져야겠다....* . * feat: 새로운 기능에 대한 커밋 fix: 버그 수정에 대한 커밋 build: 빌드 관련 파일 수정에 대한 커밋 chore : 그 외 자잘한 수정에 대한 커밋 ci : CI 관련 설정 수정에 대한 커밋 docs : 문서 수정에 대한 커밋 style : 코드 스타일 혹은 포맷 등에 관한 커밋 refactor : 코드 리팩토링에 대한 커밋 test : 테스트 코드 수정에 대한..
22.11.27 : CRA없이 프로젝트 생성하기-5 (webpack dev server, webpack.config.js 살펴보기) Reference : 캡틴판교님 강의, 웹팩 핸드북 Webpack Dev Server 웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰임. 웹팩 빌드 대상 파일이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드 변경 후 저장하면 웹팩으로 빌드 후 브라우저를 새로고침 해준다. 매번 명령어 치지 않아도 되고 새로고침과, 웹팩 빌드하는 시간을 줄여줘서 웹팩 기반의 웹 애플리케이션 개발에 필수로 사용된다. 웹팩 데브 서버의 특징 일반 웹팩 빌드와 다른 특징이 있음. // package.json "scripts": { "dev": "webpack-dev-server", "build": "webpack" } 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다. 웹팩 데브 서버로 빌..
22.11.26 : CRA없이 프로젝트 생성하기-4 (code splitting 연습) Reference : 캡틴판교님 강의, 웹팩 핸드북 실습 package.json { "name": "code-splitting", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.4.2", "mini-css-extract-plugin": "^0.9.0", "style-loader": "^1.1.3", "webpack": "^4.42.0"..
22.11.26 : CRA없이 프로젝트 생성하기-3 (웹팩 설정, 주요 속성) Reference : 캡틴판교님 강의, 웹팩 핸드북 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode=none --entry=src/index.js --output=public/output.js" }, 이렇게 package.json에서 직접 웹팩을 설정하게 되면 추가해야 할 것이 너무 많다. 프로젝트폴더 루트 레벨에 webpack 설정파일을 만들어주자. webpack.config.js // node.js의 모듈문법 // path라는 node.js 라이브러리를 가져옴 var path = require("path"); module.exports = { mode: "none", entry: "...
22.11.25: URI, URL URI Uniform Resource Identifier, 통합 자원 식별자의 줄임말. 브라우저의 검색창을 클릭하면 나타나는 주소가 URI이다. (URI는 인터넷 자원을 식별할 수 있는 문자열을 의미) URI의 하위개념으로 URL, URN이 있다. URL Uniform Resource Locator 웹 주소라고도 하며, 컴퓨터 네트워크 상에서 리소스가 어디 있는지 알려주기 위한 규약. URI의 서브셋이다. 차이점 URI는 식별, URL은 위치를 가리킨다. URI의 구조 scheme:[//[user[:password]@]host[:port]][/path][?query][#fragment] 1. scheme: 사용할 프로토콜을 뜻함. 웹에서는 http or https 2. user와 password: 서버의..
22.11.24 : HTML 기본 구조, HTML5 시맨틱태그 HTML의 기본 구조 HTML 작성을 위해 꼭 있어야 하는 구조 HTML 5 구조 : HTML5를 사용함을 브라우저에 선언한다. : 전체 html 문서를 감싸는 태그. : html 문서에 대한 정보를 나타냄. 하나만 존재해야 하고, html 바로 아래 위치해야 함 : head 안에 들어가는 태그, 제목 표시줄의 내용을 나타냄 : meta 역시 head 안에 들어감. 문서에 대한 설명 표시. 사람에겐 보이지 않고 브라우저만 읽을 수 있음. charset="utf-8"은 브 라우저에게 한글 인코딩을 UTF-8로 설정하라고 지시함. 이 부분이 있어야 한글이 깨지지 않는다. : html 문서에서 실제적으로 화면에 보여지는 부분. 하나만 존재. html바로 아래, head 다음에 위치해야 함. HTML5 개요 H..
22.11.22 : CRA없이 프로젝트 생성하기-2 (웹팩 알아보기) Reference : 캡틴판교님 강의, 웹팩 핸드북 웹팩 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러. 모듈 번들러란 웹페이지를 구성하는 자원들(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구를 의미한다. 모듈이란? 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 웹팩에서의 모듈은 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 제작하려면 HTML, CSS, JavaScript, Images, Font 등 많은 파일들이 필요하다. 이 모든것이 모듈이다. 모듈 번들링이란? 웹 애플리케이션을 구성하는 많은 자원들을 하나의 파일로 병합..
22.11.22 : CRA없이 프로젝트 생성하기-1 (왜?) 인프런의 "프론트엔드 개발자를 위한 웹팩 강의"를 좋은 기회로 얻게 되어서 (좋은 강의 감사합니다 캡틴판교님!) 오늘부터 시작을 해보려 한다. 캠프를 시작하고 리액트 프로젝트를 만들어왔는데, 계속 CRA기반의 프로젝트만 만들었다. 그래서 부끄러운 이야기지만 웹팩과 바벨을 따로 설정해주어야 한다는 것도 모르고 있었다. 앞으로 나올 내용들은 캡틴판교님의 강의를 들은 내용과 웹팩 핸드북을 바탕으로 정리한 내용이다. 강의링크 Create-React-App React 개발 환경 설정을 위해서는 대부분 웹팩과 바벨에 대한 설정 이외에도 다양한 개발 환경의 설정이 필요하다. 이런 설정들을 일일이 해 줄 필요 없이 대신 다 해주는 것이 Create-react-app이다. CRA는 리액트에서 자주 쓰이는 도구 및 설정들..
반응형

티스토리툴바