JH 기술 블로그

IntroNextJS 14버전으로 새로운 프로젝트를 한창 진행 중이다.해당 프로젝트는 Vecel을 이용해 CI/CD 파이프라인을 구축해 놓은 상태인데, 개발 모드에서는 괜찮았는데  프로덕션 빌드 시 문제가 발생했다. 그래서 여느 때처럼 에러를 해결 하기 위해 구글을 검색해보았는데 생각보다 한국어로 정리가 되어 있는 글을 만나지 못했다...ㅋㅋ 내가 정리한 글을 보고 누군가가 쉽게 에러를 해결했으면 하는 바람으로 몇 자 적어본다! 내가 에러가 발생한 코드// '/oauth/redirected/kakao'"use client";import axios from "axios";import { useRouter, useSearchParams } from "next/navigation";imp..

근황 10월과 11월에 거쳐 우테코 프리코스를 진행하느라 블로그에 글을 못 남겼었다. 11/15일경, 마지막 과제를 마치고 여유가 조금 생긴 참이다. 혹시 내년에 지원하시는 분들이 이 글을 보고 도움이 되었으면 하는 바람으로 회고록을 작성한다. 우테코에서 반복 강조하는 것은 '몰입'이었다. 우테코에서 말하는 몰입이 뭔지 모르겠다면 일단 지원해보라고 말하고 싶다. 몰입을 경험하게 될 것이며, 분명 그 과정에서 많은 것을 얻어 갈 것이다. 1. 서류접수 (10/6 ~ 10/16) 우테코 측에서 친절하게도 서류 접수 시작일 한참 전부터 '미리 생각해볼 질문'들을 알려주었다. 해당 질문들은 지원서에 그대로 나오니 미리 준비해 놓아도 좋을 것 같다. 질문들은 총 4가지였으며 가장 고민이 많았던 질문은 3번이었다...

👏들어가기 전에... 이번 포스팅의 주제는 합성 컴포넌트로, children에 대해서 잘 모르겠다면 이 전 포스팅을 보고 오는 것을 추천한다. [React] children 알아보기 (tistory.com) [React] children 알아보기 최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 humor12.tistory.com 사이드프로젝트를 통해 많은 코드를 작성하면서 느끼는 것은 바로 프론트엔드가 다뤄야 할 관심사가 너무나도 많다는 것이다. UI로직, 서버 로직, 유저 인증인가 로직...이러한 관심사를 잘 분리하지 않는다면 스파게티 코드가 될 수 있다는 것..

집에 돌아오는 길 버스에서 NomadCoders 니꼬쌤이 유튜브를 새로 올리신걸 보며 왔다! 유튜브의 제목은 '새로운 JS키워드가 뜬다!' 였고, 프론트엔드 개발자가 되고 싶은 나로서는 영상을 누르지 않을 수가 없었다. intro: var, let, const 그리고 using! 우리는 이제 기존의 변수선언 키워드 var, let, const 외에도 using 을 볼수 있다고 한다!! 현재 기준(2023.09) 타입스크립트 5.2 버전에서 사용해 볼 수 있으며, 이제 using은 어떨 때, 어떻게 쓰는지 한번 알아보도록하자! 1. 🤷‍♂️using이 왜 필요한데? 기존의 var, let, const와 동일하거나 비슷한 역할이면 아마 이 키워드를 만든 의미가 없을 것이다. 그렇다면 왜 필요한걸까? usin..

사이드 프로젝트를 진행하면서 다크모드를 위해 ThemeProvider를 사용할 일이 생겼다. 처음 접한 건 1년 좀 넘었는데 다시 한 번 되새겨보고자 포스팅을 남긴다. 스타일을 관리하고 전역적인 테마를 설정하는데 도움을 주는 ThemeProvider에 대해서 알아보는 시간을 가지도록 해보자! 🤷‍♂️왜 ThemeProvider? 다크모드를 개발하기에 앞서 어떻게 접근해야할지 생각해보는 시간을 가져보자. const Container = styled.div` background-color: ${(props) => props.mode ? "#000000" : "#ffffff"}; ` 방법 중 하나로 위와 같이 props로 전달 받은 mode를 기준으로 true면 검정색, false면 흰색으로 배경색을 지정해줄..

사이드 프로젝트를 진행하면서 기존에 Recoil로만 처리하는 것 대신, React Query를 사용해야겠다는 생각이 들었다. 프로젝트 특성상 API를 호출 할 일이 잦다는 것이 그 이유이다. 그럼 오늘은 React Query를 왜 사용하고, 어떻게 사용해야 하는지에 대해서 알아보자. 🤷‍♂️React Query React-query란 데이터 Fetching, Caching, 동기화, 서버 데이터 업데이트 등을 쉽게 만들어주는 라이브러리이다. 👏 React Query의 장점 기존의 Recoil과 같은 상태관리 라이브러리를 사용 할 때 BoilerPlate 형태의 코드가 많이 발생한다. 반면 React Query는 비교적 코드의 양이 적으며, 구조도 단순하여 유지 보수가 용이하다는 장점이 있다. 동일한 요청..

최근 가장 관심있게 공부하고 적용하려고 노력하는 것이 있다. 그것은 바로! 리액트 디자인 패턴 중 하나인 합성컴포넌트이다. 내가 처음 React를 배울 때는 디자인 패턴을 고려하지 않고 개발을 진행하다보니 코드의 재사용성이나 가독성 부분에서 매우 떨어지는 경험을 했었다. 그러다 점차 협업을 할 일이 많아지기 시작하다 보니 자연스럽게 디자인패턴에 관심이 가기 시작하였다. 이렇게도 할 수 있구나...! 각설하고, 합성컴포넌트에 대한 본격적인 포스팅 전에 children의 개념에 대해서 정리해보고자 한다. 1. children은 무엇일까? children은 React 컴포넌트에서 사용되는 특별한 prop으로, 컴포넌트 내용을 나타내는 역할을 한다. const ParentComponent = ({children..

지난 학기 자스 스터디를 진행하면서 분명 많은 걸 얻었고 지금은 다 잃어버렸다. 코딩테스트를 준비하다가 보면 종종 Map을 이용해 복잡하게 구현하지 않는 것을 볼 수 있을 것이다. 간단한 요약과 함께 Map의 메서드들을 한번 살펴보자. 1. Map이 뭐였더라 Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. Map 객체는 객체와 유사하지만 다음과 같은 차이가 있다. 구분 객체 Map 객체 키로 사용할 수 있는 값 문자열 또는 심벌 값 객체를 포함한 모든 값 이터러블 X O 요소 개수 확인 Object.keys(obj).length map.size Map 객체의 중요한 특징으로는 중복 된 키를 가진 요소가 존재할 수 없다. 또한 Map 객체는 키 타입에 제한이 없다. 따라서 객체를 포함한 모든 값을 키..