공부 정리 (39) 썸네일형 리스트형 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는 리액트에서 자주 쓰이는 도구 및 설정들.. 22.11.19 : 잘 안 되었던것, 톺아보기 1. D-Day 3일 전 reminder alert 문제 상황 1. 아래와 같이 분명 7일이 남았는데, 1일이 남았다고 alert이 떴다. 개발자 도구로 console.log를 찍어보니 1이었다가 7일 된다. 2. alert이 어떤 페이지에서는 뜨고, 어떤 페이지에서는 안 뜬다. 원인 다른 디테일 페이지들을 왔다 갔다 해보니, console.log로 서버에서 받아오는 데이터를 확인했을때, 이전에 들어오던 데이터가 잠시 들어왔다가 새로운 데이터로 바뀌는 현상을 발견했다. 해결방안 1. state에 데이터를 저장해 useEffect에서 clean up 해주기 또는 2. 리듀서를 써서 useEffect에서 clean up 해주기 3. alert 간헐적으로 뜨는 문제 -> 의존성 배열에 기한 날짜가 담긴 데이터.. 22.11.12 : FrontEnd 개발 면접 질문 공부 질문들 from 캡틴판교님 블로그 캡틴판교님 블로그에서 좋은 게시글을 발견해서 이렇게 제 블로그에 끄적여 봅니다. 아직 갈 길이 멀고도 멀었지만, 저는 아직 외우지 않고 술술 대답할 능력이 되지 않기 때문에 이전에 썼던 내용이라도 다시 한 번 찾아보면서 정리를 해보려 합니다. 질문들은 모두 캡틴판교님 블로그에서 발췌하였습니다. # 단골 질문 : 기본적으로 다 알고 대답할 수 있어야 함 1. 브라우저 저장소에 대해서 설명해 보세요. 1) 로컬스토리지 유효기간 없이 데이터를 저장. JavaScript를 사용하거나, 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐. 저장 공간이 셋 중 제일 크다. 브라우저를 닫았다가 열어도 데이터가 남아있다. 2) 세션스토리지 각각의 출처에 대해 독립적인 저장 공간을 .. 22.11.10 : Atomic design pattern 왜 Atomic design pattern을 사용해야 하는가? 리액트를 이용한 개발을 하면서, 가장 고민되는 것이 중복되는 코드를 어떻게 재사용 할 것인가? 였다. 큰 프로젝트 일수록 최적화된 코드 재사용이 필수적이므로, 중복되는 코드를 처음부터 재사용 가능한 컴포넌트를 이용하면 재사용 가능한 설계를 할 수 있고, 유지/보수/수정이 쉽게 가능하다. 또한 레이아웃을 이해하기가 쉬워진다. Atomic 디자인 패턴 코드 디자인 패턴 중 하나로 컴포넌트를 사용하는 라이브러리와 프레임워크에 모두 사용 가능하다. 가장 작은 컴포넌트 단위를 원자(Atoms)로 설정 이를 바탕으로 상위 컴포넌트를 만들어 코드 재사용을 최대화하는 방법론 상위 컴포넌트는 순서대로 분자(Molecules), 유기체 (Organisms), .. 이전 1 2 3 4 5 다음
