JH 기술 블로그

Intro. 한동안 취업을 위해 몇 군데 지원하고 다녔었다. 그런데 생각보다 Java 관련 역량을 묻는 회사가 굉장히 많았다. 실제로 한 기업의 코딩테스트는 Javascript로 언어 제한을 뒀는데, 객관식으로 Java 관련 지식을 요구로 하는 문제들이 수두룩히 나와 당황했던 기억도 있다. 나는 스스로를 돌이켜 보며 Java 관련한 지식이 부족하다는 생각이 들었고, 앞으로의 계획에 있어서 프론트엔드 개발자로만 남아 있을 계획은 없어 점차적으로 Java 공부를 이어나갈 예정이다. 서론이 길었는데 평소 궁금했던 부분이자 자바 웹기술 역사의 태초에 가까운 Servlet에 대해서 알아보았다. 이 놈의 이름은 많이 들어봤는데 도대체 뭐에 써먹는 놈일까? 한번 알아보도록 하자. 서블릿이란? 핵심만 말하자면 서블릿은..

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..