0385 · 개발12월 29일[백준] 1074번 - Z문제 링크 : https://www.acmicpc.net/problem/1074 | 문제 탐색하기 1) 목표 : N, r, c가 주어졌을 때, r행 c열을 몇 번째로 방문했는지 출력하기 2) 기능 명세서 (1) 숫자 입력받기 N, r, c를 한 줄에…회고 · JavaScript · 알고리즘
0383 · 개발12월 27일[백준] 1316번 - 그룹 단어 체크문제 링크 : https://www.acmicpc.net/problem/1316 | 문제 탐색하기 1) 목표 : 주어진 단어에서 그룹단어의 개수를 출력한다. 2) 기능 명세서 (1) 입력 구문 파싱하기 : 단어의 개수, 문자열을 구분한다. (2) 각…회고 · JavaScript · 알고리즘
0382 · FE12월 27일[React] 코드 스플리팅을 적용했을 뿐인데, 초기 로딩이 줄어들었습니다| 인트로 안녕하세요, 팡일입니다. 이전 포스팅에서는 프로젝트에서 이미지 로딩 구조를 개선하며 성능을 정량적으로 측정하고 검증한 과정을 정리해보았습니다. 이번에는 그 연장선상에서, 초기 로딩 성능에 직접적인 영향을 주는 코드 스플리팅(Code Spl…FE · 웹개발 · 프론트엔드
0381 · FE12월 27일[React] public 이미지에서 import 구조로 (이미지 최적화 개선기)| 인트로 안녕하세요, 팡일입니다. 프론트엔드 프로젝트에서 이미지를 사용하는 방식은 여러 가지가 있는데, 이번 프로젝트에서는 public 폴더에 이미지를 위치시키고 경로 문자열로 참조하는 방식을 사용하고 있었습니다. 기능 구현에는 문제가 없었지만, …FE · 웹개발 · 프론트엔드
0380 · FE12월 27일[React] target="_blank" ESLint 경고의 의미와 해결 방법 (react/jsx-no-target-blank)| 인트로 안녕하세요, 팡일입니다. 오늘은 프로젝트에서 외부 링크를 새 탭으로 열기 위해 사용한 target="_blank" 속성으로 인해 마주했던 경고에 대한 포스팅을 기록해보려고 합니다. Using target="_blank" without re…FE · 웹개발 · 프론트엔드
0283 · FE8월 28일[React] React에서 한글 입력(IME) 깨짐 문제 해결하기프론트엔드 개발을 하다 보면 예상치 못한 버그를 마주하게 된다. 이번 글에서는 React Input에서 한글 입력이 "서울"→ "ㅅㅓㅇㅜㄹ"처럼 분해되는 IME(Input Method Editor) 문제와 이를 어떻게 해결했는지에 대해 기록하고자 한…FE · 웹개발 · 프론트엔드
0270 · BE8월 8일[Node.js] Swagger를 이용한 Node.js API 문서화, 이렇게 하면 끝!시작하며 백엔드 API를 개발하다 보면 API 명세 관리가 쉽지 않다. 특히 팀원이나 프론트엔드 개발자가 API를 테스트하려면 Postman 설정을 공유해야 하고, 문서를 따로 작성해야 한다. 이 문제를 해결해주는 도구가 바로 Swagger(Open…JavaScript · Express · nodejs
0266 · BE8월 8일[Node.js] Prisma 완벽 가이드: 개념, 구조, MySQL 주의사항까지 한 번에 정리Prisma란? Prisma는 TypeScript/JavaScript 환경에서 사용되는 차세대 ORM(Object-Relational Mapping) 도구이다. 전통적인 ORM들과 달리 개발 경험과 타입 안전성에 특히 초점을 맞춘다. 쉽게 말해서, …데이터베이스 · typeScript · JavaScript
0259 · FE8월 1일[React] React 프로젝트에 Vercel + GitHub Actions로 CI/CD 구축하기시작하며 지난 번에는 CI/CD에 대한 개념을 배웠다면, 이번에는 Vercel과 GitHub Actions를 활용해 CI/CD를 구축한 전체 과정을 기록해보려고 한다. Github Actions를 활용한 CI/CD 파이프라인 구축에 대해 이론적으로 …FE · 웹개발 · 프론트엔드
0256 · FE7월 29일[Next.js] TypeScript 프로젝트인데 왜 JavaScript가 아직도 있냐고요?“TS로 전환했으면 다 TS로 써야지, 왜 JS가 남아있지?” 실제로 팀에 들어가 보면 src/utils/legacy.js나 scripts/deploy.js 같은 파일들이 여전히 살아있는 경우가 많다. 누군가는 이렇게 생각할지도 모른다. ? “그건 …웹개발 · 프론트엔드 · JavaScript
0208 · FE7월 1일[React] 성능 잡는 Hook! useMemo, useCallback, 그리고 React.memo 정리 끝판왕React.memo : 컴포넌트 자체를 메모이제이션하여 props가 바뀌지 않으면 다시 렌더링하지 않도록 한다. 1) 사용하는 경우 부모 컴포넌트가 자주 렌더링되는데, 자식 컴포넌트의 props가 변하지 않는 경우 불필요한 리렌더링 방지 목적 2) …FE · 웹개발 · 프론트엔드
0167 · FE6월 4일React 코드의 완성도를 높이는 PropTypes와 ESLint의 만남React로 프로젝트를 진행할 때, ESLint가 아래와 같은 경고를 띄울 때가 있다. 'react/prop-types': 'desc' is missing in props validation 이 글에서는 이 경고가 왜 발생하는지, 그리고 어떻게 해결…FE · 웹개발 · 프론트엔드