Web Standard

시작하기웹팩은 javascript 모듈을 컴파일 하는데 사용됩니다. 설치 후 CLI나 API를 통해 웹팩을 적용할 수 있습니다. 만약 아직 웹팩에 익숙하지 않다면, 핵심개념과 다른 툴들과의 비교를 통해 왜 사용해야 하는지 알아보십시오. 기본 설정우선 디렉토리를 만들고, npm을 초기화 하고, 로컬에 webpack과 webpack-cli(커맨드라인에서 웹팩을 실행하는 도구)를 설치해 봅시다. mkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 가이드 전체에서 diff 블록을 사용해서 디렉토리, 파일, 코드의 변경사항을 보여줄 것입니다. 다음과 같은 디렉토리 구조와 파일, 컨텐츠를 볼 수 있습니..

사전 요구 사항시작하기 전 새로운 버전의 Node js가 설치되어있는지 확인하세요. 현재 LTS(Long Term Support) 버전이 시작하기 이상적입니다. 이전 버전을 사용하면 필요한 기능 혹은 필수 패키지들의 누락으로 다양한 이슈를 겪을 수 있습니다. 로컬(local) 설치 최신 버전 : 최신 혹은 특정 버전의 웹팩webpack 설치npm install --save-dev webpack npm install --save-dev webpack@만약 웹팩 v4 혹은 이후 버전을 사용한다면, CLI도 설치해야 합니다.npm install --save-dev webpack-cli대부분의 프로젝트는 로컬 설치할 것을 권장합니다. 변경사항이 생겼을때 개별 업그레이드가 쉬워집니다. 일반적으로 웹팩은 로컬 no..

최근 크롬이 업데이트 되면서 (제 크롬은 오늘자 맥버전 68이네요) 로컬 서버를 아주 쉽게 띄울 수 있게 되었습니다.심지어 자기가 원하는 도메인으로 설정도 가능하고, 페이지를 띄워놓고 브라우저에서 수정 및 저장까지 가능합니다! 사실 서버를 띄우려면 이것저것 셋팅 해야될것도 많고, 한번에 여러개를 띄우기도 번거롭기도 하고 그렇죠.주소도 localhost:포트번호로 사용해야 되구요. 그렇다고 작업한 파일을 그냥 열었을 경우, React js등으로 작업되고 빌드된 페이지는 열리지 않죠.서버를 띄우지 않고 스태틱한 파일을 그냥 열면 최종본을 확인할 수 없습니다. 오류가 나요. 그럼, 이제 어떻게 하는지 알아봅시다. 우선 적당한곳에 폴더를 만들어 줍니다. 저는 my_local_servers 라고 만들었어요. 그 ..

대부분의 개발자들은 console.log 를 사용해서 특정 값을 확인하고 디버깅 합니다. 그런데, console 에는 console.log 말고도 여러 메소드가 있다는걸 알고 계시나요? 아래 예를 보겠습니다. 각 로그들은 서로 다른 방식으로 표현되기 때문에 쉽게 구분할 수 있습니다. (스타일은 브라우저 마다 다릅니다.) 또한, 보다 구조적이고 가독성을 높일 수 있게 그룹으로 묶을 수 있습니다. 그룹은 중첩으로 표기할 수 있습니다. 그룹을 축소된 상태로 표시하려면 console.groupCollapsed() 를 사용하세요. 성능 측정 코드 지점간 시간을 측정하면 특정 작업의 성능을 쉽게 확인할 수 있습니다. 보통 이런 방법을 사용하시나요? 좀 더 우아하게 표현 해볼까요? 코드는 더 짧고, 측정은 더 정확하..

특정 폴더에 있는 png 이미지들을 webp로 변환시켜주는 툴을 만들어 보겠습니다. 간단하게 Node js 로 제작합니다. 우선 프로젝트 폴더를 만들어 주고 $ npm init 으로 프로젝트를 생성합니다. 그 후, 이미지 변환에 필요한 패키지들을 설치해 줍니다. (Global로 설치하셔도 무방합니다.) $ npm install imagemin imagemin-webp --save imagemin : 이미지 미니파이 해주는 툴imagemin-webp : imagemin의 webp 플러그인 설치가 완료 되었으면, /webp.js 파일을 만들어 줍니다. 퀄리티가 75% 이므로 손실이 있습니다. 만약 무손실 옵션을 사용하고 싶다면 로 작성해줍니다. 작성이 완료 되었으면 sources 폴더에 png 이미지 파일들..

GNB를 제외한 모든 페이지 개발은 완료 되었습니다.월/화/수 링크를 클릭하면 요일에 맞게 리스트를 그려주는 작업을 해보도록 하겠습니다. 우선 Gnb 컴포넌트의 a태그를 Link로 바꾸고, 경로를 메인 페이지, query string으로 요일을 명시합니다.props로 day를 받아 해당 요일이면 on 클래스를 추가해주는 작업도 합니다. /src/component/Gnb.js 이제 Gnb를 클릭하면 Main 컴포넌트에 props.location.search 로 day 값을 얻을 수 있습니다. day의 기본값은 월요일, day 값이 있다면 해당 요일로 set해주는 작업을 해줍니다. /src/container/Main.js 이어서, componentDidUpdate를 통해 day값이 바뀌면 새로운 리스트를 그..

에피소드를 누르면 해당 뷰어로 이동합니다. 지금까지 해왔던 방식과 동일하므로 어렵지 않습니다. 우선 이미지를 더미 데이터에 넣기 위해 이전 편에서 사용했던 episode_list.json 파일에 이미지 리스트를 추가합니다. /public/dummy/episode_list.json (전체 코드) 이후 전편과 동일하게 axios로 api를 불러와서 제목과, 이미지를 화면에 그려주면 끝납니다. props.match.params.episodeId 로 현재 에피소드의 ID와 일치하는 이미지들을 루프를 돌면서 그려줍니다. /src/container/Viewer.js 이번 강의의 모든 코드는 Github : tutorial_05 에서 확인하실 수 있습니다. 다음편 : React 강좌 tutorial 6 - GNB 처..

이번에는 웹툰 상세페이지를 만들어 보겠습니다.메인 페이지에서 감상하고 싶은 웹툰을 누르면 상세페이지로 이동합니다. 우선 Link 를 /webtoon/웹툰ID 로 수정해줍니다. 그러면 1장에서 만들었던 WebtoonHome 으로 이동합니다.그리고 웹툰ID는 props.match.params.webtoonId로 접근할 수 있습니다. (이는 1장 router 부분을 참고) 이 페이지에서는 웹툰의 상세정보와 해당 웹툰의 에피소드 리스트를 표현합니다.3장에서와 마찬가지로 더미 데이터를 우선 만들고 시작하겠습니다. /public/dummy/webtoon_detail.json (웹툰 상세 정보)/public/dummy/episode_list.json (에피소드 리스트) WebtoonHome 에서 axios로 방금 만..

이번장에서는 메인 페이지를 만들어 보겠습니다. 메인 페이지는 요일별 웹툰 리스트를 표시해줍니다. 해야할 일을 정의해보면,1. 요일별 웹툰 리스트 JSON 데이터 만들기 (더미 데이터)2. Main 컴포넌트에서 axios로 데이터 가져오기3. 요일별 웹툰 리스트 컴포넌트 만들기 우선 간단한 JSON파일을 만듭니다. (실제 프로젝트라면 REST API를 호출하겠지만, 이 강좌에 백엔드 영역은 포함되지 않습니다. 그냥 임시로 JSON 파일을 만들어서 활용하겠습니다.) 메인 화면에서 노출 될 웹툰 리스트이며, 각 웹툰은 요일을 가지고 있습니다. 이 파일을 axios를 이용해 불러올 것이기 때문에 src/폴더가 아닌 public/폴더의 dummy/폴더를 만들어서 넣어 두었습니다. /public/dummy/webt..

이번장에서는 헤더와 푸터, GNB등 공통으로 사용되는 컴포넌트를 만들어 보겠습니다.별 역할이 필요없는 애들이기 때문에 함수형 컴포넌트로 만들어 줍니다. /src/component/ Header 와 Footer를 간단하게 만들어 주시고,Gnb는 사실 요일탭인데 그냥 간단하게 3개만 만들었습니다. 메인 페이지(Main)와 웹툰 상세페이지(WebtoonHome)에 헤더, 푸터, GNB를 넣어줍니다. /src/component/Main.js 이런 화면이 나왔네요. 이번 강의의 모든 코드는 Github : tutorial_02 에서 확인하실 수 있습니다. 다음편 : React 강좌 tutorial 3 - 메인 페이지 (웹툰서비스 만들기)