주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 여기서 필요한건 react-hot-loader, webpack-dev-server 모듈이다. webpack-dev-server 모듈은 webpack.config.json을 읽어 빌드하고 서버로 유지해주는 역할이라고 한다. 로컬에서 서버를 돌릴 수 있다. react-hot-loader는 실시간으로 변경된 것을 확인할 수 있게 해준다. 모듈 install // cmd npm i -D react-hot-loader npm i -D webpack-dev-server 제로초님 강의에 서버가 공포감을 줄 수 있다고 한다. 나역시도 그랬던 것 같다..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 일단 index.html 파일이 필요하다. (webpack.config.js에서 entry에 적었던 파일들을 output으로 출력했을 때, 이 파일을 로드할 index.html!) 프로젝트 루트에 index.html을 생성한다. // react에서 DOM을 생성하여 넣어줄 태그! app.js에서 id값으로 접근하고 있다. // webpack.config.js에서 output에 경로를 작성한 파일 입력 그리고 html에서 처음으로 로드할 app.js 파일이 필요하다. 이 파일은 entry. 프로젝트 루트에 app.js 생성한다. // i..

강의 유튜브 주소 : http://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 일단 우리가 아는 HTML에서 CDN방식으로 React를 사용하려면 총3개의 script가 필요하다며 강의에서는 하단의 3개의 script 경로를 알려준다. // react // react-dom // babel-loader babel-loader는 react문법을 html에서 알 수 있도록 컴파일하는 역할을 한다. 사용예제

*이미지 출처는 https://pixabay.com/ 이고, 무료이미지(19.07 기준)여서 사용했습니다. 문제가 있을 시 삭제하겠습니다. 이제 어느덧 코딩애플에서 진행하는 기초 세미나 3/4가 지났습니다 ㅎㅎㅎㅎ!! 근데,, 사실은 이걸 처음 작성할 때는 다음주가 마지막이었는데 ㅋㅋㅋ 수정하고 있는 지금은, 벌써 4주차가 끝난 뒤입니다.^^; 하핫.... 3회차 수업은 라우터를 사용하지 않았습니다. 어떤 작업을 했는지, 체크해보면 1.메인에 리스트를 보여줄 것입니다. - '사용자이름, 타이틀, 텍스트, 이미지' 2.메인에서 이미지 업로드 버튼(+)을 누르면 사진을 업로드 할 수 있고 두 번째 레이아웃이 보여집니다. 3.두 번째 레이아웃에서는 업로드한 사진을 보여주고, 텍스트나 글쓴이 등 정보를 입력받는..