뇌 채우기 공간

WEEK1 자바스크립트 기본 변수와 상수 자료형 객체 함수 프로토타입 컴포넌트 쪼개기 메인페이지 만들기 최소단위 컴포넌트 만들기 로그인, 회원가입, 포스트 페이지 만들기 WEEK2 (다시 공부) 프라미스 콜백 토큰 기반 인증 OAuth2.0 JWT 웹저장소 , 토큰 로그인하기 - 헤더 분기하고 리덕스 설치 유저 모듈 만들기 리덕스 스토어 만들기 1. 내가 어떤 분야의 도메인에서 개발을 하고 싶은가? 오늘은 주특기 리액트 심화 과정 시작날이었다. 강의를 듣고 있는데 어제 들었던 김병욱님의 강연 중에서 공부를 하면서 나중에 프로젝트로 만들어보고 싶은 것을 미리 구상해놓고 그 프로젝트에 필요한게 있으면 써먹고 그런식으로 빠르게 프로젝트를 만들었다는 말씀이 자꾸 귀에 맴돌았다. 나는 어떤 서비스를 만들고 싶은가..

최소단위 컴포넌트 만들기 1. 컴포넌트를 이루는 요소를 만들자 - Grid 잡기 styled-components 설치 yarn add styled-components Grid잡기 elements 폴더에 만들어준다. (1) props로 받아온 값이 없을때 기본값 설정 (2) styled-component지정 (3) 받아오기 Grid의 props에서부터 is_flex, width, ..등등으로 받아온다. 그리고 그 중 style에 관련된 값을 styles라는 변수에 가져온다. 그리고 GridBox한테 styles내용을 넘겨준다. 그리고 Grid안에 내용들이 보여야하기 때문에 children을 받아온다 코드보기 더보기 import React from "react"; import styled from "styl..

컴포넌트 쪼개기 너무 작게 쪼개면 만들기 힘들고, 너무 크게 쪼개면 재활용이 힘들다. 이 강의에서는 큰 것에서 작은것으로 쪼개기 페이지마다 공통으로 사용하는 부분이 있다. 그것을 컴포넌트로 빼준다. 폴더 구조 잡기 src elements : 최소 단위 컴포넌트 components: 중간 단위 컴포넌트 pages: 가장 큰 단위의 컴포넌트 redux : 리덕스 모듈과 스토어 shared : 공용으로 사용할 코드 . App.js, firebase.js 같은 것 App.js는 shared폴더 아래로 옮겨주고 index.js에서 경로를 바꿔준다. import App from './shared/App'; 1. 페이지 만들기 (1) pages/PostList.js 가장 큰 단위의 페이지. 메인으로 보여줄 페이지인데..

{토글리스트의 title} {토글리스트의 content}

node install 하기 nvm install [node version] nvm use [node version] yarn 설치 npm install -g yarn create-react-app설치 yarn add global creat-react-app CRA로 프로젝트 생성 yarn create react-app image-community Redux devTools React developer Tools

input 상태 관리하기 이렇게 input에다가 값을 넣으면 밑에 바로 값이 뜨고 초기화를 누르면 input안에 있는 값이 없어지도록 해보자 InputSample.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import React, { useState } from 'react'; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); }; const onReset = () => { setText(''); }; return ( 초기화 값: {text} ); } export defau..

Counter.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; cs 이 부분에서 number는 변수명 setNumber는 함수명이다. useState에는 초기값을 넣어준다. 즉 num..

조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( ) } export default App; Colored by Color Scripter cs Hello.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { isS..

props 를 통해 컴포넌트에게 값 전달하기 App.js 1 2 3 4 5 6 7 8 9 10 import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; cs Hello.js 1 2 3 4 5 6 7 import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; cs App.js에서 Hello컴포넌트한테 name이라는 변수로 react라는 값을 넘겨준다. 그러면 Hello의 props로 {name: "react"}의 형태로 값이 넘어온다. 그래서 Hello컴..

보호되어 있는 글입니다.