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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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