처음 프로젝트를 진행할 때는 Next.js App Router를 활용하여 각 페이지 마다 공통된 HeaderComponent를 사용하는 경우 layout.tsx 로 분리하여 관리하려고 했습니다. 하지만 HeaderComponent의 개수도 많고또한 각각의 페이지마다

현재 진행하는 프로젝트에서는 다음과 같이 카테고리가 존재하게 되는데 순서를 변경하기 위해서는드래그 앤 드롭으로 해당 순서를 변경할 수 있게 구현해야했습니다. 카테고리 카드를 0.2초이상 누르게 되면 드래그 시작 및 포인터를 따라다니고 리스트에서는 포인터에 위치에 따라

자바스크립트는 프로토타입 기반 언어라서 ‘상속’개념이 존재하지 않습니다!그래서 다른언어에 익숙한 개발자들을 혼란스럽게 만들었고이를 해결하기 위해 ES6에서 클래스 문법이 추가 되었습니다.하지만! 이부분도 프로토타입을 활용하여 구현한것입니다!그래서 이번 정리는 클래스가

자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 상속을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형 으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻습니다. 아래의 그림을 보면 프로토타입에 대해서 알 수 있습니다. 왼쪽 꼭짓점

함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수자신이 생성될때의 스코프에서 알 수 있었던 변수들 중 언젠가 자신이 실행될때 사용할 변수들만을 기억하여 유지시키는 함수라고 다양한책에서 말하

다른 코드의 인자로 넘겨주는 함수 입니다.콜백함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행할 수 있습니다.즉 인자로 넘겨줌으로써 제어권도 함께 위임한 함수입니다.콜백함수도 함수이기 떄문에 this는 기본적으로 전역객체를 참조하지만, 제어권을 넘

일반적인 객체지향 프로그램에서는 this는 인스턴스를 가르키게 되는데 자바스크립트에서는 다릅니다.this 는 기본적으로 실행 컨텍스트가 생성될 때 결정됩니다. 즉 함수가 호출될 때 실행컨텍스트가 생성되므로 this는 함수를 호출할 때 결정됩니다.어떤 방식으로 호출하느냐

실행할 코드에 제공할 환경 정보들을 모아놓은 객체즉 동일한 환경에 있는 코드들을 실행할때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니

원시형(number,string,boolean,null,undefined,symbol)참조형(object,array,function,date,regexp,map,weakmap,set,weakset)원시형은 할당이나 연산시에 복제되고 참조형은 참조된다고 말을 하지만 엄밀

react-query에 대해 공부하면서 invalidateQueries에 대해 알게 되었고 마침 프로젝트 좋아요 구현에서 적용할 수 있는 상황이 생각나서 적용해 보았습니다. invalidateQueries invaidateQuries는 queryClient의 메서

이번 프로젝트에서 react-query를 적용해 보면서 공부한 내용에 대해 적어보려고 합니다.비동기 데이터를 패칭,캐싱,동기화,업데이트 하는 작업을 쉽게 해주는 라이브러리 캐싱 및 리패칭을 통해 최신의상태의 데이터를 참조고유한 쿼리의 키만 가지고 어디서든 데이터 접근

1. 프로젝트 소개 > 이번 프로젝트의 주제는 그래프를 활용한 영화 추천 서비스인 CINEMATE입니다. 최근 온라인 스트리밍 플랫폼의 성장과 다양한 디지털 콘텐츠의 생산이 영화 소비 경험을 새로운 수준으로 끌어올렸습니다. 이렇게 다양한 볼거리가 존재함에 불구하고

타입 스크립트는 앞의 배열이 범위 내에서 사용될거라 가정했지만 실제로도 그러지 않았고 오류가 발생했습니다.타입스크립트가 이해하는값의 타입과 실제값과 차이가 존재하기때문타입시스템이 정적 타입의 정확성을 보장 할거 같지만 꼭 그러지않음타입 스크립트 컴파일러는 매우 많은 설

이번 포스트에서는 github action을 사용해 dockerhub에 푸시 -> EC2에서 self-hosted로 docker pull 받아서 CI/CD를 구축해보겠습니다. 들어가기에 앞서 간단하게 docker에 대해서 설명해 보겠습니다. Docker란?? >

이번에는 저번포스트에서 말했던데로 github action과 self-hosted를 사용해서 ec2에 CI/CD를 구축할것입니다. github action이란? > Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD

이번 사이드프로젝트를 진행하면서 백엔드파트분께서 CI/CD공부를 하셔서 백엔드와 같은 방법으로 프론트도 CI/CD 구축하는게 어떻겠냐고 하셨다 항상 나는 vercel을 사용해 편하게 CI/CD를 해왔고 나도 나중에는 공부해서 EC2에 배포 해봐야지라는 생각을 드

자바스크립트 동작원리