code를 헤엄치는 인어공쭈

https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com위에서 많은 참고 바람 이번에 내가 프로젝트에서 사용한 방법은 가장 나에게 익숙한 CDN link 삽입 방법으로 진행했다.install 하는건 버전 때문에 웬만하면 거부감이 드는 맘..위에 사이트에 친절하게 다 나와있긴한데 DOCS 에 대한 부담이 있을수 있으니 간단히 사용법 부터 설명해보겠다. 사용법1) Use Swiper from CDN (주로 index.h..

여러 개발자들과 같이 작업하면 conflict 이 일어나는 경우가 많다. 같은 파일을 작업하는 경우에 자주 생기는데 그중에 하나가 vscode HTML Format 이 안맞기 때문이다. 따라서 Prettier 를 사용해서 맞춰줘야된다. 하단 링크를 통해서 작동하는 방식을 볼수 있다. 참고바람 https://prettier.io/playground Prettier prettier.io 설정하는 방법! 1. Prettier vscode Extension 설치 2. Default Formatter 로 Prettier 선택하기. 설정 들어가 Editor: Default Formatter 를 선택.Format On Save도 체크 3. . prettierrc라는 파일 생성, 원하는 옵션값을 파일에 작성한다. //..

구글 계정 로그인을 구현하는 방법 https://console.cloud.google.com/getting-started Google Cloud console console.cloud.google.com 1. 구글 개발자 콘솔에서 프로젝트 생성하기 먼저 구글 개발자 콘솔에서 새로운 프로젝트를 생성. 구글 개발자 콘솔에 접속한 후, 새 프로젝트를 생성하고 API 및 서비스를 활성화 2. OAuth 2.0 클라이언트 ID 생성하기 구글 개발자 콘솔에서 OAuth 2.0 클라이언트 ID를 생성. 클라이언트 ID를 생성할 때는 리디렉션 URL도 설정. 이 URL은 사용자가 구글 계정으로 로그인을 완료한 후 리디렉션될 페이지의 URL이다. 로컬 호스트 테스트가 가능하지만 허용목록에 잘추가해줘야됌 3. 클라이언트(..

개념 설명 HTTP (Hypertext Transfer Protocol)는 클라이언트와 서버 간의 통신을 위한 프로토콜이다. 웹 브라우저를 통해 웹 페이지를 요청하고, 서버는 해당 요청에 대한 응답을 제공하는데 사용된다. HTTP는 클라이언트와 서버 간의 데이터 전송 방식, 헤더와 본문의 구조, 요청 및 응답의 상태 코드 등을 정의하고 있다. HTTPS (Hypertext Transfer Protocol Secure)는 HTTP의 보안 버전으로, 클라이언트와 서버 간의 통신을 암호화하여 보안성을 강화한 프로토콜이다. HTTPS는 HTTP와 동일한 구조와 기능을 가지고 있지만, 데이터의 안전한 전송을 해 SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security..

개념 웹팩(WebPack)은 모듈 번들러(module bundler)로, JavaScript와 관련된 리소스(파일)들을 처리하고 번들로 묶는 도구다. 웹 애플리케이션 개발 시 많은 리소스 파일들이 사용되는데, 웹팩은 이러한 리소스들을 하나의 번들 파일로 생성하여 성능을 향상시키고 유지보수를 용이하게 한다. 웹팩의 주요 특징과 기능 1. 모듈 번들링: 웹팩은 JavaScript 파일뿐만 아니라 CSS, 이미지, 폰트 등 모든 유형의 파일을 모듈로 취급하고, 이들 간의 의존성을 분석하고 필요한 리소스를 번들로 묶는다. 2. 로더(Loader) 사용: 웹팩은 로더를 통해 다양한 유형의 파일을 처리하고 로더는 리소스를 가져오고 변환하여 번들에 포함시킨다. Babel 로더 최신 JavaScript 문법을 이전 ..

캐싱 전략은 웹 서비스 환경에서 시스템 성능 향상을 기대할 수 있는 중요한 기술이다. 일반적으로 캐시(cache)는 메모리(RAM)를 사용하기 때문에 데이터베이스 보다 훨씬 빠르게 데이터를 응답할 수 있어 이용자에게 빠르게 서비스를 제공할 수 있다. 따라서 어느 종류의 데이터를 캐시에 저장할지, 얼만큼 데이터를 캐시에 저장할지, 얼마동안 오래된 데이터를 캐시에서 제거하는지에 대한 '지침 전략' 을 숙지할 필요가 있다. 크게 캐시 읽기 전략(Read Cache Strategy) / 캐시 쓰기 전략(Write Cache Strategy) 가 있다 캐시 읽기 전략 (Read Cache Strategy) 1. Look Aside 패턴 데이터를 찾을때 우선 캐시에 저장된 데이터가 있는지 우선적으로 확인하는 전략...

개발하는 프로그램의 크기가 커지면 기능들을 분리해야 된다. 이때 분리된 파일 각각을 모듈이라고 한다. 모듈화는 파일을 작은 조각으로 나누어 다루기 쉽도록 하는 과정이다. 프로그램 코드를 기능별로 나눠서 독립된 파일에 저장하는 방식을 모듈화 프로그래밍이라고 한다. - export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다. - import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다. * 모듈과 컴포넌트의 차이점 - 코드에서 재사용성을 높이기 위해서 컴포넌트화를 많이 시킨다. - 의미는 비슷하지만 둘의 차이점이 존재하는데 모듈은 구조의 최소단위고 컴포넌트는 런타임에 독립적으로 실행되는 단위이다.

Webpack이란 ? Webpack = 모듈 번들링이라고 한다. html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 한다. 쉽게 말하면, 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 Webpack 이라고 한다. Webpack을 사용하게되면 웹에서 사용하는 다양한 파일들을 모듈별로 다룰 수 있게된다. Bundle이란 ? 서로 참조관계에 있는 파일들을 모아서 하나의 파일로 묶는것을 Bundle 이라고한다. Webpack이 이렇게 Bundle을 시켜줌으로써, Webpack은 모듈 번들러라고도 불린다. Bundle이 중요한 이유 1. 모든 모듈을 로드하기 위해 검색하는 시간이 단축 2. 사용하지 않는 코드를 제거 3. ..

Deview 는 미래에 향한 개발자들의 시선이 담긴 국내 최대 규모의 개발자 컨퍼런스이다. 국내외 개발자들이 모여 최고의 기술과 경험, 노하우를 나누며 함께 성장을 이어간다. 그 중 쿠팡 '박찬진' 님의 'SSR환경에서의 Micro-Frontend 구현과 퍼포먼스 향상을 위한 캐시전략' 대해서 살펴보겠다. 1. Monolithic Frontend 의 한계 - Monolithic은 하나로 짜여져 있는 스타일, 따라서 덩치가 커감에 따라 배포시간이 길어짐 => 트러블 슈팅 매우빈번, 모든 배포 대응, 전체 시스템 이해 필요 2. MFE - 왜 도입이 필요했을까? => 서비스 랜딩 페이지, 여러개의 위젯으로 구성, 외부팀으로 부터 신규 개발 요청, - 컨테이너 중심으로 각파트를 통합 => Mono-repo, ..