Life is connecting the dots .

웹사이트 랜딩페이지를 보다 보면, 상단 헤더 메뉴가 사용자가 스크롤 시 진입한 구간에 따라 메뉴의 스타일도 이동되는 것을 볼 수 있다. 그동안 프로젝트에서는 이러한 스타일을 적용할 페이지가 없었기에 한 번도 만들어보지 못했었다. 하지만 최근에 포트폴리오를 만들면서 관련 API를 알게 되어 기능도 익힐 겸 간단하게 적용해 보려고 한다. Observer API의 필요성 MDN공식문서에서 확인하면 타겟 요소가 상위요소 혹은 최상위 요소(=뷰포트)와 교차하는 변경사항을 비동기적으로 관찰하는 방법을 제공한다고 한다. 말 그대로 관찰자 API이다. 🧐 대상을 감시하다가 대상이 정해 놓은 구역에 진입하면 그때부터 만들어 놓은 함수를 시작한다. 과거부터 어떤 특정 요소의 가시성을 확인하고 두 요소들의 가시성, 즉, 서..

Next.js 프레임워크를 사용해서 만든 프로젝트를 Vercel를 사용하여 배포해 보았다. 배포하는 과정 중에 발생한 에러 해결을 통해 최종 배포를 완성하였다. Vercel docs에서 깃헙 레포를 통해 배포하는 과정이 간략하게 소개되어 있다. 그만큼 간단하기도 하고, 배포 관련 설정들에 대한 설명도 상세하게 되어있어서 나중에 다른 설정이 필요할 때도 docs를 참고하여 배포를 진행하면 될 것 같다. 1. 로그인 후 [Add New]에서 새로운 프로젝트를 생성해 준다. 2. 배포할 프로젝트의 깃헙 저장소를 불러온다. 2-1. 만약 불러올 저장소가 나오지 않는다면, +Add GitHub Account를 클릭하여 vercel을 설치해 준다. 모든 레포지토리를 선택하면 import 할 때 모든 레포가 보이고,..

Optimistic UI란 서버에 요청을 보내고 응답을 받기 전에 UI를 업데이트하는 데 사용할 수 있는 패턴이다. mutation을 시뮬레이션하고, UI에 업데이트 함으로써 낙관적인 결과를 사용자에게 보여주고, 이후 최종 서버에서 응답을 받으면 그 결과로 대체된다. 기존 프로젝트 기능 중 좋아요 기능👍에 Apollo Client에서 제공하는 옵션을 활용하여 적용해 보려고 한다. 좋아요 버튼을 누르면 아마도 대다수는 좋아요 숫자가 +1이 증가할 것이라고 예상한다. 이렇게 종종 결과를 예측할 수 있는 mutation에 UI를 낙관적으로 업데이트를 할 수 있다. optimisticResponse option Apollo Client는 mutation을 실행시킬 때 해당 옵션을 추가할 수 있도록 제공한다. 우..

반응형 웹이란 반응형 웹 디자인은 사이트가 데스크탑에서 모바일에 이르기까지 모든 디바이스에서 최적으로 보이고 작동하도록 만드는 데 중점을 둔 웹 개발 개념이다. 대게 데스크탑, 태블릿, 모바일 각각의 디바이스에서 서비스를 문제없이 이용할 수 있는 화면을 보여주며, 뷰포트(viewport) 크기를 변경하는 경우 이에 반응하여 적절한 화면을 제공하는 디자인 접근 방식이라고 할 수 있다. 반응형 웹을 만들기 위한 기술 중 하나로 미디어쿼리가 있고, 화면 크기가 다른 디바이스의 뷰포트를 토대로 미디어 쿼리를 적용하므로 먼저 뷰포트에 대해 이해할 필요가 있다. 뷰포트 뷰포트는 현재 보고 있는 화면의 영역으로, 접속한 기기에서 보이는 실제 영역의 크기를 의미한다. HTML문서는 어떤 기기에 접속하더라도 기본으로 9..

스코프란 식별자에게 접근할 수 있는 유효한 범위를 의미한다. 식별자란 변수 이름, 함수 이름, 클래스 이름 등 어떤 값을 구별하여 식별할 수 있는 고유한 이름을 의미 유효한 범위란 식별자 자신을 참조할 수 있는 범위 다시 말하면, 식별자가 선언된 위치에 따라 다른 코드가 식별자 자신을 참조할 수 있는지가 결정되며 이를 스코프라고 한다. 그러므로 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 한다. 스코프의 종류 스코프는 전역(global)스코프와 지역(local) 스코프로 나뉜다. 전역 스코프는 코드의 가장 바깥 영역으로 어디서든지 참조할 수 있다. 반면에 지역 스코프는 함수 몸체 내부를 뜻하며, 자신의 지역 스코프와 하위 지역 스코프(중첩 함수)에서 유효하다. // 자바스크립트 ..

성능최적화 방법을 공부하면서 렌더링에 대해 다시 공부해 보았다. 브라우저가 그려지는 과정과 DOM에 대한 개념, Reflow를 조금이라도 개선시킬 수 있는 방법을 정리해 보고자 한다. 글 내용과 관련된 개념은 아래 참고에 적혀있는 블로그와 책, 강의 등을 참고하여 작성하였다. Critical Rendering Path 브라우저가 서버로부터 HTML 응답을 받고 화면에 그려지기까지의 시퀀스를 "Critical Rendering Path" 라고 한다. CRP에는 6단계가 있다. DOM 트리 생성CSSOM 트리 생성자바스크립트 실행렌더트리로 결합레이아웃 그리기페인팅1. DOM(Document Object Model)트리 생성 브라우저 요청에 의해 서버에서 HTML파일을 받아오면 다음과 같은 과정으로 브라우저가..

3월 6일부터 시작해서 2달 동안 React와 Next.js를 공부하고, 5월부터 시작한 첫 프로젝트를 마침내 완료했다!! 5월 1일부터 시작해서 26일까지 딱 4주만에 기획부터 코딩, 마지막 서비스 문서작성까지 기간 안에 프로젝트를 완성할 수 있어서 유종의 미를 거둘수 있었다. 코드캠프x인프런에서 만든 온라인 부트캠프에서 처음 만나서 각자 다른 지역에 살고 있기에 팀원분들과 처음부터 끝까지 온라인으로 소통할 수 밖에 없었지만, 오히려 활발한 소통이 이루어졌고 덕분에 시간분배를 더 효율적으로 하여 무사히 마칠 수 있었다. 이 포스팅에서는 우리가 만든 첫 프로젝트가 어떤 서비스인지에 대한 소개와 기획의도, 진행 과정과 아쉬운 부분 등을 소개 해 보려고 한다. 🔸YouTube 발표 영상🔸 영상 URL : h..

프로젝트를 리팩토링 하면서 타입스크립트로 객체의 키를 사용하여 객체에 접근할 때 에러가 난 다는 사실을 발견했다. 물론 이 에러는 자바스크립트에서 나타나는 에러가 아니다. 해당 코드로 자바스크립트에서는 객체의 프로퍼티에 접근하는 데에 아무런 문제가 없다. 오류를 해결하기 위해 타입스크립트에서 새롭게 알게 된 부분이 있어서 정리해 보려 한다. 문제 상황 접근하려고 하는 객체에는 interface를 사용하여 각 프로퍼티에 들어올 값의 타입을 지정해 준 상태이고, for...in 문을 사용하여 각각의 프로퍼티에 접근을 시도하려는 중이었을 때, inputs [key]에 다음과 같은 에러문구가 발생했다. // 에러가 발생한 코드 for (let key in inputs) { if (inputs[key] === "..