찐빵이의 개발일기

React 프로젝트 생성하는 방법 yarn create react-app my-app이후 yarn start로 실행할 수 있다. 공식문서 프로젝트 구조 .gitignore 형상관리를 하지 않을 리스트를 담고 있다. package.json 외부 라이브러리 정보나 스크립트에 대한 내용을 가지고 있다. manifest.json PWA를 만들 때 필요한 파일 robots.txt 크롤링을 할 때 필요한 파일 index.js 컴포넌트들을 화면에 나올 수 있게 해준다. public 폴더 html, 이미지 등 정적인 컨텐츠가 포함된 폴더 src 폴더 동적으로 변화하는 소스가 들어있는 폴더 웹팩 빌드 시 웹팩에서는 자바스크립트의 고유 버전이 할당된다. 변경되면 고유 버전이 업데이트 된다. 만약 자바스크립트가 변경되지 않..

Node JS 자바스크립트를 실행할 수 있는 환경. 자바스크립트는 원래 웹페이지를 위해 작성하는 언어였는데, NodeJS 덕분에 웹 브라우저 밖에서도 실행할 수 있게 되었다. 즉, 어떤 OS든, NodeJS 환경이 있다면 자바스크립트 코드를 작성하고 실행할 수 있고, OS 위에 있는 파일을 읽고, 수정하고 저장할 수 있다. 이런 NodeJS 덕분에 자바스크립트는 백엔드 서버를 만들 때도, 서버사이드 렌더링을 할 때도, 커맨드 라인 툴이나 스크립트를 만들 때도 사용된다. npm 이란? npm은 패키지 매니저이다. 외부 라이브러리가 필요하면, 아래와 같은 순서로 진행해야 한다. 라이브러리 소스코드를 다운로드한다. 소스코드를 프로젝트 안에 넣는다. 필요한 것을 임포트 해서 쓴다. 이 과정에서 매번 라이브러리 ..

서비스 워커는 웹 페이지와 별개의 생명주기를 가지고 있다. 서비스 워커의 생명주기 웹페이지에서 서비스 워커 스크립트를 호출한다. Installing : 브라우저 백그라운드에서 서비스 워커를 설치한다. 설치 과정에서 정적 자원을 캐싱한다. Activated : 설치 후 활성화한다. Error : 설치 과정에서 에러가 나면 그대로 종료된다. Idle : 사용하지 않을 때는 휴먼 상태에 있다가 필요시에만 해당 기능을 수행한다. Terminated : 메모리 상태에 따라 자체적으로 종료한다.

서비스 워커(Service Worker) 란? 브라우저와 서버 사이의 미들웨어 역할을 하는 스크립트 파일 오프라인 경험을 가능하게 한다. 동작 방식은 Shared Worker 자바스크립트 UI와 별개의 스레드로 동작한다. 서비스 워커 등장 배경 AppCache의 문제점(오동작, 파일 변화)을 보완하기 위해서 등장 서비스 워커의 특징 브라우저의 백그라운드에서 실행된다. 웹 페이지와 별개의 라이프 사이클을 가진다. 네트워크 요청을 가로챌 수 있다. 자원에 대한 캐쉬 또는 서버에 자원을 요청 가능하다. 프로그래밍 가능한 프록시 프록시 : 중계서버 브라우저 종속적인 생명주기로 백그라운드 동기화 기능을 제공한다. 브라우저가 끝나야 워커가 종료된다. 웹과 모바일 푸시 알림이 가능하다. navigator.servic..

PWA란? 모바일 앱과 같은 경험을 주는 최신 웹 앱이다. 앱과 같이 아이콘, 설치 배너, 푸시, 오프라인 경험을 제공한다. HTML, CSS, JS로 구현할 수 있다. PWA 적용 애플리케이션 인스타그램, 우버, 트위터, 스타벅스 등 전 세계적으로 사용하고 있다. PWA 등장배경 우리는 일상 속에서 모바일을 많이 사용한다. 하이브리드 앱으로 모바일 앱 영역을 커버하기에는 한계점이 있었다. only 웹 기술로 모바일을 점유하기 위해서 등장했다. PWA 특징 Responsive 반응형 웹 디자인. PC, 태블릿, 폰에서도 편리하게 사용 가능하다. App like & Discoverable 웹이지만 유저는 앱처럼 느낄 수 있다. Engageable 푸시 알림이 가능하다. Connectivity 온라인, 오프..

CSS로 스타일링을 하다 보면 가운데 정렬이 헷갈린다. 여러 방법이 다른 것 같은데, 매번 찾기 귀찮아서 정리해본다. margin 사용하기 div, block요소는 margin:auto를 사용해서 가운데 정렬을 할 수 있다. text-align 사용하기 text나 inline-block요소는 text-align:center를 사용해서 가운데 정렬을 할 수 있다. flex 사용하기 요소의 display속성을 flex로 정의하면, justify-content와 align-content, aling-items를 사용해서 정렬 방식을 설정할 수 있다. 예시 li{ display: flex; align-items: center; /*가로 가운데 정렬*/ }

CSS를 작성하다 보면 같은 값들이 반복되는 경우가 있다. 이런 경우 변수를 만들어서 사용하면 관리가 쉬워진다. CSS 변수 사용법 root클래스 안에 변수를 선언하면 사용할 수 있다. :root { --main-bg-color: pink; } body{ background-color: var(--main-bg-color); } 동일한 값을 사용하는 곳에 변수를 사용해서 적용하면 된다. 대체 변수 사용하기 변수가 정의되지 않았을 때, 대체 변수를 사용할 수 있다. body{ background-color: var(--main-bg-color, red); /*--main-bg-color가 정의되지 않은 경우 red가 적용된다.*/ } 참고자료 사용자 지정 CSS 속성 사용하기

position이란 position 속성은 HTML 문서에 요소가 배치되는 방식을 결정한다. 대부분 position 속성으로 배치 방식을 결정하고 top, bottom, left, right 속성으로 위치를 결정한다. position:static (default) position 속성을 지정하지 않으면 default값으로 static이 적용된다. HTML에 작성된 순서대로 브라우저 화면에 표시가 된다. top, bottom, left, right 속성 값은 무시된다. position:relative 원래 위치를 기준으로 상대적으로 배치하는 방법이다. top, bottom, left, right 속성을 이용해서 요소가 원래 위치에서 얼마나 떨어질지 정할 수 있다. position:absolute posit..

Rest란? HTTP URI를 통해 자원을 명시하고 HTTP 메서드를 통해 자원에 대한 CRUD Operation을 적용하는 것 HTTP 메소드와 CRUD 의미 HTTP method CRUD operation 요청 GET READ 작성 POST CREATE 업데이트 PUT, PATCH UPDATE 삭제 DELETE DELETE REST 6가지 원칙 Uniform Interface Stateless Caching Client-Server Hierarchical system Code on demand RESTful API Rest 아키텍처를 모두 만족하는 API라는 뜻 RESTful 하게 API를 디자인한다는 것? 리소스와 행위를 명시적이고 직관적으로 분리한다. 리소스는 URI로 표현되는데 리소스가 가리키는..