CodeSoom- React 13기 (34) 썸네일형 리스트형 [코드숨] 리액트 13기 -2강/ 2. React(useState, 관심사의 분리) 리액트 훅 Hook: 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수 Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.) import React, { useState } from 'react'; function Example() { // "count"라는 새로운 상태 값을 정의합니다. const [count, setCount] = useState(0); return ( You clicked {count} .. [코드숨] 리액트 13기 -2강/ 1. React index.js const element = ( Hello,world ); 작성후 npm start 할 경우 error가 남 (jsx가 아니기 때문) 해결 1. 파일이름을 .jsx 로 변경 2.webpack.config.js 파일에서 아래 추가 const path = require('path'); //1 추가 module.exports = { entry: path.resolve(__dirname, 'src/index.jsx'), //2 추가 path: 표준라이브러리 __dirname, :현재 디렉토리 경로, 'src/index.jsx' 결합 const path = require('path'); module.exports = { entry: path.resolve(__dirname, 'src/index.j.. [코드숨] 리액트 13기 - 1주차 주간 회고 CodeSoom 2022.10.10 - 2022.10.16 Facts (사실, 객관) Feelings(느낌, 주관) Findings(배운 점) Facts (사실, 객관) ㆍ개발환경을 구축하는 방법 - Node.js, NPM, Webpack Dev Server, ESLint ㆍJSX 이해 ㆍ변수의 재할당 대신 매개변수를 사용하여 값을 변경하였다. - let 제거하기 과제 수행, 사칙연산 계산기능 과제 수행 Feelings(느낌, 주관) 코드리뷰의 중요성 지금까지 내가 작성한 코드를 누군가 봐주고 리뷰해줄 일이 없었기 때문에 이번 코드숨의 리뷰 과정이 무척이나 좋았다. 지금까지 코딩 공부를 하며 프로젝트를 할 때에도 내가 코드를 올바르게 작성하고 있는지 알 수 없었기에 불안함을 가졌다. 만약 혼자서 강의를 .. [코드숨] 줄바꿈을 LF로 처리중인 프로젝트를 Window에서 협업하는 방법 오류 Expected linebreaks to be 'LF' but found 'CRLF' 문제 기존 프로젝트가 줄바꿈을 LF로 처리하고 있었다. 그런데 windows 운영체제는 줄바꿈을 CRLF로 처리한다. (윈도우는 CRLF 맥은 LF) 그래서 프로젝트의 내용을 수정할 경우 LF를 CRLF로 처리한다. 그래서 변경사항이 없는 부분도 변경사항으로 바뀌게 되고, 이 변경 사항이 프로젝트에 적용될 경우, LF로 처리중인 사람들도 혼란을 겪는다. 원인 Git에서 clone한 파일들을 CRLF로 변경이 자동으로 되고 있다. 해결 Git설정에는 CRLF관련 처리를 자동으로 해줄 수 있는 옵션이 있다. true하면 자동으로 처리되지만, 내 로컬 파일에서는 여전히 CRLF로 처리되고 있다. VS Code.. [코드숨] 리액트 13기 -1강/과제 2 - 간단한 사칙 연산 계산기 구현 과제 풀이 오류 main.js:287 Uncaught RangeError: Maximum call stack size exceeded =>계속 실행됨 ▼ 오류원인 + ▼ 해결: 함수를 그냥 넣어주게 아니라 () 해서 작성했기 때문에 아래와 같이 작성해야 함. handleClickOperator('+')}> + ▼ 아샬코드 /* @jsx createElement */ function createElement(tagName, props, ...children) { const element = document.createElement(tagName); Object.entries(props || {}).forEach(([key, value]) => { element[key.toLowerCase()] = value; });.. [코드숨] 리액트 13기 -1강/과제 1 - let을 제거해보자 과제 풀이 변수를 선언후 변수의 값을 직접 재할당하지 않고 값을 바뀌게 함 (let을 사용하지 않는 과제 이유 : 직접값을 변경하면 추후 작업에 용이하지 않고, 오류가 날 수 있기 때문 ) let count =0; const count =0; 외부 변수를 let 대신 const로 변경하였을때 에러가 뜬다. (Assignment to constant...) 해결방법: 변수로 count를 받는 것 우선 맨 위 코드와 같이 const count=0; 선언한 것을 제외시켜줌(파라미터에 값을 넣어줄것임) render의 매개변수로 count를 넣어줌 마지막 render()에 0을 넣어 초기값을 설정해줌. 그리고 아래처럼 각 매개변수로 count를 넣어 실행되도록 함 ▼ 위 코드에서 아래처럼 더 간략하게 표현 가능 .. [코드숨] 리액트 13기 - git hub 참고(fork, add) clone 전 fork 시키기 0 코드숨 깃허브에서 fork를 눌러서 초록버튼눌러 생성 기존 코드숨 폴더 clone 받고 적용시키기 1 git clone https://github.com/hyeji07/react-week1-assignment-1.git =>내 깃허브 클론된 주소(위에서 fork해서 만든 레퍼지토리에서 code 초록버튼 누르면 알수있음) 2 cd 생성파일이름 3 원격저장소 목록 확인 git remote 4 git remote add upstream https://github.com/CodeSoom/react-week1-assignment-1.git =>뒤에는 코드숨 깃허브 주소 5 git fetch upstream ㅡ 6 $ git remote -v 저장소가 잘 설정되었는지 먼저 확인 이.. [코드숨] 리액트 13기 -1강/JSX(Babel) DSL (Domain Specific Language) 도메인 특화 언어(Domain-specific language)는 특정한 도메인을 적용하는데 특화된 컴퓨터 언어이다. 지난번 강의는 자바스크립트 특화된 언어로 작성한것 BABEL 바벨 바벨은 ECMAScript2015 이상의 코드를 적당한 하위 버전으로 바꾸는 것이 주된 역할이다. https://babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 1. npm i -D babel-loader 터미널에 작성 webpack 에서 바벨을 사용할 수 있도록 도와주는 것 2. webpack.config.. 이전 1 2 3 4 5 다음
