data life

1. 프라이빗 클래스 필드와 메소드 - 객체 지향 프로그래밍에서 중요한 역할을 합니다. - 다른 사람이 작성한 함수를 사용할 시, 프라이빗해야 하는 문제를 해결해줍니다. class MyClass { #privateMethod() { console.log("This is a private method."); } publicMethod() { console.log("This is a public method."); this.#privateMethod(); // 클래스 내부에서만 호출 가능 } } const instance = new MyClass(); instance.publicMethod(); // "This is a public method." 출력 // 아래 코드는 문법 오류입니다. 클래스 외부에서 호..

Next.js에서 img 태그 사용 시, 다음과 같은 문구를 보신 적이 있으실 겁니다. Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. 📌 Image Component & Image Optimization Next.js에서는 이미지를 자동으로 최적화시켜 주어 따로 처리해주지 않아도 되도록 해줍니다. 이미지 컴포넌트인 `next/image`는 모던 웹용으로 발전된 HTML img 태그의 확장입니다. 해당에는 우수한 Core..

공식문서에 의하면 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크라고 소개되어 있습니다. 즉, 기존 React 기능을 기반으로 제작된 풀스택 프레임워크라고 이해하면 되겠습니다. 첫 번째, 프론트와 백엔드의 기능을 모두 갖춘 말 그대로 FullStack(React와 Express.js)으로 제작되었습니다. 특히, Next.js는 SSR(Server-Side-Rendering) 기능을 제공합니다. 이는 기존 CSR(Client-Side-Rendering) 방식과 비교해보자면 CSR은 클라이언트의 javascript를 다운로드를 받고 브라우저에서 javascript가 동작하여 화면에 ui가 표시되는 방식으로 javascript가 지원되지 않는 환경에서는 화면이 표시되지 않는 큰 단점이 존재합니다...

최근 스크롤 움직임에 따라 반응하는 웹사이트들이 많아 오랜만에 자바스크립트로만 작은 프로젝트를 진행하려고 한다. 해당 라이브러리를 이용하여 쉽게 스크롤 애니메이션을 주도록 해보자! 해당 공식문서를 읽고 싶다면 아래에 ⬇️ 공식문서 : AOS.js 공식문서 1. 설치하기 yarn add aos npm install aos --save bower install aos --save해당 프로젝트는 자바스크립트로만 진행하기에 아래와 같이 설치하도록 해줌 //CSS //JS 자바스크립트로 init()을 해줘야 동작한다. 2. data-aos 사용하기 data-aos-* 속성을 사용하여 동작을 조정한다. 2-1. animation 종류 Fade animations fade fade-up fade-down fade-l..

브라우저 주소창에 www.google.com을 입력한다. 브라우저가 www.google.com의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인한다. 만약 요청한 URL(www.google.com)이 캐시에 없다면, ISP의 DNS 서버가 DNS 쿼리로 www.google.com을 호스팅하는 서버의 IP 주소를 찾는다. 브라우저가 해당 서버와 TCP 연결을 시작한다. 브라우저가 웹서버에 HTTP 요청을 보낸다. 서버가 요청을 처리하고 응답을 보낸다. 서버가 HTTP 응답을 보낸다. 브라우저가 HTML 컨텐츠를 보여준다. 1. 브라우저 주소창에 www.google.com을 입력한다. 2. 브라우저가 www.google.com의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인한다. 사실 말이 굉장히 ..

리액트에서 일반적으로 컴포넌트 사이에 데이터를 전달해줄 때 Props를 이용합니다. 하지만 여러 컴포넌트를 거치게 된다면?? 굉장히 불편하고 실수할 가능성도 높아지게 됩니다. Context란? 리액트 컴포넌트 간에 값을 공유할 수 있게 해주는 기능으로 주로 전역적으로 필요한 값을 다룰 때 사용합니다. 리액트는 부모 컴포넌트에서 자식 컴포넌트인 하나의 단방향으로 데이터를 보내주는데 깊이가 깊거나 여러 컴포넌트에서 사용해야 한다면 복잡해질 수 있습니다. 따라서 Context API를 사용하기 위해 createContext와 Provider, Consumer의 개념을 알아보도록 합시다! 사용방법 import { createContext } from 'react'; const context = createCon..

깊고 복잡한 배열 구조를 간단하게 정리하기 위해 사용하는 함수입니다. map()함수는 다들 많이 이해하고 사용하고 계시지만 ES2019에 추가된 flat()과 flatMap()에 대해 알아보도록 합시다! flat() 중첩된 배열을 정해진 깊이만큼 평탄하게 만들어 주는 함수입니다. const newArr = arr.flat([depth]) 매개변수로 어느 깊이까지 평탄하게 할 지 정할 수 있는 depth 변수가 있고 이는 선택사항입니다. 생략 시, 기본값은 1이 적용되며 만일, infinity를 사용하게 된다면 하위 배열이 없을때까지 평탄화해줍니다. const exampleArray = ["a", , ["b"], ["c"]]; const newArray = exampleArray.flat(); //newA..

Glide에 대해 알아보자! Glide란? 외부 종속성이 없는 자바스크립트 ES6 슬라이더 및 캐러셀 패키지로 가볍고 유연한 장점을 가지고 있습니다. 모듈식 접근 방식을 이용하였기 때문에 프로덕션 빌드에서 많은 무게를 줄일 수 있으며 모든 기능을 포함한 무게는 ~28kb(gzip으로 압축하면 ~8kb) 정도라고 나와있네요! Rollup과 Webpack 모두 지원하며 테마와 사용자 정의 스타일을 추가해야 하는 경우 CSS와 scss를 사용하여 추가가 가능합니다. Glide 설치하기 $ npm install @glidejs/glide Glide의 스타일 구성 glide.core glide.theme Glide의 옵션 type : 움직임 종류 (slider / carousel) startAt : 특정 슬라이드..

Google OAuth2 클라이언트 ID와 비밀번호 얻기 1. Google API 콘솔 에서 google 로그인하고 들어간다. 2. 새 프로젝트를 만들거나 기존 프로젝트를 선택한다. 3. 프로젝트를 생성하거나 선택했으면 왼쪽 사이드의 'OAuth 동의 화면' 메뉴를 클릭하여 사용자 유형 중 '외부'를 선택합니다. 4. 앱 등록 수정 > 앱 정보, 앱 로고, 앱 도메인에서 정보를 모두 입력해줍니다. 5. 범위 > 범위 추가 또는 삭제 클릭하여 아래와 같이 원하는 범위를 지정해줍니다. 선택완료 시, 아래의 저장 및 계속을 클릭합니다. 6. 테스트 사용자 > ADD USERS 클릭하여 테스트할 사용자 이메일을 입력해주세요. 7. 여기까지 동의화면 설정이 끝났습니다. 이제 사용자 인증 정보 메뉴바에 들어가서 O..

이번 팀프로젝트를 진행하면서 React-query를 도입해보고자 해당 기술에 대해 알아보고자 합니다. React-Query란? 공식문서에 따르면 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만들어주는 라이브러리로 소개되어있으며 서버 상태를 관리하기 위한 최고의 라이브러리로 이해하면 되겠습니다. 기술적인 측면에서, - 복잡하고 많은 양의 코드를 줄여 줄 수 있습니다. - 유지 관리가 쉽고 새 기능을 쉽게 구축할 수 있습니다. 캐싱이란? 특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 향상시켜준다. React-Query는 캐싱을 통해 반복적인 비동기 데이터 호출을 방지하고 서버에 대한 부하를 줄여주는 장점이 있다. (fresh Data : 최신 데이터 stale Data : 오..