전직장 동료를 통해 글또를 알게되어, 마지막 기수인 10기에 참여하여 6개월간 활동을 했다.처음 시작시 6개월이라는 시간이 멀게만 느껴졌는데, 벌써 마지막 회차라니! 글또를 통해 내가 여태까지 한 활동은 이렇다. 1. 2주에 한번 글 쓰기(총 10개 글 작성) 2. 커피챗하며 개발자간 교류하기 (총 3번의 커피챗 진행) 3. 포트폴리오 만드는 소모임 참여하기 ✅ 2주에 한번이나 글을 써야 한다고?!글또를 시작하기 전엔 2주에 한 번이면 별로 힘들지 않고, 평소에 블로그 썻던 것 처럼 쓰면 되겠지라고 생각했다.그러나 생각보다 2주에 한 번 글을 쓴다는게 쉽지 않았다.글또에 제출되는 글을 쓴다 생각하니 좀 더 정돈되고 다른 사람들에게도 유용한 글을 쓰고 싶었기 때문이다. '내 글이 다른 사람에게..
전체 글
최근 사이드 프로젝트에서 웹팩을 직접 설정해보며, 웹팩의 다양한 속성들을 학습해보았다.웹팩 설정을 하며 배운것들이 너무너무 많다. 웹팩 설정을 통해 할 수 있는 것들이 그렇게나 많다니..!그 과정에서 특히 기억하고 싶은 publicPath와 historyApiFallback에 대해 기록해보려 한다. ✅ publicPath에 대해`publicPath`는 브라우저가 번들링된 파일들(JavaScript, CSS, 이미지 등)을 어디서 찾아야 하는지 알려주는 기본 경로이다.publicPath: '/'는 브라우저에게 모든 에셋을 서버의 루트 경로에서 찾아주라고 지시하는 것이다.SPA에서는 일반적으로 `publicPath: '/'`를 사용하게 된다.SPA는 클라이언트 측에서 라우팅을 처리하지만, 모든 라우트에서 ..
✅ 들어가며javascript deep dive를 읽으며 js코어 개념을 익히곤했다.그러나 나는 이 개념이 실제 어떻게 실무에서 쓰이고 있는지, 또 어떻게 활용을 해야하는지 늘 의문이였다.특히 클로저는 변수를 은닉화 할 때 쓴다고 하는데, 은닉을 활용하면 더 코드를 파악하기 힘들지 않을까란 의문이 있었고 이걸 활용하게 될 날이 올까란 생각도 있었다. 그런데 이미 리액트 useState가 클로저를 활용한 개념이라고 한다!아래 글은 JSConf 의 useState관련 영상을 보며 공부한 내용이다.(※ 영상) ✅ useState와 클로저1️⃣ 클로저란 무엇인가?클로저(Closure)는 내부함수가 외부 함수의 변수에 접근할 수 있도록 해주는 JavaScript 기능이다.클로져를 통해 함수가 “privte”한 변..
React에서 input 요소를 사용할 때 value와 defaultValue는 어떤 차이가 있을지 의문이 들었다.단순히 보기엔, defaultValue는 초기값 설정해주는 것 같은데 이런건 또 언제 써야하는걸까? 찾아보니 이 둘의 차이는 Controlled Component(제어 컴포넌트) 와 Uncontrolled Component(비제어 컴포넌트) 라는 것과 관련된 것 이였다.이건 또 뭐지! 이 두 방식의 차이에 대해 살펴보자. 리액트에서 input과 같은 폼 요소를 다룰때,Controlled 컴포넌트는 value에 state를 넣어 상태를 관리한다. 상태가 업데이트될 때마다 폼 전체가 리렌더링된다.Uncontrolled 컴포넌트는 defaultValue로 값을 설정하고, ref를 사용해 DOM에 ..
1. requestAnimationFrame (RAF)란?RequestAnimationFrame 은 브라우저 내장 API이다.브라우저 렌더링 주기(보통 60FPS)에 맞춰 콜백을 실행한다. 애니메이션을 부드럽게 실행하도록 도와주고, 프레임을 브라우저가 최적화하여 처리한다.때문에 애니메이션 구현시, setInterval 대신 requestAnimationFrame을 더 많이 활용한다. 2. requestAnimationFrame 동작원리애니메이션을 부드럽게 실행하기 위해브라우저는 다음 렌더링 시점에 애니메이션을 예약하고 '매 프레임마다 자동으로 호출'한다.브라우저의 리페인트 주기(60FPS) 에 맞춰 실행되는 것이다. 즉, 브라우저가 1초당 출력할 수 있는 프레임 수(fps) 기준으로 requestAni..
✅ 들어가며취업 준비 시절, 나는 타입스크립트까지 제대로 공부하지 못한 채 취업에 성공했다. 당시에는 타입스크립트가 프론트엔드 개발을 더 안정적이고 확실하게 만들어주는 도구라는 정도로만 알고 있었다. 그러나 현업에서 자바스크립트로 개발을 하면서, 타입스크립트의 필요성을 몸소 체감하는 순간이 많았다.함수의 파라미터는 숫자형이어야 했지만, 라이브러리 반환값은 문자열인 숫자로 반환되는 바람에 오류가 발생한 적이 있다.이 오류의 원인을 파악하는 데 시간이 꽤 걸렸던 기억이 난다. 또한, 개발 완료 후 코드를 실행했을 때 콘솔에 런타임 에러가 발생하곤 했고, 그 에러를 해결하는 데 많은 시간을 쏟았다. 만약 처음부터 타입 가드를 적용해 undefined.length 같은 상황을 처리했다면, TypeError: C..
리액트의 내부 동작을 깊이 이해하기 위해 직접 리액트를 구현해보는 튜토리얼을 진행했다. 지금보면 코드가 눈에 다 들어와서 별로 복잡해보이진 않지만, 처음에는 코드를 이해하는게 힘들었다.링크드 리스트처럼 노드마다 부모, 자식, 형제로 얼키설키 엮여 있는 구조와Fiber 노드 객체의 속성과 뎁스가 너무 많아 코드를 파악하기 어려웠다.이런 문제를 해결하기 위해 각 노드 객체의 관계를 그림으로 직접 그려보며 구조를 하나씩 이해해나갔다.튜토리얼 사이트 전체코드 튜토리얼을 통해 파악한 주요 개념들을 정리해보았다. 1. Fiber란?1) 정의Fiber는 각 DOM 노드(element)마다 생성되는 객체로, Fiber Tree를 구성하는 작업 단위이다.Fiber Tree는 렌더링 프로세스를 관리하기 위한 구조인데, 이..
요즘 JS코어를 다시 공부 하고있다. 여렴풋이 기억하고 있었던 내용을 다시 확실하게 잡아보고자 한다.비동기에 대해 싹 정리해보도고 익히도록 해보자! ✅ 동기 , 비동기동기자바스크립트는 “싱글 스레드” 방식이기 때문에, 한번에 하나의 태스크만 처리할 수 있다.이렇게 하나의 작업이 끝날 때까지 다음 작업이 대기하는 방식이 동기 처리이다.// taskOne의 처리가 끝나기 전 까진 taskTwo는 대기하게 된다. function taskOne() { for (let i = 0; i 비동기하지만 현재 실행 중인 작업이 종료되지 않은 상태라도, 다음 작업을 곧바로 실행할 수 있다.이것이 비동기 처리.비동기 처리 요청을 보낸 후 응답 여부와 상관없이 다음 태스크를 병렬적으로 수행할 수 있는 방식이다.이 방식은 ..
최근 사이드 프로젝트를 하면서 React-Query를 접하게 되었습니다.도입한 이유는 사실 단순히 궁금해서였습니다.많이들 사용하는 것 같던데 정작 저는 한번도 사용해보지 않아 그 이유가 궁금했습니다. React-Query를 사용하며 배우고 느꼈던 것들을 정리해보겠습니다.(주니어의 시각에서 작성한거라, 보완이 필요한 부분이 있을지도 모르겠습니다!?🫨🙀) ✅ React-Query란 ?서버 상태 관리를 위한 라이브러리.데이터 패칭, 동기화, 캐싱 등 기능을 제공해 개발자가 서버 데이터를 손쉽게 관리할 수 있다. ✅ 효용효용1. 상태 관리의 단순화1) React-Query 없이 관리할 땐일반적으로 useEffect와 useState를 사용해 직접 서버 데이터를 저장하고, loading과 error 상태는 ..