본문 바로가기

분류 전체보기140

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 29회차 미션 componentDidCatch 메서드 componentDidCatch 라는 생명주기 메서드를 사용해서 react application에서 발생하는 에러를 처리해본다. 이 기능은 함수형 컴포넌트에서 구현할 수 없는 기능이어서 class형 컴포넌트에서 사용가능하다. 새로운 project를 만들어준다. #npx create-react-app error-catch 그리고 User 컴포넌트를 만들어준다 // User.js import React from 'react'; function User({user}){ return( ID : {user.id} Username : {user.username} ) } export default User; 해당 컴포넌트에서는 user라는 객체를 받아오고 return에서 use.. 2020. 10. 5.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 28회차 미션 class 형 컴포넌트의 state와 setState 이번에는 counter 컴포넌트를 class 컴포넌트로 만들어본다. counter.js 를 열어 주석 처리해 주거나 지운다. // Counter.js import React, { Component } from 'react'; class Counter extends Component{ render(){ return ( 0 +1 -1 ); } } export default Counter; Component를 import 해주고 마찬가지로 render를 사용해서 return 해준다. 그리고 index.js를 열어 Counter를 불러와주고 렌더링 시켜본다. 물론 지금은 작동하지 않는다. 값이 바뀌게 하기 위해서는 state를 사용해야 하는데 그전에 comp.. 2020. 10. 4.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 27회차 미션 리듀서 immer 로 구현하기. CREATE_USER, TOGGLE_USER, REMOVE_USER 액션들에 대해 immer를 사용해서 구현해 줄 것이다. immer를 사용한다고 해서 무조건 코드가 깔끔해지는 것은 아니다. . . // App.js case 'CREATE_USER': return produce(state, draft =>{ draft.users.push(action.user) }); case 'TOGGLE_USER': return produce(state, draft =>{ const user = draft.users.find(user => user.id === action.id); user.active = !user.active; }) // return{ // ...state, // u.. 2020. 10. 3.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 26회차 미션 UserDispatch Context 만들기 우선 App 컴포넌트를 연다. 우리는 Context API를 사용해서 어떤 값을 UserList안에 있는 User컴포넌트에 직접 넣어 줄것이다. onToggle과 onRemove를 User컴포넌트에 주기위해 UserList를 거쳐야한다는 번거로움이 있었다. 이것을 해결하기 위해 context를 통해 onToggle, onRemove를 직접 넣어줄 수 있지만, 그 대신 dispatch만 따로 넣어주는 방법도 있다. 우선 최상단에서 createContext를 불러와주고, App컴포넌트 위에서 export const UserDispatch = createContext(null) 기본값은 필요 없으므로 null을 넣어준다. 그리고 UserDispatch 안에 Prov.. 2020. 10. 2.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 25회차 미션 Custom Hook 컴포넌트를 만들다 보면 가끔씩 반복되는 로직들이 발생한다 예를들어 const onChange = (e) => { const {name, value} = e.target; setInputs({...inputs, [name] : value}); } 이런 input을 관리하는 코드는 꽤나 자주 작성하게 될 수 있는 코드이다. 왜냐면 input을 관리하려면 e.target에 있는 name, value를 읽어서 참조하여 새로운 상태를 설정해야하기 때문이다. 이런 경우에는 custom hook을 만들어서 사용할 수 있다. 만드는 방법은 간단하다. react에 내장되어있는 useEffect, useState, useReducer 같은 Hook을 사용해서 원하는 기능을 구현하고 컴포넌트에서 사용하.. 2020. 10. 1.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션 UseReducer 이전에는 우리가 컴포넌트의 상태를 업데이트할 때는 useState를 사용해서 새로운 상태를 설정해줬는데 useReducer를 사용해서도 상태를 업데이트 해줄 수 있다. 어떤 차이가 있냐면 useState에서는 설정하고 싶은 다음 상태를 직접 지정해주며 상태를 업데이트 하는 반면 setValue(5); useReducer는 Action이라는 객체를 기반으로 상태를 업데이트 한다. 여기서 액션 객체라는것은 업데이트할 때 참조하는 객체인데, dispatch({type: 'INCERMENT'}); type이라는 값을 사용해서 어떤 업데이트를 진행할 지 명시할 수 있고 업데이트 할 때 필요한 참조하고 싶은 다른 값이 있다면 dispatch({type: 'INCERMENT',diff: 4}); .. 2020. 9. 30.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 23회차 미션 useCallback Hook 이전에 만들었던 함수를 새로 만들지 않고 재사용하는 방법을 알아보도록한다. App.js 컴포넌트에 구현 했었던 onRemove, onToggle, onCreate 등을 보면 컴포넌트가 매번 리렌더링 될 때마다 새로운 함수를 만든다. 그런데 이렇게 함수를 새로 만드는것 자체가 메모리나 cpu를 많이 사용하지 않아서 부하를 일으키지는 않지만, 한번 만든 함수를 재사용할 수 있으면 재사용하는것이 좋다. 우리가 나중에 CreateUser나 UserList 컴포넌트들이 props가 바뀌지 않았다면 virtual DOM에 하는 리렌더링 조차 안하게끔 만들어 줄 수 있다. 그냥 이전에 만들어 놨던 결과물을 재사용 할 수 있게 만들 수 있다. 우리가 useMemo를 통해 countActi.. 2020. 9. 29.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 22회차 미션 useEffect Hook 이 함수는 우리가 만든 react 컴포넌트가 처음 화면에 나타낼때나 사라질때 특정 작업을 할 수 있다. 추가적으로 컴포넌트에 어떤 props나 상태가 바뀌어서 업데이트 될 때, 업데이트 되기 전에도 어떤 작업을 할 수 있고, 리렌더링 될 때마다 작업을 등록할 수도 있다. /* UserList.js */ import React,{ useEffect } from 'react'; function User({user, onRemove, onToggle}){ const {username, email, id, active} = user; useEffect(() => { console.log('컴포넌트가 화면에 나타남'); }, []); . . . 컴포넌트가 mount , unmount 된.. 2020. 9. 28.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 21회차 미션 배열에 항목 제거하기 우선 UserList 컴포넌트를 수정한다. /* UserList */ . . function UserList({users, onRemove}){ . . UserList function에 onRemove라는 props를 받아와주고 이것을 user컴포넌트에 전달해준다. /* UserList.js */ users.map( user => () ) 전달을 해 줬으니 이제 user컴포넌트에서 받아와야한다. /* UserList.js */ . . function User({user, onRemove}){ . . 구리고 user컴포넌트 내부에 삭제버튼을 하나 생성해주도록 한다. return( {user.username}({user.email}) 삭제 ) 삭제 버튼이 눌렸을때 onRemove가 호출.. 2020. 9. 27.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 20회차 미션 useRef로 컴포넌트 안의 변수만들기 useRef를 사용해서 컴포넌트 안의 변수를 만들것이다. 여기서 말하는 변수는 예를들어 컴포넌트 내부에서 let키워드를 사용하여 변수를 선언한다고 가정할 때 다음 리렌더링 때는 이 변수값이 초기화된다. 유지를 위해서는 useState를 사용해야하는데 이것은 상태가 바뀌게되면 컴포넌트가 리렌더링된다. 하지만 우리는 값을 바꿨을때 굳이 리렌더링할 필요없는 경우가 있다. 그럴때 useRef를 사용해서 컴포넌트가 리렌더링 될 때마다 계속 기억해야할 값을 관리할 때도 사용할 수 있다. 주로 setTimeout이나 setInterval을 사용할 때 주어지는 id값을 기억해야할 때나 외부라이브러리를 사용해서 생성된 인스턴스를 담을때도 사용하고, scroll위치를 알아야할 때 등.. 2020. 9. 26.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 19회차 미션 userRef 로 특정 DOM선택 html과 js를 사용할 때는 특정 DOM을 선택해야하는 상황에 getElementById, querySelector 같은 DOM selector 를 사용한다. React를 사용하는 프로젝트에서도 DOM을 직접 선택해야하는 상황이 발생 할 수 있다. 예를 들어 scrollbar 위치를 가져와서 설정해줘야 하거나 , focus 를 설정해야한다는지 등 다양한 상황들이있다. 추가로 video.js jwplayer같은 html5비디오 관련 라이브러리나 그래프관련 라이브러리 등을 사용할 때도 특정 DOM에 라이브러리를 적용해야 하기 때문에 DOM을 선택해야하는 상황이 발생할 수 있다. 그럴때는 react에서는 ref를 사용하는데 함수형 컴포넌트에서는 useRef라는 hook함수를.. 2020. 9. 25.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 18회차 미션 input 상태 관리 src > InputTest.js 생성 /* InputTest.js */ import React from 'react'; function InputTest(){ return( 초기화 값 : Lorem ipsum ); } export default InputTest; onChange 함수를 생성 /* InputTest.js */ const onChange = (e) => { console.log(e.target); } . . . 파라미터 e는 수정이벤트가 발생했을 때 그 수정이벤트에 대한 내용이 담긴다. 이 파라미터 e로 받아온 event객체 내부의 properties중 하나인 target은 event가 전달한 객체에 대한 참조를 의미한다. 실제로 렌더링 된 페이지의 input Box.. 2020. 9. 24.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 17회차 미션 이제부터는 리액트 수업을 정리하여 업로드 할예정이다 React JSX 규칙 1. tag는 꼭 닫아야한다. 태그 사이에 별다른 값이 없는 경우 self closing tag 사용 가능 === 2. 2개 이상의 태그는 하나의 태그로 감싸져 있어야함. 로 감싸는 방법도 존재함. return ( ㅎㅇ ㅂㅇ ); //사용 불가. return ( ㅎㅇ ㅂㅇ ); === return ( ㅎㅇ ㅂㅇ ); --- JS값 출력JSX내부에서 javascript 값을 보여주고 싶을 때 변수를 {}로 감싸고 출력하면 된다. ``` function App() { const name = 'jiwon'; return ( {name} ㅂㅇ ); } ``` 스타일 지정style을 지정해 주고 싶을 때 기존 html 에서 style을 지.. 2020. 9. 23.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 16회차 미션 Async - Await async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function MDN 문서 제목의 async function을 보면 async가 function 앞에붙는 키워드인것을 눈치 챘을 것이다. async-await 자체가 promise 객체를 기반으로 하고 있다.먼저 .. 2020. 9. 22.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 15회차 미션 promise2 fulfilled 되거나 rejected 된 후에 최종적으로 실행할 것이 있다면, .filnally()를 설정하고, 함수를 인자로 넣는다. function p(){ return new Promise((resolve, reject) => { //pending setTimeout(() => { reject(new Error('bad')); //이후 fullfilled상태로 넘어감 }, 1000); }); } p() .then(message => { //일종의 콜백을 작성하는 공간이된다. console.log('1000ms 후에 fulfilled 된다.', message); }) .catch(error => { console.log('1000ms 후에 reject된다.', error); }) .. 2020. 9. 21.

티스토리툴바