TIL

[TIL] 2022-1005

🐈오늘 배운 것 ✔️Next.js API 함수에서 async await 사용 Next.js 에서 API 내부의 로직을 수행하는 함수는 프로미스를 반환하도록 해야한다. Next.js API 함수를 만들 때 이를 async await 으로 만들지 않으면 어떻게 되는지 궁금해서 직접 해봤다. export default function withHandler({method, handler}) { // 리턴되는 함수가 withHandler 함수 호출시 실행될 함수 : 이 부분이 async await 으로 작성되어야 함. return function (req, res) { handler(req, res); //... 생략 }; } 위와 같이 작성하니, 동작은 하는데 터미널에 아래와 같은 문구가 생겼다. API res..

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

[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 에 엄청나게 많은 모듈들이 들어가 있다보니 필요한 설정만 추가하기 위해 웹팩 설정을 직접 해서 배포하는 경우도 생길 수 있다. 배포시에 필수적으로 사용하는 도구이기 때문에 반드..

[Day 66] 2022-0921: 트리/그래프 자료구조, 알고리즘, 스터디?

🐈오늘 공부한 것 ✔️트리 / 그래프 자료구조 일반적인 트리, 이진 트리 그리고 '이진 탐색 트리'에 대해서 접해볼 수 있었다. 이진 탐색 트리란 트리 + 이진 검색 알고리즘 같은 느낌인데, 루트 노드를 기준으로 새로 추가할 값이 작으면 왼쪽, 크면 오른쪽으로 배치하고, 이렇게 생긴 트리를 재귀적으로 노드에 추가하여 생성할 수 있다. 장점은 어떤 값을 찾을 때 대,소 비교만 하면 되기 때문에 루트 노드를 기준으로 큰지 작은지, 그 루트 노드의 왼쪽 혹은 오른쪽을 다시 루트로 해서 비교하며 찾아나갈 수 있다. 그래프 자료구조와 함께 그래프 탐색 알고리즘인 DFS, BFS 기법에 대해서 공부했다. BFS란 너비우선탐색 기법으로, 어떤 노드에 도달하기 까지 최단거리를 구하거나, 그래프의 규모가 상대적으로 작을..

[Day 65] 2022-0920: 스택/큐 자료구조 & Tailwind CSS

🐈오늘 공부한 것 ✔️스택/ 큐 자료구조 먼저 자료구조란 데이터를 효율적으로 정리해서 저장하는 방법을 의미한다. 이런 의미에서 알고리즘은 효율적으로 정리된 데이터를 효율적으로 접근하고 사용하는 방법이 아닐까 싶다. 스택과 큐 모두 자바스크립트에서는 배열을 이용하면 간단하게 구현할 수 있는데, 이를 클래스로 정의한 문법은 아래와 같다 (큐). // 클래스로 구현한 Queue class Queue { constructor(array) { this.array = array || []; } getBuffer() { return this.array.slice(); } isEmpty() { return this.array.length === 0; } peek() { return this.array[0]; } // ..

[Day 64] 2022-0919: 기술면접 준비/ Tailwind css를 접하고 느낀점

🐈오늘 공부한 것 ✔️기술면접 준비 https://galvanized-gecko-b10.notion.site/3-db767c2b8fd0486fbc256d3596abcb1e 부트캠프 프로그램 중 기술면접 준비 소그룹 세션이 있는 날이었다. 지난번 기술 면접 실습에서 많은 답변을 준비하지 못해서, 이번에는 주어진 모든 질문에 대해서는 답변을 준비하고 글로 작성한 답변을 다시 내 언어로 서술하면서 연습했다. 면접 질문 중에 문제를 해결했던 개인적인 경험이나 기술에 대한 실제 사례를 묻는 질문이 나올 수도 있는데, 평소 겪은 에러와 해결방법등은 발생 원인과 과정을 더 상세히 정리하는 습관이 필요하다고 느꼈다. ✔️Tailwind CSS group 선택자, peer 선택자 두 선택자 모두 group 혹은 peer..

[Day 63] 2022-0918: 알고리즘, Tailwind CSS

🐈오늘 공부한 것 ✔️알고리즘 스터디 담당 문제 풀이를 공유하는 스터디 모임을 시작했다. 풀이 코드에 대해서 내 나름대로 이해했지만 남들이 알아듣기 쉽게 설명하는 것은 어렵다. 다음 모임에서는 알고리즘 개념과 풀이 로직을 코드로 보기 전 예시를 들어서 쉽게 설명하고 넘어가는 것이 좋을 것 같다. https://friedegg556.tistory.com/235 [알고리즘] 모든 아나그램 찾기 문제 S문자열에서 T문자열과 아나그램이 되는 S의 부분 문자열의 개수를 구하는 프로그램을 작성하세요. 아나그램 판별시 대소문자가 구분됩니다. 부분 문자열은 연속된 문자열이어야 합니다. friedegg556.tistory.com 스택 자료구조를 사용한 2가지 기초 문제를 풀었다. 자바스크립트에서 스택은 배열과 push,..

[Day 62] 2022-0916: 솔로 프로젝트 프로토타이핑, Next.js 등

🐈오늘 공부한 것 ✔️솔로 프로젝트 프로토 타이핑 섹션 3을 마무리 하면서 섹션 4 까지 한 달 기한동안 작업할 솔로 프로젝트 기획 및 프로토타이핑을 했다. Figma Created with Figma www.figma.com 내가 기획한 웹앱은 '감정 다이어리' 이다. 100% 내 아이디어라기 보다는 todo-mate 나 기타 여러 다이어리 앱에서 아이디어를 차용했다. 매일의 감정을 이모지로 표현하고, 간단한 일기를 작성해서 저장할 수 있는 앱이다. 진짜 다이어리같은 느낌을 주고 싶어서 일기 작성과 목록 화면을 탭으로 디자인했다. 좌측 화면에서는 한 달간 감정 이모지를 한 눈에 볼 수 있는 달력이 있다. 구현할 기능 일기 작성 기능 일기 목록/ 내용 조회 기능 일기 내용 수정 기능 일기 삭제 기능 기본..