우리는 Calisthenics 입니다!

현재, homedong 웹사이트의 로직은 이렇습니다. 사용자 로그인 -> 로그인 성공 후 메인페이지 이동 -> 회원 정보 불러오는 api 요청 -> 회원 정보 state에 저장 정상적으로 작동이 되면, 메인페이지로 이동됨과 동시에 회원정보까지 redux state에 저장이 되어여 합니다. 하지만, 문제가 발생했습니다😥 회원정보를 불러오는 api 요청시 사용자의 JWT 토큰이 request header에 담겨야 합니다. 하지만, header에 담기지 않고 페이지 새로고침을 해줘야만 api header에 토큰이 담기는 로직이 실행되는 것을 확인할 수 있었습니다. 맞습니다..😯 문제는 axios header에 토큰을 담아주는 로직이 있는 http-common.js 파일이 화면이 전체 렌더링 될때만 실행된다는 ..

대부분의 웹사이트에서 사용자는 비밀번호를 수정하거나, 로그인을 한 경우에 메인화면으로 자동으로 이동하게 되어집니다. 항상 좋은 UX를 위해, 특정한 action 이후에 필요한 페이지로 이동시켜줘야합니다. 그렇다면, 이러한 페이지 이동을 React로 어떻게 구현 할까요? 바로, react-router를 이용하면 됩니다. 저도 공식문서를 참고해서 방법을 찾았습니다. React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com React 16.8이상 버전부터 사용가능한 useHistory hook을 이용해서 간편하게 페이지 이동을 할 수 있습니다. [예시 코드] import { useHistory } from "re..

프로젝트를 시작하는 단계에서 frontend 전체적으로 css 리셋을 진행해줘야한다. reset을 해주는 이유 - 사용자들은 특정 브라우저만 사용하는 것이 아니고 다양한 브라우저를 사용합니다. - 각 브라우저에서 제공하는 스타일들은 표준화 되어 있지 않아 각 브라우저마다 출력해주는 모양이 다를 수 있습니다. - 개발 단계에서 의도했던 대로 모든 사용자의 화면에서 동일하게 출력해주기 위해 초기화(reset)을 해야합니다. styled-components를 활용한 css 리셋 react에서 style을 적용하기위해 자주 사용되고 이번 프로젝트에서 사용하게 될 styled-components를 활용하여 css리셋을 해보겠습니다. 1. GlobalStyles.js 생성 후 reset 코드 작성 import re..

React에서 컴포넌트를 스타일링해주는 방법은 여러 가지가 있습니다. 1. css파일을 생성해서 import해서 className으로 적용한 스타일링 방식 2. 1번의 방법으로는 global로 css가 적용이 되므로, module 방식을 이용한 스타일링 방식 3. styled-components를 이용한 스타일링 4. React UI Framework인 element-UI를 기본적으로 활용하고, 제공되는 컴포넌트를 makeStyles()를 활용하여 커스터마이징 해주는 스타일링 방식 이번 프로젝트에서는 3번과 4번을 골고루 사용할 예정입니다 (*추후 해당 방법 선택 이유 포스팅 예정) 오늘은 3번 방식인 styled-components를 활용해서 React 컴포넌트를 스타일링해주는 방식을 포스팅하겠습니다...

이번 포스트는 React로 프로젝트를 할 때 자주 쓰이는 폴더와 이에 대한 설명을 해보려고 합니다. *기본적으로, 이번 프로젝트는 react-redux-toolkit 공식홈페이지에서 strongly recommended하는 폴더 구조로 이에 맞게 폴더 구조를 설정해보았습니다. 1. public React는 가상 DOM을 활용하여 변경된 부분만 Rendering 해주는 것이 핵심인 Library입니다. 이를 위해서는 실제로 DOM이 필요한데, 이는 index.html 파일로 public 폴더에 위치하고 있습니다. 아래부터는 src 폴더 내부의 폴더들이므로, 해당 내용 참고 하여 읽어주시면 감사하겠습니다😀 src 폴더 -> 대부분의 개발이 이루어지는 폴더로, 대부분의 코드는 해당 폴더에 작성이 되는 곳 2...

React에 대한 기본적인 문법과 팁에 대해서 정리해보았습니다😀😀 state를 변경하려고 하면 무조건 setState를 사용해서 변경해주어야함 이유: state 값에 변경이 생긴다면 이 값을 토대로 render()를 호출해줘야 하는데 setState를 사용하면 React에서 자동으로 render function을 호출해줌 setState를 사용할 때 state안에 default값들을 선언할 필요는 없다. class App extends React.Component{ state = { isLoading: false, }; componentDidMount() { setTimeout(() => { this.setState({ isLoading:true, book:true }) }, 3000); } state가..

React에서 Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해주는 기능입니다. 기존에 class 형식의 component를 사용해야 state를 내부적으로 관리하고 사용할 수 있던 것에서 Hook을 사용하면 function component에서도 state를 사용할 수 있게 되었습니다. 오늘은 Hook에서 많이 사용되는 useState를 사용하여 작성해본 custom Hook을 소개하려고 합니다. 1. 기본적인 useState import React, { useState } from "react"; import "./styles.css"; export default function App() { // (1)이라는 초기 값을 item에 입력 const [i..