진짜 사소하고 사소한데 방심하기 쉬운 ??와 ||의 차이

이전에 기록해놨던 코드가 떠올랐다.const [currentTeam, setCurrentTeam] = useState( user?.currentTeam ?? (teams.length > 0 ? teams[0].id : undefined));처음엔 그냥 잘 넘어갔던 코드인데, 어느 순간 user.currentTeam이 빈 문자열인데도 기본값으로 바뀌어버리는 상황을 겪고 나서 이 코드가 눈에 밟히기 시작했다. 처음에는 그냥 ||를 써도 무방하다고 생각했지만, 의외로 작은 차이가 UX와 버그 발생에 직접적인 영향을 줄 수 있다는 것을 경험하게 되었다.이 글은 그 경험을 바탕으로 ??, || 그리고 관련 문법을 정리해보려 한다.??와 ||, 뭘 기준으로 다르게 동작할까??? (null 병합 연산자)는 값이 n..

• format_list_bulleted JS&TS DeepDive
• · 2025. 4. 15.
• textsms

[BOJ] 백준 7562 node.js 나이트의 이동 - 2차원 배열 초기화

백준에서 "나이트의 이동" 문제를 풀다가 예상 외의 버그를 마주했다.BFS 구현 자체는 간단한 문제였지만, 결과가 이상하게 나오고 TypeError까지 발생하면서 꽤 시간을 썼다.결론적으로는 자바스크립트의 2차원 배열 초기화 방식과 변수 오타라는 기본적인 실수가 원인이었다.문제 개요체스판 위의 나이트가 한 칸에서 다른 칸으로 이동할 때 최소 몇 번의 이동이 필요한지를 구하는 문제다.체스판 크기는 l x l이고, 나이트는 8가지 방향으로 움직일 수 있다. BFS로 최단 거리를 구하면 된다.BFS는 잘 돌아가는데 이상한 에러가...초기 구현은 아래와 비슷했다.visited = Array.from({ length: len }, () => new Array(len).fill(false));visited[x][y..

• format_list_bulleted CodingTest DeepDive
• · 2025. 4. 2.
• textsms

[BOJ] 백준 15650 N과M (2) js nodejs - 간결과 효율 부족

백준 15650 문제는 "1부터 N까지 자연수 중에서 중복 없이 M개를 고른 뒤 오름차순으로 출력하는" 전형적인 조합 문제입니다. 처음에는 단순히 res.includes()로 중복을 체크하고, 오름차순인지 매번 검사하는 식으로 코드를 작성했습니다. 이 방식도 입력이 아주 크지 않다면 통과하긴 하지만, 조금 더 효율적으로 작성할 수 있는 방법이 있더군요.이 글에서는 제가 처음에 썼던 코드와, 강사님의 예제 코드를 비교해보겠습니다. 마지막에는 비슷한 문제를 만났을 때 어떻게 접근하면 좋을지, 그리고 추가 팁을 간단히 정리해봤습니다.처음에 작성했던 코드let fs = require("fs");let read = fs.readFileSync("/dev/stdin").toString().trim();let bas..

• format_list_bulleted CodingTest DeepDive
• · 2025. 3. 18.
• textsms

React Hook Form 필드 초기화 이슈, form의 state 이해하기

현장실습 인턴을 진행하던 중, 댓글이나 답글 기능을 만들면서 React Hook Form을 사용하게 되었습니다. React Hook Form은 폼 상태 관리와 유효성 검사를 간편하게 처리할 수 있게 도와주는 라이브러리로, 불필요한 리렌더링을 최소화하기 때문에 자주 사용하게 됩니다.예를 들어, useState를 사용한다면 input에 값을 한 글자 입력할 때 마다 리렌더링이 발생하기 때문에, form을 주로 사용합니다.그러나 댓글을 작성하고 나서 입력란을 초기화하는 과정에서 생각하지 못한 문제가 생겼습니다. 이번 글에서는 제가 실제로 겪었던 문제의 원인과 해결 방법을 알기 쉽게 설명하려고 합니다.React Hook Form의 기본적인 상태React Hook Form은 폼과 필드의 상태를 효과적으로 관리하기..

• format_list_bulleted React DeepDive
• · 2025. 3. 17.
• textsms

HTML body의 기본 Margin(흰 테두리)

열심히 컴퓨터종합설계를 하고 있던 저는 어마어마한 문제를 맞이했습니다. 분명히 모든 컴포넌트의 마진을 0으로 줬음에도 불구하고, 화면의 테두리에 흰색이 조금 남아있는 것입니다!!   잘 보일지 모르겠으나, 마진도 없고 패딩도 없고 백그라운드 컬러를 야무지게 그라데이션으로 설정해놨는데,테두리에 흰 색이 있는 겁니다!! 만능 킹 갓 제너럴 엠페러 지피티 형님한테 여쭤봐도 제대로 된 답을 주지 않더군요... 그러다 개발자 모드를 켜서 요소를 찍어보니 어마어마한 사실을 발견했습니다.아무런 스타일 옵션을 주지 않았음에도 불구하고,이미지와 같이 body에 무려 8px의 마진이 설정되어 있었습니다. 이 얼마나 억울한 일입니까?알아보니 예전엔 이런게 있어야 편해서 기본값으로 설정되어 있는건데, 여전히 이게 남아있는거라..

• format_list_bulleted Upscaling
• · 2024. 5. 1.
• textsms

13. 리액트에서 사용하는 타입스크립트

HTML 타입 const usernameInput = document.getElementById('username') as HTMLInputElement; const submitButton = document.getElementById('submit') as HTMLButtonElement; 다음과 같이 HTML태그Element 형태로 DOM 노드에 대한 타입을 사용 가능. 이벤트 타입의 경우 이벤트에 따라 다양하게 있는데, 뭐 onClick의 경우 MouseEvent임. VSCode에서 하나씩 찾아보면 됨! React 타입 Prop : 인터페이스 이용 interface Props { className?: string; id?: string; children?: ReactNode; onClick: (e:..

• format_list_bulleted Upscaling
• · 2024. 4. 17.
• textsms

12. TS(타입스크립트) 기본 문법 및 타입 정리

TS에서는 변수의 타입을 지정해줘야 한다! JS에서는 아무렇게나 선언하고 초기화하고 바꿔도 상관없지만, TS에서는 그러면 맴매 맞는다! 타입지정 : 기본 자료형들 String, Number, Boolean, Undefined, Null -> 여기서 뒤에 []를 붙여 배열, [number, string] 등을 붙여 튜플 자료형을 지정할 수 있음. 타입 지정 : 객체 let product: { id: string; price: number; membersOnly?: boolean; // 필수가 아닌 프로퍼티 sizes: string[]; } = { id: 'c001', price: 129000, sizes: ['M', 'L', 'XL'], }; if (product.membersOnly) { console...

• format_list_bulleted Upscaling
• · 2024. 4. 17.
• textsms