본문 바로가기

fastcampus51

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 36회차 미션 styled-components로 재사용성 높은 버튼 만들기 components 디렉터리 아래에 Button이라는 컴포넌트를 생성해 준다. import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` /* 공통 스타일*/ display: inline-flex; outline: none; border: none; border-radius: 4px; color: white; font-weight: bold; cursor: pointer; padding-left: 1rem; padding-right: 1rem; /* 크기 */ height: 2.25rem; font-size: 1rem; .. 2020. 10. 12.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 35회차 미션 CSS modules react project에서 컴포넌트를 스타일링할 때 CSS MODULE을 사용하면 css class이름이 중복되는 것을 완벽하게 방지할 수 있다. css파일이름을 .module.css 로 끝내면된다. 예를들어 Box.module.css 를 만들고 이를 사용할 때 import styels from "./Box.module.css" 로 불러 오게되고 고유화가 된다. 그래서 fucntion Box(){ return {styles.Box}; } 이런식으로 고유화가 되어 이름이 나타나게된다. 이럴때 유용 레거시 프로젝트에 리액트르 도입 할 때 CSS 클래스 네이밍 규칙 만들기 귀찮을 때 우선 새로운 프로젝트를 생성해 준다. $npx create-react-app styling-cssmodu.. 2020. 10. 11.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 34회차 미션 outline, fullWidth props 설정 이전에 작업하던 프로젝트를 사용하여 Button 컴포넌트의 props로 outline과 fullWidth를 넣어준다 이 값들이 true, false 인지에 따라 조건부로 스타일이 들어갈 수 있게 버튼 className안에는 객체로 추가해준다. 이 값이 True라면 outline이라는 값이 들어가게되고 false라면 outline이 안들어가게 된다. 이에대한 defaultProps는 따로 설정하지 않아도 된다. 만약 값이 없다면 undefined가 되고 undefined라면 className에서 처리하지 않기 때문이다. //Button.js import React from "react"; import classNames from "classnames"; i.. 2020. 10. 10.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 33회차 미션 우리가 만든 버튼 컴포넌트에 다양한 옵션을 주는 방법을 알아본다. 다양한 버튼 사이즈 Button 컴포넌트에 size라는 props를 만들어준다. large,medium, small 이 3가지 옵션을 주고 기본값은 medium이 되도록 해 줄 것이다. className을 설정할 것인데. className을 효율적으로 설정해주기위해 {}내에 배열을 하나 주고 'Button' 과 size를 join(' ')으로 감싸준다. 이렇게하면 Button 과 size (large, medium, small 중 하나) 가 Button medium 이런식으로 들어가게 된다. 템플릿 리터럴을 사용해서 구현할 수도 있다. return {children}; 앞으로 여러 props를 받아올 것이기 때문에 하나하나 class로 넣.. 2020. 10. 9.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 32회차 미션 리액트 컴포넌트 스타일링 리액트에서 컴포넌트를 스타일링 할 때는 다양한 기술들이 사용될 수 있다. 가장 기본적인 방법은 import './App.css'; css 파일을 만들어서 컴포넌트에서 import해서 사용하는 것이다. create-react로 만든 project 는 기본적으로 이 방법을 사용한다. 이 방법은 어떤 사람들에게는 편리할 수 있겠지만 컴포넌트를 스타일링할 때 다른 도구들을 사용하면 더 편리하게 이용할 수 있다. 이 튜토리얼에서는 Sass 라는 css 프리 컴파일러에 대해 알아 보고, css dodules 이라는 우리가 작성한 class name에 대한 고유 이름이 만들어지는 기술과 styled componenets 라는 것을 이용해서 javascript 안에 컴포넌트의 스타일을 선언할 .. 2020. 10. 8.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 31회차 미션 ESLint 설정 커스텀 package.json 에 있는 eslintConfig react-app을 통해서 react-app에 필요한 대부분의 규칙들이 적용 되어있다. 이것 처럼 다른 config package들이 있다 대표적으로 eslint-config-airbnb, eslint-config-google, eslint-config-standard 등 자주 사용되는 규칙들이 묶여진 상태로 라이브러리가 존재한다. 주로 react 프로젝트에서는 eslint-config-airbnb가 많이 사용된다. 일단 이런 라이브러리를 리액트 프로젝트에 적용하기 위해서는 라이브러리를 설치해야 한다. yarn add eslint-config-airbnb 로 설치를 하고 "eslintConfig":{ "extends": [".. 2020. 10. 7.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 30회차 미션 Prettier 여기까지 리액트에 기초에 해당하는 내용들에 대해 학습했다. 이제 컴포넌트를 스타일링하는 방법과 API를 연동하는 방법, 라우터나 상태관리 라이브러리를 적용하는 방법등이 남아있다. 이제 리액트 개발을 할 때 개발을 좀 더 수월하게 할 수 있게 도와주는 것들에 대해서 알아볼 것이다. Prettier는 자동으로 코드의 스타일을 관리해주는 도구이다. 예를들어 문자열을 사용할 때 작은따옴표를 사용할지 큰따옴표를 사용할지 또는 코드 뒤에 ;을 붙일지, 들여쓰기는 얼마나할지 등을 관리해 줄 수 있다. 이 도구의 특징은 코드의 스타일을 우리 마음대로 커스터마이징 할 수 있다는 것이다. 그리고 이 도구는 자바스크립트 뿐만아니라 HTML,CSS 스타일등을 관리할 수 있고, 리액트,앵귤러, 뷰 등도 지원해준.. 2020. 10. 6.
[패스트캠퍼스 수강 후기] 프론트엔드 인강 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.

티스토리툴바