우리는 Calisthenics 입니다!

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

Redux-Toolkit에서 createSlice 함수를 제공해줍니다. 기존 Redux에서 action, reducer, state를 하나의 함수에서 관리하도록 해주는 함수입니다. 오늘은, createSlice에서 reducer를 정의하고 reducer에서 인자로 받는 action.payload를 커스터마이징 해주는 법에 대해서 포스팅 해보려 합니다😀 현재 사용자가 로그인 해있는 지를 확인하고 이에 따라 state를 변경해주는 loadUser라는 reducer를 정의해봅시다. getToken(local storage에 JWT가 있는지 확인하는 함수)을 불러와서 토큰 존재 여부를 확인하고 이에 따라 state.isAuthenticated를 변경해줄 예정입니다. const authSlice = createS..

회원정보 수정, 회원가입 과정에서 닉네임 중복 체크를 해줘야 합니다. 이를 위해 react-redux-toolkit의 createSlice와 createAsyncThunk를 활용하여 axios 요청을 처리하고 이후 결과에 따라 state.isNicknameChecked의 state를 바꿔주려고 했습니다. 하지만, state가 바뀌지 않고 에러가 나는 상황이 발생했습니다. [에러] Assignment to property of function parameter 'state'라는 에러가 발생하였습니다. [해결과정] 1. 구글링을 통해서 찾아보려 했지만, 마땅한 결과가 나오지 않아 console.log로 state가 잘 들어오는 지 먼저 체크를 해주었습니다. 일반적인 JS 객체가아닌 Proxy 객체가 출력이 ..

대부분의 웹사이트에서 사용자는 비밀번호를 수정하거나, 로그인을 한 경우에 메인화면으로 자동으로 이동하게 되어집니다. 항상 좋은 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..

웹사이트를 개발하다보면 사용자들이 가장 많이 사용하는 것은 페이지 맨 위에 있는 navbar라고 할 수 있습니다. 오늘은 이 navbar를 만드는 과정에서 position: fixed를 부여했을 때, 그 밑에 있는 div의 내용이 겹쳐 보이는 상황을 해결하는 방법을 알려드리려고 합니다! 문제 해결방법 결과

프로젝트를 시작하는 단계에서 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..