🎯 Achievement Goals

Next.js
Redux

👉 Solo Day 1일차

H.A 테스트시험이 끝나고 약 3일간의 자기 주도 학습시간을 가진다. 나는 예전부터 솔로데이때 할 것을 미리 계획해놓았다.

그것은 바로 Next.js와 Redux 였다!!! 하지만 React도 기본 개념만 아는 내가 바로 Next부터 배우는게 맞는건가 싶다 ㅜㅜ

일단 나는 풀스택으로 SNS 구현하기 강의를 인프런에서 8만원 짜리 강의를 아낌없이 질렀다.

그리고 맛보기로 Next랑 Redux 공부하다가 다음 솔로데이때는 백엔드를 마무리 지으면 될 것 같다.

👉 오늘 배운 것

$ npm i next@9 // 넥스트 9버전 다운

$ npm i prop-types // propTypes는 안정성을 높힌다.

$ npm i eslint -D // 대문자인 이유는 개발용으로만 쓰인다는 뜻이다.

$ npm i eslint-plugin-import -D

$ npm i eslint-plugin-react -D // 개발할 때 코드 점검 개념

$ npm i eslint-plugin-react-hooks -D // 여러 사람이 코드를 해도 한 사람이 코드를 한 것 처럼 보이게 해준다.

$ npm i next-redux-wrapper // 리덕스를 간편하게 해주는 라이브러리

$ npm i redux // 리덕스 설치

기본 셋팅은 위와 같다.

한 번에 많은 내용을 들어서 그런지 정리가 절실해서 급하게 블로깅을 하게 되었다.

Redux 기본 구조는 아래 형태와 비슷했다.

// (코드 생략..)

// action
// const changeNickname = {
//     type: "CHANGE_NICKNAME",
//     data: 'boogieLee'
// }

// action creator, 함수를 만들어서 액션을 여러번 만드는 수고를 덜어준다.
const changeNickname = (data) => {
    return { 
        type: 'CHANGE_NICKNAME',
        data,
    }
};
changeNickname('boogieLee');
/* 아래 형태로 나옴
{
    type: "CHANGE_NICKNAME",
    data: 'boogieLee',
}
*/
// 그때 그때 만들어서 디스패치를 해준다.
store.dispatch(changeNickname('hiLee'))

import React, { useCallback, useState, useRef } from 'react';
import { Form, Input, Button } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { addPost } from '../reducers/post';

const PostForm = () => {
    const { imagePaths } = useSelector((state) => state.post);
    const dispatch = useDispatch();
    // 실제 DOM에 접근하기 위해 Ref를 사용한다.
    const imageInput = useRef();
    const [text, setText] = useState('');
    const onChangeText = useCallback((e) => {
        setText(e.target.value);
    }, []);

    const onSubmit = useCallback(() => {
        //ADD_POST 실행
        dispatch(addPost)
        setText('');
    }, []);

// 코드 생략..

그리고 내가 배웠던 객체 구조분해 할당을 자주 써서 신기했다.

//(코드 생략..)

// 이전 스테이트와 액션을 받아서 다음 스테이트를 돌려주는 함수
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "LOG_IN":
            return {                
                ...state,
                isLoggedIn: true,
                me: action.data,
            };
        case "LOG_OUT":
            return {                
                ...state,
                isLoggedIn: false,
                me: null,
            };
        default: 
        return state;
    }
};

export default reducer;

아직 서버가 구축되어 있지 않기 때문에 임시로 더미데이터도 만들어 보았다.

import React, { useState } from 'react';

const AppLayout = ({ children }) => {
    // 로그인을 하기 위한 가짜 데이터 생성(useState)
    const [isLoggedIn, setIsLoggedIn] = useState(false);

...
// 임시로 프롭스 형태로 넘겨주었음
/* 로그인이 되어있다면 프로필, 아니라면 form을 보여준다 */
{isLoggedIn ? <UserProfile setIsLoggedIn={setIsLoggedIn} /> : <LoginForm setIsLoggedIn={setIsLoggedIn} />}

// 프롭스타입
function LoginForm({ setIsLoggedIn }) {
    const [id, onChangeId] = useInput('');
    const [password, onChangePassword] = useInput('');

const onSubmitForm = useCallback(() => {
        console.log(id, password);
        setIsLoggedIn(true);
    }, [id, password])
...
}

LoginForm.propTypes = {
    setIsLoggedIn: PropTypes.func.isRequired,
};

더미데이터 중에서 일부이지만 더미데이터를 만들어서 로그인해보는 과정이 매우 신기했다!

import { useSeleltor } from 'react-redux';

위 코드는 리액트와 리덕스를 연결해준다.

그리고 Redux를 통해서 임시로 아이디를 만들고 로그인 로그아웃도 해보면서 아이디 형태가 어떻게 나오는지 Redux 개발자도구에서도 확인해 보았다.

브라우저 개발자 도구랑 연동을 시켜주는 코드이다.

import { composeWithDevtools } from 'redux-devtools-extension';

$ npm i redux-devtools-extension

import React from 'react'

function hello() {
    return (
        <div>
            
        </div>
    )
}

export default hello

리액트의 기본적인 틀은 이러했다.

여기서 다른 컴포넌트와 연결을 해주려면 아래 예시 코드처럼 추가해줘야한다.

import LoginForm from '../components/LoginForm'; 

🙌 느낀점

갑자기 넥스트와 리덕스를 배워서 정리가 안된 기분이지만 제대로 배워보고 싶다는 생각이 들었다! 자료구조를 공부하다가 리액트 리덕스를 공부해서 그런지… 매우 재밌게 느껴졌다. 빨리 학습하고 싶은 욕구가 생겼다!!

👊 내일의 TIW(today I Will)

자기소개 준비

← Previous Post Next Post →

Solo Day - 1일차

📅 TIL #45

🎯 Achievement Goals

👉 Solo Day 1일차

👉 오늘 배운 것

🙌 느낀점