프로젝트의 가장 루트 경로에서 아래의 명령어를 통해 package.json 을 초기화한다.client, server 각각 workspace 경로에서 아래의 명령어를 통해 package.json을 초기화(생성) 시켜준다.이후 부터는 각각에 필요한 패키지들을 설치하면서 개

갈수록 복잡한 애플리케이션들이 다양해지는 요즘, API 호출 횟수를 아무리 줄인다 하더라도 어쩔 수 없이 2개 이상의 API를 호출해야하는 경우가 빈번하다. 이럴 때, await 키워드로 API 각각을 따로 호출하기 보다는 Axios.all() 또는 Promise.al

특정 함수에 대한 return 값 또는 return 객체 내부의 특정 프로퍼티를 새로운 변수에 정의 또는 할당하고 싶은 경우, 별도 정의 코드를 작성하지 않고 es6 문법 중 구조 분해 할당 을 이용하여 코드 길이를 줄일 수 있다.useMutation() 함수의 ret

최근에 시작한 개인 토이 프로젝트를 진행하다가 문득 develop 브랜치에 push 를 하면, 자동으로 main 브랜치에 merge 및 push 를 해주는 자동화 시스템을 구축하면 어떨까 하는 생각이 들었다.(신규 기능 및 이슈 수정은 develop 으로부터 분기한 후

최근에 회사 솔루션을 기반으로 몇몇 서비스 운영 사이트에 연동 되는 IoT 엔드 디바이스 개수들이 급격히 증가하면서 웹 애플리케이션 성능이 현저히 떨어져 현장 관리팀으로부터 Web 성능 개선 요청을 받았다. 여기에서 내가 유일한 프론트엔드 개발자이기 때문에 어떻게 성능

: 초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간을 측정한다. 즉, 첫 번째 텍스트 또는 이미지가 표시되는 시간을 가리킨다. FCP 측정 시점을 시작점으로 하는 다른 Metric들이 있기 때문에, 가장 먼저 찍히는 FCP는 다른 항목들의 점수 및 전체 점수에 큰 영향을

인프런 강의를 시청하면서 graphQL 에 대해 배운 내용들을 기록하고자 한다.Int: A signed 32‐bit integer.Float: A signed double-precision floating-point value.String: A UTF‐8 charact

작년 말부터 ChatGPT에 대한 관심과 반응이 매우 뜨겁다는 것을 몸소 느끼고 있는 요즘, 나도 이 흐름을 이용하여 무언가를 해봐야겠다는 생각이 문득 들었다. 그래서, 가볍게 무엇을 해보면 좋을까 생각하다가 하나의 아이디어가 떠올랐다.ChatGPT API을 이용하여

서론 Javascript로 코드를 작성할 때, 가끔씩 함수의 () 유무에 따른 함수 작동 방식이 어떻게 되는지 헷갈릴 때가 있어서 이번 기회에 확실히 짚고 넘어가기 위해 기록한다. 본론 코드로 알아보기 위해 샘플 함수 testFunc() 를 아래와 같이 정의한다. > ### 소괄호를 붙이지 않았을 때 함수 호출 시, 소괄호를 붙지지 않고 호출을 ...

풀스택과 관련된 어떤 강의를 시청하면서 custom hook을 생성하여 IntersectionObserver() 생성자와 함께 사용하여 50개 이상의 메세지 컨텐츠 데이터들을 특정 개수 단위로 잘라서 스크롤을 내릴 때마다 호출되도록 하는 일명 무한 스크롤(Infini

keywords abstract 상속할 수 있는 추상 클래스 또는 추상 메서드 선언 키워드이며, 직접적으로 인스턴스를 생성할 수는 없다. 추상 클래스를 상속받는 자식 클래스에서는 추상 메소드를 반드시 구현해야한다. protect : 필드가 외부로부터는 보호되지만 다

나는 최근에 사용방법을 학습한 tailwindCSS 라는 css 라이브러리를 포트폴리오 페이지 개발 프로젝트에적용하여 실습 감각을 익히고 있다. 그러던 중 모바일 반응형 레이아웃을 구현하면서 반응형 breakpoints를 커스터마이징하여 사용하는 방법을 알게 되었는데

해석 : 이 명령을 실행하면 작업 공간이 아닌 작업 공간 루트에 종속성이 추가될 것이며, 당신이 원하는 결과가 아닐 수도 있습니다.하위 workspace인 client 또는 server 에서가 아닌 root workspace에서 패키지를 설치하려고 하면 위와 같은 에러

며칠 전, 작은 웹 애플리케이션을 개발해보고자 Next.js 에서 제공하는 무료 웹 템플릿을 다운받아서 개발 진행을 하는 중 아래와 같은 에러가 발생하였다. Hydration 이란? React 의 기능 중 하나이며 render() 메서드와 기능적으로는 동일하지만,

최근 회사의 웹 애플리케이션(Next.js) 정식 릴리즈 배포를 하면서 아래와 같은 버그 이슈를 맞이하게 되었다.내가 지금 다니고 있는 회사에서는 안타깝게도 CI/CD 시스템이 없다. 그말인 즉슨, 프론트와 백엔드 개발자들이 각각 직접 수동으로 서버에 접근하여 g

메모리 계층은 레지스터, 캐시(L1,L2), 메모리(RAM), 저장장치(HDD/SDD)로 구성된다.속도 : 레지스터 > 캐시 > 메모리 > 저장장치용량 : 레지스터 < 캐시 < 메모리 < 저장장치: 데이터를 미리 복사해 놓는 임시 저장소이자 빠른 장치와

최근에 회사에서 기존 화면에 부분적으로 추가 UI를 개발하다가 문득 최근에 공부했던 jest 라이브러리 테스팅 방법을 적용해보기로 헀다.위에는 개발할 UI 화면의 디자인 시안이며, '설비 정보' Input UI 가 추가될 예정이었다.따라서, 정적 UI 측면에서 봤을 때

최근에 회사에서 기존 화면에 부분적으로 추가 UI를 개발하다가 문득 최근에 공부했던 jest 라이브러리 테스팅 방법을 적용해보기로 헀다.'위에는 개발할 UI 화면의 디자인 시안이며, '설비 정보' Input UI 가 추가될 예정이었다.따라서, 정적 UI 측면에서 봤을

}, // setupFilesAfterEnv: '/jest.setup.js', testPathIgnorePatterns: '/node_modules/', '/.next/', testEnvironment: 'jest-environment-jsdom', tran

이 글에서는 하드웨어와 소프트웨어를 관리하는 운영체제와 CPU, 메모리 등으로 이루어진 컴퓨터에 대해 알아보도록 한다.운영체제(OS)의 역할은 크게 아래와 같이 네 가지가 있다.운영체제의 구조는 유저 프로그램, GUI, 시스템콜, 커널, \*드라이버, 하드웨어로 구성된