IT 개발자가 되기위한 여정

컴퓨터 공부를 시작함에 앞서 계획 및 개발에 대한 내용을 풀어나갈 생각입니다.

IT 학습 45

Babel과 Webpack 그리고 polyfill 이란

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 (검색엔진 최적화)

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

Next.js의 데이터 패칭

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

ES5 vs ES6

시작하기 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..

[3차 - 팀] 헤이 케이크 [🍰커스텀 케이크 제작 의뢰 플랫폼]

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

[2차 - 팀] 다음에 프로젝트시 꼭 하고 싶은 것 그리고

이번 프로젝트에서 나는 이번 프로젝트에서 내가 맡은 역할은 이전부터 해보고 싶었던 회원가입 그리고 로그인과 인증 또한 그 이외에 하나의 페이지를 잘 만들어보고 싶었다 😁 Liked 좋았던 것, 잘한 것 로그인 로그아웃 페이지를 만들어보았다 사용자 정보 페이지를 만들어보았다 인증절차를 진행하며 토큰에 대해 조금 더 이해할 수 있었다 거의 일정에 맞게 진행하였다 자신의 코드를 1회이상 리팩토링 하였다 Learned 배운 것 타입스크립트를 Any 없이 사용해 볼 수 있었다 Axios의 instance 기능을 활용해 헤더나 주소에 정보를 담는 등의 경험이 가능했다 Next.js의 API 라우터 기능을 경험해 볼 수 있었다 토큰을 활용하여 로그인과 인증 & 인가 절차를 진행해 볼 수 있었다 React-Query ..

[2차 - 팀] 우리 같이 뽀모 하실래요? 뽀모!!

뽀모 서비스 소개 🍅 뽀모 = 뽀모도로 ⏰ + 커뮤니티 👥 관심사가 비슷한 사람들끼리 모여 소통하며, 뽀모도로 기법을 통해 집중할 수 있는 환경을 제공하는 웹 사이트 기획 배경 ⏰ 뽀모도로 기법 시간관리 기법 중 하나로, 작업의 효율을 높이기 위해 25분 집중시간을 가지고 5분 휴식을 반복합니다. 많은 사람들이 집중이 필요할 때 효율적으로 시간을 관리하기 위해 사용하고 있습니다. 대중적으로는 50분의 집중시간, 10분의 휴식시간을 가지는 방법이 많이 사용됩니다. 👥 (학습)커뮤니티 온라인으로 함께 모여 공부하는 문화가 많은 사람들 사이에 자리 잡았습니다. ex) 모각코, 모각공, 열품타, 웨일온 스터디 등 핵심 기능 🧐 함께 모여.. 뽀모도로하는 서비스가 있으면 좋겠는걸..? 🎯 집중 시간에는 다른 사람..