console.log

20260407

문앵 — Tue, 7 Apr 2026 16:18:06 +0900

예전에 학원 동기분 기술 블로그 새로운 글을 구경하다가 댓글을 달았었는데, 거기에 달렸던 동기분의 답글이 생각나서 다시 한번 보고 왔다.

내 근황을 모르니 그거에 대해 할 얘기가 없다는 내용이 달려있었는데 생각해보니 블로그에 글을 쓴지 오래된 것 같았다.

오랜만에 블로그에 글을 쓴다.

원래는 여러 종류의 글을 잡다하게 많이 썼었는데, 쓸 일이 없어지다 보니 잘 안쓰게 된 것 같다.

블로그에는, 코딩을 하면서 만나는 이런 저런 에러, 문법, 개념 등등을 정리하거나 기록했었다.

블로그 글을 열심히 올렸던 이유는 내가 나중에 찾아보려는 의도도 있었지만,

다른 사람에게 내 블로그 포스팅이 도움이 될 수 있다면 좋겠다는 마음이 컸던것 같다.

내가 처음에 코딩을 접하고 배우기 시작 했을 때, 블로그 너머의 누군가한테서 도움을 많이 받았고 그럴때마다 고마움이 컸기 때문이다.

하루종일 해결 못해서 애먹던것들을, 구글링해서 쫌쫌따리 찾아보고 여러 포스팅들을 보고 해결했을때.

익명의 선생님들께 백팔배를 올리고 싶은 마음이었다.

그런데 ai 의 기능이 좋아지게 되면서 ai가 그 선생님 역할을 대신하게 되었다.

점점 블로그 방문자 수는 줄어들기 시작했고, 나도 그쯤에는 구글링해서 블로그 포스팅을 보는 일이 거의 없어진 것 같다.

요즘 내 근황은 ai 가 나타난 시대의 기술 블로그와 같다는 생각이 들었다.

의미가 없어진것 같다 ㅠ

원래는 더 좋은 실력을 가지고 싶고 더 좋은 회사로 계속 이직하고싶다는 욕심이 컸었는데, 점점 뭔가 하고자 하는 의욕도 잘 안생기는것 같고 지금 회사에서 하고 있는 사업에 흥미도 재미도 없고 의미도 잘 모르겠고 코딩도 그냥 ai 돌리기... 인생의 노잼 시기인걸까? 쓸데 없는데 돈만 많이 쓰고 저축도 잘 안하는것 같다.

현재 시점에서 좀 더 고민해서 새로운 뭔가에 도전하거나 전환점이 필요한 시기같다.

26년이 된지도 벌써 4개월째인데, 아직도 맨날 게임만 하고 운동도 제대로 안하고 친구들이랑 놀러 다니기만 하는데 에너지 충전이 안되고 닳기만 하는 이 기분 ...ㅋㅋ

4월달에는 게임 좀 줄이고, 운동 좀 더 하고, 독서하고, 건강하게 먹고, 많이 자기

화이팅

면접(보고 온 사람) 보고 온 후기

문앵 — Tue, 4 Nov 2025 16:20:17 +0900

오늘은 삼구님(39kg)과 회사 근처에서 점심식사를 했다.

이쪽에 면접을 보러 오셨던 삼구님은 만나자마자 면접이 망했다며 씩씩대셨다.

머리부터 발끝까지 정장으로 풀 착장을 맞추신 삼구님은 앙상한 주먹을 꽉 쥐시면서 눈으로 살기를 뿜으셨다.

몇년동안 이렇게 입고 면접 온 사람 처음이라고 면접관이 꼽을 줬다며 불쾌해 하셨다.

대략적인 면접 후기를 들었는데, 개인적으로는 꽤나 잘 답변했다는 생각이 들었다.

A : 웹이 동작하는 방식을 설명해봐라

39 : (웹을 모르지만 대강 이런거 아닐까요 라고 대답합)

A : 대충 맞다

A : 캐싱 전략을 어떻게 하면 좋을지 설명해봐라

39 : (웹에선 안해봤지만 앱에선 대충 이러니까 웹에서 이렇지않을까요 라고 대답함)

A : 대충 맞다

A : 갑자기 닷넷 시키면 어떡할거냐
39 : (속마음 : @$$%$~씨~%%) 닷넷 경험이 없기때문에 시간을 하루 주고 다음날까지 완성하라고 하면 못하겠지만 시간을 주면 감사히 공부할 것 같습니다.

A : (대충맞다)

면접 후기도 듣고 삼구님이 으르렁대는걸 구경하면서 밥을 먹으니 시간이 후딱 지나갔다.

삼구님은 갑자기 주먹을 불끈 쥐신다던가, 난데없이 허공을 보고 "그럴수 있지" 라고 598348번정도 외치셨던것 같다.

덕분에 재밌는 점심시간이었다! 감사합니다 삼구님!

빵도 잘먹을게요!

[React] useRef / forwardRef

문앵 — Wed, 15 Oct 2025 17:12:53 +0900

일반 ref와 forwardRef의 차이를 알아보자

ref는 보통 포커스나 스크롤이벤트 등 가상 돔을 패스하고 직접 내가 돔노드에 접근하고 싶을 때 쓴다.

그럼 forwardRef는 어떤 상황에서 써야 하나?

부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달할때 쓴다. ( 이때 ref 는 자식 컴포넌트를 가리키고 있는 상태가 됨 )

그냥 ref 를 전달하면 되는거 아닌가? 라고 생각했지만,

ref는 리액트 내부적으로 만든 특수한 프로퍼티이기 때문에 그냥 컴포넌트간 전달이 막혀있다.

( console.log()에 찍으면 undefined가 뜸 )

forwardRef는 컴포넌트간 전달을 할수 있도록 만들어져있다. 그래서 부모 컴포넌트에서 자식 컴포넌트의 돔에 직접 접근할때 사용할 수 있는것이다.

사용 방법은 다음과 같다.

< useRef >

import {CustomInput} from "../customInput.jsx";

function App(){
	const ref = useRef(null);
    
    return (
		<>
        	<input ref={ref}/> // 이건 가능. ref가 가리키는건 input 돔
            <CustomInput ref={ref}/> // 이건 불가능. 
            // CustomInput 에서 prop 으로 받아와도 undefined가 찍힌다
        </>
    )
}

...

export function CustomInput({ref}){
	console.log(ref); // =undefined
	return <input/>
}

< forwardRef >

import {CustomInput} from "../customInput.jsx";

function App(){
	const ref = useRef(null);
    
    return (
		<>
            <CustomInput ref={ref}/> // 이렇게 사용하고 ref가 가리키는 돔은 CustomInput의 input
        </>
    )
}

...

export const CustomInput =forwardRef((props, ref)=>{
	return <input ref={ref}/>
})

+ useInperativeHandle

forwardRef와 함께 쓰이는 고급 기능.

이걸 사용하면 자식컴포넌트 내부에서 정의된 함수중 특정 함수만 외부에서 사용할수 있도록 제어할 수 있다.

기존에는 부모 컴포넌트에서 함수를 만들고 이걸 자식 컴포넌트에서 넘겨 받아서 사용하는데,

이렇게 되면 불필요한 리렌더링이 발생할 수 있다.

리렌더가 일어나는 이유는 총 세가지인데 챗지피티에 따르면 하위 표와 같다.

props 변경	React의 렌더링 데이터 변경	✅ 발생
state 변경	React의 렌더링 데이터 변경	✅ 발생
부모 렌더링	Virtual DOM 재비교 필요	✅ 발생

그런데 useInperativeHandle로 정의된 함수는

ref.current.method() 호출 -> JS 레퍼런스 호출이기 때문에 React와는 무관하고 따라서 리렌더가 발생하지 않고 함수만 호출하게 되는것.

즉, useImperativeHandle의 진짜 의의는?

단순히 부모가 자식 함수 “호출 가능”하게 해주는 게 아니라,
그 호출이 React 렌더 사이클에 영향을 주지 않고 독립적으로 동작하도록 하는 것이다.

그래서 useImperativeHandle을 통해 만든 API는
렌더를 발생시키지 않으면서 컴포넌트의 내부 동작만 수행할 수 있다.
(대표 예: .focus(), .open(), .close())

사용법은

import { forwardRef, useImperativeHandle, useRef } from "react";

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => (inputRef.current.value = "")
  }));

  return <input ref={inputRef} />;
});

function App() {
  const ref = useRef();

  return (
    <>
      <CustomInput ref={ref} />
      <button onClick={() => ref.current.focus()}>포커스</button>
      <button onClick={() => ref.current.clear()}>초기화</button>
    </>
  );
}

이런식으로 사용하면 된다

[node.js] nvm 노드 버전 관리 (feat. nvm-windows, 버전 수동설치)

문앵 — Tue, 26 Aug 2025 12:31:55 +0900

나는 노드 버전을 관리할때 nvm을 사용한다.

일단 윈도우버전 설치

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

A node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windows

github.com

중간쯤 있는 Assets 에서 다운 받으면 된다.

nvm-setup.exe

이번에도 새 노트북에 세팅을 해줬는데, 무난하게 설치후 특정 버전을 다운 받으려했더니 계속 오류가 나는거다.

이유는 모르겠음.

그래서 그냥

웹에서 수동 설치를 하고 nvm에서 인식하도록 설정해주도록 하는 방법을 선택했다. 어쨌든 설치만 하면 되는거 아니겠어!?

일단 다운로드를 받아준다.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

여기서 다운다운.

이떄 msi 버전이 있고 zip 버전이 있는데 -> 무조건 zip 으로 받아야한다.

msi -> path 설정부터 npm 포함 해서 알아서 쫙 설치해주는 설치 마법사같은거임

zip -> 말그대로 설치에 필요한 파일들을 압축해놓은거

nvm은 자기 경로에서 각 버전별로 지정된 폴더명이 있고 그 안에서 관리하는 시스템이라, 파일을 넣어주고 경로 심볼릭링크 등 직접 설정해줘야하는데, 마법사로 설치하면 설정이 꼬일수가 있다.

일단 zip 파일 받아주고

nvm 설치 경로 안에

이렇게 버전 이름으로 넣어주면 된다.

14버전을 넣어주고

전역에서 nvm 을 사용하기 위한 환경변수와 심볼릭 설정도 해주자.

위 설정은 그냥 터미널에서

> [Environment]::SetEnvironmentVariable("NVM_HOME", "[~~~\nvm 경로]", "User");

> [Environment]::SetEnvironmentVariable("NVM_SYMLINK", "[~~\심볼릭링크 달아줄 경로\nodejs]", "User"); -> 이 경로는 보통 C:\Users\myguz\AppData\Local\nodejs 이렇게 된다

그리고 한번 테스트해보자

> nvm list

> nvm use v14.21.3

> node -v

잘 나오면 끗

+++ 추가

만약에 추후에 노드 버전을 관리하는데

nvm use [사용할 버전]

을 했는데도 노드 버전이 바뀌지 않는다면?

여러가지 이유가 있을 수 있지만,

만약 Now using node v22.17.0 (64-bit) 와 같은 식으로 성공 메세지가 나왔는데도 실제 버전은 그대로다?

그렇다면 심볼릭링크가 갱신되지 않아서 생긴 문제일 가능성이 크다.

아래 과정으로 수동 갱신해보자

# 1) 실행 중인 node가 있으면 종료
Stop-Process -Name node -Force -ErrorAction SilentlyContinue

# 2) 현재 심볼릭 링크(또는 폴더) 제거
Remove-Item -Recurse -Force "C:\nvm4w\nodejs"

# 3) 원하는 버전으로 링크 재생성
nvm use 22.17.0

# 4) 확인
node -v

[REACT]다국어 지원 시스템 (with. react-intl)

문앵 — Mon, 25 Aug 2025 11:02:58 +0900

npm i react-intl

다국어 지원기능을 만들어주는 라이브러리다.

* i18n : internationalization - 다국어 지원 시스템을 의미하는 약어다.

( i로 시작해서 n으로 끝나고 그 사이에 18개 알파벳이 있는 단어를 축약한거라고 한다. g11n - globalization, l10n - localization 등등 다른 축약 표현도 있다. )

* 대표적인 다국어 지원 라이브러리로는

- react-intl , next-intl, i18next 이 있다.

여기서는 react-intl 을 사용한다. 이게 formatjs와 동일한거라고 한다.

intlProvider로 <App/> 내부 jsx를 감싸주면 파일 전체에서 사용 가능하다. 이부분은 형태가 다양할테니 예시는 생략

* 사용법 (기본 형태)

1. formattedMessage

- jsx 안에서만 사용이 가능함. 적용파일 바뀌면 바로 바뀜.

- 간단하게 ui 렌더링만 한다고 했을때 사용

- 문법 : <formattedMessage id = "AUTH.LOGIN"/>

2. intl.formatMessage

- 함수나 jsx 안에서 모두 사용 가능.

- useIntl() 을 해줘야 한다는 번거로움이 있음

- 문법 : intl.formatMessage({id: "AUTH.LOGIN"})

* 동적 할당 문법

{
"CONTACT_ADMIN_WITH_ERRORCODE": "관리자에게 문의하세요. error code: {msg}"
}

1. formatMessage 형태

2. intl.formattedMessage() 형태

{intl.formatMessage(
        { id: "CONTACT_ADMIN_WITH_ERRORCODE" },
        { msg: errorCode }
)}

[회고] 능력 개발 교육원 k-디지털 분야 교직 훈련 과정 회고

문앵 — Sat, 26 Jul 2025 11:06:55 +0900

길고 길었던 과정이 드디어 끝났다.

오늘은 kdt 교직과정이 끝나고 맞이하는 온전히 쉴 수 있는 첫번째 주말인데,

왜인지 새벽 5시부터 계속 깨서 8시쯤에는 완전히 잠이 깨버렸다.

오늘 정말 늦잠을 자고싶어서 알람도 다 꺼놨는데

뭐가 그렇게 불안했는지 ㅠ

암튼.

경 ✨ 축 !!!!!!!!!!!!!

길고 길었던 kdt 교직과정이 끝났다!!!!

과정이 끝난 직후에 회고를 쓰고 싶었는데 계속 미루다가 이제야 쓴다. ^ㅡ^

사실 처음에 이 수업을 신청할 때는 별 생각이 없었다.

그냥 이런 과정이 있다고 하고, 이수하면 나중에 교강사 급수를 딸 수 있다고 해서

언젠가 쓸 일이 있겠거니~ 하고 가벼운 마음으로 신청 했던 것 같다.

그렇게 만만하게 봤다가 된통 후회하게 되었지만.. 하지만 이수 하고 나니 지금 와서는.. 역시나 하길 잘했다는 생각이 든다.

역시 사람 기억은 왜곡 되나보다.

이 과정을 들고서 느낀 점은 크게 세가지이다.

1. 여러명 앞에서 말하는 연습이 필요하다

2. 인맥을 쌓기 좋다

3. 인내심 수련이 필요하다면 이 과정을 들을것

1. 여러명 앞에서 말하는 연습이 필요하다

- 이 수업의 마지막에는 pbl 수업이라는 과목을 수료하게 된다.

pbl 수업이란 problem based learning 의 약자인데, 쉽게 생각해서 말그대로 문제 해결에 중점을 둔 수업이다.

강의를 할 때 학생들한테 교강사의 일방적인 정보전달 또는 주입식 교육과는 반대되는 방식이라고 보면 된다.

교강사의 역할은 최소화되어야한다. 학생들이 주체적으로 프로젝트를 수행할 수 있게 도와주는 퍼실리테이터로서의 역할만 한다.

이 pbl 과목을 통해서 수업 계획서를 만들고, 그걸 발표를 하는게 이 교육과정의 최종 관문이다.

그 외에도 팀플을 하면서 자잘하게 발표를 해야하는 상황이 종종 생긴다.

주제를 명확히 주지 않거나, 준비할 시간을 충분히 주지 않고 그냥 말해야 하는 상황에서도. 말을 잘하는 사람이 정말 많다는걸 알게 되었다. 억양과 톤과 발성부터 다르고... 저런 사람이 강사 할 수 있는거구나 싶었다.

나는 발표할 때 청중을 못 쳐다보고 자신감도 없는 편인데, 선생님께서 이런 발표가 어렵고 눈을 마주치지 못하는 사람은 경험 부족 준비 부족이라고 하셨다. 발표도 많이 해봐야 느는거라고.

처음에는 정말 어려웠는데 마지막 발표까지 마치고 나니 선생님이 하셨던 말씀이 무슨 의미인지 조금이나마 이해할 수 있었다

특히나 이런 수업에서 말고 내가 평가받아야하는 자리에서는 더 어렵게 느껴지는데, 이것도 경험을 많이 해봐야 괜찮아질것 같다.

2. 인맥을 쌓기 좋다

이 수업은 정보통신 계열에서 일하시는 분들이 모여있고 그 중에서도 강사로 일하시는분이나 강사를 하길 희망하시는 분들이 많이 있었다. 나랑 같이 들은 랩스 여인들 & 몇몇을 제외하고서는 거의 대부분 나이대가 있는 분들이 대부분이었다.

그 분들은 어디 크고 좋은 대감집에서 한자리씩 하는 분들이 많았따. 아무래도 직장을 다니면서 주말 이틀을 내리 희생하면서까지 교육을 받으려는 의지를 가진 부지런한 사람들이라면 ... 그럴 가능성이 높을 것이다. 이사님과 나 단둘이서 개발해야하는 회사가 있다는 사실 조차 모른채로 살아가시는 분들이었다... 세상이 넓다는걸 다들 아셔야 할텐데..

암튼 그 중에서 강사를 구하거나 뭐 주변에 누가 사람 구한다더라~ 하는 얘기를 종종 듣기도 했다. 물론 본격적으로 컨택을 한 사람은 못 봤지만 충분히 가능할 것 같았다.

내가 만약 좀 활발한 성격이었으면 여기 아저씨들이랑 다 친해져서 나중에 사람 구할때 연락 주라고 할 수 있을것만 같은 그런 느낌이었다.

보통의 네트워킹이랑 좀 달랐던 점은 서로가 서로에게 잘 보일 필요가 없고, 공통의 목적이 하나 있고 (교육수료 자격증), 다 같은 학습자 입장이라는 것이었다. 그러다보니 서로 좀 더 편하고 주말 희생이라는 고통 속에서 피어나는 동질감에, 적극적으로 다가가지 않는 성향이라 하더라도 비교적 친해지기 쉬운 환경이었다고 생각한다.

3. 인내심 수련이 필요하다면 이 과정을 들을것

내게 이 과정을 수료하면서 얻은 가장 큰게 뭐냐고 묻는다면, 제일 먼저 인내심이라고 할 것같다.

강의를 할때 마인드, 실전에서 겪는 여러 문제들, 학습 교구, 강의 방식의 다양한 개념 등등 지식적으로 배운것은 많다.

하지만 교육을 모두 이수하고 나니, 나한테 남은 것은 타고 남은 재와 같은 인내심이었다..

회사에서 9 to 6 로 일하는것과는 전혀 다르다. 자유가 없고 계속 지식이 머릿속으로 들어오고 자리에 가만히 앉아서 그 정보를 계속 받아들여야하는... 마치 학생때로 돌아간것만 같은 느낌이었는데. 정말 버티기 힘들었다 ㅋㅋㅋㅋㅋㅋ 물론 45~50분마다 쉬는시간이 있지만.. 힘든게 어느정도냐면 수업중에도 잠깐 정신을 놓으면 바로 잠드는 정도였다

교육 막바지에 갈수록 더욱 인내심 싸움이다.

하라는건 많은데 하기 싫고 머리속에 아무것도 안들어온다. 그냥 빨리 이시간이 지나가기만을 바랄뿐

물론 다른 분들도 그래보였다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

빨간펜 드릴까요? 파란 펜 드릴까요? 했더니 빨간 휴지 줄까~ 파란 휴지줄까~ 무표정으로 무심코 드립 날리시고선 본인도 어이없으셨는지 헛웃음을 지으시던 ㅋㅋㅋㅋㅋ 정말 피곤하셨나보다.

내가 이것도 수료했는데 이젠 뭔들 못할까라는 생각도 들고.. 이제 이틀도 필요 없고 일주일에 하루 정도만 쉬어도 너무 꿀 같을 것 같다는 생각을 했다. ( 끝난 직후에만 ^^* 지금은 일주일에 7번 쉬고싶음 )

케이디티야 고마워~ 사실 안고마워 급식 맛있었어 마지막날 삼계탕 잘먹었어

[tanstack-query/react-query] API 중복 호출 문제 (feat. enabled 옵션)

문앵 — Thu, 10 Jul 2025 17:41:10 +0900

필터가 여러개 있는 검색 기능을 수정하던 중 문제를 발견했다.

검색하기 버튼을 누르니

api 요청을 두번 따닥!

문제가 뭘까 소스 코드를 계속 봤다. 이거저거 고쳐봐도 모르겠다.

이럴때 드는 생각이 이런 문제는 원인을 어떻게 명확하게 추측할 수 있지? 였다.

차라리 에러메세지가 뜨면 뭐 때문에 에러가 난건지 추적이 가능한데.

이런 경우는 에러가 나는것도 아니고... 내가 하나하나 콘솔을 찍어보면서 추척하거나 코드를 뜯어 보고 유추 해보는 수 밖에는 없는게 너무 답답했다. 왜냐?? 아무리 봐도 모르겠기 때무네!!!!!

그래서 커서를 붙들고 하루종일 잡도리를 했더니

죙일 헛소리만 하다가 오후 느즈막히 뭔가 그럴싸한 답변을 내놨다.

react-query의 enable 옵션이 !!param 으로 되어있기 때문에

1. param 변경시 자동으로 한번 호출

2. useEffect 의존성에 포함된 param 으로 한번 더 호출

이렇게 총 두번 호출이라는것.

* useQuery의 enabled 옵션 특

- useQuery는 GET 요청 특화 메소드로, 기본적으로 컴포넌트가 렌더링 될때 자동호출이다 .

- enabled 는 디폴트 설정이 true이고, true 이면 useQuery 자동호출 하라는 뜻이다.

- 하지만 자동 실행되는걸 막아주고 싶어 + 내가 원하는 시점에 호출하고싶어 => 이럴때 사용하면 좋다.

(enabled : false + refetch 수동 호출)

- enabled : !!param 이런식으로 특정 값을 설정해주면, param값이 없을때는 자동호출 안해주다가, param 값이 일단 한번 들어오면 그 뒤로는 자동호출을 해주는 구조다

그래서 한번 수정을 해봤따.

enabled : false 로 주면 끝.

처음에 컴포넌트 마운트시에는 어차피 useEffect 의존성이 있기 때문에.. 그냥 두면 된다.

잘된다. ㅠ

react state update & call api in a method with new state

문앵 — Wed, 9 Jul 2025 12:20:36 +0900

* 상태를 업데이트 했는데 이전 상태값으로 요청이 가는 경우

https://muna76.tistory.com/351

setState를 했는데 바로 직전 상태값이 나와요

setState() 는 상태를 업데이트하는 함수인데, 이걸 이용해서 값을 업데이트 하고자 할때내가 원하는 시점에 상태값이 변하지 않고 이전 상태값을 유지하는 상황을 종종 겪었다. 예를 들면..어떤

muna76.tistory.com

의 버전 2라고 할 수 있다!

리액트에서는 setState를 한다고 해서 상태값이 바로 변경되는것은 아니다.

크게 3가지 단계로 업데이트가 되는데,
1. 트리거
2. 렌더링
3. 커밋

렌더링 결과가 이전과 같으면 React는 DOM을 건드리지 않는다

이전 포스팅에서는 useEffect를 사용해서 비동기적으로 업데이트되는 상태값을 동기적으로 실행 되는것처럼 보이게 하는! 방법을 사용했는데,

이번에 적용한 것은 플래그를 활용한 방법이다.

방법은 간단하다

const [pendingSearch, setPendingSearch] = useState(false);

const onKeyDownEnter = (value) => {

if (value != null) {

searchForm.update('searchText', value, () => { // 상태 업데이트 커스텀 훅

setPendingSearch(true);

});

}

};

useEffect(() => {

if (pendingSearch) { // 플래그로 조건을 걸어서 동기적으로 코드 실행
handleSubmitSearch();

setPendingSearch(false);

} // 커스텀 훅

}, [pendingSearch]);

1. 플래그값을 만들어서 이벤트 핸들러에서 -> 상태값 업데이트 후 플래그를 true로 바꿔준다(여기도 콜백함수로 넣어줬음)

2. 플래그값을 의존성으로 가지고 있고 상태 업데이트 후 실행하고싶은 useEffect 함수를 작성해준다. 플래그값이 변경시 작동하도록 하는 구조!

요약 : 플래그 하나 만들어서 상태값 업데이트 여부 확인용으로 써라.

이렇게 해주면 안전하게 상태값 업데이트 후 실행된다.

그냥 useEffect 의존성에 searchForm을 넣어줘도 되지만 그렇게 하면 검색 조건이 바뀔 때 마다 계속 호출이 가기때무네

그런 상황을 막아야하는 경우 플래그값으로 컨트롤해주면 된다.

끗

면접 준비 - 3년차 프론트엔드 개발자의 면접 예상 문답

문앵 — Mon, 30 Jun 2025 12:58:47 +0900

1. 기술 스택 관련 질문

Q. React 기반의 프로젝트 중 가장 기억에 남는 것은? 어떤 기술적 도전이 있었고 어떻게 해결했나요?

가장 기억에 남는 건 OOO프로젝트입니다. 체크박스와 input을 많이 사용하는 화면이 있었는데, 처음엔 사용자가 인풋을 조작할 때 마다 상태를 각각 관리하다 보니 코드가 길어지고 유지보수가 어려워졌습니다. 그래서 특정 시점에 부모 DOM 기준으로 필요한 input 값을 한 번에 가져오는 방식으로 리팩토링했습니다. 단순히 작동만 시키는 게 아니라 DX(개발자 경험)를 고려해 구조 개선한 경험이라 의미가 컸습니다.

Q. Spring Boot로 개발한 경험이 있으신데, 어떤 구조로 설계했나요?

기본적으로 Controller-Service-Repository 구조를 따랐고, MyBatis와 연동해 도메인 중심으로 Mapper를 나눴습니다. Admin 기능에서 API가 많아지는 경우, 기능 단위로 패키지를 나누고, 공통 응답 형식(ResponseDto)을 정해서 일관성을 유지했습니다. Thymeleaf 기반 화면도 있었는데, JS 모듈과 연동되는 구조는 간결하게 만들려고 노력했습니다.

Q. AWS EC2, Nginx, PM2 기반의 운영 경험에서 기억에 남는 에피소드는?

실제 운영 서버에서 업로드 기능이 작동하지 않아 원인을 파악했는데, Nginx 설정에서 body 사이즈 제한이 걸려 있었던 게 원인이었습니다. 경험이 없었다면 코드 쪽만 계속 디버깅했을 것 같은데, 다양한 영역을 경험해본 덕분에 빠르게 원인을 찾을 수 있었습니다. 이때부터는 기능뿐만 아니라 인프라 조건까지 고려하면서 개발하게 됐습니다.

2. 프로젝트 경험 중심

Q. ㅁㅁㅁ 프로젝트에서 로그 설계를 주도했다고 했는데, 어떤 방식으로 설계하셨나요?

중요한 사용자 행동(ex. 결제, 포인트 적립)이 누락되면 이슈 추적이 어려워서, 요청 파라미터, 응답 결과, 사용자 ID, 타임스탬프 등을 포함한 로그 구조를 설계하고 JSON 포맷으로 저장하도록 했습니다. 이후 장애가 발생했을 때 정확한 시간대와 사용자 흐름을 바로 추적할 수 있었고, 대응 속도도 빨라졌습니다.

Q. 공공 과제 프로젝트에서 협업 중 어려웠던 점과 해결 방법은?

정부 과제는 요구사항 변경이 잦고, 문서화가 중요했기 때문에 기획 부서와의 소통이 특히 중요했습니다. 초반엔 API 명세서 없이 구두로 요구사항이 전달돼 문제가 생겼는데, 직접 Notion을 활용해 명세서를 작성하고 공유하는 흐름을 주도했습니다. 이후 커뮤니케이션 오류가 줄고, QA 시에도 일관성 있게 테스트할 수 있었습니다.

3. 회사/직무 관련

Q. OOO의 철학 “감시보다 예방”에 공감한다고 했는데, 어떤 경험에서 그렇게 느꼈나요?

과거 운영 중인 시스템에서 야간에 장애가 발생한 적이 있는데, 그 경험 이후부터는 기능이 완성되었는지를 넘어서, 어떤 상황에서 깨질 수 있는지를 먼저 생각하게 됐습니다. OOO가 사고를 예방하는 기술을 만든다는 점은, 단순히 기능 구현이 아닌 ‘예측하고 대비하는 개발’을 지향한다는 점에서 저와 방향성이 맞다고 느꼈습니다.

Q. React Native, Next.js는 경험이 없으신데 괜찮으신가요?

React 기반의 구조와 원리를 익숙하게 다루고 있고, 실제로 TanStack Query나 상태관리 등도 직접 적용해봤습니다. Next.js는 SSR 개념을 따로 공부하면서 개인 프로젝트에서 적용해본 경험이 있고, React Native는 웹프로그래밍 교육 수강시 팀프로젝트에서 사용해본 경험이 있습니다. 기본적인 컴포넌트 구조나 Expo 등을 적용해본 경험이 있기 때문에,
실무에서 적용하는게 필요한 상황이 생긴다면 빠르게 학습할 수 있을 것이라고 생각합니다.

4. 성향/역량 검증

Q. 문제가 생겼을 때 본인의 해결 방식은?

먼저 문제를 현상 중심이 아닌 '원인' 기준으로 분해하려고 합니다. 최근에 API 응답 속도가 느린 현상이 있었는데, 단순히 쿼리만 의심하지 않고, 네트워크, 로직 처리 시간, DB index 여부 등을 나눠서 확인했어요. 그래서 원인이 DB 쿼리의 조건 누락이었던 걸 찾아낸 적 있습니다. 무작정 고치기보다, 구조적으로 이해하려고 노력합니다.

Q. 주말이나 야근 근무에 대한 생각은?

시스템의 안정성이나 이슈 대응은 개발자의 책임 중 하나라고 생각하고, 실제로 이전 회사에서도 운영 이슈로 인해 주말에 야외에서 수정한 적도 있습니다. 다만 반복되는 야근이 아닌, 예방 중심의 개발을 지향하기 때문에 구조 개선이나 문서화로 이런 상황을 줄이려고 노력합니다.

5. 기타/확장형 질문

Q. 경영학 전공이 개발에 도움이 된 적이 있나요?

비즈니스 목표나 고객 관점에서 시스템을 바라보는 데 큰 도움이 됐습니다. 단순히 화면을 그리는 게 아니라, 왜 이 기능이 필요한가부터 먼저 고민하게 되고, 다른 부서와의 커뮤니케이션도 더 원활하게 할 수 있었습니다. 실제로 정부 과제에서는 과제 요건 문서도 함께 만들며, 기술과 행정의 간극을 줄이는데 기여했습니다.

Q. 최근 관심 갖고 공부 중인 기술은?

Next.js의 App Router 구조와 SSR 개념에 관심이 많아서, 개인 프로젝트에 적용해보고 있습니다. 특히 React 서버 컴포넌트, 캐싱 전략, 라우트 기반 렌더링 등의 구조를 이해하고 적용하는 과정을 통해, 프론트 단에서의 성능 최적화도 고려하고 있습니다.

< 예상 질문 모음 >

1. 기술 스택 관련 질문 (React, Spring Boot, Java 등)

프론트엔드 경험 관련
1. React 기반의 프로젝트 중 가장 기억에 남는 것은? 어떤 기술적 도전이 있었고 어떻게 해결했나요?
2. React Query(TanStack Query)를 사용하셨던데, 이를 선택한 이유와 사용 경험을 설명해주세요.
3. 상태관리 라이브러리는 어떤 걸 사용해봤나요? Context API, Zustand, Redux 중 어떤 걸 선호하나요?

백엔드 및 Java 관련
1. Java와 Node.js를 둘 다 써보셨는데, 각각의 장단점은 무엇이라 생각하시나요?
2. Spring Boot로 개발한 경험이 있으신데, 어떤 구조로 설계했나요? MVC 패턴에 대한 이해를 설명해주세요

협업 및 환경
1. gitBlit으로 사내 Git 서버를 구축하셨다고 했는데, 이를 선택한 이유와 구축 과정에서의 이슈는 없었나요?
2. AWS EC2, Nginx, PM2 등 서버 인프라에 관여했던 경험 중 어려웠던 점과 해결 방법은?

2. 프로젝트 경험/성과 중심 질문

OOO 프로젝트
1. OOO 리뉴얼 작업에서 복잡했던 input 상태 관리 개선 경험을 설명해 주세요. 왜 해당 방식으로 개선했나요?

ㅁㅁㅁ / 정부과제
1. ㅁㅁㅁ 프로젝트에서 로그 설계를 주도했다고 하셨는데, 구체적으로 어떤 방식으로 설계하셨나요?
2. 정부 과제 어플 개발 시 블록체인 연계 관련된 기술 이슈나 보안 고려사항은 어떤 게 있었나요?

공통
1. 주도적으로 문제 해결한 경험 중 가장 성과가 컸던 일은 무엇인가요?
2. 협업 부서나 외주업체와의 소통 과정에서 발생한 갈등이나 조율 경험이 있다면?

3. OOO 회사/직무 관련 예상 질문

지원 동기

"감시보다 예방"이라는 철학이 본인과 맞다고 하셨는데, 구체적으로 어떤 경험에서 그렇게 느꼈나요?

OOO의 프로젝트(안전, 공공 관련)를 보며 어떤 가치를 느끼셨고, 어떤 기여를 할 수 있을 것 같나요?

업무 이해도

React-Native, Next.js 사용 경험이 없는데, 해당 기술에 대한 학습 계획은?

웹 퍼블리싱 관련 이해도나 경험은 어느 정도인가요?

4. 성향/역량 검증 질문

업무 중 문제가 생겼을 때, 평소 어떤 방식으로 접근해서 해결하시나요?

성실함을 강조하셨는데, 스스로 그것이 가장 잘 드러났다고 생각하는 경험은?

야근이나 주말 근무 경험을 이야기해주셨는데, 워라밸과 일의 몰입 사이에서 어떻게 균형을 잡으시나요?

5. 기타 기본 및 확장형 질문

프론트엔드 경력 3년차라고 했는데, 그 중에서 가장 성장을 실감한 시기는?

최근 기술적으로 관심을 가지고 있는 주제나 공부 중인 기술은?

경영학 전공이 개발자로서 어떤 장점이 되었나요?

setState를 했는데 바로 직전 상태값이 나와요

문앵 — Fri, 20 Jun 2025 17:38:58 +0900

setState() 는 상태를 업데이트하는 함수인데, 이걸 이용해서 값을 업데이트 하고자 할때

내가 원하는 시점에 상태값이 변하지 않고 이전 상태값을 유지하는 상황을 종종 겪었다.

예를 들면..

어떤 셀렉박스에 onChange 이벤트를 걸어서 gu() 함수를 실행시킨다고 쳐보자.

gu() 안에서 setState(e.target.value) 를 해주고 ,

그 다음 줄에서 그 바뀐 상태값을 가지고 뭔가 동작하게끔 하는 코드를 작성했다 치자.

내 의도대로 동작하지 않고, state는 이전 value를 가지고 있을것이다.

이건 react 내부적으로 setState를 처리하는 방식과 관련있다.

우선 setState함수는 비동기함수가 아니다. 근데 비동기처럼 작동을 한다(?)

"State updates in React are asynchronous because they are batched and deferred for performance reasons."

- 공식 문서: https://react.dev/reference/react/useState

먼저 setState() 함수를 호출하면

1. 리액트는 이 함수를 업데이트큐에 집어넣는다.

2. 이벤트 루프가 끝날때까지 이 업데이트 함수들을 업데이트 큐에 다 모아뒀다가(= 스케줄링=작업순위 관리)

3.그 컴포넌트의 렌더링을 트리거 하면서 모아둔 setState() 함수들을 한번에 실행하고(=batching)

4. 바뀐 state값으로 화면을 그려준다.

이 과정은 컴포넌트별로 진행된다.

이걸 통해서 우리가 업데이트 된 상태를 화면에서 볼 수 있게 되는것이다.

그래서 처음 예시 상황에서 state는 이벤트 루프가 끝나기 전에 실행되는 코드일 것으로, 업데이트가 되지 않은 상태값일 것이다.

만약 내가 원하는 시점에 상태를 업데이트한 뒤 그걸 가지고 뭔가 하고 싶다면

상태 업데이트는 따로 해두고, 그 값을 직접 가져와서 쓰거나 useEffect를 사용해서 상태 변화를 감지한 뒤 써야 할 것 같다.

console.log

20260407

면접(보고 온 사람) 보고 온 후기

[React] useRef / forwardRef

[node.js] nvm 노드 버전 관리 (feat. nvm-windows, 버전 수동설치)

[REACT]다국어 지원 시스템 (with. react-intl)

[회고] 능력 개발 교육원 k-디지털 분야 교직 훈련 과정 회고

[tanstack-query/react-query] API 중복 호출 문제 (feat. enabled 옵션)

* useQuery의 enabled 옵션 특

react state update & call api in a method with new state

면접 준비 - 3년차 프론트엔드 개발자의 면접 예상 문답

1. 기술 스택 관련 질문

Q. React 기반의 프로젝트 중 가장 기억에 남는 것은? 어떤 기술적 도전이 있었고 어떻게 해결했나요?

Q. Spring Boot로 개발한 경험이 있으신데, 어떤 구조로 설계했나요?

Q. AWS EC2, Nginx, PM2 기반의 운영 경험에서 기억에 남는 에피소드는?

2. 프로젝트 경험 중심

Q. ㅁㅁㅁ 프로젝트에서 로그 설계를 주도했다고 했는데, 어떤 방식으로 설계하셨나요?

Q. 공공 과제 프로젝트에서 협업 중 어려웠던 점과 해결 방법은?

3. 회사/직무 관련

Q. OOO의 철학 “감시보다 예방”에 공감한다고 했는데, 어떤 경험에서 그렇게 느꼈나요?

Q. React Native, Next.js는 경험이 없으신데 괜찮으신가요?

4. 성향/역량 검증

Q. 문제가 생겼을 때 본인의 해결 방식은?

Q. 주말이나 야근 근무에 대한 생각은?

5. 기타/확장형 질문

Q. 경영학 전공이 개발에 도움이 된 적이 있나요?

Q. 최근 관심 갖고 공부 중인 기술은?

< 예상 질문 모음 >1. 기술 스택 관련 질문 (React, Spring Boot, Java 등)

2. 프로젝트 경험/성과 중심 질문

3. OOO 회사/직무 관련 예상 질문

4. 성향/역량 검증 질문

5. 기타 기본 및 확장형 질문

setState를 했는데 바로 직전 상태값이 나와요

< 예상 질문 모음 >

1. 기술 스택 관련 질문 (React, Spring Boot, Java 등)