현재 개발 블로그의 버전 관리는 GitHub Actions를 통해 master 브랜치에 merge되었을 때 버전이 올라가도록 되어있다. 만약 현재 버전이 0.1.0일 때 PR 제목에 v1.0.0이라고 적으면, v1.0.0이라는 이름으로 깃허브 태그가 생성되고 이를 바탕으로 배포가 이루어지는 구조였다. 초기에는 체감하지 못했지만, 점차 버전 관리가 제대로 되

블로그를 한동안 운영하다 보니 구조를 다시 잡아야겠다고 느꼈다. 목표는 두 가지다. 1) 방문자가 첫 화면에서 “이 블로그 주인이 어떤 개발자인지” 바로 이해하게 만들기 2) 프로젝트와 글을 체계적으로 탐색할 수 있게 만들기 이번 리뉴얼은 위 목표를 기준으로 정보 구조(IA)와 주요 기능을 정리한 기획이다. 메인페이지 구성 메인페이지는 “빠른 이해 → 탐색

판매자와 체험자가 공존하는 체험 예약 플랫폼인 '글로벌 노마드' 프로젝트를 완료했다. Next.js App Router 환경에서 캘린더와 지도 뷰 SDK를 활용하는 것을 목표로 시작한 프로젝트다. 개발을 진행하며 직면했던 문제와 해결 과정을 START 기법으로 정리한다. Situation (상황) 4명의 프론트엔드 개발자가 협업하여 플랫폼을 구축했다. Gi

Next.js App Router 환경에서 마이페이지 프로필 수정 기능을 구현하던 중 데이터 동기화 문제를 겪었다. 서버 컴포넌트에서 유저 정보를 프리패칭(Pre-fetching)하여 클라이언트 컴포넌트로 넘기고, 클라이언트에서는 React Query와 Zustand를 이용해 상태를 관리하는 구조였다. 닉네임이나 프로필 이미지를 변경하는 API 호출이 성공

체험 신청 내역 모달을 구현하던 중, 전달받은 디자인 시안의 컴포넌트 배치에 어색함을 느꼈다. 코드를 작성하며 데이터 흐름을 살펴보니 기존 구조는 사용자의 인지 흐름과 맞지 않는다고 판단했다. 결과적으로 디자인 시안의 배치를 임의로 수정하여 구현했다. 변경 전후 비교는 다음과 같다. | Before (기존 시안) | After (개선된 UI) | | :--

현재 개발 중인 서비스에는 사용자의 입력을 받고 그 값을 검증해야 하는 폼(Form) 인터페이스가 유독 많았다. 아이디와 비밀번호 단 2가지만 입력받는 간단한 로그인 폼부터, 제목, 카테고리, 설명, 가격 등 9개가 넘는 필드를 꽉꽉 채워야 하는 '내 체험 등록' 기능까지 폼의 규모도 다양했다. 초기에는 컴포넌트 내부에 개별적인 상태를 두고 조건문으로 필드

Next.js App Router를 도입한 가장 큰 이유는 서버 컴포넌트(RSC)를 활용한 프리렌더링(Pre-rendering)과 이를 통한 SEO 최적화였다. 하지만 프로젝트를 진행하던 중 인증이 필요한 데이터를 서버 컴포넌트에서 페칭하려 할 때 구조적인 한계에 부딪혔다. 기존 인증 로직은 로그인 성공 시 발급받은 액세스 토큰과 리프레시 토큰을 브라우저의

Tailwind CSS를 사용해 재사용 가능한 UI 컴포넌트를 설계하다 보면 조건부 스타일링 처리에서 한계에 부딪힌다. 템플릿 리터럴과 삼항 연산자가 중첩되면서 코드가 지저분해지는 것은 물론이고 가장 큰 문제는 클래스 우선순위 충돌이다. 컴포넌트 내부에 기본 여백(p-4)을 설정해 두었는데 외부에서 props로 새로운 여백(p-8)을 주입할 경우 두 클래스

부트캠프 최종 프로젝트를 Next.js로 진행했다. Next.js의 렌더링 최적화와 Data Cache를 제대로 활용하려면 프레임워크가 자체 확장한 fetch 함수를 써야 한다. 하지만 캐싱 하나 때문에 Axios의 인스턴스(Instance)나 인터셉터(Interceptor) 같은 편의 기능을 포기하기엔 아쉬웠다. 직접 fetch 래퍼(Wrapper)를 구

이번 팀 프로젝트를 마치며 팀 단위 개발에서 기본기가 얼마나 중요한지 뼈저리게 느낄 수 있었다. 프로젝트를 진행하며 겪었던 나의 경험과 의사결정 과정을 START(Situation, Task, Action, Result, Takeaway) 기법을 이용해 정리해 본다. S (Situation: 상황) '더 줄게' 프로젝트를 선택한 이유는 유저 계정 타입에 따

팀 프로젝트 ‘더 줄게’를 개발하던 중, 공고 신청 프로세스에서 치명적인 버그를 발견했다. 일반적인 "신청 → 취소" 흐름은 정상적이었으나, "신청 → 취소 → 재신청 → (다시) 취소"로 이어지는 엣지 케이스에서 문제가 발생했다. 서비스의 공고 상세 조회 API는 유저 토큰을 헤더에 담아 요청하면 currentUserApplication이라는 필드를 통해

최근 메이플 헬퍼 프로젝트의 초기 목표가 크게 변경되었다. 앞으로의 프로젝트 방향성을 위해 AAR(After Action Review) 방식으로 중간 회고를 진행했다. 초기 목표 (Plan) 메이플 헬퍼는 약 1년 전에 만든 개인 프로젝트다. 기능 자체는 잘 동작했지만 시간이 지나면서 다음과 같은 기술 부채들이 점점 수면 위로 드러나기 시작했다. UI와 비

프로젝트를 진행하던 중 VSCode의 자동완성 추천이 평소보다 현저히 느리게 뜨는 현상을 겪었다. 개발 생산성에 직접적인 악영향을 주고 있어 원인 파악과 개선이 시급했다. 문제 현상과 목표 .tsx 파일에서 컴포넌트나 타입을 입력할 때 발생하는 주요 증상은 다음과 같았다. - 타입, 함수, 컴포넌트 등의 자동완성 표시가 심하게 지연된다. - import 구

3명이라는 적은 인원으로 팀 프로젝트를 시작했다. 부족한 인력으로 1월 5일 기능 마감 기한 내에 완성하기 위해 개발 속도를 극대화할 전략이 필요했다. 프로젝트의 절반이 지난 시점에서, 기술적 선택의 결과와 협업 과정에서 겪은 문제를 점검했다. UI 컴포넌트 라이브러리 도입의 트레이드오프 초기 목표는 UI 컴포넌트 라이브러리를 적극 활용해 뷰(View) 구

프로젝트 진행 중 4인이었던 팀원이 3인으로 줄어드는 변수가 생겼다. 전체 기간 3주라는 제한된 시간 속에서 완성 가능한 결과물을 내기 위해, 팀장으로서 내린 현실적인 의사 결정과 트레이드오프를 기록한다. 1. 프로젝트 일정과 범위 조율 3주 전체를 기능 구현에만 쏟는 것은 비효율적이라고 생각하여, 개발 기간 2주, 회고 및 QA 기간 1주로 일정을 재구성

기존 메이플 헬퍼 서비스에서는 React에서 기본으로 제공하는 useContext를 활용해 전역 상태를 관리했다. 하지만 프로젝트가 진행될수록 문제가 생겼는데 useContext만으로 복잡한 로직들을 처리하려다 보니 코드를 작성하는 데 시간이 너무 오래 걸렸고, 흩어진 상태와 로직을 유지보수하기도 점점 어려워졌다. 결국 전역 상태 관리 전용 라이브러리의 필

메이플 헬퍼는 넥슨 오픈 API를 붙여서 데이터를 가져온다. 처음에는 “API 키 숨기기”가 목표라서 Next.js API 라우터를 프록시처럼만 사용했는데, 개발이 진행될수록 스파게티 코드가 되어가는걸 느꼈다. 이번 리팩토링에서 방향성을 정리해봤다. - 클라이언트가 오직 “내 서버(/api)”만 보게 만들기 - 넥슨 API 응답을 클라이언트에서 쓰기 좋은

주보캐(배럭 캐릭터) 정보를 로컬스토리지에 저장해두고, 사용자가 매번 값을 다시 입력하지 않아도 자동으로 API 요청을 보내는 구조로 운영하고 있다. 문제는 보스 가격 같은 보스 메타 데이터가 바뀌었을 때다. 서버/정적 데이터는 최신인데, 로컬스토리지가 예전 값을 들고 있으면 사용자는 계속 과거의 가격을 보게 된다. 문제 : 높은 결합도의 데이터 기존 로컬

오늘은 개인 프로젝트인 메이플 헬퍼를 개발하는데 지금은 유저 데이터를 구조화해서 로컬스토리지에 저장해두고 사용하는 방식이다. 기능을 계속 붙이다 보니, API 요청 로직과 데이터 가공 로직이 한 함수에 섞여 있는 부분이 늘었다. 이 구조는 유지보수도 어렵고, 데이터 구조를 바꾸기 어려운 문제가 있다. - API 요청 로직과 데이터 가공 로직 분리 - 기능

이전에 “추상화와 유연성은 양립할 수 있는가?” 라는 글을 쓰면서 이런 질문을 던졌었다. - 왜 필드 하나 바꾸는데 파일을 세 군데나 고쳐야 하지? - 분리했다고 생각했는데 왜 구조가 단단하지 않을까? - 데이터를 기준으로 설계한다고 했는데, 오히려 의존성이 꼬여버린 건 아닐까? - 추상화와 유연성은 같이 가져갈 수 없는 건가? 이번 스프린트 미션 6에서는

게시글이 109개까지 늘어나면서 /blog 목록 페이지 로딩 속도가 761ms까지 늘었다. 원인은 페이지를 열 때마다 브라우저가 Markdown을 HTML로 바꾸고 있었기 때문이다. 문제 0 — 런타임 Markdown 변환이 누적 비용이 됐다 초기 구조는 페이지에서 렌더링(런타임)할 때마다 클라이언트가 Markdown → HTML 변환을 수행하는 구조였다.

Next.js 기반 블로그를 리팩토링하던 중 문득 궁금증이 생겼다. 정적 빌드된 게시글의 HTML을 필요할 때만 비동기로 불러오면서 로딩 UI도 자연스럽게 띄우고 싶었다. 이때 폼 제출에 주로 쓰이는 useActionState와 서버 액션(Server Action) 조합을 일반적인 '데이터 패칭(Data Fetching)'에도 사용할 수 있을지 테스트해 보

이번 스프린트 기초 프로젝트를 진행하면서 시행착오가 많았고, 그만큼 팀 프로젝트에서 기본기가 얼마나 중요한지 제대로 느꼈다. 이번 경험을 5F로 정리했다. 5F는 다음을 의미한다. - 사실(Fact) - 느낌(Feeling) - 교훈(Finding) - 향후 행동(Future action) - 피드백(Feedback) 사실(Facts) 1. 프로젝트 초기에

처음에는 API 요청 실패 → 토스트 노출로 단순하게 처리했다. - 어떤 에러는 토스트만 띄우기엔 너무 중요했다 - 어떤 에러는 전체 페이지를 멈추기엔 너무 사소했다 - 어떤 화면은 갑자기 React Router 기본 에러 화면이 뜨며 UX가 깨졌다 이 문제를 겪던 중, 멘토님이 이런 피드백을 줬다. “에러 바운더리를 만들어서 공통적으로 처리해보면 어떨까요

팀 프로젝트를 진행하다 보면 코드보다 “환경” 때문에 시간이 더 많이 소모되는 경우가 있다. 이번 팬덤케이(Fandom-K) 프로젝트에서도 비슷한 문제가 발생했는데, 팀원별로 프로젝트 설정이 달라서 컨벤션이 일관되지 않았다. 팀 전체가 공통으로 신뢰할 수 있는 개발 환경으로 표준화한 과정을 정리해둔다. 문제 1: 팀원마다 Node 버전이 달랐다 프로젝트 초

이번 스프린트 팀 프로젝트에서는 가능한 한 라이브러리에 덜 의존하고, 직접 로직을 구현해보자는 목표를 세웠다. 그래서 캐러셀/슬라이더도 Swiper 같은 라이브러리를 쓰지 않고 드래그 + 버튼 이동까지 되는 슬라이더를 직접 만들었다. 그러다 styled-components에서 아래 경고가 떴다. Over 200 classes were generated fo

이번 주부터 스프린트 기본 팀 미션을 시작했다. 이번 기회에 GitHub Actions로 CI/CD를 제대로 구축해보기로 했다. 예전에도 GitHub Actions로 배포 자동화를 설정한 적은 있지만, 그때는 검색해서 코드를 복사/붙여넣기 하면서 맞추는 방식이었다. 이번엔 공식 문서를 기준으로 흐름을 정리하고, 내가 의도한 트리거와 권한으로 동작하게 만드는

이번에 블로그를 v2로 리뉴얼하면서, 프로젝트의 배포 전략을 처음부터 다시 설계했다. 특히 버전 관리 방식과 브랜치 역할을 명확하게 구분해두면 운영과 개발이 훨씬 깔끔해져서, 이번 기회에 구조를 확실히 정리해뒀다. 목표 - 서비스 버전 관리를 체계적으로 운영할 것 - 브랜치별 역할을 명확하게 구분해 협업 및 배포 혼란을 줄일 것 브랜치 구조와 역할 - fe

스프린트 미션 4는 바닐라 JS로 회원가입/로그인 인증 폼을 만들고, 입력 값을 검증해서 에러 메시지를 보여주는 과제였다. 처음엔 “폼 검증 로직을 잘 나눠서 구현해보자” 정도였는데, 제출 피드백을 받고 React로 마이그레이션까지 해보니 질문이 하나로 좁혀졌다. 추상화와 유연성은 함께 가져갈 수 있을까? 이 글은 내가 했던 설계가 왜 유연하지 않았는지,

3-Layers 기본 개념 크게 세 계층으로 나눠서 설계한다. 1. Presentation Layer (프리젠테이션) - 사용자에게 보이는 UI - React 기준으로는 컴포넌트, 화면 상태(로딩/에러/빈 상태) 표현이 여기로 간다. 2. Business Logic Layer (비즈니스 로직) - 앱의 규칙과 처리 흐름 - 검증, 계산, 조건 분기, 상태

React로 컴포넌트를 만들다 보면 “데이터 로직”이랑 “UI 로직”이 한 컴포넌트 안에 섞이기 시작한다. 처음엔 빨리 만들 수 있는데, 규모가 커지면 수정 포인트가 늘고, 재사용도 어렵고, 테스트도 힘들어지는 쪽으로 간다. 이때 자주 언급되는 설계 방식 중 하나가 Container / Presentational 패턴이다. 디자인 패턴 디자인 패턴은 개발하

스프린트 미션을 React로 마이그레이션한 뒤, 코드 리뷰를 받으려고 Netlify로 배포했다. 배포는 문제없이 끝났는데, 라우팅된 페이지에서 새로고침을 하면 Page not found가 뜨면서 net::ERRABORTED 404가 발생했다. 원인 React는 SPA라서 실제로는 index.html 하나로 시작하고, 페이지 이동은 React Router가

스프린트 미션 14를 React로 마이그레이션한 뒤 멘토님께 코드 리뷰를 받았다. 피드백 요지는 “지금 구조에서 객체(스키마)가 너무 많은 책임을 가진다”에 가까웠고, 멘토링 시간에 추가로 아래 키워드를 같이 던져주셨다. - OOP(객체 지향 프로그래밍) - 3-Layers 아키텍처 - Presentational 컴포넌트 / Container 컴포넌트 오늘

들어가기에 앞서 스프린트 부트캠프에서 React 강의가 시작되면서, 앞으로 진행하는 미션도 React로 구현해야 했다. 기존 Sprint 14 결과물을 그대로 옮기는 수준에서 끝내고 싶진 않았다. 같은 기능을 만들더라도 확장성과 유지보수성이 좋아지는 방향으로 프로젝트 구조를 다시 잡는 걸 목표로 했다. 프로젝트 구조 사용 기술 - 프론트엔드: React,

들어가며 자바스크립트에는 Map, Set 이외에도 WeakMap, WeakSet이라는 자료구조가 있다. 이 둘은 “약한 참조(weak reference)”라는 특성을 가지는데, 이 특성 때문에 메모리 관리에서 Map/Set과 다른 동작을 한다. 이 글을 보기 전에 가비지 컬렉션 개념을 알고 있으면 이해가 더 빠르다. 가비지 컬렉션 WeakMap WeakMa

WeakMap, WeakSet을 정리하기 전에 “자바스크립트가 메모리를 언제 해제하는지”를 먼저 잡고 가는 게 필요했다. 결국 Weak 컬렉션의 핵심도 “GC가 회수할 수 있는 참조냐”로 이어지기 때문이다. 가비지 컬렉션이란? C/C++ 같은 언어는 개발자가 직접 메모리를 할당하고 해제한다. 반면 자바스크립트는 가비지 컬렉션(GC)으로 메모리 할당/해제를

자료구조인 Map과 Set을 써야 할 때가 있었는데, 정확히 이해하지 못한 채 객체/배열로만 풀다가 코드가 복잡해진 적이 있다. 이번에 개념이랑 사용 패턴을 한 번에 정리해뒀다. Map이란? Map은 키-값(key-value) 쌍으로 데이터를 저장하는 자료구조다. 겉으로 보기에는 객체(Object)랑 비슷하지만, 차이가 있다. | 구분 | Object |

왜 Lint가 필요할까? 개발을 하다 보면 논리적인 오류보다 사소한 실수나 일관성 없는 코드 스타일 때문에 에러가 나는 경우가 있다. 이런 문제를 정적으로 분석해서 미리 잡아주는 도구가 린트(Lint)다. Lint는 코드가 실행되기 전에 코드 품질과 스타일을 검사해 주고, 잘못된 문법이나 사용하지 않는 변수, 일관되지 않은 코드 스타일 같은 걸 잡아준다.

들어가기에 앞서 어제 React의 배칭(Batching)을 정리했는데, “그럼 React는 정확히 언제 렌더링을 시작하나?”가 계속 걸렸다. JS 이벤트 루프의 흐름과 React의 업데이트 큐 → 렌더 단계 → 커밋 단계를 한 번에 묶어서 정리해봤다. 예제로 시작하기 이 코드를 보면 +3이 될 것 같지만, 실제로는 대부분 +1만 된다. 이유는 간단하다. 한

React에서 setState(또는 useState의 setter)를 연속으로 호출했는데, 렌더링이 한 번만 발생하는 경우가 있다. 이건 React가 Batching(일괄 처리)으로 업데이트를 묶어서 처리하기 때문이다. 상태 업데이트를 여러 번 했는데 왜 렌더링은 한 번만 일어날까? 아래 코드처럼 setCount를 3번 호출해도, 클릭 한 번에 렌더링 로그

React로 리스트 UI를 만들 때 map()을 많이 쓴다. 문제는 key를 빼면 경고가 뜨고, 대충 아무 값이나 넣으면 또 다른 문제가 생긴다는 점이다. 이 글에서는 key가 왜 필요한지, 특히 index를 key로 쓰면 왜 위험한지까지 정리한다. 리스트 렌더링과 key 경고 배열을 map()으로 JSX로 바꾸면 반복 렌더링이 된다. 이 상태로 렌더링하면

React를 쓰다 보면 “렌더링이 됐다”라는 말을 습관적으로 쓰는데, 실제로는 계산하는 단계와 DOM에 반영하는 단계가 분리돼 있다. 이걸 구분하지 않으면 useEffect / useLayoutEffect 타이밍, 성능 문제, “왜 화면이 잠깐 멈추지?” 같은 상황을 설명하기가 애매해진다. 렌더링이 트리거되는 순간 React에서 렌더링이 시작되는 대표적인

React에서 이벤트 핸들러를 쓰면 브라우저의 네이티브 이벤트가 그대로 넘어오는 게 아니라, React가 감싼 SyntheticEvent(합성 이벤트) 가 넘어온다. 이 레이어 덕분에 브라우저 구현 차이를 크게 신경 쓰지 않고 동일한 방식으로 이벤트를 다룰 수 있다. 합성 이벤트가 뭔가 SyntheticEvent는 브라우저의 native event를 감싼

시작하기에 앞서 예전에 CORS 글을 한 번 써둔 적이 있는데, 그때는 “대충 이런 느낌” 정도로만 정리했었다. 이번에는 브라우저가 어떤 기준으로 CORS를 적용하고, 왜 어떤 요청은 바로 보내고 어떤 요청은 OPTIONS를 먼저 보내는지 흐름을 기준으로 정리하려 한다. CORS란? CORS(Cross-Origin Resource Sharing)는 브라우저

스프린트 미션이나 협업을 하다 보면 팀 저장소를 포크해서 작업하는 경우가 많다. 그런데 시간이 지나면 원본 저장소(upstream)가 업데이트되고, 내 포크 저장소(origin)는 점점 뒤처진다. 이럴 때는 upstream의 변경사항을 내 로컬과 포크(origin)까지 동기화해줘야 한다. 1. remote 목록 확인하기 현재 프로젝트에 어떤 원격 저장소(r

API 호출하다 보면 404나 500이 떨어졌는데도 catch가 안 타서 당황할 때가 있다. 이건 fetch()가 “HTTP 에러”를 예외로 취급하지 않기 때문이다. fetch의 Promise가 reject 되는 조건 fetch()는 요청 자체가 실패했을 때만 Promise를 rejected로 만든다. 기준은 단순하다. - 브라우저가 요청을 보내지 못했거나

코드를 읽다 보면 “변수는 왜 여기서 보이지?”, “this는 왜 바뀌지?”, “호이스팅은 도대체 어디서 일어나는 거지?” 같은 질문이 계속 나온다. 이걸 한 번에 묶어서 설명해주는 게 실행 컨텍스트(Execution Context) 라고 봤다. 실행 컨텍스트의 종류 전역 실행 컨텍스트(Global Execution Context) - 자바스크립트 코드가

this는 “어디서 정의했는지”보다 “어떻게 호출했는지”에 의해 결정된다. 그래서 규칙을 호출 방식 기준으로 외우는 게 제일 덜 헷갈린다. this 바인딩 규칙 (1) 전역 컨텍스트 (top-level) 전역에서의 this는 환경에 따라 달라진다. - 브라우저 일반 스크립트(script): this === window - 브라우저 모듈(module): th

부트캠프에서 이벤트 버블링/캡처링을 다시 들었는데, 면접에서 말로만 설명하고 끝내기엔 아쉬웠다. 이벤트 전파 단계, target/currentTarget 차이, 이벤트 위임에서 자주 터지는 포인트만 정리했다. 이벤트 전파(Event Propagation) 3단계 브라우저의 이벤트 전파는 아래 순서로 진행된다. 1. 캡처링(Capturing) - window

DOM 조작하다 보면 “요소를 어디에 끼워 넣을지” 때문에 appendChild랑 innerHTML 사이에서 애매할 때가 있다. insertAdjacentHTML은 그 애매함을 깔끔하게 풀어준다. 기본 사용법 element → 기준이 되는 요소 position → 삽입할 위치(문자열) text → 삽입할 HTML 문자열 createElement나 inner

스프린트 미션 오늘은 스프린트 미션 3을 진행했다. 블로그에는 따로 적지 않았지만, 미션 1과 미션 2는 스타일 라이브러리 없이 순수 HTML과 CSS로 레이아웃과 디자인을 구현하는 과제였다. 이번 미션은 그 페이지에 media query를 적용해 반응형 디자인을 만드는 것이었다. 이번에는 내 작업 속도를 확인해 보고 싶어서 목표 시간을 2시간으로 잡고 시

오늘은 부트캠프에서 JavaScript를 이용한 DOM에 접근하는 방법에 대해 배웠다. 평소엔 React로만 개발을 해왔기 때문에 바닐라 JavaScript를 이용해서 직접 DOM을 다루는 경험은 거의 없었는데, 이번 기회에 정리해두면 좋을 것 같아서 블로그에 기록해본다. 1. 자바스크립트로 태그 선택하기 DOM(Document Object Model)에서

이번 주는 자바스크립트 기초를 다뤘다. 변수, return문, 반복문, 조건문 등 기본적인 내용을 중심으로 다시 정리하는 느낌이었다. 스프린트 미션 2, 코드 리뷰 지난 미션에서 개발 습관과 컨벤션 관련 피드백을 받았기 때문에 이번에는 커밋 전에 검수를 꼼꼼히 했다. 다행히 같은 지적은 받지 않았다. 대신 중복 스타일 관리에 대해 질문했고 기준을 세우는 방

부트캠프에서는 매주 토요일마다 주어진 주제를 정리해 위클리 페이퍼를 작성하고, 팀원들과 함께 의견을 나누는 시간을 갖는다. 이번 주 주제는 Git에서 branch merge 방법들과 각 방법의 특징이었다. 그래서 Git의 대표적인 병합 방식 세 가지를 정리해 보았다. Fast-forward Merge 개념: 브랜치에 다른 변경이 없을 때, 단순히 포인터만

오늘은 자바스크립트에서 자주 헷갈릴 수 있는 개념인 TDZ(Temporal Dead Zone)에 대해 정리해 보았다. TDZ란 무엇인가 TDZ는 직역하면 "임시 사각지대"인데, let과 const로 선언된 변수가 초기화되기 전까지 접근할 수 없는 구간을 말한다. 즉, 변수가 스코프 안에 존재하긴 하지만 아직 사용할 수 없는 상태를 의미한다. 이 구간에서 변

오늘 프롬프트 엔지니어링 강의를 수강하고 핵심만 정리했다. 1) 구체적으로 묻기 - 목표, 산출물, 제약을 명확히 쓴다. - 요청하지 않은 내용은 답하지 말 것을 조건으로 건다. 예) “아래 요구사항만 충족해 답변하고, 불필요한 배경 설명은 하지 마세요.” 2) 맥락 제공하기 - 단순 “방법 알려줘”가 아니라 현재 상황·목표·제약을 13문장으로 붙인다. 예

스프린트 부트캠프를 시작하면 부트캠프 강의뿐만 아니라 코드잇에서 제공하는 모든 강의를 들을 수 있다. 그래서 평소 1인 개발을 하면서 궁금했던 디자인 강의를 들어 보았고, 그 내용을 정리해 보았다. 디자인의 기본 원칙 1. 일관성 지키기 2. 중요도에 따라 구분하기 3. 기능에 따라 영역 나누기 레이아웃 레이아웃에서 중요한 기술은 세 가지다. - 여백 -

2주차의 핵심은 스프린트 미션 진행과 유닉스 커맨드, Git 학습이었다. 유닉스 커맨드와 Git 학습 2주차에는 실용적인 유닉스 커맨드와 Git을 배웠다. 개인적으로 1주차보다 더 의미 있는 시간이었다. 그동안 Git을 사용해 왔지만, 사실상 pull, push, merge 정도만 알고 있었기 때문이다. 유닉스 커맨드 학습에서는 폴더 구조와 파일 경로, C

Git을 공부하다 보면 커밋을 취소하거나 되돌려야 하는 상황이 자주 생긴다. 이때 자주 쓰이는 명령어가 git reset이다. 그런데 reset은 옵션에 따라 동작이 달라지기 때문에 헷갈리기 쉽다. 그래서 이번에 한 번 정리해 보았다. soft 옵션 - 동작: 커밋만 취소하고 변경 사항은 그대로 유지된다. - Staging Area: 그대로 남아 있음 -

Merge와 Rebase는 언제 사용할까? Git을 공부하다 보면 merge와 rebase라는 두 가지 방식이 자주 등장한다. 둘 다 브랜치의 변경 사항을 반영하기 위한 명령어지만, 사용하는 상황과 결과가 조금 다르다. Merge를 사용할 때 보통 협업 프로젝트에서는 merge가 많이 사용된다. 이유는 단순하다. 브랜치 간의 변경 내역을 그대로 기록하면서

포크와 브랜치의 차이 과제를 제출할 때 보통 원본 레포지토리를 포크해 오고, 그 포크한 저장소에서 브랜치를 따서 작업한 뒤 마무리되면 원본 레포지토리에 PR을 보낸다. 그런데 문득 "실제 서비스용 메인 브랜치만 두고 필요할 때마다 브랜치를 따서 작업 후 합치면 안 되는 걸까?"라는 의문이 들어 포크와 브랜치의 차이를 정리해 보았다. 브랜치(Branch) 브

오늘 팀 미팅 시간에 align-items와 align-content의 차이에 대한 이야기가 나와서, 헷갈리지 않도록 따로 정리해 보았다. align-items - 대상: 한 줄(line) 안의 아이템들 - 역할: 교차축(cross-axis, 보통 세로 방향)에서 아이템을 어떻게 정렬할지 결정 - 특징: 줄의 개수와 상관없이 아이템 개별 위치를 맞추는 속성

이번에는 반응형 웹에서 꼭 필요한 태그를 정리해 보았다. 모바일 브라우저들은 예전 데스크톱 전용 웹사이트를 정상적으로 보여주기 위해 기본 뷰포트 너비를 약 980px로 가정한다. 그래서 가 없으면, 모바일 화면에서도 문서 전체가 축소된 상태로 표시되고 사용자가 직접 확대/축소를 해야 한다. 이 경우 문제가 되는 부분이 있는데, 바로 CSS 미디어쿼리다. 예

시작하기에 앞서 면접에서 계속 떨어지고 기술 면접을 볼수록 내가 CS 지식과 기본기가 부족하다는 걸 많이 느꼈다. 그래서 기본기를 다지고 다양한 협업 기회를 얻기 위해 스트린트 부트캠프에 합류했다. 우선 후기를 작성하기 이전에 부트캠프에서 내가 가져가야 하는 부분과 마음가짐에 대해서 스스로 질문해 보는 시간을 가져보았다 Q1. 이 부트캠프를 수료하고 얻어가

HTML을 공부하면서 메타 태그(meta tag)에 대해 다시 한번 정리해 보았다. 메타 태그는 쉽게 말해 HTML 문서의 메타데이터(문서에 대한 정보)를 담는 태그다. 보통 안에 작성되며 직접 화면에 표시되지는 않는다. 하지만 브라우저, 검색엔진, SNS가 페이지를 이해하는 데 중요한 역할을 한다. 대표적으로 자주 쓰이는 메타 태그는 다음과 같다. - c

이번에는 CSS에서 자주 사용되는 사이즈 단위를 정리해 보았다. 개발하면서 px, %, em, rem 같은 단위들을 계속 접하지만 정확히 어떤 기준으로 크기가 정해지는지 헷갈릴 때가 많았다. 이번 기회에 확실히 짚고 넘어가려고 한다. px px은 픽셀 단위로, 화면 크기와 상관없이 고정된 절대적인 크기를 가진다. 그래서 브라우저 크기나 기기 해상도가 달라져

저번주에 Page Router 방식의 프로젝트를 App Router로 전환했는데요 마이그레이션을 진행하며 겪었던 부분과 App Router의 장단점을 서술해보려 합니다. App Router는 React 18을 지원하기 위해 도입된 방식으로 React 18에서 제공하는 서버 컴포넌트, 클라이언트 컴포넌트, Suspense 같은 여러 기능들을 사용할 수 있습니

오늘은 메이플 헬퍼에 추가하려는 기능들을 기록하면서 다시 한 번 정리하는 시간을 가져보려 합니다. 기존 메이플 유틸리티 서비스들은 정보 제공에만 집중해 실제 유저들이 일상 속에서 겪는 사소한 불편함을 해소해 주는 서비스는 찾아보기 힘듭니다. 저는 메이플 헬퍼를 이런 부분을 파고들어 유저들이 생각하지 못했던 서비스들을 제공하려 합니다. 그래서 제가 생각한 기

이번에 블로그를 Next.js로 마이그레이션 하면서 코드 하이라이팅에 문제가 생겼습니다. 문제 해결 코드 하이라이팅이 중복으로 적용돼 에러 메세지가 출력됬고 코드가 변경될 때 마다 이전의 하이라이팅을 제거하고 다시 하이라이팅을 적용해주어야 합니다. 하지만 저는 react-highlight를 이용해 간단하게 해결 했습니다. react-highlight는 Re

이번에 블로그를 Next.js로 마이그레이션 하면서 Form를 유용하게 사용해 사용방법을 공유하려 합니다. Next.js에서의 Form 사용법 HTML에서 태그를 사용해 텍스트, 체크박스, 라디오 박스와 같은 요소들을 구조화해 사용할 수 있는 문법 입니다. Next.js에서는 Form이 화면에 보이면 해당 경로를 미리 불러와 네이게이션 속도를 올려주고 레이

목표 이번에 리펙토링을 계획하게 된 이유들 입니다. 1. 게시글을 tsx파일로 관리하고 있어 관리가 힘들고 글을 작성할 때 접근성이 떨어짐 2. 블로그 SEO 개선 필요 이런 문제를 해결하기 위해 어떤 방법을 사용하면 좋을까 생각하다 Next.js의 app라우터를 이용해 관리하기 쉬운 폴더구조를 만들고 서버사이드 렌더링을 이용해 SEO를 개선하면 되겠다라는

2025년이 되어 HTML과 CSS에 새로운 기능들을 소개하며 활용할 방법들을 고민하도록 하겠습니다. 직접 정보를 보고싶은 분은 여기에서 확인할 수 있습니다. 1. CSS Layers (@layer) https://developer.mozilla.org/en-US/docs/Web/CSS/@layer CSS에 우선 순위를 설정할 수 있습니다. Layer는 아

오늘은 개발 블로그를 리뉴얼 하는 과정에서 tsx파일을 리드미파일로 변환했던 작업이 있어 이 경험을 공유하려고 합니다. 우선 저의 개발 블로그는 react기반의 프로젝트로 tsx 파일을 생성해 블로그 글을 작성하고 있었습니다. 하지만 이 방법은 접근성이 너무 떨어지고 유지보수가 너무 힘들다는 단점이 있어 불편함을 많이 느꼈고 이번 기회에 next로 마이그레

메이플 헬퍼 서비스에 구글 애드센스(Google AdSense)를 도입하려다 예상치 못한 레이아웃 문제에 부딪혔다. 현재 메이플 헬퍼는 대시보드 중심의 레이아웃을 사용하고 있는데 이 구조는 광고를 적절하게 배치하기에 매우 불리하다. 자연스럽게 광고 영역을 확보하기 어렵고 콘텐츠와 광고의 경계가 모호해져 결과적으로 사용자 경험(UX)을 크게 해칠 우려가 있었

꾸준히 운영해 온 메이플 헬퍼(Maple Helper)를 v2로 업그레이드하려고 한다. 1년 전에 만든 코드라 지금 기준에서 보면 여러 부분이 눈에 밟혔다. 그래서 기능을 추가하기 전에, 앞으로 개발 속도를 떨어뜨릴 구조부터 먼저 정리하기로 했다. v2 목표 v2에서 하려는 목표를 세웠다. - 기존 코드 리팩토링 - “최초의 대적자 패링 연습장” 신규 서비

서비스를 배포한 이후 검색 결과 상단에 노출되지 않았지만 SEO를 개선해 노출도를 향상시켰던 내용을 기록하려 합니다. SEO 개선 3가지 방법 메타태그 최적화 적절한 메타태그 사용은 검색 엔진과 사용자에게 페이지의 핵심 정보를 전달할 수 있는 중요한 포인트 입니다. 저의 경우는 HeadMeta컴포넌트를 만들어 활용했습니다. 구글 서치 콘솔 등록 구글 서치

이전에 메이플 헬퍼 서비스에 Tailwind CSS를 이용해 반응형 레이아웃을 적용한 과정을 공유하려 합니다. Tailwind CSS의 반응형 레이아웃 유틸리티를 사용해 CSS의 media query처럼 반응형 작업이 가능합니다. 커스텀 breakpoint tailwind.config 에서 직접 breakpoint를 설정할 수 있습니다. min, max의

안녕하세요 저는 이번에 메이플 헬퍼라는 웹 서비스를 배포하게 되었습니다. 이번 포스트에서는 프로젝트 진행 과정과 배포 과정 그리고 구현했던 주요 기능들을 되짚어보며 느낀 점과 배운 점들을 공유하고자 합니다. 서비스 소개 사용 언어 및 개발 환경 : Vercel Nexon Open API Next.js React TypeScript Axios Tailwind

메이플에는 제네시스 무기 해방이라는 엔드 컨텐츠가 있습니다. 이번 겨울 쇼케이스 이후에 제네시스 무기 해방 퀘스트의 방법이 바뀌어 이를 계산해주는 계산기를 만들기로 했습니다. 해방퀘 조건 해방퀘스트는 255레벨 부터 시작할 수 있고 하위 보스를 잡고 필요한 어둠의 흔적을 모두 채우면 다음 퀘스트를 진행할 수 있습니다. | 퀘스트 | 필요한 어둠의 흔적 |

블로그 글을 작성하다 보면 코드 블록을 사용할 때가 있는데 코드 하이라이팅이 되는 이미지를 사용하면 복사를 할 수 없고 태그를 이용하면 코드 가독성이 떨어 진다는 단점이 있습니다. 하지만 이 부분을 해결해주는 라이브러리인 highlight.js를 소개하려 합니다. 코드 하이라이팅 라이브러리 코드 하이라이팅을 제공하는 라이브러리는 highlight.js뿐 아

자바스크립트는 객체 지향 언어로 객체를 상속하기 위해 프로토타입이라는 방식을 사용합니다. 이 프로토타입 덕분에 객체에서 hasOwnProperty같은 메소드를 부모 객체로 부터 상속받아 사용할 수 있게 됩니다. 위의 내용이 이해하기 힘들다면 자바스크립트의 값과 레퍼런스 게시글을 한번 읽고 오시는걸 추천합니다. Prototype 이해하기 이전에 자바스크립트의

최근 캐릭터 리스트 정렬 기능과 결정석 판매 금액을 구현하며 Array.prototype.reduce()와 Array.prototype.sort()를 활용했던 경험을 바탕으로 이 메서드들의 작동 원리를 깊이 이해하기 위해 직접 구현해보았습니다. reduce() 직접 구현하기 reduce() 함수의 특징으로는 다음이 있습니다. - 초기값이 제공되지 않으면 첫

문뜩 자바스크립트는 싱글 스레드 언어인데 웹 및 node.js 환경에서 비동기로 동작할 수 있을까? 사실 비동기로 동작할 수 있는 이유는 웹 및 node.js 환경은 싱글 스레드가 아니기 때문에 가능하다는 걸 알지만 어떤 원리로 동작하는지는 모르기에 한번 찾아보았습니다. 자바스크립트의 동작 방식 자바스크립트의 동작 구조의 핵심 요소는 Call Stack,

메이플스토리 API를 활용한 웹 서비스 개발 중 API 키 노출 방지와 중복 코드 최소화를 위해 Next.js API 라우트와 Axios 인터셉터를 결합한 경험을 공유합니다. 특히 TypeScript의 Generic을 활용해 타입 안정성을 강화한 과정을 중점적으로 설명드리겠습니다. 문제 상황 클라이언트에서 바로 Nexon API를 호출하게 되면 API KE

기술 스택 및 아키텍처 설계 기술 스택 - Next.js: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 React 프레임워크. - React: 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리. - TypeScript: JavaScript에 타입 안정성을 추가해 개발 생산성 향상. - Axios: HTTP 요청을 간편하

오늘은 비동기 작업을 테스트하다 생긴 경험에 대해 적어보려고 합니다. 주요 내용 - 데이터 요청시 모든 데이터를 받아옵니다. - 받은 데이터 중 필요한 데이터만 필터링합니다. - 필터링된 데이터의 세부 정보에 대한 요청을 한번에 보내고 모든 요청이 완료된 후 한번에 응답을 받습니다. 이 내용이 제가 초기에 생각한 동작입니다. 하지만 제가 구현한 기능을 보면

저는 평소에 메이플스토리 라는 게임을 즐겨하는데 이 게임은 유저들이 만든 Nexon Open API 기반의 유틸리티 서비스들이 있습니다. 메이플 헬퍼, 왜 기획하게 되었나? 메이플스토리는 RPG 게임으로 주간마다 잡을 수 있는 보스가 있습니다. 이 보스를 잡고 얻은 전리품으로 캐릭터를 더욱 강하게 만들 수 있는데요 기존에 있는 서비스는 캐릭터를 수동으로 등

그동안 팀 프로젝트를 진행하며 디자인 협업 툴로 피그마를 많이 사용했습니다. 피그마를 사용하면서 느낀 점은 정말 편리하고 다루기 쉽다는 생각이 많이 들었고 앞으로 개발을 하며 이런 디자인 툴 하나 정도는 다룰 줄 아는 게 큰 도움이 될 거 같다는 생각이 들어 피그마의 간단한 단축키와 사용 방법을 정리해 보았습니다. 단축키 피그마를 사용하며 주로 사용한 단축

라이브쳇 개발을 하며 백엔드 서비스에는 require를 프론트 서비스에는 import를 사용했는데 문뜩 어떤 차이가 있는지 궁금해져서 정리해보려 합니다. require와 import require와 import는 자바스크립트에서 모듈을 불러오는 문법으로 require는 CommonJS에서 사용하는 모듈 시스템 import는 ES6에서 사용하는 모듈 시스템

오늘은 you dont know javascript를 읽고 클로저라는 개념에 대해 정리해 보도록 하겠습니다. 클로저란? 클로저는 자바스크립트에서 함수와 그 함수가 선언된 렉시컬 환경을 같이 기억하는 기능을 말합니다. 간단하게 말해서 함수 내부에서 함수 외부에 있는 변수에 접근할 수 있는 상황을 의미하며 외부 함수가 실행을 마쳤음에도 내부 함수가 그 변수를

저번주에 타입스크립트의 기본 문법과 속성에 대해 정리했는데 오늘은 타입스크립트에서 제공하는 유틸들에 대해 정리해보도록 하겠습니다. 유틸리티 타입 Partial Partial는 객체의 타입을 ? 옵셔널 프로퍼티로 만들어줍니다. Required Required는 객체의 모든 속성을 필수로 만들어 줍니다. Readonly Readonly는 속성을 읽기 전용으로

타입스크립트를 사용한 지 1년 정도가 되었는데 그동안 작성했던 타입스크립트 정리 글에 잘못된 부분들이 많아 이 게시글을 작성하며 다시 정리해 보려고 합니다. TypeScript 란? 타입스크립트는 자바스크립트를 기반으로 한 정적 타입 언어입니다. 컴파일 시점에서 타입 오류를 확인할 수 있고 타입을 명시해 유지보수하기 쉽고 미리 오류를 잡을 수 있도록 도와줍

이번에 next.js로 프로젝트를 구성하면서 Tailwind CSS를 사용하기로 해서 자세하게 알고 넘어가보려 합니다. Tailwind CSS Tailwind CSS는 유틸리티-퍼스트(Utility-first) 접근 방식을 기반으로 하는 CSS 프레임워크로, 클래스 기반 스타일링을 통해 빠르고 효율적인 UI 개발이 가능합니다. Tailwind CSS 설치

next.js에서 데이터를 가져올 때 사용되는 함수들이 있습니다. getStaticProps() getStaticPaths() getServerSideProps() 전부 데이터를 가져올 때 사용되는 함수지만 차이점이 있어서 이에 대한 정보를 정리해보려 합니다. getStaticProps() getStaticProps()는 빌드 시점에서 데이터를 가져오고 페

Next.js 공식문서를 읽어보던 중 중요한 개념이 보여 정리하고 넘어가려고 합니다. 우선 Hydration을 알기 전에 React와 Next의 기본 동작 방식에 대해 알아야 합니다. React는 브라우저에서 요청이 들어오면 빈 HTML 파일과 JS 파일로 번들링된 React 파일을 넘겨줍니다. 그 이후 브라우저가 JS파일을 읽어 화면을 그려나가기 시작합니

저번주에는 웹의 동작방식에 대해 알아보았으니 오늘은 브라우저 렌더링 과정에 대해 알아보려 합니다. 브라우저 렌더링 순서 서버로 부터 파일을 받아오면 다음과 같은 과정을 거칩니다. 1. HTML 파싱 - 브라우저는 HTML 파일을 읽고 DOM 트리를 생성합니다. script 태그를 만나면 코드 실행을 위해 DOM 생성을 중단합니다. 이 부분을 방지하기 위해

오늘은 어렴풋이 알고 있었던 웹의 동작 방식에 대해 올바르게 알고 넘어가기 위해 글을 작성합니다. 요즘 개발을 하고 서버에 배포를 하다보면 동작 원리에 대해 궁금증이 많아지고 있습니다. WEB의 동작 원리 1. 우선 사용자가 웹 브라우저에 URL을 입력하거나 링크를 클릭을 합니다. 2. 브라우저는 DNS 서버를 통해 해당 URL을 IP 주소로 변환합니다.

요즘 AWS에 배포한 서비스들의 서버 비용이 너무 많이 청구되어 비용문제를 해결하기 위해 알아보던 중 서버리스에 대해 알게 되었고 이를 정리하기 위해 글을 작성합니다. 서버리스 아키텍쳐 란? 서버리스는 진짜로 서버가 없다는 의미가 아니라 서버를 직접 관리하지 않아도 코드를 실행할 수 있는 환경 입니다. 코드를 실행할 저장공간은 있어야합니다. 서버리스의 특징

이미 6월 말이 되어버렸지만 문뜩 2024년 HTML과 CSS 변경사항이 궁금해져 글을 작성해 보려 합니다. 2024년 HTML 변경 사항 user-valid 및 user-invalid 가상 클래스 새로운 :user-valid와 :user-invalid를 이용해 사용자가 입력한 값에 따라 스타일링이 가능해졌습니다. user-invalid 관련 링크 user

최근 디스코드 봇에 대해 가시성을 개선해달라는 문의가 들어와 개선한 내용에 대한 글을 써보려 합니다. 디스코드 봇은 마크다운 문법을 지원해 이를 이용해서 스타일링이 가능합니다. 그래서 오늘은 마크다운 문법에 대해 적어보겠습니다. 문법 헤더 (Headers) h1, h2, h3, h4, h5, h6 태그를 기호를 사용하여 헤더의 크기를 지정합니다. h1, h

오늘은 you dont Know JavaScript 책을 읽고 그 내용에 관해 글을 써보겠습니다. 자바스크립트에는 원시 자료형(값)과 참조 자료형(레퍼런스)이 존재합니다. 원시 자료형은 불변 하고 값 자체가 변수에 할당된다는 특징이 있고 참조 자료형은 변경 가능하고 변수에 저장된 메모리 주소가 할당된다는 특징이 있습니다. 값 (Value) 이런 원시 데이터

라이브 쳇 개발을 하며 HTTP 응답과 HTTP 응답 코드에 대해 궁금해져 이 글을 작성합니다. HTTP 응답 코드는 HTTP 요청이 성공적으로 완료되었는지 알려주는 코드입니다. 이 응답은 5그룹으로 나누어져있고 숫자로 그 상태를 나타냅니다. HTTP 응답 코드의 종류 1xx: Informational (정보 응답) - 클라이언트의 요청을 서버가 수신했으며

라이브 채팅을 배포한 후 이를 관리하기 위한 백오피스를 만들고 있는중 운영중인 다양한 서비스의 시각화 데이터를 얻고 싶어 차트 라이브러리에 대해 알아보았습니다. 대표적인 차트 라이브러리로는 Chart.js, D3.js, Recharts등이 있지만 전 React와 호환성이 좋은 Recharts라이브러리를 사용하기로 했습니다. Recharts Recharts는

이전 포스트에서 서버에 배포하고 실행까지 했지만 이번엔 도메인 연결과 HTTPS인증까지 다루려고 합니다. 탄력적 IP 주소 할당 EC2 인스턴트는 기본적으로 동적 IP를 할당받기 때문에 인스턴스를 재부팅하거나 종료할 경우 IP가 변경됩니다. HTTP 인증과 같은 작업에는 고정된 IP주소가 필요하기 때문에 탄력적 IP주소를 할당해 줍니다. AWS Certif

이번에 개발한 라이브쳇 서비스를 EC2 인스턴스를 이용해 배포를 했습니다. 이 글은 그 과정을 기록하기 위한 글 입니다. 사용할 AWS 서비스 ACM AWS Certificate Manager로 SSL/TLS 인증서를 생성, 관리 및 배포하는 AWS 서비스 입니다. EC2 Elastic Compute Cloud로 AWS에서 제공하는 가상 서버 서비스 입니다

Express를 이용해 백엔드를 개발하던 중 CORS에러가 발생하게 되었습니다. cors 라이브러리를 이용해 문제를 해결했지만 이 cors가 무엇인지 또 어떻게 해결해야 하는지를 기록하려고 합니다. CORS를 알기 이전에 Same-Origin정책과 Cross-Origin에 대해서 알아야 하는데 Same-Origin은 웹 보안 모델에서 같은 Origin에서

Express는 Node.js에서 가장 인기 있는 웹 애플리케이션 프레임워크로 HTTP 요청 및 응답을 처리하는데 필요한 많은 기능들을 이용해 추상화된 API를 제공할 수 있습니다. Express의 주요 기능 1. 라우팅 express는 간단하게 URL경로의 엔드포인트를 만들 수 있습니다 또한 해당 경로의 HTTP 메서드에 따라 요청을 처리할 수 있습니다.

Namespace와 Room은 Socket.IO의 중요한 기능으로, 실시간 애플리케이션에서 클라이언트와 서버 간의 메시지 전송을 보다 효율적으로 관리하는 데 사용됩니다. 이 기능들은 여러 클라이언트가 동시에 접속하는 환경에서 채널 또는 그룹 단위로 메시지를 관리하고, 다양한 이벤트를 분리하여 효율적으로 처리할 수 있게 해줍니다. Namespace 란? Na

Socket.io에 대해서 Socket.io는 WebSocket 프로토콜을 기반으로 실시간 양방향 통신을 지원하는 라이브러리입니다. Socket.io의 특징 1. WebSocket 프로토콜 사용 2. 양방향 통신 3. 이벤트 기반 통신 4. Room과 Namespace socket.io는 WebSocket을 기본 통신 방법으로 사용하지만 WebSocket을

Socket 통신 Socket통신은 양쪽 프로세스 간에 양방향 통신을 가능하게 해주는 네트워크 통신 방법입니다. 소켓은 TCP와 UDP 소켓으로 구분되며 각각 의 차이점은 아래와 같습니다. TCP 통신 - 연결 지향적 프로토콜로 데이터 전송의 신뢰성을 보장되기 위해 설계되었습니다. 이는 서로에게 언제든 실시간으로 통신을 보낼 수도 받을 수도 있습니다. TC

React를 사용 할 때는 react-router-dom 라이브러리를 사용 했지만 Next.js에는 라이브러리 없이 라우팅이 가능하다. App 라우터와 Page 라우터 Next.js 에서는 2개의 방법으로 라우팅이 가능하다. 하나는 기존에 있던 클라이언트 중심의 Pages Router이고 Next.js 13에 추가 된 서버 중심의 App Router가 있다

Next를 이용해 팀프로젝트를 진행하던 중 Next에서는 img태그 대신 Next에서 제공하는 Image컴포넌트를 사용하는걸 알게 되었다. Image컴포넌트가 제공하는 기능과 장점에 대해 알아보려한다. Next/Image 컴포넌트의 기능 Image 컴포넌트가 제공하는 기능은 다음과 같다. - 이미지 크기 최적화와 최신 이미지 포맷 지원 - CLS방지 - 이

웹 폰트가 동작하는 방법 우선 최적화를 진행하기 전에 웹 폰트가 어떻게 동작하는지 알아보도록 하겠다. 아래의 사진은 브라우저가 렌더링 하는 과정이다. https://web.dev/articles/optimize-webfont-loading?hl=ko 1. 브라우저가 HTML 문서을 요청한다. 2. 브라우저가 HTML 응답을 파싱하고 DOM을 구성하기 시작한

웹 성능이란 웹 성능은 페이지의 로딩 시간, 렌더링 속도, 사용자 경험등을 나타내는 말이다. 따라서 웹 성능 측정은 아주 중요한 과정이며 오늘은 웹 성능 측정 도구중 하나인 Lighthouse에 대해서 기록하도록 하겠다. https://developer.chrome.com/docs/lighthouse/performance/performance-scoring

문제 https://www.acmicpc.net/problem/25206 인하대학교 컴퓨터공학과를 졸업하기 위해서는, 전공평점이 3.3 이상이거나 졸업고사를 통과해야 한다. 그런데 아뿔싸, 치훈이는 깜빡하고 졸업고사를 응시하지 않았다는 사실을 깨달았다! 치훈이의 전공평점을 계산해주는 프로그램을 작성해보자. 전공평점은 전공과목별 (학점 × 과목평점)의 합을

CSR 웹 사이트 크롤링 서버에서 페이지가 완성된 후 전달되는 SSR과는 다르게 클라이언트 측에서 렌더링 되는 CSR은 axios를 통해 크롤링 할 수 없다 하지만 Selenuim를 이용하면 브라우저를 생성해 렌더링이 된 후 내용을 얻을 수 있어 CSR에서도 이용할 수 있다 Selenuim은 다양한 브라우저로 사이트를 동작하고 테스트하기 위해 만들어진 도구

얼마전에 메이플 공식 api가 업데이트 됐다고 해서 디스코드 봇을 업데이트하기로 했다. 그래서 메이플 공식 api사용법과 이번에 추가한 내용을 블로그에 담으려 한다. https://openapi.nexon.com/ 여기 공식 api 주소에 들어가 로그인을 한 뒤 어플리케이션 등록을 진행하면 된다. 여기에서 서비스 단계인지 출시 단계인지 선택하는 항목이 있는

NVM 모듈 node를 사용하다보면 개발환경에 따라 버전을 변경해야하는 상황이 오게 된다. 이때 nvm을 사용한다면 편리하게 버전을 변경하며 사용할 수 있다. NVM 설치 여기에 있는 링크에 들어가서 nvm-setup.exe나 nvm-setup.zip 파일을 받아 설치를 해주면 된다. https://github.com/coreybutler/nvm-windo

디스코드 봇 호스팅하기 이번엔 만들었던 디스코드 봇을 aws에 호스팅 해보도록 하겠다. 시작 1. 우선 아마존 aws에 계정을 만들고 카드 등록까지 해준다 2. 인스턴스 시작 버튼을 눌러 인스턴스를 생성해준다. 2. EC2 인스턴스 이름을 적고 OS를 선택해준다. (나는 Ubuntu를 선택했다.) 3. 그리고 가장 중요한 키를 생성해준다. 이건 잃어버리면

봇 개발 여기에는 문제점이 있었는데 크롤링을 인기도 랭킹에서 하다보니 인기도가 0인 캐릭터들은 검색이 되지 않는 문제가 있었다. 이 문제를 해결하기 위해선 종합랭킹 에서 크롤링을 해와야하는데 여기는 일반월드와 리부트월드가 나눠져 있어서 조건문을 통해 일반월드 검색 결과가 없다면 리부트월드를 검색 하도록 변경했다. Embeds 적용 이렇게 가져온 데이터를 이

Http (Hypertext Transfer Protocol) 웹 프로토콜 중에 하나. 인터넷으로 데이터를 주고받을 수 있는 통긴규약. Request와 Reponse로 이뤄져 있음. Http - 암호화 X - 빠름 Https - 보안, 암호화 O - 설치 및 인증서 유지에 대한 비용이 듦 - 중간에 정보를 탈취해도 볼 수 없도록 암호화를 지원한다. CORS

앞으로의 기술면접을 대비해 그동안 공부했던걸 한번 정리해보려 한다. Web 1. 주소창에 입력된 주소를 통해 서버를 찾아간다. 2. 이후 DNS가 연결해줄 곳을 찾는다 3. 서버에서 HTML 파일을 클라이언트로 보내준다 4. HTML문서는 파싱되어 DOM을 생성한다.(객체 형식) 5. 중간에 CSS를 로드하는 link혹은 style 태그를 만나면 HTML파

프로젝트 소개 메이플스토리라는 게임을 하다가 디스코드로 내 캐릭터에 대한 정보를 볼 수 있으면 편하겠다는 생각이 들었고, 친구와 이야기 하다 너무 재미있을 것 같아 당장 만들어보았다. discord.js가 너무 잘 만들어져 있어 생각보다 간단하게 만들 수 있었다. 프로젝트 axios를 이용해 HTTP 요청으로 웹에 대한 정보를 가져와 cheerio를 이용해

팀프로젝트 회고록 최근 침플래닛 이라는 팀프로젝트가 성공적으로 마무리 되어 처음으로 회고록을 작성해 보려 한다. 이번 프로젝트를 진행하면서 개인적으로 많은 성장을 이뤄냈다고 생각해 정리해보도록 하겠다. 프로젝트 진행과정 내가 프로젝트에 합류 했던 당시 이미 모든 팀원이 구해져 있던 상황이였다 기획 : 1명 백엔드 : 3명 프론트 : 2명 기획 : 1명 일러

최근 타입스크립트 환경에서 creactContext를 사용하다 아래와 같은 에러가 발생해 createContext 사용방법과 해결방법을 정리해보려 한다. creactContext 사용방법 기본적으로 creactContext를 생성해주면 된다. 그 이후 구성 요소를 context.Provider 로 래핑 해준뒤 useContext로 호출해 사용할 수 있다.

타입추론 타입스크립트에서는 명시적인 타입 표시가 없을때 타입에 대한 정보를 제공한다. 일반적인 뿐만이 아니라 구조분해 코드에서도 타입추론이 되어 유용하게 사용 할 수 있다. 타입추론이 이렇게 유용하다면 타입을 적어주지 않아도 될까? 그렇다면 타입스크립트를 사용하는 의미가 없어진다고 생각한다. 그럼 타입추론을 사용할 때와 강력한 타입 규칙을 사용 예시를 들어

코드 포멧터 Prettier 여러 사람들과 개발을 하게되면 각자 개발 습관에 따라 세미콜론(;), 줄간격, 행 등이 각각이 달라 코드가 뒤죽박죽이 되는 상황이 생기게 됩니다. 이때 Prettier를 사용하게 되면 정해진 규칙에 따라 모맷팅 해주기 때문에 수고 없이 코드를 짜기만 하면 됩니다. 사용방법 설치가 끝났다면 .prettierrc.json 파일을 만

문제점 최근 개발을 하다 window.addEventListener로 호출한 함수 내에서 state값이 초기 값 그대로 읽히는 경우가 있었다. 아래와 같이 코드를 작성 했을 떄 state값은 계속 변경 되지만 console.log()로 state값을 읽을땐 초기값만 출력이 된다. 이렇게 동작하는 원인이 무엇일까? 이렇게 동작하는 이유는 이벤트 핸들러 함수는

최근 배포를 하던 와중에 npm ERR! Cannot properties of null (reading) 이런 에러가 발생했다. 문제는? 최신버젼의 styled-components에서 npm i styled-components를 수행하는 동안 생기는 문제였다. 해결방법 V5 사용, npm install styled-components@5.3.10 원사 사용

제너릭이란? 제너릭이란 타입을 파라미터처럼 사용 할 수 있는걸 의미한다. 제너릭의 장점으로는 다양한 타입에 대한 재사용성이 올라간다는 점이 있다. 위의 코드를 보면 받은 파라미터를 그대로 반환해 주는데 받은 파라미터 타입이 number가 아니라면? 타입별로 함수를 만들어주게 되면 코드의 재사용성도 떨어지고 유지보수도 힘들어진다. 이떄 사용하면 좋은게 제러릭

커스텀 타입이란? 타입스크립트에는 커스텀 타입이라는게 있다. 커스텀 타입은 말 그대로 타입을 커스텀 하여 만들 수 있다는 말인데 기존 타입에 새로운 이름을 지정해준다거나 새로운 타입을 선언해주는 것 이 가능하다. 커스텀 타입을 사용하면 보다 강력하게 타입을 지정할 수 있다. 위와 같이 사용하면 잘못된 함수의 사용을 막을 수 있다. https://velog.

타입스크립트에서는 인터페이스를 활용해 변수의 타입으로 사용할 수 있다. 인터페이스는 클래스와 비슷한데 클래스와는 다르게 정의만 할 뿐 구현이 되지 않는다는 차이점이 있다. 타입스크립트에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 인터페이스는 보통 다음과 같은 범주에 대해 정의할 수 있다. - 객체의 스펙(속성과 속성의 타입) - 함수의 파

타입스크립트에 대한 수요가 늘어나 타입스크립트를 공부하면서 정리해보려 한다. 타입스크립트는 타입을 지정해 줌으로써 기존 자바스크립트에서 발생하는 에러를 미리 예방 할 수 있다는 장점이 있다. 타입스크립트 기본타입 - Boolean - Number - String - Array - Tuple - Enum - any - void - Object - never

팀프로젝트를 진행하던 도중 외부에서 불러온 이미지가 로드되지 않고 404를 반환하는 이슈가 있었다. 404를 반환한 이유를 알아보니 네이버에서 이미지를 가져올 때 보안에 관련된 이유로 404를 반환하는 것 이였다. 반환 하는 이유는 Referer 체크로 외부 링크를 금지하여 404를 반환 하는 것이다. 이를 해결 할 수 있는 방법으로는 이미지에 (refer

팀프로젝트를 진행하면서 무한스크롤을 이용해서 게시글들을 보여주기로 했다. 페이지네이션이 아닌 무한 스크롤을 선택한 이유는 모바일 환경 지원이 이유이기도 하다. 무한 스크롤을 만들어 본 적이 없어 어떻게 만들어야 하나 찾아보던 중 세 가지 방법으로 만들 수 있다고 했다. 첫번째는 스크롤 이벤트 헨들러를 이용한 방법이고 두번째는 Debounce 와 Thrott

yaml이란? yaml은 YAML ain’t markup language의 약어로 마크업 언어가 아닌 데이터에 특화됨 을 보여주는 말이다. json 파일의 상위 버젼이라고 생각할 수 도 있다. 주석을 달 수 없고 json의 중괄호와 대괄호 남발로 코드길이가 질어지게 된다는 단점을 보안하고자 해서 나온 방식이다. 또한 문법을 보면 Python과 매우 유사함을

리엑트를 다룰 때 useState나 useEffect같은 Hook을 많이 사용해 봤을거다. 근데 이 Hook을 개발자가 원하는대로 만드는게 가능하다. 커스텀 훅은 반복되는 로직을 관리하는데 매우 용이하다. 사용방법 커스텀 훅을 만드는 방법은 그렇게 어렵지 않다. 이전에 커스텀 훅을 만들때 지켜야 할 규직이 몇가지 있는데 다음과 같다. - 커스텀 훅의 이름은

반복문의 종류 - for 문 - for...in 문 - for...of 문 - while 문 - do...while 문 for 문 for 문은 특정한 조건이 거짓이 될 때 까지 반복한다. for...in 문 for...in 문은 객체의 속성을 열거할 때 유용하게 활용된다. 하지만 일반적인 배열에도 사용이 가능하다. for...of 문 for...of 문은

Symbol은 ES6에서 추가된 7번째 데이터 타입이다. 심볼은 주로 이름의 충돌 위험이 없는 객체의 프로퍼티 키를 만들기 위해서 사용한다. Symbol의 생성 Symbol은 Symbol()함수를 호출하어 생성한다 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시타입의 값이다. 이렇게 보면 생성자 함수로 객체를 생성하는 것처럼 보이지만 Symbo

package.json이란? package.json이란 패키지 매니저로 설치한 모듈들의 의존성을 명세하고 관리하는 파일이다. 구성요소 name, version 패키지의 이름과 버젼을 명세하기 위해 필요한데 몇가지 규직이 존재한다. - 이름은 214자 이하여야 한다. - 범위가 지정된 패키지의 이름은 점 또는 밑줄로 시작할 수 있다. 범위가 없으면 허용되지

npm npm(Node Package Manager)은 Node.js의 기본 패키지 매니저로 라이브러리와 패키지를 관리하고 설치, 업데이트, 제거 등을 할 수 있다. package.json 파일을 사용해 의존성과 버젼을 관리한다. yarn yarn은 Facebook에서 만든 패키지 매니저인데 순차적으로 설치하는 npm과 달리 병렬로 설치해 속도 도 더 빠르

HTTP/HTTPS란? HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙이다. 사용자가 웹 사이트에 방문을 하면 자용자 브라우저가 웹 서버에 HTTP요청을 전송하고 웹 서버는 HTTP로 응답한다. HTTP는 네트워크 통신을 작동하게 하는 기본 기술이다. HTTPS(Hypertext Transfer P

개발을 하다보면 전역 상태 관리라는 말을 한번쯤은 들어봤을거다. 프로젝트의 규모가 커져감에 따라 수많은 state와 props가 점점 복잡해져 이러한 상태를 관리해주는 라이브러리들이 생겼다. 그 후 react에서 Context API라는게 나오긴 했지만 여전히 상태관리 라이브러리를 사용 하고 있다. Recoil란? Recoil은 hook을 사용하고 있는 사

ci/cd에 대해 알아보자 ci/cd는 지속적인 통합, 지속적인 배포라는 뜻을 가지고 있다. 그럼 왜 지속적인 통합과 배포가 필요한가라고 하면 서비스를 배포할 때 마다. 개발자들이 직접 수정, 빌드, 테스트, 배포를 하게 된다면 상당히 많은 시간이 소요된다. 이때 ci/cd를 맞게 작성한다면 빌드, 테스트, 배포를 하는 시간을 크게 줄일 수 있어 일의 효율

7계층이란? 7계층은 네트워크 통신이 일어나는 과정을 7단계로 나눈 것 을 말한다. 각각 물리층, 데이터링크층, 네트워크층, 전송층, 세션층, 표현층, 가장 상위계층에 속하는 응용층 으로 나뉘고 두 컴퓨터가 네트워크를 형성하여 데이터를 주고 받기 위해서는 7계층이 모두 필요하여 각각의 계층은 독립된 기능을 제공한다 또한 서로 인접한 계층 간에만 의존하게 된

시작 계기 그동안 클론코딩을 하면서 기본적인 html, css, js 익혔고 이번에는 팀프로젝트에 참여해서 협업을 하는 경험을 하고 싶었다. 그래서 동아리같이 팀 단위로 개발하는 곳 을 알아보던 와중 왁물원이라는 네이버 카페에서 카페회원들 끼리 자체적으로 카페 내부 서비스를 만들어 보고 싶다는 글이 올라와 얼른 신청을 했다. 왁물원은 우왁굳이라는 스트리머가

JSDoc 주석은 JavaScript 코드에 추가되는 문서화 주석이다. 이 주석은 함수, 변수, 객체의 설명, 타입정보 등을 제공할 수 있다. JSDoc 주석 사용법 이와 같이 함수를 호출 할 때 주석를 보여주게 된다. @deprecated 해당태그를 사용하면 취소선을 그어준다 @type 해당태그를 사용하면 타입을 명시 할 수 있다. @see 해당태그를 리

Axios란? Axios는 Promiss기반 HTTP 클라이언트이다. 간단하게 백엔드랑 통신을 쉽게 해주는 라이브러리이다. 특징으로는 HTTP요청과 응답을 JSON형태로 할 수 있다는 점이다. 사용방법 axios로 백엔드와 통신을 할 때는 get(조회), post(등록및 전송), put(수정), delete(삭제) 이렇게 4가지의 HTTP 메서드를 이용하여

RESTful이란? RESTful 는 REST API의 REST를 잘 따르는 시스템을 RESTful하다 라고 할 수 있다. RESTful은 REST를 REST답게 쓰기 위한 방법으로, 누군가가 공식적으로 발표한 것이 아니다. 즉, REST 원리를 따르는 시스템은 RESTful이란 용어로 지칭된다. 그럼 REST는 무엇일까? REST는 (Representat

gird는 행과 열이 있는 레이아웃 시스템을 제공한다. 1차원 레이아웃을 지원하는 flex와 다르게 좀 더 복잡한 레이아웃을 위해 grid를 사용할 수 있다. Grid Properties gird는 flex와 같이 Container와 Item이라는 두가지 개념으로 구분되어 있는데 Container는 Item을 감싸는 부모 요소이며 그 안에 Item을 배치

react-router란? react-router는 클라이언트 측 라우팅이 가능하게 도와주는 라이브러리다. react-router를 사용하면 간단하게 url을 변경하면서 여러 페이지로 이루어진 어플리케이션을 만들 수 있다. 패키지 설치 사용방법 위에 코드에 대해 설명을 하면 우선 최상위 컴포넌트에서 BrowserRouter로 감싸준후 Route를 Route

Sementic Tag란? 우선 Sementic Tag의 뜻은 의미가 있는 태그라는 뜻이다. 반대로 div와 span태그와 같은 태그는 non-sementic tag라고 한다 그럼 div 태그로 만들 수 있는데 왜 의미가 있는 태그가 필요할까? Sementic Tag 가 필요한 이유 3가지 마크업을 통해 보다 많은 검색에 노출 시킬 수 있다. 스크린리더로

react를 처음 공부할 때 html과 js는 한 파일에서 작성하는데 css도 한 파일에서 작성 할 수 있지 않을까 란 생각이 들어 찾아보다가 styled-component를 알게 되었다. styled-component는 js in css 로 말 그대로 js파일 내부에 css를 작성한다는 뜻으로 styled-component의 장점으로는 css의 컴포넌트화

이전에 포스트에서 styled-component 사용법에 대해서 다뤘었는데 오늘은 GlobalStyle과 Theme에 대해 알아보겠다. GolbalStyle 사용방법 간단하게 createGlobalStyle 이라는 함수를 사용해 css를 작성한 후 최상위 컴포넌트에 추가해주면 된다. 이렇게 사용하면 전역으로 css를 설정할 수 있어 불필요하게 중복되는 스타

텍스트를 복사하는 기능을 만들고 싶을 때 클립보드 기능을 이용하면 쉽게 만들 수 있다 이렇게 클립보드API를 이용하면 간단하게 클립보드를 이용한 복사기능을 만들 수 있다. 이때 주의사항이 있는데 클립보드에 엑세스 하면 암호나 신용카드 번호와 같이 중요한 정보에 엑세스 할 수 있는 문제가 생긴다 이와 같은 이유 때문에 http가 없는 임시 서버에서 실험을 할

https://www.acmicpc.net/problem/1712 문제 첫 줄에 A, B, C 가 주어지는데 A는 고정비용 B는 가변비용 C는 판매가격이라고 할 때 최초로 총 수입이 총 비용보다 많아져 이익이 발생하는 손익분기점을 넘기는 값을 구하는 문제이다 풀이 간단하게 생각해서 마진은 판매가격에서 가변비용을 빼주게 되면 나온다. 이 마진을 고정비용으로

https://www.acmicpc.net/problem/2292 문제 육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지

https://www.acmicpc.net/problem/4344 문제 육각형으로 이루어진 벌집이 있다. 중앙에 방 1부터 시작해서 이웃하는 방에 돌아가면서 1찍 증가하는 번주를 매기는데 숫자 N이 주어졌을 떄, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈때 몇개의 방을 지나가는지(시작과 끝을 포함)를 계산하는 문제이다. 예를 들어 13까지

문제발생 블로그에 댓글 기능을 추가하고 싶어 Giscus을 알아보고 바로 블로그에 적용을 한 후 잘 동작하나 확인을 하던 와중 갑자기 404NotFound가 떠버리는 상황이 발생했다. 이유 우선 깃허브 페이지는 SPA를 지원하지 않는다. 하지만 나는 React에서 SPA를 구현하기 위해 React Router를 사용했고 깃허브 페이지는 ( https://s

이 블로그를 만들면서 useEffect를 사용했는데 렌더링이 계속 일어나 사이트가 다운됐었다 우선 useEffect 가 무슨 일을 하는지 알아보자. useEffect는 컴포넌트가 마운트 된 후, 컴포넌트가 업데이트가 된 후 컴포넌트가 마운트 되기 전 실행된다. 이때 종속정에 특정 state나 props를 전달하면 혹은 변경될 때 useEffect가 실행된다

리엑트에서 컴포넌트 단위로 개발을 하면서 의미 없는 div태그로 감싸여진 코드들을 볼 수 있다. 이는 jsx를 사용하면서 return은 두개의 값을 반환 할 수 없어 하나의 최상위 태그를 사용해야 하기 때문이다. 이때 Fragment를 사용하면 의미 없는 태그 사용을 막을 수 있다. 일반적으로 div를 사용하면 이런식으로 보여지게 된다. 이때 Fragmen