나무보다 숲을

2025년 2월 회고

회고

2025.03.10 22:07

부스트캠프 리팩토링 기간 회고

네이버 부스트캠프

2025.03.02 23:59

JavaScript

[JavaScript] V8 엔진

JavaScript

2025.02.02 11:56

JavaScript 엔진의 등장웹 브라우저 전쟁과 성능 경쟁2008년 이전의 JavaScript는 웹에서 단순한 스크립트 언어로 사용됐다. 브라우저들은 인터프리터로 JavaScript를 실행했고, 성능은 중요한 고려 사항이 아니었다. 하지만 웹 애플리케이션이 복잡해지면서 상황이 바뀌었다. Gmail과 Google Maps 같은 웹 애플리케이션이 등장하면서 JavaScript 성능이 브라우저의 경쟁력이 됐다. 구글은 기존 JavaScript 엔진의 한계를 확인했다. 파이어폭스의 SpiderMonkey와 인터넷 익스플로러의 Chakra로는 복잡한 JavaScript 애플리케이션을 처리하기 어려웠다. 브라우저 전쟁은 JavaScript 생태계를 변화시켰다. 브라우저 개발사들은 JavaScript 엔진 개선에 ..

[JavaScript] 이벤트 루프(Event Loop)와 비동기 통신

JavaScript

2025.02.01 11:08

브라우저에서 검색창에 키워드를 입력하면 어떤 일이 일어날까? 검색 결과를 가져오기 위해 서버에 요청을 보내고, 응답을 받아 화면에 표시하는 동안에도 우리는 다른 탭을 열거나 스크롤을 내릴 수 있다. 하지만 자바스크립트는 싱글 스레드 언어다. 그렇다면 한 번에 하나의 작업만 처리할 수 있지 않을까? 이런 동작이 어떻게 가능한 걸까? 동기$_{synchronous}$ 처리는 은행 창구에서 한 명의 고객이 업무를 마쳐야 다음 고객의 업무를 처리하는 것처럼 한 작업이 끝나야만 다음 작업을 시작하는 방식이다. 반면 비동기$_{asynchronous}$ 처리는 카페에서 주문을 받은 후 에스프레소 샷이 내려오는 동안 다음 손님의 주문을 받을 수 있는 것처럼 이전 작업이 끝나기를 기다리지 않고 다음 작업을 실행할 수 ..

[JavaScript] 함수 레벨 스코프와 블록 레벨 스코프

JavaScript

2025.01.30 19:43

자바스크립트의 스코프는 변수의 유효한 범위를 의미한다. var로 선언한 변수는 오직 함수의 중괄호 내부만을 유효 범위로 인정하는데, 이를 함수 레벨 스코프$_{function \space level \space scope}$라 한다. 반면 C나 자바 등 대부분의 프로그래밍 언어는 모든 중괄호(함수, if문, for문, while문 등) 내부를 유효 범위로 인정한다. 이러한 특성을 블록 레벨 스코프$_{block \space level \space scope}$라 한다. var x = 1;if (true) { var x = 10; console.log("if문 안쪽:", x);}console.log("if문 바깥쪽:", x);위 예제를 보면 if문 내부와 외부에서 선언된 x가 같은 변수를 가리킨다. v..

[JavaScript] 스코프 체인 (scope chain)

JavaScript

2025.01.26 19:43

들어가며자바스크립트에서 스코프 체인은 변수와 함수의 유효 범위를 결정한다. 이 글에서는 스코프 체인이 무엇이고 어떻게 동작하는지를 이해해보려 한다. 스코프 체인에서 변수를 찾는 과정은 단방향으로 이루어진다. 자바스크립트 엔진은 현재 스코프에서 시작해 상위로 올라가면서 변수를 찾아간다. 결과적으로 스코프가 변수와 함수의 접근성을 단순하고 일관된 규칙으로 관리하는 것을 이해할 수 있을 것이다. 스코프 체인함수는 전역이나 다른 함수 내부에서 정의할 수 있다. 함수 내부에 다른 함수를 정의하는 것을 함수의 중첩이라 하며, 이때 내부에 정의된 함수를 중첩 함수$_{nested \space function}$, 이를 감싸는 함수를 외부 함수$_{outer \space function}$라 한다. 함수가 중첩되면 ..

[JavaScript] 스코프(scope)란

JavaScript

2025.01.25 23:59

개요최근 자바스크립트의 실행 컨텍스트와 클로저를 공부하면서 더 기본이 되는 개념을 먼저 정리해야 할 필요성을 느꼈다. 실행 컨텍스트와 클로저는 자바스크립트의 동작 원리를 이해하는 데 중요한 개념이지만, 이 것들을 제대로 이해하기 위해서는 그 토대가 되는 스코프에 대한 이해가 선행되어야 함을 느꼈다. 이번 글에서는 스코프의 기본 개념을 정리하고, 이를 바탕으로 다음 글에서 실행 컨텍스트와 클로저로 확장해나갈 예정이다. 스코프란스코프는 모든 프로그래밍 언어의 기본 개념 중 하나다. 특히 자바스크립트는 다른 언어와 구별되는 스코프 특징이 있어 이해가 더욱 중요하다. 아래에서 자세히 설명하겠지만, var와 let/const 키워드로 선언한 변수의 스코프가 서로 다르게 동작한다. 스코프는 식별자(변수명, 함수명..

문제 해결

[React] Scroll event부터 Intersection Observer API까지

문제 해결

2025.03.06 00:15

개요Denamu 서비스를 개발하면서 포스트를 보여주는 기능을 만들어야 했다. 여러 페이지네이션 방식 중 무한 스크롤 방식이 있다는 것을 알게 되었고, 서비스와 결이 맞는 것 같아 구현해보기로 했다. 인터넷에서 찾아보니 Intersection Observer API와 React Query 조합이 많이 사용되는 것을 알게 되었고, 이 방식으로 무한 스크롤을 구현했다. 나중에 추가적으로 자료를 찾아보니 Intersection Observer API가 리플로우를 방지한다는 사실을 알게 되었고, 이게 왜 그런지 궁금증이 생겼다. 사실 최신 기술만 접하게 되다보면 이전 방식의 문제점과 기술이 어떻게 발전해왔는지 이해하기 어렵다. 그래서 무한 스크롤 구현 기술이 어떻게 발전해왔는지 살펴보고자 한다. 예전에 주로 사용..

테스트 커버리지가 제대로 인식되지 않는 현상 해결

문제 해결

2025.01.19 13:05

Vitest, React Testing Library로 컴포넌트 테스트 코드를 작성하다 문제를 겪었다. 커버리지 측정 실패RssRegistrationModal 컴포넌트의 테스트 코드를 작성한 뒤 커버리지를 확인했더니 기존에 만들어놓았던 FormInput 테스트 코드의 커버리지가 0%가 나왔다. 테스트는 정상적으로 통과했고, 컴포넌트의 기능을 모두 테스트하고 있었다. 하지만 갑자기 FormInput 컴포넌트가 변했다. 코드를 짜다가 어떤 코드를 잘못 건드려서 그런 것이라 생각했다. 원인 탐색 1. named, default export 방식이 잘못되었나?RssRegistrationModal 컴포넌트 테스트 코드를 작성하면서 FormInput 컴포넌트를 named export로 변경했었다. 원래 컴포넌트..

[React] 좋아요 기능 버그 해결 및 서버 데이터 활용

문제 해결

2024.12.23 21:31

들어가며경북대 축제 웹사이트를 개발하면서 부스별 좋아요 기능을 구현했다.개발 초기에는 단순해 보였던 좋아요 기능이었지만, 실제 서비스 중에 예상치 못한 버그들이 발견되었다.서비스 오픈 직후, 사용자들로부터 두 가지 주요 문제점이 보고되었다. 새로고침 시 좋아요 수가 2개씩 증가하는 현상좋아요를 클릭한 후 페이지를 새로고침하면 좋아요 수가 예상보다 증가여러 번 새로고침할 때마다 계속해서 숫자가 비정상적으로 증가화면에 표시되는 좋아요 수와 서버의 실제 데이터 불일치동일한 부스의 좋아요 수가 목록과 상세 페이지에서 다르게 표시실제 서버에 저장된 좋아요 수와 화면에 표시되는 수가 일치하지 않음 원인 분석클라이언트 계산문제가 된 코드를 살펴보자.첫 번째 문제의 원인은 컴포넌트 레벨에서 좋아요 수를 직접 계산하는 ..

[Javascript] 브라우저 팝업 차단으로 인한 문제와 해결책

문제 해결

2024.12.01 23:20

브라우저 차단 팝업 문제각 블로그의 포스트가 있는 컴포넌트를 클릭 하게 되면 조회수 API를 보낼 수 있도록 구현했다.클릭 후 해당 포스트 페이지로 이동하는 것은 잘 됐지만, 이상하게 조회수가 올라가는 API는 잘 작동하지 않았다. 대부분의 브라우저들은 UX와 보안을 위해 팝업 차단 정책이 존재한다. 사용자의 직접적인 클릭 이벤트가 아닌 경우나, window.open() 메서드를 통한 접근에 제한을 두고 있다. MDN 문서를 보면 아래와 같이 나와있다.null is returned if the browser fails to open the new browsing context, for example because it was blocked by a browser popup blocker.브라우저 팝업 차..

[Typescript] 사진과 영상을 FormData로 서버에 전송하기

문제 해결

2024.09.19 21:20

개요포토 부스 애플리케이션 프로젝트에서 주요 기능 구현을 맡게 되었다. 그 중 하나는 사용자가 찍은 사진과, 찍는 과정이 녹화된 영상을 서버에 전송해야 했다. 네컷사진을 떠올려보면 될 것 같다.이 과정에서 FormData를 활용해 멀티파트 형식으로 데이터를 전송하는 방법을 적용했다. FormData는 HTML 폼 데이터를 쉽게 구성하고 전송할 수 있게 해주는 웹 API이다. 파일 업로드와 같은 바이너리 데이터 전송에 보통 쓰인다고 한다.본 프로젝트에서는 한 장의 합성 이미지와 네 개의 개별 영상 파일을 동시에 전송해야 했기 때문에, FormData를 사용하는 것이 좋을 것이라 판단되었다. TypeScript를 사용한 것도 큰 도움이 되었다. 아직 TypeScript가 완전히 익숙해지지는 않았지만, API..

React

[React] React의 이벤트 시스템 이해하기

React

2025.01.29 18:50

React로 개발을 하다 보면 이벤트 핸들링은 피할 수 없다. 버튼 클릭, 폼 입력, 마우스 호버 등 사용자와의 상호작용을 처리하기 위해서는 이벤트를 다뤄야 한다. 하지만 브라우저마다 이벤트 처리 방식이 조금씩 다르다. React는 이런 브라우저 간의 차이를 어떻게 해결했을까? 합성 이벤트React는 브라우저 간 차이를 해결하기 위해 합성 이벤트$_{synthetic \space event}$ 개념을 도입했다. 브라우저의 네이티브 이벤트를 한 번 감싸서 모든 브라우저에서 동일하게 동작하도록 만든 것이다. 브라우저마다 이벤트를 처리하는 방식이 다르다는 점은 웹 개발에서 오랫동안 골칫거리였다. 예를 들어 Internet Explorer에서는 이벤트 객체를 전역 window 객체를 통해 접근해야 하고, 다른..

[React] Uncontrolled component, Controlled component

React

2025.01.28 14:33

React로 개발을 하다 보면 사용자의 입력을 받아야 하는 상황이 자주 생긴다. 이메일 입력, 게시글 작성, 설문 응답처럼 폼을 사용하는 기능을 구현할 때가 많다. React는 선언적인 특성을 가지고 있어서 기존 HTML 폼을 다루는 방식과는 다른 접근이 필요하다. 폼을 다루는 방식은 크게 Uncontrolled Components와 Controlled Components로 나눌 수 있다. Uncontrolled componentUncontrolled Components는 React가 직접 상태를 제어하지 않는 폼 요소를 의미한다. 일반적인 HTML 폼처럼 DOM이 직접 폼 데이터를 관리하며, React는 필요할 때만 ref를 통해 값을 읽어오는 방식이다. 기본적인 Uncontrolled Compone..

[React] useEffect의 내부적인 동작

React

2024.12.13 02:11

useEffect를 사용할 때 보통 이렇게 작성한다.useEffect(() => { // ... return () => { // cleanup.. }}, [deps]) 우리가 컴포넌트에서 useEffect를 호출하면, React는 내부적으로 여러 단계를 거쳐 Effect 객체를 생성하고 관리한다. 먼저 우리가 호출하는 useEffect는 이 파일에서 시작된다.앞으로 파일 경로가 계속 나오게 될텐데 facebook/react의 repository를 참고하면 된다.`packages/react/src/ReactHooks.js`export function useEffect( create: () => (() => void) | void, deps: Array | void | null,): void { c..

[React] 하나의 index.ts에서 import 및 export 하기

React

2024.05.09 00:00

큰 React 프로젝트를 구성할 때 코드의 관리와 가독성을 높이기 위해 각 디렉토리별로 index.ts 파일을 활용하는 전략이 많이 사용된다. 이 방식을 활용하면 여러 모듈을 효과적으로 관리하면서, 프로젝트의 구조를 조금 더 확실하게 해주어 이번 프로젝트에 도입하게 되었다. 이렇게 했을 때 가지는 이점은 아래와 같다. 1. 깔끔한 임포트디렉토리 내에 위치한 index.ts 파일은 외부에서 해당 디렉토리를 지칭하는 이름만으로 모듈을 임포트할 수 있게 해줌으로써 비교적 간단해진다. 기존에 사용하던 방식에서는 상대 경로가 더 길어질 수 있는데 반해, index.ts 파일을 사용하면 import 구문이 조금 더 깔금해지고 관리하기 쉬워진다.// index.ts가 없는 경우import { Ch..

[React] 컴포넌트 분리의 중요성

React

2024.02.22 00:00

컴포넌트 분리는 React 개발에서 기본적인 원칙으로 사용자 인터페이스를 독립적이고 재사용 가능한 부분으로 나누는 것이다. 이 방법론은 외형적인 조직에 관한 것 뿐만 아니라, 애플리케이션의 장기적인 생존성, 유지보수성 및 개발 팀의 효율성에 중대한 영향을 미친다. 향상된 코드 유지보수성 컴포넌트 분리를 위한 가장 설득력 있는 주장 중 하나는 코드 유지보수성에서의 극적인 개선이다. 개발자들이 기능을 별개의 컴포넌트로 분리함으로써 애플리케이션의 한 부분에서의 변경이 의도치 않게 다른 부분에 영향을 미치지 않도록 한다. 이러한 분리는 업데이트와 디버깅을 단순화한다. 왜냐하면 어떤 변경의 범위도 자연스럽게 수정되는 컴포넌트로 한정되기 때문이다. 예시 - 사용자 정보 표시와 편집 기능 및 데이터 가져오기 로직을 ..

Network

[Network] HTTP/0.9

네트워크 (network)

2025.02.22 17:19

🔖 HTTP 이해HTTP를 제대로 이해하기 위해서는 현재의 사양을 단순히 학습하는 것보다, 이 프로토콜이 어떻게 발전해왔는지 그 역사적 맥락을 살펴보는 것이 도움이 된다. HTTP는 본질적으로 데이터를 주고받는 통신 프로토콜로, 메서드와 경로, 헤더, 바디, 그리고 상태 코드라는 요소들로 구성되어 있다. HTTP는 1990년 최초 구현된 이후 꾸준히 진화해왔다. 최초의 HTTP/0.9는 단순히 HTML 문서를 주고받는 기능만 있었지만, 점차 폼 전송, 정보 갱신, 실시간 채팅 등 다양한 기능이 추가되면서 HTTP/1.0, HTTP/1.1, 그리고 HTTP/2로 발전했다. 특히 HTTP/0.9라는 이름은 HTTP/1.0이 등장한 후에 붙여진 것으로, 이는 1.0 이전 버전임을 나타내기 위함이었다. 🔖..

[Network] HTTP와 HTTPS

네트워크 (network)

2025.02.04 21:42

HTTP와 HTTPS는 웹을 구성하는 가장 기본적인 프로토콜이다. 웹 브라우저로 웹 페이지를 열 때마다 HTTP나 HTTPS를 통해 서버와 통신한다. 주소창에서 흔히 보는 http://와 https://가 바로 이 프로토콜을 나타낸다. 이 두 프로토콜의 가장 큰 차이점은 보안이다. HTTP는 텍스트를 암호화하지 않은 채로 주고받기 때문에 누군가 중간에서 내용을 들여다보거나 변조할 수 있다. 반면 HTTPS는 데이터를 암호화해 전송하므로 중간에서 정보를 가로채더라도 내용을 알아볼 수 없다. 모던 웹에서는 HTTPS가 선택이 아닌 필수가 되었다. 구글은 HTTPS를 사용하는 웹사이트에 검색 순위 가산점을 부여하고, 크롬 브라우저는 HTTP 사이트를 방문할 때 '주의 요함' 경고를 표시한다. 이제 안전한 웹을..

[Network] OSI Model과 7 Layer 별 장비

네트워크 (network)

2025.01.11 15:28

OSI Model이란OSI$_{Open \space Systems \space Interconnection}$ 모델은 서로 다른 통신 시스템이 표준 프로토콜을 사용하여 통신할 수 있도록 국제표준화기구(ISO)에서 개발한 개념적인 모델이다. 복잡한 네트워크 통신을 7개의 계층으로 나누어 단순화했다. 각 계층은 유기적으로 연결되어 상위 계층은 하위 계층의 기능을 이용하고, 하위 계층은 상위 계층에 서비스를 제공하는 구조다. 통신이 일어나는 과정을 단계별로 파악할 수 있고 특정 계층의 기술이 발전하더라도 다른 계층에는 영향을 미치지 않는 장점이 있다. 현재는 더 단순한 TCP/IP 모델을 주로 사용해 OSI 모델을 엄격하게 따르지는 않지만, OSI 모델은 여전히 네트워크 문제를 해결하는 데 매우 유용한 프레임..

TCP/IP 프로토콜 4판 - 연습문제 15장

네트워크 (network)

2024.01.12 00:00

본 게시글은 TCP/IP 프로토콜 4판 - 연습문제 15장 풀이입니다. 제가 이 책을 공부하면서 풀었던 풀이의 흔적이므로 정답이 아닐 수 있습니다. 혹여나 틀린 부분이 있어 오류를 댓글로 지적해주신다면 감사하겠습니다. TCP는 프로토콜이다. a. 스트림 지향 b. 메시지 지향 c. 블록 지향 d. 정답 없음 TCP는 라고 하는 패킷으로 바이트 열을 그룹화한다. a. 사용자 데이터그램 b. 세그먼트 c. 데이터그램 d. 정답 없음 TCP는 프로토콜이다. a. 연결 지향 b. 비연결형 c. 비신뢰성 d. 정답 없음 TCP는 전송 프로토콜이다. a. 비신뢰성 b. 최선(best-effort) 배달 c. 신뢰성 있는 d. 정답 없음 TCP는 데이터가 오류 없이 안전하게 도착했는지를 검사하기 위하여 를 이용한다...

TCP/IP 프로토콜 4판 - 연습문제 14장

네트워크 (network)

2024.01.11 00:00

본 게시글은 TCP/IP 프로토콜 4판 - 연습문제 14장 풀이입니다. 제가 이 책을 공부하면서 풀었던 풀이의 흔적이므로 정답이 아닐 수 있습니다. 혹여나 틀린 부분이 있어 오류를 댓글로 지적해주신다면 감사하겠습니다. UDP는 __ 전송 프로토콜이라고 한다. a. 비연결형, 신뢰성 있는 b. 연결 지향, 비신뢰성의 c. 비연결형, 비신뢰성의 d. 정답 없음 UDP는 __ 통신을 제공하는 것을 제외하고는 IP의 서비스에 추가로 제공하는 기능은 없다. a. 노드-대-노드 b. 프로세스 대 프로세스 c. 호스트 대 호스트 d. 정답 없음 UDP는 __의 약자이다. a. 사용자 배달 프로토콜 b. 사용자 데이터그램 절차 c. 사용자 데이터그램 프로토콜 d. 정답 없음 로컬 호스트와 원격지 호스트는 IP 호스트로..

회고

2025.03.10 22:07

2025년 2월 회고