[TIL] 2023.05.19 Next.js 13버전에 Recoil 적용하기

Root Layout에 바로 RecoilRoot를 넣으려고 했더니 에러가 발생했다. TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. RecoilRoot를 사용하려면 서버 컴포넌트를 클라이언트 컴포넌트로 변경해야 하는 거 같다. 하지만 Root Layout 파일을 클라이언트로 변경하면 모든 컴포넌트가 클라이언트 컴포넌트로 변경되는 결과가 생길 거 같아서 recoil 파일을 따로 빼서 적용하기로 했다. 'use client' import { ReactNode } from 'react' import { RecoilRoot } from 're..

• format_list_bulleted JavaScript
• · 2023. 5. 19.
• textsms

[TIL] 2023.05.16 Prisma 초기 세팅 및 Create 구현

Today I Learned Prisma & PostgreSQL 초기 세팅 Prisma로 Create 하기 Prisma 초기 세팅 Prisma schema Model 생성하기 [TIL] 2023.05.23 Prisma schema Model 생성 Prisma schema The Prisma schema file is the main configuration file for your Prisma setup. It is typically called schema.prisma and consists of the following parts: Data sources: Specify the details of the data sources Prisma should connect to (e.g. a Post div..

• format_list_bulleted JavaScript
• · 2023. 5. 16.
• textsms

[TIL] 2023.05.09 React-Slick으로 Carousel 구현하기

다음과 같은 Carousel을 구현하기 위해서 React-Slick라는 라이브러리를 사용했다. npm 설치 명령어 및 기초 세팅 npm install react-slick --save npm i --save-dev @types/react-slick npm install slick-carousel --save import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; export default function SimpleSlider() { const settings = { dots: true, infinite: true, speed: 500, sli..

• format_list_bulleted JavaScript
• · 2023. 5. 9.
• textsms

[TIL] 2023.05.07 Next.js next/navigation과 usePathname()

route에 따라 코드를 다르게 작성하고 싶어서 useRouter를 이용해서 pathname을 가져오려고 했다. 그런데 서버 컴포넌트를 사용할 때는 next/navigation을 사용하라는 에러 메시지가 떴다. // 수정 전 import { useRouter } from 'next/router'; // 수정 후 import { useRouter } from 'next/navigation'; 그래서 useRouter를 next/navigation에서 import 해 오는 방식으로 수정했는데 또다시 클라이언트 컴포넌트에서만 useRouter를 사용할 수 있다는 에러 메시지가 발생했다. 그래서 최상단에 "use client"를 추가하여 서버 컴포넌트를 클라이언트 컴포넌트로 변경해 주었다. import { us..

• format_list_bulleted JavaScript
• · 2023. 5. 7.
• textsms

[TIL] 2023.05.04 Tailwind와 함께 프로젝트 시작!

Today I Learned 프로젝트 기초 세팅 및 UI 구현 시작 Programmers 문제 풀기 Tailwind 너무 궁금했던 Tailwind를 드디어 사용해 봤다! 오늘 처음으로 사용해 보는 건데 생각보다 어렵지는 않다. 그런데 아직 익숙해지지 않아서 그런지 계속 tailwind-cheat-sheet에서 검색하면서 코드 짜느라 시간이 조금 소요됐다. 그리고 아직은 Tailwind의 장점을 잘 모르겠다. 무엇보다도 모두 똑같이 생긴 div에 className만 적어서 구분하려니 이 div가 어떤 부분인지를 잘 모르겠다. 컴포넌트명 고민하느라 귀찮긴 했지만 직관적인 이름으로 한눈에 어떤 분인지 파악 가능했던 styled-components가 잠시 그립기도 했다 ㅠㅠ 그래도 아직 첫날이니까 Tailwin..

• format_list_bulleted JavaScript
• · 2023. 5. 4.
• textsms

[TIL] 2023.05.01 MySQL_Subquery

Today I Learned MySQL Subquery 공부하기 프로젝트 초기 세팅하기 MySQL Subquery란? 쿼리 안의 쿼리라는 의미 하위 쿼리의 결과를 상위 쿼리에서 사용할 수 있다. Subquery는 where, select, from 절에서 유용하게 사용할 수 있다. INNER JOIN 대신 Subquery 사용해 보기 select u.user_id, u.name, u.email from users u inner join orders o on u.user_id = o.user_id where o.payment_method = 'kakaopay' INNER JOIN 사용했을 경우 SELECT * FROM users u WHERE u.user_id IN ( SELECT user_id FROM ..

• format_list_bulleted JavaScript
• · 2023. 5. 1.
• textsms

[TIL] 2023.04.30 MySQL_LEFT JOIN, INNER JOIN

Today I Learned MySQL JOIN 공부하기 MySQL JOIN이란? 두 테이블의 공통된 정보 (key값)를 기준으로 테이블을 연결해서 한 테이블처럼 보는 것을 의미함 예) user_id 필드를 기준으로 users 테이블과 orders 테이블을 연결해서 한눈에 보고 싶을 때 MySQL LEFT JOIN select * from users u left join point_users p on u.user_id = p.user_id; LEFT JOIN은 왼쪽 테이블(table1)의 모든 레코드와 오른쪽 테이블(table2)의 일치하는 레코드(있는 경우)를 반환한다. MySQL INNER JOIN select * from users u inner join point_users p on u.user_..

• format_list_bulleted JavaScript
• · 2023. 4. 30.
• textsms

[TIL] 2023.04.29 Next.js 13_Layouts

Today I Learned Next.js 13 버전 Layouts 기능 공부하기 Next.js Layouts A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested. You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout ..

• format_list_bulleted JavaScript
• · 2023. 4. 29.
• textsms

[TIL] 2023.04.28 MySQL_GROUP BY, ORDER BY

MySQL MySQL GROUP BY SELECT name, count(*) FROM users GROUP BY name; GROUP BY로 동일한 범주의 데이터를 하나로 묶어서 범주별 통계를 내주는 것 예를 들면 Group by를 이용해서 1) 같은 성씨의 데이터를 하나로 묶고 2) 각 성씨의 회원수를 구할 수 있다. 위 쿼리가 실행되는 순서: from → group by → select from users: users 테이블 데이터 전체를 가져온다. group by name: users 테이블 데이터에서 같은 name을 갖는 데이터를 합친다. select name, count(*): name에 따라 합쳐진 데이터가 각각 몇 개가 합쳐진 것인지 세어준다. -- 주차별 좋아요 최솟값 구하기 -- MIN(..

• format_list_bulleted JavaScript
• · 2023. 4. 28.
• textsms

[TIL] 2023.04.28 MySQL_SELECT, WHERE

Today I Learned Programmers 문제 풀기 mySQL 공부 MySQL SQL이란? SQL은 Structured Query Language의 약자로, 관계형 데이터베이스 시스템에서 자료를 관리하고 처리하기 위해 설계된 언어를 의미함 mySQL이란? MySQL은 오픈 소스 관계형 데이터베이스(RDBMS) RDBMS는 데이터가 열과 행으로 저장되어 데이터 구조를 쉽게 파악하고 이해할 수 있도록 사전에 정의한 관계로 데이터를 구성하는 데이터베이스 시스템을 의미함 Select 쿼리문이란? 데이터베이스에 명령을 내리는 것, 즉 데이터베이스에서 '데이터를 선택해서 가져오겠다'는 것을 의미함 Select 쿼리문은 1) 어떤 테이블에서 2) 어떤 필드의 데이터를 가져올지로 구성됨 테이블과 필드 테이블:..

• format_list_bulleted JavaScript
• · 2023. 4. 28.
• textsms