티스토리

JH 기술 블로그
검색하기

블로그 홈

JH 기술 블로그

humor12.tistory.com/m

성실하게, 즐겁게

구독자
4
방명록 방문하기

주요 글 목록

  • [개발] 리액트로 Compound Component(합성 컴포넌트) 적용해보기 👏들어가기 전에... 이번 포스팅의 주제는 합성 컴포넌트로, children에 대해서 잘 모르겠다면 이 전 포스팅을 보고 오는 것을 추천한다. [React] children 알아보기 (tistory.com) [React] children 알아보기 최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 humor12.tistory.com 사이드프로젝트를 통해 많은 코드를 작성하면서 느끼는 것은 바로 프론트엔드가 다뤄야 할 관심사가 너무나도 많다는 것이다. UI로직, 서버 로직, 유저 인증인가 로직...이러한 관심사를 잘 분리하지 않는다면 스파게티 코드가 될 수 있다는 것.. 공감수 2 댓글수 4 2023. 10. 9.
  • [React] ThemeProvider 알아보기 사이드 프로젝트를 진행하면서 다크모드를 위해 ThemeProvider를 사용할 일이 생겼다. 처음 접한 건 1년 좀 넘었는데 다시 한 번 되새겨보고자 포스팅을 남긴다. 스타일을 관리하고 전역적인 테마를 설정하는데 도움을 주는 ThemeProvider에 대해서 알아보는 시간을 가지도록 해보자! 🤷‍♂️왜 ThemeProvider? 다크모드를 개발하기에 앞서 어떻게 접근해야할지 생각해보는 시간을 가져보자. const Container = styled.div` background-color: ${(props) => props.mode ? "#000000" : "#ffffff"}; ` 방법 중 하나로 위와 같이 props로 전달 받은 mode를 기준으로 true면 검정색, false면 흰색으로 배경색을 지정해줄.. 공감수 1 댓글수 2 2023. 8. 23.
  • [React] React Query 알아보기 사이드 프로젝트를 진행하면서 기존에 Recoil로만 처리하는 것 대신, React Query를 사용해야겠다는 생각이 들었다. 프로젝트 특성상 API를 호출 할 일이 잦다는 것이 그 이유이다. 그럼 오늘은 React Query를 왜 사용하고, 어떻게 사용해야 하는지에 대해서 알아보자. 🤷‍♂️React Query React-query란 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어주는 라이브러리이다. 👏 React Query의 장점 기존의 Recoil과 같은 상태관리 라이브러리를 사용 할 때 BoilerPlate 형태의 코드가 많이 발생한다. 반면 React Query는 비교적 코드의 양이 적으며, 구조도 단순하여 유지 보수가 용이하다는 장점이 있다. 동일한 요청.. 공감수 1 댓글수 2 2023. 8. 21.
  • [React] children 알아보기 최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 진행하다보니 코드의 재사용성이나 가독성 부분에서 매우 떨어지는 경험을 했었다. 그러다 점차 협업을 할 일이 많아지기 시작하다 보니 자연스럽게 디자인패턴에 관심이 가기 시작하였다. 이렇게도 할 수 있구나...! 각설하고, 합성컴포넌트에 대한 본격적인 포스팅 전에 children의 개념에 대해서 정리해보고자 한다. 1. children은 무엇일까? children은 React 컴포넌트에서 사용되는 특별한 prop으로, 컴포넌트 내용을 나타내는 역할을 한다. const ParentComponent = ({children.. 공감수 1 댓글수 2 2023. 8. 17.
  • Netlify 배포 후 새로고침시 404 에러 최근에 사전과제 하나를 하게 되었다. 사전과제 README 파일에 들어가야 할 것은 데모영상 or 배포링크였다. 배포가 되었고 배포 된 사이트에서 기능이 모두 동작하면 가산점을 준다고 하여서 배포를 결정하였다. 배포는 Netlify를 이용하여 정상 배포하였다. 그런데 제대로 돌아가나 확인 중 새로고침을 눌렀더니 다음과 같은 에러 메세지가 발생하였다. 404에러 HTTP에서 사용자가 요청하는 페이지나 파일을 찾을 수 없을 때 나타난다. 그런데 왜 잘 동작하다가 새로고침만 만나면 요청하는 페이지를 못찾겠다고 하는 걸까? 원인 Netlify나 다른 정적 웹 호스팅 플랫폼에서 해당 에러가 발생하는 이유는 라우팅 처리와 관련이 있다. 정적 웹 호스팅 환경에서는 서버 측 기능이 없거나 매우 제한적이기 때문에, 클라.. 공감수 2 댓글수 0 2023. 8. 9.
  • 프론트엔드 로그인 개념 종강 한지 벌써 2주가 넘어가는 시점에 팀원을 꾸려서 사이드 프로젝트를 진행하게 되었다. 해당 프로젝트에서는 로그인 기능을 구현해야했다. 전에 하던 스터디에서 로그인 기능을 구현해보면서 개념을 살펴본 적이 있는데 리마인드를 해볼겸 포스팅을 하고자 한다. 로그인 방식 로그인 방식에는 크게 3가지가 있다. id와 pw를 요청 헤더에 넣는 방식 세션 id를 이용하는 방식 JWT 토큰을 이용하는 방식 id와 pw를 요청 헤더에 넣는 방식 가장 단순한 방식으로 HTTP 메세지에 사용자의 계정정보를 넣어 서버에게 보내는 메커니즘이다. 매 요청이 들어올때마다 서버는 DB를 조회하여 들어온 계정정보를 비교한다. 이 방식은 다른 처리를 필요로 하지 않기에 쉽고 빠르지만 보안에 매우 취약하다는 단점을 가지고 있다. 그 이.. 공감수 1 댓글수 1 2023. 7. 4.
  • useState의 타입지원 개발을 진행중이던 프로젝트에 framer-motion을 이용하여 애니메이션 효과를 주기 위해 문서들을 뒤적거리고 있었던 찰나였다. 마음에 드는 효과가 있어서 한번 코드를 그대로 베껴보던 도중 문제를 맞닥뜨렸다. 문제가 되는 코드는 다음과 같았다. const [selectId, setSelectId] = useState(); const overlayClicked = () => { setSelectId(null); }; 'null' 형식의 인수는 'SetStateAction' 형식의 매개 변수에 할당될 수 없습니다.ts(2345) 다음과 같이 null로 초기화 하고자 하였으나 오류가 발생하는 모습이었다. useState는 타입추론을 잘 지원하지만 undefined 또는 null로 초기화하려는 경우 명시적으로.. 공감수 0 댓글수 0 2023. 2. 13.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.