벌써 세 번째 쓰는 전역상태관리 관련 블로그!플레이어 프로젝트를 어떻게 하면 컴포넌트화 해서 재활용을 쉽게 할 수 있을까란 고민을 하던 중, 플레이어 자체를 전역에 두고 빼서 쓰면 프로젝트 내에서 상태 공유도 쉽고 하나의 모듈처럼 옮겨다닐 수 있지 않을까란 생각이 들었

여전히 player 구현 중......seek bar 구현이 이렇게 어렵고 까다로울거란 생각은 하지도 못했다.지금까지 구현했다 삭제했다 수정했다의 히스토리를 정리해보자면,1\. 기존 legacy 코드대로 rc-slider 라이브러리 사용하기2\. seek bar에 마우

회사에서 너무 정적인 사이트만 만드는 느낌이라 엄청 동적인 프로젝트를 만들고 싶단 생각이 들기 시작했다.요즘 핫하다는 인터렉티브 웹사이트에 대해 찾아보다가, 패스트캠퍼스 인터렉티브 강의를 발견하여 결제했다.(사실 canvas가 뭔지도 모르고 그냥 인터렉티브에 꽂혀서 결

GraphQL을 썼던 나는 회사에서 Rest API를 쓰면서 아주 다양한 불편함을 겪는 중... 동기 덕분에 React Query란 라이브러리를 알게 되었고, GraphQL을 썼던 때와 생김새가 비슷하다고 생각됐다 그래도 처음 쓰는 라이브러리이고 많이 사용되고 있는 라

Graph QL을 먼저 배워서인지 Rest API는 할 때마다 어려운 느낌이 든다(Next.js를 배우고 CRA 사용, Graph QL을 배우고 Rest API 사용... 뭔가 반대로 된 느낌)이전에 Rest API를 살펴본 글에서 언급한 것처럼 axios를 사용할 수

Git-flow는 2010년 온라인에서 nvie라는 닉네임을 사용하는 개발자에 의해 알려진 것으로, feature - develop - release - hotfix - master 로 브랜치를 구성한다.Git-flow는 소프트웨어 버전 관리가 필요한 앱이나 솔루션 혹

반응형은 할 때마다 전~혀 모르겠다rem도 root단의 font size에 따라서 반응형으로 슝슝 움직이는거 아닌가란 생각을 했는데 그것도 아니다.이번 기회에 rem에 대해 살펴보자!rem은 root em으로, 최상위 요소 (보통 html 태그)에 지정된 font si

(부트캠프에서 Next.js를 배웠던 내가 JAMstack이란 개념을 몰랐다는 것을 반성 또 반성하며...)보통의 웹은 완성된 Static HTML과 CSS를 네트워크로 전달받아서 화면을 보여준다.서버가 동적으로 HTML을 생성할 수 있게 되면서 SSR(Server S

DOM : 트리 전체Node : 트리를 구성하는 요소 하나하나Node 하나하나가 API이기 때문에 자바스크립트로 제어 가능!API : "너가 이렇게 주문하면 내가 이렇게 해줄게!"라고 메뉴판처럼 만들어 둔 것 즉, 콜라 버튼을 누르면 콜라가 나오는 자판기처럼 내가 할

전체화면 열심히 고쳤더니 콘솔에 이런 Warning 메세지가 길고 길게 찍힌다.이거 뭔데... 왜 styled component에 props 넘겨주는걸로 뭐라 하는데ㅠContext API 안에 있는 isScreenFull은 default값으로 false를 갖고 있는 b

이틀 전부터 머리를 뜯어가며 고민하고 있는 이슈... 전체화면 버튼만을 클릭해서 전체화면 시작, 전체화면 끝을 하는 건 이상이 없다. 그런데, ESC를 눌러서 전체화면을 종료할 경우 전체화면 여부를 구분하는 state가 바뀌지 않아 아이콘이 여전히 전체화면일 때 그대로

이 전에 부트캠프를 다니면서 useRef에 대해 살펴보았지만, TypeScript와 함께 조금 더 심도있게 (?) 살펴보자!TypeScript에서 useRef를 사용할 경우 제네릭과 초기값을 설정해야 한다.제네릭 : 값의 타입을 넣어준다.초기값 : 타입에 맞는 초기값을

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야 하는 경우 setTimeOut() 함수를 사용할 수 있다.첫 번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두 번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.세 번째 인자부터는 가변인자를 받는데

기존 코드 분석이나 리팩토링을 하는 과정에서 오히려 기초인 HTML, CSS가 부족하단 생각이 매일매일 든다.요즘 매우 빡치는(...^^) 기존 코드 분석을 하며 새롭게(?) 학습한 position에 대해 정리해보자!position 속성을 통해 문서 상에 요소를 배치하

마우스 포인터가 요소 위에 놓여졌거나 움직일 때 작동한다.마우스 포인터가 요소 안으로 들어올 때 작동한다.(외부에서 내부로 이동)마우스 포인터가 요소에서 이동할 때 작동한다.(내부에서 외부로 이동)onMouseOver, onMouseOut : 자식 요소에 접근해도 동작

addEventListener()는 document의 특정 요소 (Id, class 등) event를 등록할 때 사용한다. html js querySelectorAll 함수를 이용해 div 안의 id 값 'cols'와 button의 class값 'btn'을 가져온 후,

기존 npm에서 라이브러리를 설치해오던 방법이 아닌,회사 내부 private bitbucket repo에서 라이브러리를 다운로드해오기 위해 ssh용 키를 생성하여 private repo에 접근해야 한다.ssh key 생성 및 등록 방법이 꽤 복잡하니 메모처럼 작성해둔다

내가 보려고 간단히 정리해두는 글git clone 시 master(main) branch만 가져온다.master(main) branch 외에 다른 branch들도 가져오기 위한 CLIgit remote updategit checkout -t origin/\[가져올브랜치

video 태그만을 선택해서 refresh하는 기능을 구현하기 위해서 구글링을 약 두 시간 가량 한 후에 querySelector로 해결했다.querySelector를 처음 써봤다... 아니 사실 처음 안 걸수도..?더 구체적인 엘리먼트를 선택하고 싶다면 querySe

패러다임 (paradigm)은 어떤 한 시대 사람들의 견해나 사고를 근본적으로 규정하고 있는 테두리로서의 인식의 체계, 또는 사물에 대한 이론적인 틀이나 체계를 의미하는 개념이다.프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 해주고, 결정하는 역할을 한다