📖 TIL

현대에서 많이 사용되고 있는 프레임워크인 React, Vue, 라이브러리 Next.js에 대해서 알아보아요.

요즘 현업에서 많이들 사용하고 있는 Jest를 사용하여 테스트를 해보자!

Jest에 들어가기 전에.. Jest에 대해서 알아보자!

이제 본격적으로 ToDo-List를 테스트 코드로 돌려보자

SSR과 CSR은 웹 페이지를 렌더링하는 방식에 따라 나뉩니다. Vue, React, PHP, JSP와의 관계를 이해하기 위해 각 방식을 살펴보겠습니다.

React 프레임워크로, 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원합니다.

빌드 시점에 API를 호출하여 데이터를 가져오는 방식과 사용자가 페이지에 접근할 때 API를 호출하는 런타임 시점에 대해 혼동할 수 있습니다.

웹 개발에서 중요한 개념인 SSR, CSR, SSG, SEO는 면접에서 자주 등장하는 질문이기에, 이번 글에서는 각 개념의 핵심을 쉽게 설명할 수 있는 방법을 정리해보았습니다.

Firebase Console에 접속 후 프로젝트 생성.프로젝트 내에서 Firebase Firestore를 활성화:Build > Firestore Database 선택.데이터베이스 생성 후 테스트 모드로 설정 (운영 시 규칙 수정 필요).Firebase SDK 설정:프

스쿨 프로그래머스에서 진행한 코딩테스트 알고리즘을 풀다가 문득 알게된 사실! slice()는 보통 배열에서 값을 제거할 때, 사용하였는데 배열복사도 가능하다는것

숫자의 일부 자릿수를 영단어로 바꾼 문자열이 주어졌을 때, 원래 숫자를 찾는 코딩테스트 문제를 해결해 보는 오늘의 TIL

프로젝트를 하다보면 Date형식을 지정해야 할 일이 아주 많은데, 좀더 효율적으로 짤 수 있는 방법을 모색해보았다.

프로젝트를 진행하다 보니, 금칙어 필터를 넣어보고 싶은 욕심이 생겼다.

프로그래머스의 문자열 내 마음대로 정렬하기를 풀어보자

배열 array에서 주어진 구간을 자르고, 정렬한 뒤, K번째 숫자를 구하는 문제

📚 실행 컨텍스트부터 스코프 체인까지, JavaScript의 동작 원리를 파헤쳐봅니다. 콜 스택, 호이스팅, this 바인딩 등 핵심 개념을 실제 코드 예제와 함께 알아보세요!

this에 대해서 공부를 하다가 this binding하는 부분에 대해서 직접 예제를 만들어 이해를 해보고자, Array.prototype.map 메서드를 직접 구현해보았고, 그 과정에서 this 바인딩의 중요성을 발견했습니다.

클래스에서 getter/setter를 사용할 때, 언더스코어(\_)를 사용하지 않으면 발생하는 재미있는(?) 문제를 마주쳤습니다.

참조형 데이터가 메모리에서 노는 방법 🎮 객체와 배열이 메모리에서 어떻게 저장되고 복사되는지, 그리고 2022년에 새로 추가된 structuredClone()까지! ✨

arguments 객체와 클로저를 활용한 실전 코드와 동작 원리 분석 렉시컬 환경(LE)에서의 변수 관리까지 한번에 정리

new Promise()의 동작 원리와 비동기 처리 과정을 파헤쳐봅니다 ⚡️ Promise의 상태 변화와 이벤트 루프를 통한 실행 순서를 이해하고, 실제 코드로 확인하는 비동기 처리의 모든 것

변수와 상수는 메모리에서 어떻게 살고 있을까? 🤔 기본형과 참조형의 이중생활, 그리고 불변성의 진실 메모리 관점으로 이해하는 자바스크립트 데이터의 세계!

백트래킹의 마법으로 알고리즘 최적화하기 ✨ 소수 판별과 조합의 효율적인 구현 방법을 알아보고, 3중 for문을 재귀로 리팩토링 하는 과정을 정리했습니다!

브라우저 렌더링 과정에서 발생하는 의도치 않은 흰 선, 세 가지 방법으로 깔끔하게 해결하기 ✨ 하드웨어 가속까지 활용한 완벽한 CSS 트러블슈팅!

소수점 처리부터 DOM 최적화, 클래스 설계까지! 실무에서 마주치는 JavaScript 문제들의 해결 방법을 정리했습니다 ✨

한 파일에 모든 코드가 있다고요? 깔끔한 모듈 구조로 리팩토링 하는 방법을 알아봅니다 🧹 컴포넌트 분리부터 폴더 구조 설계까지, 클린 코드를 위한 여정!

사용자 행동을 기록하고 추적하는 시스템을 만들다가 발견한 JavaScript의 숨은 보석들을 기록합니다 ✨

스코프 체이닝부터 화살표 함수의 this, 비동기 실행 순서까지! 오늘도 새로 발견한 JavaScript의 재미있는 특성들을 기록합니다 ✨

웹 개발자라면 꼭 알아야 할 JavaScript 스크립트 로딩 최적화 방법! 🚀 "아, defer을 대신 추가해주셨군요!"

JavaScript로 개발하다 보면 한 번쯤 마주치게 되는 'a.key는 안 되는데 a[key]는 되네...?' 순간! 객체 속성 접근과 Map 메서드 사용의 핵심을 파헤쳐봅니다. 헷갈리는 문법을 샥샥 잘라 명쾌하게 정리했어요! 🔪

프론트엔드 개발자라면 꼭 알아야 할 React의 핵심 개념들을 총정리했습니다. Optional Chaining부터 Virtual DOM까지, React 개발의 A to Z를 파헤쳐봅시다!

React 개발 시 자주 마주치는 주요 개념들과 이벤트 핸들링 방식, 코드 스니펫에 대해 정리했습니다.

오늘은 React의 고급 기능들을 깊이 있게 학습했습니다. 특히 클로저의 활용, 컴포넌트 중첩, 폼 제출 최적화, 그리고 클래스네임 관리 방법에 대해 집중적으로 공부했습니다.

코딩테스트, 이것만은 꼭 알고 가자! 실제 테스트 진행 방식부터 시간복잡도 체크까지, 현업 개발자 튜터님의 생생한 꿀팁 총정리 ✨

함수형 컴포넌트와 Hook의 실제 동작 원리, 특히 useEffect와 의존성 배열의 비밀에 대해 배웠습니다! 이제 커스텀 훅도 자신 있게 만들 수 있겠어요 ✨

async는 비동기 작업을 할 함수를, await는 비동기 부분을! Promise.all과 map의 조합으로 비동기 데이터를 멋지게 다뤄보았습니다. 이제 비동기 처리가 조금은 덜 무서워졌네요! ✨

Hook을 배열로 관리하는 이유부터 실전 활용 팁까지, React의 깊은 고민과 해결책을 파헤쳐봅니다. 이제 Hook의 모든 제약사항이 이해되기 시작하네요! ✨

"얼마나 어렵겠어~" 하고 시작한 React 환경 구축, JSX 에러부터 웹팩 설정까지... 용어 찾고.. 이해하고 직접 해보고.....삽질 기록. 이제야 CRA의 고마움을 깨닫다! 😅

객체의 키를 확인하는 모든 방법을 파헤쳐보니, hasOwnProperty와 in 연산자에 이런 차이가 있었네! 😲

Redux를 통한 전역 상태 관리의 필요성, 기본 개념, 그리고 실제 구현 방법까지 학습했습니다.

프로그래머스 "구슬을 나누는 경우의 수" 문제를 풀면서 발견한 흥미로운 이슈들...

컴포넌트 간 데이터 전달의 복잡성을 해결하는 Redux와 RTK(Redux Toolkit)의 핵심 개념과 사용법을 알아봅니다.

useEffect, useEffect를 직접 구현보았습니다

백엔드 서버 구축 없이도 풀스택 개발이 가능한 BaaS(Backend as a Service)의 개념과 Supabase를 활용한 React 애플리케이션 개발 방법에 대해 알아보았습니다!

현대 웹 개발에서 가장 중요한 과제 중 하나인 상태 관리. Flux 아키텍처를 시작으로 Redux의 탄생 배경과 발전 과정, Context API와의 차이점을 알아봅니다.

React의 상태 업데이트 시 직접 참조 대신 prev를 사용해야 하는 이유를 알아봅니다.

Context API와 Redux Toolkit 구현 로직을 정리해보았습니다!

첫 커스텀 훅으로 선택한 브라우저 저장소 Hook. 근데 이게 Hook으로 빼는게 맞을까? 아니면 이미 작성해둔 리듀서 안에서 구현하는것이 맞을까? 과연?

Button 컴포넌트 리팩토링을 통해 type/variant 네이밍 고민부터 스타일 관리 구조화까지...

코드의 가독성, 예측 가능성, 응집도, 결합도를 중심으로 진정한 '좋은 코드'란 무엇인지, 그리고 이를 실무에서 어떻게 적용할 수 있는지 토스의 프론트엔드 가이드를 바탕으로 알아봅니다.

toss의 Frontend Fundamentals글을 읽다가 .. 문득 컴포넌트의 디렉토리 구조를 어떻게 설계해야 할까에 대해서 고민하게 되었다.

프로젝트를 진행하면서 리팩토링 관점에서 styled-components의 구조에 대해 고민하게 되었습니다. 재사용성외에 단순히 코드가 길어졌다고 파일을 분리하는 것이 최선일까? 어떤 기준으로 분리해야 할까? 이런 고민들을 튜터님과의 면담을 통해 해결해보았습니다.

Todo 앱에서 아이템 수정 시 reducer를 사용하면서 발생한 의문:"단순히 값만 전달하는데 왜 기존 상태를 유지해야 하지?" 라는 의문이 들었습니다.

팀프로젝트에 입성하게 된 첫날.. 기획과 와이어 프레임을 잡는것. 사실은 FE의 업무라고는 볼 수 없을 지 모르나.. 이것 역시도 중요한 역량이라고 생각한다..!!

팀 프로젝트의 2일차... 깃 협업, 생각보다 고려해야할 것들이 많았다. PR형식,Git 컨벤션 등등.. 첫 협업의 PR과 팀원분들의 코드리뷰까지..

처음에는 당연히(?) Context API에서 모든 상태값을 관리하려고 했는데, 튜터님께서 "굳이...?"라고 하시는 바람에 팀원들과 고민하게 됐다...또한, 팀원들과 작업하다가 예상치 못한 문제가 발생했다

Supabase에서 사용하는 용어 기능들을 정리해보았다..

프로젝트 진행중 문득.. useState로 onChange 값을 받아서 사용하는것이 데이터 측면에서 하나하나 받아오므로 이것이 비효율적이지 않을까 하는 생각이 들었다.

오늘은 프로젝트의 5일차, 사실상 마지막날.. 협업과정에서 겪은 사소한 오류들과 코드적인 실수..! 다시금 리마인드 시키자

오늘 드디어 axios와 fetch의 차이를 제대로 알게 됐다. 또한 tanstack query에 대해서 처음 접해보면서 보일러 플레이트를 줄이는 과정이 너무 신기했다

라우터에 testPage나 testResultPage를 어떻게 줘야할까 찾아보게 되었다.위처럼 카멜케이스로 작성해야하는건가? 아니면 케밥케이스? 아니면 소문자로 쭉?

토큰 만료 관리 불가데이터 캐싱 기능 부재에러 처리가 불완전프로필 업데이트 시도시 발생한 문제..message: "토큰 검증에 실패했습니다."

React 18 이후로 생긴 기능들을 실생활의 예시를 들어 정리해보았다.. 나중에 사용해야할 경우 참고해보면 좋을듯 하여 기록을 남겨본다.

tanstack-query에서 useQuery를 사용하던 도중 일부 데이터만 필요한 상황이 발생하였다. 그렇기에 데이터를 필터링 하는 여러가지의 방법들을 정리해보려고 한다.

클라이언트 상태와 서버 상태의 차이에 대해서 알아보자, Access Token은 어디에 넣어야 안전할까? 로컬? 세션? 쿠키?... RTK와 Tanstack Query 어떻게 다를까?

Supabase에서 이미지 미리보기를 구현할 때 storage에 먼저 이미지를 올려야 하는 점이 마음에 들지 않았다. 서버에 올리지 않고 이미지 미리보기를 해줄수 있는 방법이 없을까?

오늘 React 프로젝트에서 카카오맵 API를 사용해 지도 기능을 구현해야 했다. 특히 좌표와 주소를 서로 변환하는 지오코딩 기능이 필요했는데, 처음 써보는 거라 이것저것 삽질을 많이 했다.

오늘은 리액트 프로젝트를 작업하면서 몇 가지 새로운 기술들에 대해서 정리를 해보려고 한다...!

늘 타입스크립트의 기본 개념부터 React에서 활용하는 방법까지 공부했다. 자바스크립트만 사용하다가 타입스크립트로 넘어오니 새로운 개념들이 많았고, 특히 타입 시스템과 제네릭, 유틸리티 타입 등에 대한 이해가 필요했다...

오늘 투두리스트 만들다가 갑자기 아래 오류를 만났다.프로젝트를 설치하고 프로젝트를 열었는데.. 온통 빨간줄 천지였다..알고보니 yarn 명령어를 잘못 입력해서 Yarn 버전이 업그레이드되며 PnP(Plug'n'Play) 모드가 활성화된 것이 원인이었다.

오늘은 Next.js에서 사용할 수 있는 4가지 렌더링 방식에 대해 알아봤다. 각 방식이 어떻게 다른지, 어떨 때 쓰면 좋은지, 그리고 제대로 동작하는지 어떻게 테스트하는지 정리했다.

탄스택 쿼리에서 낙관적 업데이트에 대해서 정리해보았다..

프레임워크와 라이브러리의 차이부터 렌더링 메서드 방식까지 다루어 보았다.

Next js라우팅과 렌더링 방식에 대해서 정리해 보았다.

Next.js에서 주로 사용하는 핵심 기능들을 정리해보았다.

면접에서도 나올 수 있는 Next.js에서의 Image컴포넌트를 사용하는 이유와 Next.js가 TailwindCSS를 권장하는 이유에 대해서 정리해 보았다.

리플로우/리페인트, 자바스크립트의 엔진 구조, 크리티컬 렌더링 패스 이렇게 3가지 기술 면접 대비 정리하고 질의응답한 내용들을 정리해보았다

오늘의 면접 주제는자바 스크립트 비동기 흐름 (콜백, 프로미스, async/await)브라우저 저장소 비교 (localStorage/sessionStorage/Cookie)React 상태 관리의 흐름 (useState, useReducer, 상태 흐름 설명)

어제는 JavaScript Promise와 React관련하여 기술면접의 주제를 잡고 질의응답을 진행하였다..

오늘의 주제는 이벤트 버블링과 캡처링단골 면접 질문인만큼 코드와 실제 코드에서 다루어본 경험을 빗대어 이야기 해보면 좋을듯하다

오늘은 이벤트 위임과 관련된 기술면접 대비를 준비해보았다.

오늘은 TypeScript를 다시 한번 살펴보았다. 주로 사용하는것만 사용해온지라 헷갈릴 수 있는 키워드를 갖고 공부해보았다.

프론트엔드 개발자로 취업을 준비하면서 TypeScript에 대한 이해를 정리하고자, 실제 면접에서 자주 나오는 TypeScript 핵심 개념들을 정리해보겠습니다.

오늘은 리액트 기본기를 다시 재정립하면서 익혔던 부분들을 다시 정리해보았습니다..!!

취업준비생 개발자를 위한 실전 기술면접 질문 & 답변 총정리React, JavaScript, 최적화, 비동기까지 한 번에! 기술면접 질문을 10가지정도 정리해보았다.

기술 면접을 대비하여 5선으로 질문지를 추려보았습니다.

프론트엔드 개발에서 테스트 코드 작성 시 필요한 다양한 테스트 라이브러리 함수들과 개념을 정확히 이해하고 활용해보자.

Next는 기본적으로 성능 최적화를 위해 다양한 캐싱기능들을 제공합니다. 오늘은 캐싱 기능들에 대해서 정리해보았습니다.

프론트엔드 개발하다 보면 언젠가는 마주치게 되는 '암호화'... 🤯 "RSA는 안전한데 느리고, AES는 빠른데 키 전달이 위험하다고?" 그럼 둘 다 쓰면 되는 거 아닌가? 🤔 택배 보내는 것처럼 쉽게 이해할 수 있는 하이브리드 암호화!