달과 함께하는 IT

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해줍니다. 이 둘을 사용하면 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있습니다. 그런데 "쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해 데이터를 저장하는 걸까요?"라는 의문이 들 수 있습니다. 쿠키 이외에도 다른 방식을 사용하는 이유는 다음과 같습니다. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가..

Babel이란? 아래 예제는 ES6의 화살표 함수와 ES7의 지수 연산자를 사용하고 있다. // ES6 화살표 함수와 ES7 지수 연산자 [1, 2, 3].map(n => n ** n); IE와 다른 구형 브라우저에서는 이 두가지 기능을 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다. // ES5 "use strict"; [1, 2, 3].map(function (n) { return Math.pow(n, n); }); 이처럼 Babel는 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다. Webpack이란? Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파..

SEO(검색엔진 최적화) 이슈 SPA는 일반적으로 서버 사이드 렌더링(SSR) 방식이 아닌 자바스크립트 기반 비동기 모델의 클라이언트 사이드 렌더링(CSR) 방식으로 동작한다. 클라이언트 사이드 렌더링(CSR)은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는다. 이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다. SPA의 SEO 이슈는 언제나 단점으로 부각되어 왔다. SPA는 정보 제공을 위한 웹페이지보다는 애플리케이션에 적합한 기술이므로 SEO 이슈는 심각한 문제로 취급할 수 없다고 생각할 수도 있지만 블로그와 같이 애플리케이션의 경우 SEO는 무시할 수 없는 중요한 ..

Next.js React를 기반으로 만들어진 Next.js의 경우 기존 리액트가 SPA 친화와 더불어 CSR을 중점적으로 제공함에 비해 SSR 및 사용자와 서버 친화적 데이터 패칭을 위해 CSR과 SSR 그리고 SSG를 같이 지원하는 ISR등의 여러 방식을 지원하기 위해 도입된 프레임워크이다. React는 라이브러리로 팀 그리고 개인마다 가지각색의 형식과 양식이 존재한다. Next는 Vue와 같이 어느정도 틀이 잡힌 프레임워크 기반으로 React에서 필수적으로 사용하는 라우터 , 데이터 패칭이 들어있고 폴더 , 형식에 맞춰서 코드를 작성하면 구현을 해 준다. 클라이언트 사이드 렌더링(CSR, Client-Side Rendering) 자바스크립트를 사용하여 브라우저(클라이언트 사이드)에서 렌더링하는 것을 ..

이벤트 버블링, 캡처링, 그리고 위임은 웹 개발에서 이벤트 처리와 관련된 중요한 개념들입니다. 이벤트 버블링(Event Bubbling): 이벤트 버블링은 HTML 요소들이 중첩된 구조에서 발생한 이벤트가 가장 내부의 요소부터 시작하여 부모 요소 방향으로 전파되는 메커니즘입니다. 즉, 내부 요소에서 발생한 이벤트가 외부로 전파되며, 이벤트 핸들러는 부모 요소에서부터 순차적으로 실행됩니다. 이벤트 캡처링(Event Capturing): 이벤트 캡처링은 이벤트 버블링과 반대로 부모 요소에서 시작하여 내부 요소 방향으로 이벤트가 전파되는 메커니즘입니다. 캡처링 단계에서 이벤트 핸들러는 최상위 부모 요소부터 내부로 내려가며 실행됩니다. 이벤트 위임(Event Delegation): 이벤트 위임은 동적으로 생성되..

MFA(Micro Frontend Architecture)란 웹 프론트엔드를 작은 독립적인 단위로 나누어 개발하고 배포하는 아키텍처 패턴을 의미합니다. 이는 마이크로 서비스 아키텍처의 원칙을 웹 프론트엔드에 적용한 것으로, 애플리케이션을 작은 모듈 또는 마이크로 프론트엔드로 분리하여 개발하고 관리하는 방식입니다. MFA 개요 MFA는 하나의 대규모 단일 애플리케이션 대신, 작은 프론트엔드 모듈을 개발하고 각 모듈을 독립적으로 배포하고 실행함으로써 애플리케이션을 구성합니다. 이는 여러 개발 팀이 동시에 작업하고 독립적으로 배포하여 개발 생산성을 향상시킬 수 있게 해줍니다. MFA 적용시 장점 독립적인 개발 및 배포: 각 마이크로 프론트엔드는 독립적으로 개발되며, 필요한 경우 개별적으로 배포할 수 있습니다...

시작하기 ES란? ECMAScript 즉 Javascript를 표준화하기 위한 규약 사용하는 이유 기존 Javascript로 활용하기 힘들거나 에러를 양산할 수 있는 문제들을 해결하기 위하여 개발자들의 토론 하에 범용성 높은 규칙을 만듬 ES5와 ES6이란 ES5는 2009년 발표된 ECMAscript 규약 이며 ES6는 2015년 발표된 ECMA 규격이다. 이전에 비해 ES6는 여러 항목들이 추가되었다. ES6에 추가된 대표적인 기능 Let, const와 블록 레벨 스코프 var의 단점을 보완하기 위한 let과 const 변수 선언 도입 템플릿 리터럴 대표적 특징들 const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할..

면접 전 리마인드 할 때 보는 곳 https://amyhyemi.tistory.com/224#recentEntries https://mangkyu.tistory.com/91 필수 1. 브라우저 렌더링 원리 -> https://d2.naver.com/helloworld/59361 2. 호이스팅에 대해서 설명해 보세요. -> https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html 3. 클로저는 무엇인가요? 원리와 왜 사용하는지 설명해 주세요. -> https://hyunseob.github.io/2016/08/30/javascript-closure/ 4. 스코프는 무엇인가요? -> https://poiemaweb.com/js-scope 5. GET..

간단한 소개 🎇 프로그래머스 데브코스를 끝내고 면접과 이력서 등의 준비로 바쁜중간에 아는 지인한테서 사이트를 하나 만들어달라는 의뢰가 들어왔다. 중소규모에서 컨설팅 및 안내 페이지를 만들고 싶다 깃허브 잔디가 최근 드물기도 했고 최근 면접공부만 하다가 프로젝트를 하나 같이 겸하는게 좋겠다고 생각해서 무료로 제작해주기로 하고 대신 조건으로 코드공개와 포트폴리오로 쓸거라는 말을 같이 전달해줬다. 전달받은 자료는 PPT와 로고 2개를 받고 일단 시안을 작성해보기로 했다. 기술 & 목표설정 🎈 기술 스택으로는 가장 익숙한 Next.js로 가기로 하고 이번 프로젝트의 중점을 어디다 둘지 곰곰히 생각해보다가 이번엔 코드도 코드지만 기획부터 시작해서 모든걸 내가 경험하며 최종적으로 누군가가 사용해주는 사이트를 만들어..

간단한 소개 시연 영상 내가 맡은 역할 Pages 메인 페이지 관리자 페이지 마켓 관련 페이지 Core Axios의 기본 협업 세팅 (사용하기 편한 커스터마이징) Vercel 배포 & 연동을 통한 자동 테스팅 및 개발 + 상업 페이지 분리 Next.js의 SSG와 ISR을 활용한 렌더링 개선 (메인, 관리자는 ISR로 갱신주기를 짧게 , 업체는 변동이 적어 길게) 스켈레톤 UI 및 로딩 시 UX 개선 메인 페이지의 전반적인 기능 개발 (해더 , 뒤로가기해더 , 지역선택 컴포넌트, 아이콘 및 사이즈 세팅) 관리자 페이지의 전반적인 기능 개발 (3개의 페이지 텝에 맞는 공용 컴포넌트 + 버튼컴포넌트) 마켓 정보조회를 위한 전반적인 기능 개발 (카카오 맵 연동) 5차례에 걸친 중간 리팩토링을 통해 코드개선 및..