성연커밋 : )

완성 사진 App.js - import React, { useState, useRef, useCallback } from 'react'; import TodoTemplate from './TodoTemplate'; import TodoInsert from './TodoInsert'; import TodoList from './TodoList'; const App = () => { const [todos, setTodos] = useState([ { id: 1, text: '리액트의 기초 알아보기', checked: true, }, { id: 2, text: '컴포넌트 스타일링해 보기', checked: true, }, { id: 3, text: '일정 관리 앱 만들어 보기', checked: false,..

Module not found: Can't resolve 'react-icons/md' in 'C:\Users\lg\Desktop\project\todo-app\src' 이러한 에러가 떴다. react-icons 패키지 설치가 필요했던 것..! npm install react-icons --save https://react-icons.github.io/react-icons 여기에도 설치하라는 문구가 잘 나와있다. 리액트를 다루는 기술 책에는 나와있지 않음!!

sass를 설치하기 위해 yarn add node-sass@4.14.1를 설치해주었다. 책 리액트를 다루는 기술에선 뒤에 버전을 명시해주었지만, 버전을 명시해주어 설치하니 아래와 같은 에러가 떴다. gyp ERR! node -v v16.0.0 gyp ERR! node-gyp -v v3.8.0 인터넷을 찾아보니 노드의 버전이 16이라서 안되는 것 같았다. yarn add node-sass 를 하면 설치가 되나, 실행할때 위와 같은 에러가 뜰것이다. ./src/SassComponent.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-load/cjs.js??ref--5-oneOf-6-1!./node_modu..

책 '리액트를 다루는 기술' 230p부터 설명해주는 sass-loader 설정을 커스터마이징 해주는 부분에서, yarn eject를 하여 config라는 디렉터리가 생겼다. 해당 디렉터리 안에 webpack.config.js 에서 sassRegex라는 키워드를 찾아 약간을 수정해주었다. { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }).concat({ loader: require.resolve("sass-loader"), options: { sassOptions: { inclu..

Hooks는 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 할 수 있는 useEffect등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있다. useState - 가장 기본적인 Hooks - 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해준다. useState 함수는 하나의 상태 값만 관리할 수 있음 컴포넌트에서 관리해야 할 상태가 여러개일땐? useState도 여러번 사용하자! useEffect - 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행되도록 설정할 수 있는 Hook 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 무방 - 렌더링되고 난 직후마다 실행되며,..

2년전인 2019년 학교 대면수업을 들을 때, 교수님께서 한국정보통신보안윤리학회에서 주최한 4차산업인재양성 공모전에 관심이 있는 사람은 지원해보길 바란다며 설명해주셨다. 19년, 20년도 두번 다 아이디어 공모전에 아이디어를 제출하였다. 19년도는 ' 내 손 안의 OS' 라는 아이디어였으나, 이때는 준비를 많이 못하고 제출하여, 수상하지 못했다. 20년도는 'IOT를 이용한 무면허운전 해결방안' 으로 혼자서 아이디어를 기획하고, ppt를 만들면서 장려상을 수상할 수 있었다. 올해도 역시, 링크 단톡방에서 교수님께서 알려주셨다. 회사를 다니느라, 학교를 못가 기회가 없을뻔 했는데, 비대면으로 인해 정보를 받을 수 있어서 좋았다. 4차산업과 연관지어 아이디어를 생각해보았다. 최근 멋사 해커톤을 준비하기 전,..

라이프사이클 메소드는 모든 리액트 컴포넌트에 존재한다. 컴포넌트의 수명은 페이지에서 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 라이프사이클 메소드 종류 -Will : 어떤 작업을 작동하기 전에 실행 -Did: 어떤 작업을 작동한 후에 실행 마운트 -DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트 -props가 바뀔때 -state가 바뀔때 -부모 컴포넌트가 리렌더링될 때 -this.forceUpdate가 강제로 렌더링을 트리거할 때 언마운트 -마운트의 반대 과정으로, 컴포넌트를 DOM에서 제거하는 것 redner()함수 -컴포넌트 모양새 정의 -필수 메소드 constructor() 메서드 - 컴포넌트의 생성자 메소드로 컴포넌트를 만들 때 처음으로 실행 - 초기 state를 정할 수..

ref는 DOM을 꼭 직접적으로 건드려야할 때 사용한다. 즉, 컴포넌트 내부에서 DOM에 직접 접근해야할 때 ! ex ) class App extends Component { render() { return ( this.scrollBox=ref}/> this.scrollBox.scrollToBottom()}> 맨 밑으로 ) } } ScollBox 컴포넌트 태그 내부에 작성한ref는 ScrollBox컴포넌트 내부에서 작성한 class ScrollBox extends Component { scrollToBottom = () => { const { scrollHeight, clientHeight } = this.box; this.box.scrollTop = scrollHeight - clientHeight; ..

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. 컴포넌트에 state값을 설정할때는 constructor 메서드를 작성하여 설정한다. constructor(props) { super(props); this.state = { number: 0, }; } 컴포넌트의 생성자 메서드로, 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해주어야함. 함수가 호출 시, 클래스형 컴포넌트가 상속받고 있는 리액트의 컴포넌트 클래스가 지닌 생성자 함수 호출.. this.state에 초기값 설정. 컴포넌트 state는 객체형식..

propTypes는 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용한다. propTypes를 지정하는 방법은 defaulProp를 설정하는 것과 유사. import PropTypes from "prop-types"; 위의 코드를 import해주고 , MyComponent.prototype = { name: PropTypes.string, favoriteNumber: PropTypes.number.isRequired }; 컴포넌트 함수 하단에 이렇게 작성하면, name은 string형태로 전달해야하며, favoriteNumber은 isRequired를 사용하였기 때문에 필수 속성을 뜻한다. 아니라면 콘솔창에 에러가 뜰 것임. (나는 왜 안뜨는가.. 책은 뜬다했는데.. 하지만 필수..