ALL

[TIL] 2022-1003

🐈오늘 배운 것 ✔️Next.js 프로젝트 셋팅 Next.js + prisma + planet scale + tailwind css 를 사용한 클론코딩 프로젝트를 복습하기 위해서 프로젝트 세팅부터 다시 들여다봤다. 먼저 필요한 라이브러리를 전부 설치한 뒤에 폴더 구조를 바꾸고 절대경로를 수정해 주었다. // package.json "dependencies": { "@prisma/client": "^4.4.0", "iron-session": "^6.2.1", "next": "12.3.1", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.36.1" }, "devDependencies": { "@tailwindcss/forms": "^0.5..

[WIL] 2022 - 09 W4

💛Facts 번들링 웹팩, 코드 분할 / CSR, SSR 리액트 커스텀 훅, react-hook-form 라이브러리 prisma, planet scale 로 DB 사용하기 캐럿마켓 챌린지 드랍, 미루기, 스트레스 💛Feelings & Finding ✔️번들링, 웹팩, 코드분할 / CSR, SSR 이번 주에 배운 내용은 프론트엔드에서의 성능 최적화와 관련된 내용이다. 리액트로 개발을 할 때 개발 편의성과 생산성을 위해 모듈화를 하는데, 클라이언트 쪽에서 이 모든 모듈 파일에 대해서 각각 요청을 하기에는 네트워크 비용이 많이 소모되고 비효율적이다. 이를 효율적으로 하기 위해서 웹팩같은 모듈 번들러를 사용해 번들링을 한다. 엔트리 포인트에서 시작해 의존성이 있는 모듈을 탐색해서 하나의 리소스로 합쳐주는 과정이..

[알고리즘 JS] 삽입 정렬 알고리즘 : Insertion Sort Algorithm

삽입 정렬 알고리즘이란? 요소가 들어있는 배열을 i 로 반복할 때, 현재 i 위치 좌측으로 이미 요소가 정렬된 상태이고, i 값과 좌측의 값들을 비교해 i의 적절한 위치를 찾아 삽입하는 정렬 알고리즘이다. 삽입 정렬 알고리즘 코드 적용 const nums = [11, 7, 5, 6, 10, 9]; function insertionSort(nums) { let N = nums.length; for (let i = 1; i < N; i++) { // i는 언제나 1번째부터 시작하고, temp 변수에 i의 현재 값을 보관한다. let temp = nums[i]; // j는 언제나 i - 1의 위치에서 시작한다. let j = i - 1; // 만약에 j 가 0 이상이고, i위치의 값보다 j위치의 값이 더 큰 ..

[Day 73] 2022-0928

🐈오늘 배운 것 ✔️리액트 가상 돔 (Virtual Dom) 자바스크립트의 DOM 이 느린 것이 아니라, DOM을 변경하고 업데이트 - 리플로우가 발생하면서 속도가 느려지게 되는 것이다. 리액트의 가상 돔을 사용하지 않을 때에는 모든 변경사항에 대해서 실제 돔에 접근해서 변경하고, 변경이 일어나지 않은 다른 요소들까지도 업데이트가 되기 때문에 SPA 처럼 상호작용이 많은 - UI가 자주 업데이트 되어야 하는 페이지에서는 속도가 느려진다. 리액트에서는 가상 돔을 가지고 이전의 가상 돔 상태와 변경이 된 가상 돔을 비교해 실제로 변경이 되어야 할 부분에 대해서만 업데이트를 한다. 그러면 리액트 가상 돔은 이전 상태와 현재 상태를 비교해서 어떻게 변경되는 부분을 알 수 있을까? 전체 DOM 트리의 세부사항을 ..

[Day 72] 2022-0927

🐈오늘 배운 것 ✔️리액트 웹팩으로 빌드하기 필요 라이브러리 npm i react react-dom npm i webpack webpack-cli -D npm i style-loader -D npm i html-webpack-plugin -D # jsx => js 변환을 위한 babel 및 babel 구동을 위한 하위 라이브러리 추가 npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D webpack.config.js 설정 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = ..

[Day 71] 2022-0926

🐈오늘 공부한 것 ✔️번들링과 웹팩 https://friedegg556.tistory.com/244 개발 편의성을 위해서 모듈로 분리했던 코드를 그대로 배포하게 되면, 클라이언트에서 모든 리소스 파일에 대해 요청을 해야하기 때문에 네트워크를 많이 소모하게 된다. 비효율적이고 느려지기 때문에 사용자에게도 쾌적한 경험을 줄 수 없다. 따라서 배포를 하기 전 연관성 있는 코드끼리 합치는 번들링을 한다. cra 로 리액트 앱을 만드는 경우 웹팩에 대한 설정이 이미 되어있기 때문에 별도로 설정을 할 필요가 없었는데, node_modules 에 엄청나게 많은 모듈들이 들어가 있다보니 필요한 설정만 추가하기 위해 웹팩 설정을 직접 해서 배포하는 경우도 생길 수 있다. 배포시에 필수적으로 사용하는 도구이기 때문에 반드..

React Hook Form

validation, 에러, 이벤트 등 필요한 기능을 넣어 form 을 만드는 것을 도와주는 패키지이다. 이 패키지 없이 직접 로그인 input 을 만들고 유효성 검사를 하려면 다양한 에러상황에 대해 일일히 대응해줘야한다. 관리해야할 상황도 많아진다. form에 대한 사용자 경험을 쾌적하게 제공하려면 아주 많은 경우에 대응해야하고 코드가 복잡해진다. 복잡한 코드를 간소화 하면서 form 을 쉽게 만들 수 있도록 도와주는 패키지라고 할 수 있다. 설치 및 상태 등록 npm i react-hook-form 유효성 검사를 위한 form 을 만들기 위해서는… 각 form 의 value 에 해당하는 상태와, input 의 value 변화를 추적하는 이벤트를 만든다. form 을 위한 submit 함수를 만들고, ..

[Next.js + Prisma + Planet scale] 기본세팅

노마드코더 [풀스택]캐럿마켓 클론코딩 강의 내용을 정리한 글입니다. prisma & planet scale 로 DB 셋팅하기 ✅prisma 설치 및 schema 정의 npm i prisma -D npx prisma init #prisma 사용시에는 앞에 꼭 npx 를 붙여서 사용해야함. # schema.prisma 에서 provider 내가 사용할 언어로 변경 datasource db { provider = "mysql" url = env("DATABASE_URL") referentialIntegrity = "prisma" } # db 모델 (스키마) 정의 => 우리 데이터는 이렇게 생겼어요! model User { id Int @id @default(autoincrement()) name String ..

Webpack 으로 번들링을 해보자!

Webpack을 사용하는 이유 개발 편의성을 위해 모듈로 분리하여 작업한 리소스들을 그대로 내보내면, 브라우저에서 요청시 각 파일에 대해 개별적인 http 요청을 해야하므로 네트워크 비용이 많이 소모된다. 즉 로딩이 오래걸리고 사용자의 사이트 이탈율이 늘 수밖에 없다. 웹팩이라는 번들러를 사용해 모듈로 분리된 파일들을 연관성 있는 것 끼리 묶어서 압축하고 하나로 만들게 되면 일단 파일이 축소되고, 여러번 요청할 필요가 없게된다. 웹팩은 모듈 번들러 중에서도 프론트엔드에서 가장 많이 쓰인다. loader와 plugin을 통해서 js, json이 아닌 css, html, 이미지 파일 까지도 포함할 수 있어서 편리하다. 기본적인 Webpack 설정 html, css, javaScript 파일의 번들링을 위한 ..

브라우저의 동작 원리 : 브라우저 구조와 렌더링까지!

😸브라우저란 무엇인가? 웹 개발을 처음 시작할때 (특히 프론트엔드), 이런 말을 많이 들어봤을 것이다. HTML, CSS, JavaScript 먼저 공부해보세요~ 이 세가지 언어는 우리의 웹앱이 동작하게될 장소, 웹 브라우저가 사용하는 언어이기 때문이다. 리액트에서는 JSX 라는 자바스크립트 확장 문법으로 HTML 과 JavaSCript가 합쳐진 코드를 작성하게 되는데, 실제로 웹브라우저에서 동작을 하기 위해서는 바벨 Babel 이라는 변환기로 브라우저가 알아먹을 수 있는 자바스크립트 코드로 번역된다. 우리는 위의 세 가지 브라우저가 이해하는 언어를 가지고 개발을 한다. 작성한 코드들은 최종적으로 브라우저라는 프로그램을 통해서 동작하게 된다. 실제로 코드가 동작하는 장소인 브라우저에 대해서 제대로 알고 ..