data life

2024년 상반기 회고록12월 프론트엔드 개발자로서의 시작이자 입사부터 이번달의 퇴사까지의 경험들을 되돌아보며, 나의 개발자로서 여정을 기록해보고자 한다. 입사와 새로운 시작 (2023년 12월)지난 12월 11일, 사회의 첫 발걸음과 함께 개발자로서의 커리어를 시작하게 되었다. 정말 내가 원하던 회사는 아니었지만 운이 좋게도 합격하게 되었고 통보와 동시에 한걸음에 달려갔었던 회사이다. 그래서인지 입사 초 한 달 동안은 왕복 5시간 거리도 신이 나게 다녔었던 것 같다. 사실 이때 집과 회사를 오고가면서 공부했던 vue, nuxt가 지금 내가 성장한 것에 대해 과언이라고 해도 무방할 정도이다.무엇보다 회사에 적응하기 바빴고 회사에서 내어준 게시판 만들기 과제와 병행하며 기존에 진행하던 웹소켓을 이용한 사이..

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..

이번 포스팅에서는 차세대 ORM 프레임워크로 각광받고 있는 Prisma에 대해서 함께 알아봅시다. 공식문서에서는 차세대 Node.js 및 TypeScript의 ORM 라고 소개되어있습니다. 여기서 ORM이란? Object Relational Mapping으로 ‘객체로 연결을 해준다’는 의미로, 애플리케이션과 데이터베이스 연결 시 SQL언어가 아닌 애플리케이션 개발언어로 데이터베이스를 접근할 수 있게 해주는 툴입니다. 자바스크립트 혹은 타입스크립트 코드와 데이터베이스 사이의 연결다리라고 이해하시면 되겠습니다. SQL문법 대신 애플리케이션의 개발언어(자바스크립트 혹은 타입스크립트)를 그대로 사용할 수 있게 함으로써, 개발 언어의 일관성과 가독성을 높여준다는 장점을 갖고 있습니다. 또한 타입스크립의 장점도 같..

PlanetScale은 개발자 경험을 희생하지 않고도 확장성, 성능 및 안정성을 제공하는 MySQL 호환 서버리스 데이터베이스입니다. PlanetScale을 사용하면 수평 분할, 비차단 스키마 변경 및 더욱 강력한 데이터베이스 기능을 구현하는 데 어려움을 겪지 않고도 강력한 기능을 얻을 수 있습니다. planetScale은 깃과 같이 분기(branch) 작업이 가능합니다. 스키마 변경 사항을 프로덕션 데이터베이스에 직접 적용하는 대신 본질적으로 데이터베이스의 복사본인 분기를 생성할 수 있습니다. 프로덕션 외부에서 새 분기를 생성하면 개발에 사용하여 스키마를 변경할 수 있는 격리된 데이터베이스 복사본이 있습니다. 시작하기 전, 먼저 해당 사이트에서 로그인과 결제수단을 등록해주세요! (데이터베이스 생성 시,..

공식문서에 의하면 풀스택 웹 애플리케이션을 구축하기 위한 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 기록을 확인한다. 사실 말이 굉장히 ..

(1) SQL - DDL DDL(Data Define Language) - 데이터 정의어 - DB 구축 및 수정 - 데이터 사전이라는 파일에 여러 테이블로 저장 🔍명령어 종류 - CREATE : SCHEMA, DOMAIN, TABLE, VIEW, INDEX 정의 - ALTER : TABLE에 대한 정의 변경 - DROP : SCHEMA, DOMAIN, TABLE, VIEW, INDEX 삭제 CREATE SCHEMA - 스키마 정의 ❓스키마란? : DB 구조와 제약 조건에 관한 전반적인 명세를 기술한 것 예 ) 소유권자의 사용자 ID가 ‘홍길동’인 스키마 ‘대학교’를 정의하는 SQL문 CREATE SCHEMA 대학교 AUTHORIZATION 홍길동 CREATE DOMAIN - 도메인을 정의 ❓도메인이란? ..

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