OCEAN-WARD BOUND

들어가며.. 안녕하세요, Ocean입니다. 오늘은 평소 잘 모르던 개념인자바스크립트의 이터러블(Iterable)과 이터레이터(Iterator)를 확실하게 정리해 보겠습니다. 참고 글코어 자바스크립트 - iterable 객체1. 이터러블이란?이터러블(iterable, 반복 가능한) 객체는, 이름 그대로 순회 가능한 객체를 말합니다.데이터를 순회하는 일은 매우 흔한 작업이며, 우리가 잘 알고 있는 배열은 순회하기에 적합한 구조를 가지고 있습니다. 자바스크립트에서는 어떤 객체가 특정한 조건을 가지면 배열이 아니더라도 배열처럼 순회할 수 있습니다.이 때, 이 특정한 조건을 공통된 인터페이스로 추상화하여 객체에 적용하면 해당 객체를 이터러블 객체라고 부를 수 있게 됩니다. 이터러블 객체의 조건`Symbol.ite..

들어가며..안녕하세요, Ocean입니다. 입사한지 3개월 차인 우당탕탕 신입 개발자입니다. 이번에 팀장님에게 코드 리뷰를 받던 중 흥미로운 부분이 있어서 개발자 단톡방에서 질문도 하고 이야기도 나누고 했던 부분을 정리하고자 합니다. 1. 문제의 코드어떠한 상태를 변경하는 `StatusChangeButton` 컴포넌트입니다. Status를 업데이트한 후의 로직은 컴포넌트를 사용하는 모든 곳에서 같지만, 해당 Status가 어떤 주체의 상태인지에 따라서 api가 달라지기 때문에 mutate를 외부에서 받습니다.(*ex: 사람이라면 personMutate, 자동차라면 carMutate)또한 `mutate` 이후에 로직인 `refetch`와 쿼리 키 무효화를 위한 쿼리 키도 전달 받습니다.// 외부에서 muta..

들어가며..안녕하세요, Ocean입니다.React로 개발을 진행하다 보면 파일들을 분리하고 이를 import 또는 export 하는 일이 빈번합니다. 이는 코드의 재사용성을 높이고 유지보수를 용이하게 하기 위함인데, 이러한 코드 분리 원칙을 모듈 시스템이라고 합니다.이번 글에서는 자바스크립트 모듈 시스템의 필요성, 발전 과정과 종류, 간단한 문법을 정리하며 이해하는 시간을 가져보겠습니다.참고 글1. 자바스크립트의 표준 정의 : CommonJS vs ES Modules2. MDN - Javascript Modules0. 모듈 시스템이란?  모듈 시스템은 코드의 재사용과 관리 용이성을 위해 파일 단위로 코드를 나누고, 이를 서로 연결할 수 있는 방법과 규칙을 제공하는 것을 말합니다. 모듈 시스템은 복잡한 프..

forwardRef와 useImperativeHandle 정리안녕하세요, Ocean입니다.입사 준비를 하면서, 그동안 잘 알지 못했던 React API와 Hooks에 대해 정리하고 있습니다. 이번에는 비교적 간단하면서도 서로 연관성이 높은 forwardRef와 useImperativeHandle에 대해 알아보려고 합니다.이 두 가지는 컴포넌트의 명령형(Imperative) 접근 방식을 다룰 때 유용하며, React의 선언적 데이터 흐름과 조화를 이루도록 설계되었습니다. 이 주제를 간결하고 명확하게 정리해보겠습니다. 😊참고 글1. forwardRef - React2. useImperativeHandle - ReactforwardRefforwardRef는 React에서 컴포넌트가 부모로부터 전달된 ref를..

React에서 상태 관리와 클로저 문제 해결안녕하세요 Ocean입니다.최근 프론트엔드 면접에서 React에서 상태를 어떻게 관리하는지, 그리고 이 과정에서 발생하는 클로저 문제에 대해 질문을 받았습니다. 사실 이 문제는 생각해본 적이 없어서 답변을 잘 못했었는데, 여러 자료를 찾아보니 좋은 글들이 많았습니다. 그래서 이 기회를 통해 관련 자료들을 정리해보았습니다.참고 글1. React useState의 동작 원리와 클로저2. React Hook은 실제로 어떻게 동작할까? (번역)3. React Hooks: 마술이 아니라 그저 배열일 뿐이다 (번역)React의 useState훅은 함수형 컴포넌트에서 상태를 관리하는 중요한 도구입니다. 또한 useState는 클로저를 설명하는 아주 좋은 예이기도 합니다.이번..

102. Binary Tree Level Order Traversal난이도: Medium관련 토픽: 이진 트리, BFS문제 설명이진 트리의 루트 노드가 주어질 때, 노드의 값을 레벨 순서대로 탐색한 결과를 반환하는 문제입니다.즉, 트리의 각 레벨을 왼쪽에서 오른쪽으로 순차적으로 탐색하여 노드의 값을 반환해야 합니다.Given the root of a binary tree, return the level order traversal of its nodes' values. (i.e., from left to right, level by level).입력 및 출력 예시Example 1:Input: root = [3,9,20,null,null,15,7]Output: [[3],[9,20],[15,7]]Exampl..

요새 LeetCode로 문제를 푸는 코딩테스트 스터디를 진행 중입니다 ㅎㅎ매주 화요일마다 5문제씩 푸는데, 초반에는 그래도 좀 풀만 했지만 뒤로 갈수록 배경 지식이 필요한 문제들이 많이 나오더라고요.무지성으로 풀지 않기 위해 자료구조나 알고리즘의 이론적인 부분도 조금씩 공부하면서 풀어볼 예정입니다.그래서 오늘 알고리즘 분석에 자주 쓰이는 점근적 표기법과 Big O 표기법을 정리해 보도록 하겠습니다. 목차점근적 표기법이란?Big-O 표기법이란?자주 등장하는 복잡도 예시 점근적 표기법(Asymptotic Notation)이란?점근적 표기법은 알고리즘의 시간 복잡도와 공간 복잡도를 입력 크기 n이 매우 커질 때를 분석하여, 성능의 변화를 평가하기 위해 사용하는 수학적 도구입니다. 이는 알고리즘의 실행 시간 또..

1. Web Vitals?Web Vitals는 웹에서 우수한 사용자 환경을 제공하기 위해 필수적인 품질 지표들의 통합 가이드를 제공하기 위한 Google의 이니셔티브(전략, 계획)입니다.Google의 검색 엔진은 다양한 웹 사이트의 성능을 측정하여, 이를 검색 엔진 순위 시스템에 반영합니다. 만약 성능을 측정하는 표준이 없으면, Google의 검색 엔진은 어떤 웹 사이트가 우수한 성능을 가지고 있는지 파악하기 어렵고, 개발자 또한 자신의 웹 사이트의 성능을 검색 엔진에 제공하기 어려워집니다. Web Vitals는 이러한 문제를 해결하기 위해, 개발자가 웹사이트의 성능을 체계적으로 측정하고 개선할 수 있도록 명확한 기준을 제시합니다. 이를 통해 웹사이트의 사용자 경험을 최적화할 수 있으며, 구글 검색 엔진..

tailwindcss의 사용법을 어느정도 익힌 후, 새로운 스타일링 라이브러리를 찾아보던 중 Vanilla Extract라는 것을 알게 되었어요.Vanilla Extract: Zero Runtime Stylesheets-in-TypeScriptVanilla Extract는 공식 Github에서 "Zero Runtime Stylesheet-in-typescript" 라고 소개합니다. 기본적으로 TypeScript 파일에서 스타일을 지정할 수 있는 CSS-in-JS 방식이지만, styled-components나 Emotion과는 다르게 런타임에 스타일을 생성하지 않고, Sass나 Less처럼 빌드 시에 스타일을 생성한다고 합니다.CSS-in-JS의 장점과 단점styled-components와 emotion은..

이 책을 선택한 이유는? 본격적인 타입스크립트 학습에 앞서, 타입스크립트의 필요성이 대두된 보다 근본적인 이유가 궁금했습니다. 깊게 배운 언어가 Js뿐이기 때문에 정적 타입 언어가 낯설었고, 기존의 Js만으로도 크게 문제 없이 개발을 할 수 있으니 추가적으로 타입을 명시하는 행위가 크게 와닿지 않았어요. 그러한 궁금증에 답이 될까 싶어서 해당 저서를 선택하게 되었습니다.이 책의 주요한 특징으로는 어떠한 정적 타입 언어의 국한된 기술서와 같은 것이 아닙니다. 정적 타입 언어의 필요성과 특징들을 알기 쉽게 전달하는 개념서에 가까워요. 그래서 정적 타입 언어의 기능(타입 추론, 제네릭 등)들을 다양한 언어로 예시를 들어서 설명합니다. 타입스크립트 만을 위한 저서는 아니지만 타입스크립트의 예시도 많이 등장하기 ..