전체 글 (121) 썸네일형 리스트형 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), .. 22.11.09 : SSR, CSR (TTV, TTI) 본문은 드림코딩 강의를 정리한 내용입니다. 1990년 중반까지는 모두다 Static site였다. 서버에 잘 만들어진 html 문서들이 있고 사용자가 브라우저를 통해 도메인에 접속하면 서버에 이미 배포되어있는 html 문서들을 가져와서 보여주는 형식을 사용해왔다. 문제점은 클라이언트가 페이지 내에서 다른 링크를 클릭하면 서버에서 해당 페이지의 html을 다시받아와서 페이지 전체가 업데이트 되어야 했다. 1996년, 문서 내에서 또 다른 문서를 담을 수 있는 iframe 태그가 도입되었고, 페이지 내에서 부분적으로 문서를 받아와 업데이트가 가능해졌다. 1998년, fetch API의 원조, XMLHttpRequest가 개발되어 html이 아니라 jason 같은 포맷으로 필요한 데이터만 받아올 수 있게 되었.. 22.11.09 : webpack 웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 모듈 번들러는 여러개로 나뉘어져 있는 파일들을 하나로 만들어준다는 개념으로, 주로 자바스크립트를 위한 모듈 번들러이나 호환 플러그인을 포함할 경우 HTML, CSS, 이미지와 같은 property들을 변환할 수 있다. 왜 여러 파일들을 합치는 과정이 필요할까? 그 이유는 HTTP요청 방식과 관련있다. HTTP/2에서는 하나의 커넥션에 동시에 여러 파일들을 요청할 수 있지만, 우리가 주로 사용하는 HTTP/1.1 에서는 하나의 커넥션에서 하나씩 요청을 보내야 한다. 즉 요청하는 파일들이 많을수록 비효율적이다. 요청 수를 줄이기 위한 방법이 바로 번들러이다. 왜 웹팩(webpack) 을 쓰는건가? webpack을 사용해야 하는 이유를 이해하기 위해서는 번들러가.. 이전 1 2 3 4 5 6 7 8 ··· 16 다음
