분류 전체보기

NodeBird 복습/React

react nodeBird 1-6(Reducer 쪼개기 & PostForm 만들기)

Reducer들도 컴포넌트들처럼 쪼갤 수 있습니다. reducers 디렉토리 안에 분리시킬 post, user.js를 만들어주고, index.js에서 있던 initialState와 action들을 각 파일에 옮겨줍니다. 리듀서들도 옮겨서 적어주고, index.js에 분리시킨 리듀서들을 import 시켜줍니다. 리덕스에서는 분리시킨 리듀서들을 가져오려면 combineReducers을 사용하여 묶을 수 있고, const rootReducer = combineReducers({ user, post, }); 로 할 수 있지만, 추후 SSR(Server Side Rendering) 때문에 HYDRATE를 위해 index 항목을 추가해줍니다. 리듀서들을 combineReducers로 묶어주는 이유는 리듀서들은 함수..

NodeBird 복습/React

react nodeBird 1-5(Redux 적용시키기)

리덕스(Redux)란? 여러 컴포넌들에서 쓰이는 공통적인 데이터들을 따로따로 흩어져있습니다. 컴포넌트가 분리되어있으면 데이터들이 흩어져 있어야하고, 그런 데이터들이 흩어지지않게 하고 싶으면 부모 컴포넌트를 이용하여 자식 컴포넌트들에게 전달해줘야했습니다. 하지만, 매번 수동으로 부모컴포넌트를 만들고, 자식 컴포넌트에 데이터를 보내는 과정이 너무 번잡스럽기 때문에 데이터를 중앙에서 하나로 관리할 수 있게 도와주는 게 리덕스입니다. 리액트에 리덕스 붙이기 const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); 로 2번째 항목에 옵션 객체를 넣어줍니다. _app.js 파일에 고차 컴포넌트를 ..

NodeBird 복습/React

react nodeBird 1-4 (회원가입폼&커스텀 훅)

웹사이트에 회원가입을 할 수 있는 폼을 만듭니다. 기존에 만든 Form처럼 만들면 됩니다. 값이 바뀌는 코드(onChange)를 작성하다보면 id, nickname, password가 중복되는것을 볼 수 있습니다. 중복된 항목들은 따로 컴포넌트로 빼서 중복 코드를 하나의 함수로 만들어주는 커스텀 훅으로 변경할 수 있습니다. 커스텀 훅 만들기 hooks 디렉토리 안에 useInput이라는 파일을 만들어주고, 코드를 작성합니다. 함수 안에 중복되는 부분들을 적어준 뒤 return 값을 value와 handler로 받아줍니다. 위 코드대로 커스텀 훅을 작성하면 오류 메시지를 볼 수 있는데 위 캡쳐처럼 바꿔주시면 됩니다. 이유는 핫리로딩 해주는 라이브러리가 바껴서 그렇습니다. 마지막으로 onFinish에서 비밀..

NodeBird 복습/React

react nodeBird 1-3(styled-components)

return 안에 같은 태그 안에 {}(객체)안 CSS를 넣으면 안되는 이유는 리렌더링 되기 때문입니다. 렌더링은 처음엔 전체를 한번 렌더링되고, 리렌더링할 때 이전과 변경된 부분을 비교하여 변경된 객체가 있다면 변경된 항목만 다시 그려줍니다. 또한, 콘솔에서 {} === {}을 확인해보면 false로 나오는 것을 알 수 있습니다. 그래서 styled-components를 통해 이 부분을 막을 수 있습니다. 하지만, 성능에 문제가 되지 않는다면 쓰지 않아도 무방합니다. 사용방법은 간단합니다. const 변수명 = styled.선택자` color: red `; 코드를 작성하면 됩니다. 쓰고자하는 선택자를 styled. 뒤에 선택자를 써주면 되고, component 경우에는 styled(이안에) 괄호안에 써..

NodeBird 복습/React

react nodeBird 1-2(로그인폼 만들기)

NodeBird 왼쪽에 로그인 폼을 만들겁니다. 백엔드 없이 임시로 가상의 데이터(State)를 통해 작동이 잘되는지 확인할 수 있습니다. Component 디렉토리의 AppLayout.js의 가상의 데이터인 const [isLoggedIn, setIsLoggedIn] = useState(false); 를 만들고, { isLoggedIn ? : } 을통해 로그인 상태가되면 유저프로필이 나올 수 있게 코드를 작성합니다. 또한, 로그인폼에서 setIsLoggedIn을 사용할 수 있게 작성해줍니다. AppLayout의 setIsLoggedIn을 props로 받아오기 위해 const LoginForm = ({ setIsLoggedIn }) => {... 으로 안에 작성해줍니다. LoginForm에서 버튼을 su..

NodeBird 복습/React

react nodeBird 1-1(antd 이용하기)

AntDesign 기본적인 디자인을 사용하기 위해 오픈소스인 ant design을 이용합니다. https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design 설치방법은 터미널에 npm i antd를 통해 설치할 수 있습니다. antd를 통해 그리드 시스템도 설정할 수 있습니다. 모바일, 태블릿, 데스크탑 환경은 모두 다 각자 다르기 때문에 각 플랫폼 화면에 맞게 웹페이지를 나타낼 수 있는 기능을 지원합니다. 1. 구성할 때에는 크기가 작은것부터 시작해서 큰것 순으로 작업을 해야합니다. 이유는 데스크탑 환경부터 시작하면 브레이크포인트 설정이 힘들 수 있기 때문입니다. 2. 가로(Row)를 먼저 나눈뒤..

NodeBird 복습/React

Next.JS

1. Next.JS란 ? 리액트의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크. 과거 웹사이들도 SSR을 지원했기에 페이지가 여러개로 구성된 Multi Page Form방식을 사용했습니다. 하지만 스마트폰의 등장으로 인해 웹페이지들의 최적화에 대한 문제점이 나타나기 시작했습니다. 그래서, Angular, Vue, React 같은 프레임워크들이 생겨나기 시작했고, CSR(Client Server Rendering)이 가능한 SPA(Single Page Application)이 등장했습니다. 터미널에 아래 명령어를 통해 설치할 수 있습니다. npm i next 2. 핵심기능 1) 코드스플리팅 일반적인 리액트에서는 초기 렌더링 때 모든 컴포넌트들을 내려받습니다. ..

맑쇼
'분류 전체보기' 카테고리의 글 목록 (4 Page)