뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, React 기본 강좌 2-5. 웹팩으로 빌드하기
서원석님의 학습노트

리액트 프로젝트를 웹팩으로 빌드하기

#전체
#개발자
#프론트엔드
#node.js
#노드
#자바스크립트
#js
#javascript
#zerocho
#lecture
#강좌
#제로초
#프로그래밍
#programming
#web
#react
#리액트
#웹게임
00:08시작(여기서부터 재생해주세요)
01:34웹팩 실행(프로젝트 빌드를 위한)
03:05웹팩 빌드 에러 디버깅
04:56웹팩으로 빌드를 하려고 javascript 파일들을 합치다보니 JSX문법이 발견돼서 에러 발생 => createElement로 변환되도록 compile 필요 => 어떻게 할까요? 바로 webpack에서 babel을 활용하는 것입니다.
05:32npm으로 babel 관련 라이브러리 설치
07:50modules는 entry의 파일을 읽어서 변환해주는 역할입니다. => modules로 변환된 파일들이 output에서 합쳐진다고 보시면 됩니다. => JSX로 작성된 파일들을 createElement로 변환 후 하나로 합치는 것이죠
10:20webpack으로 빌드 => 오류 디버깅
12:18빌드 성공
14:33끝(여기까지 시청해주세요)
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기