post-thumbnail

zustand 렌더링 최적화 - shallow 대신 useShallow 사용하기!

이전 글에서 언급했던 것 처럼 전체 스토어를 구독하게 되면, 스토어에 담고 있는 모든 state가 변경될 때마다 구독중인 컴포넌트가 불필요하게 렌더링된다. 따라서 스토어 전체구독이 아닌, 필요한 state만 구독해서 사용해야한다.추가적으로 이때 zustand에서 제공되

2024년 1월 17일
·
0개의 댓글
·

PixelBeat version1.0.0 회고

이번 프로젝트를 진행하면서 정말 많은 걸 배우고 성장한 기회였다. zustand, supabase, tailwind를 처음 사용하면서 물론 공식 문서를 확인하긴하지만 시간이 없기도하고 자세히 읽지 못하고 작업에 들어가기도 했다. 리팩토링을 위해 추가적인 공부를 하면서

2024년 1월 4일
·
0개의 댓글
·
post-thumbnail

Zustand 불필요한 리렌더링 막기

음악플레이어를 구현하면서 zustand를 사용하면서 만난 리렌더링 문제 사용한 부분만 보다면 현재 재생목록과 관련된 store에는 현재 트랙을 의미하는 currentTrack과 이를 지정하는 setCurrentTrack이 있다. 또한 현재 재생된 분량을 뜻하는 p

2023년 12월 10일
·
0개의 댓글
·
post-thumbnail

spotify api access_token 얻기 로그인 기능 구현하기 (프론트엔드에서 구현, supabase)

음악을 소재로 프로젝트를 진행하기로 마음먹고 여러 음악 api를 찾아봤을 때 처음에는 soundcloud의 api를 사용하려고 했는데, api 신청을 위한 공식사이트의 구글폼을 확인했더니 더이상 제공하지않는다는 글을 보고 Spotify API를 사용하기로 했다. 먼저

2023년 12월 3일
·
1개의 댓글
·

Redux-toolkit 비동기 함수 type typeScript (todoList RTK 상태관리)

Redux 맛보기 공부를 위해 TS 환경에서 만든 todoList에 Redux를 적용하며 배우고자했다.공식문서와 구글링하며 공부하는데 어떤 것엔 Action을 지정하고 있는데 또 createSlice할 때는 없어 처음엔 헷갈렸는데, 결론은Redux -> RTK crea

2023년 11월 25일
·
0개의 댓글
·

React의 생애주기(lifecycle), 클래스형, 함수형, React Hook

생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는다 클래스형 컴포넌트에서의 생애주기별 메서드 Mounting (생성 단계) constructor: 컴포넌트가 생성될 때 호출되는 생성자 메소드. 초기화 작업을

2023년 11월 7일
·
0개의 댓글
·

타입스크립트 TS interface와 type의 특징과 차이점

객체, 클래스의 타입 extends 키워드로 확장, 선언 병합정의가능 타입 객체, 클래스 외에도 기본 타입, 유니언 타입, 인터섹션 타입, 유틸리티 타입, 맵드 타입 등의 정의에 사용& 연산자로 확장, 두번 선언 불가능interface : 객체, 클래스 정의에 사용ty

2023년 11월 4일
·
0개의 댓글
·
post-thumbnail

REST, RESTful API, HTTP API

네트워크 리소스를 정의하고 처리하는 방법을 설명하는 일련의 원칙을 기반으로 하는 아키텍처 스타일클라이언트와 서버가 데이터 주고받는 방식 → 정리한 원칙을 기반으로한 아키텍처 스타일HTTP를 잘활용하기 위한 원칙을 기반으로한 아키텍쳐 (REST)직역하자면 자원(리소스)의

2023년 10월 28일
·
0개의 댓글
·

this 바인딩 call, apply, bind의 차이점

func.call(thisArg\[, arg1\[, arg2, ...]])thisArg: func 호출에 제공되는 this가 될 값arg1, arg2, ...: func이 호출되어야 하는 파라미터 첫번째 인자로 들어간 duck을 this로 인식하기 때문에 duck의 a

2023년 9월 21일
·
0개의 댓글
·
post-thumbnail

React.lazy와 @loadbale/component의 차이점

리액트로 진행한 프로젝트을 라이트하우스로 돌려봤고 그 중 나온 권장 사항이 사용하지않는 자바스크립트 줄이기였다. 해당 글에서는 위의 이미지와 같이 리액트에서는 code-split을 추천했고 React.lazy()를 사용하기로 했다. 기존 코드수정된 코드이렇게 코드를

2023년 9월 12일
·
0개의 댓글
·
post-thumbnail

이벤트 캡쳐링과 버블링 stopPropagation()

브라우저 화면에서 이벤트가 발생하면 브라우저는 가장 먼저 이벤트 찾는다.브라우저가 이벤트 대상을 찾아갈 때 가장 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려가는 단계.이때 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 만나

2023년 8월 31일
·
0개의 댓글
·
post-thumbnail

2023 제주 웹 컨퍼런스 연사 회고

제주 웹 컨퍼런스 연사 참여 후 강제(?) 제주 1주살이 후 쓰는 글.인터랙션 웹을 계기로 시작하게 된 개발이었기에 이를 구현하기 위해서 일단 기초적으로 알아야할 것에는 무엇이 있을까하는 의문을 가졌고, 여러 이유를 바탕으로 <canvas>와 <svg>를 꼽

2023년 8월 15일
·
2개의 댓글
·

프엔스쿨 5기 팀프로젝트가 끝나고

멋사 프론트엔드스쿨 5기 최종 팀프로젝트가 끝난 시점에서 쓰는 회고글.디자이너들과 혼자 개발자로서 팀플에 참여한 적은 있어도 개발자들과 협업한 적은 없었고, 처음이었기에 기대도 되고 두렵기도 했다. 혼자서 깃허브에 올리는 것만이 아닌 같이 깃허브를 사용하면서 브랜치 전

2023년 7월 8일
·
0개의 댓글
·
post-thumbnail

좌표 위치 - clientX, offsetX, pageX, screenX, scrollY, pageYOffset 의 차이점

1. ClientX, ClientY 현재 보여지는 브라우저 화면 뷰포트 기준으로 가로, 세로 좌표를 반환 2. OffsetX, OffsetY 이벤트 대상을 기준으로 상대적인 좌표를 반환 ex) 화면 중앙의 박스 요소에서 클릭한 위치를 찾으면 박스위 왼쪽 모서리 좌표

2023년 5월 28일
·
0개의 댓글
·

창, 요소 높이너비위치 - clientHeight, offsetHeight, innerHeight, OuterHeight 의 차이점

Element 기준 clientHeight box-sizing: content-box일때 : 요소 + padding 의 크기 box-sizing: border-box일때 : 요소 + padding + ScrollBar + border 의 크기 offsetHeight

2023년 5월 20일
·
0개의 댓글
·
post-thumbnail

[JS] for in, for of 그래서 무슨 차이?

가장 자주 사용하는 for문이지만 헷갈렸던 for in과 for of의 차이점과 사용하는 경우에 대해 짚고 넘어가려고 한다. 📗 for in value가 아닌 key에 해당한 값이 변수로 반복된다. enumerable(열거 가능한) 것들만 출력한다. IE에서 사용

2023년 4월 18일
·
0개의 댓글
·

프엔스쿨 5주차 회고

html css 강의가 끝나고 이제 막 js수업를 하는 시점에서 쓰는 처음 쓰는 회고글. ⏰ 처음으로 해보는 9-6 생활 3년동안 계획해서 모았던 돈으로 친구들과 갔던 1달간의 졸업 유럽여행 중 서류합격 결과가 나오고 2차과제를 받았는데, 친구들이 자는 새벽에 강의

2023년 4월 2일
·
0개의 댓글
·
post-thumbnail

CSS font-face 속성으로 같은 패밀리 폰트 여러개 불러오기

font-face 방식으로 폰트이름을 하나로 하고 여러개의 스타일을 표현하기아래와 같이 font-family의 명은 동일하게 한다. src파일 마다 weight값을 지정해서 여러개의 @font-face를 작성한다.전체에 한 폰트 패밀리를 적용한다.원하는 weight로

2023년 3월 9일
·
0개의 댓글
·
post-thumbnail

CSS 폰트 - 폰트 적용방식, 줄바꿈, 말줄임처리

폰트 설정방법 link - html head에 하단 코드 삽입 import - css에 삽입 font-face - css에 삽입 > 폰트를 지정할 때 한글은 한글 폰트로, 영문은 영문폰으로 나오길 원한다면, 영문폰트명, 한글폰트명 순으로 작성한다. font-s

2023년 3월 7일
·
0개의 댓글
·
post-thumbnail

CSS 선택자 - 복합선택자, 가상클래스, 가상요소, 우선순위

HTML과 CSS를 함께 배웠지만 CSS만 따로 모호하게 알고 있던 것 위주로 정리해서 작성했다.해당 주제마다 글을 수정해가며 덧붙일 예정!CSS는 Cascading Style Sheets의 약자이다.Cascading: 연속화cascade : 폭포CSS에서 스타일이 적

2023년 3월 6일
·
0개의 댓글
·