라이언 코딩일기

[Next JS] 라우팅

서론Next.js 13 버전 이후의 라우팅 시스템은 매우 직관적이며, 편리하다.일하면서 알게된 점, Vercel, Nomad coder에서 공부한 것을 간단하게 정리해 본다.본론path 추가기본적으로 13버전 이후로는 App directory를 사용한다.그리고 App폴더 내부에 존재하는 폴더명이 그대로 웹페이지의 path가 된다. (단 폴더 내부에 page.tsx / page.jsx 파일이 존재해야 함.)기본적인 라우팅 시스템은 이게 전부이다. 너무 깔끔해서 놀라울 정도이다.your-app/src/app/sign-in/page.tsx// sign-in 페이지가 생성됨. 페이지 그룹화(sign) 폴더와 같이 페이지를 그룹화할 수 있다.ex) your-app/src/app/(sign)/sign-in/page..

[Next] 방명록 앱

서론Next.js와 MySQL을 공부하고 있다.그래서 만들기 어렵지 않은 방명록앱을 만들어 보았다.사용한 라이브러리shadcn/ui (UI)js-cookie (클라이언트 측 쿠키관리)lucide-react (아이콘)moment (날짜, 시간 관련 데이터 포매팅)mysql2 (MySQL연결)tailwindcss (스타일)zod (입력체크)초안대충 각 화면 및 DB관계도, 작성 순서 등을 정리해 보았다.마음처럼 되지 않아 중간중간 수정하거나 추가한 부분이 꽤 있다.주요 기능로그인 관련 (로그인, 회원등록, 비밀번호 찾기)글 작성 관련 (글 작성, 글 수정, 글 삭제)완성본https://guestbook-liard-two.vercel.app/ Create Next App guestbook-liard-two...

[MySQL] 데이터 검색(LIKE)

LIKEWHERE문 안에서 쓸 수 있는 간단한 검색기능을 구현할 수 있다.WHERE문만으로는 '일치'하는 검색기능까진 구현 가능하지만, '포함'하는 검색기능까지는 힘들기 때문에 LIKE가 효과적이다.여기서 %와, _가 큰 역할을 한다.%,_는 둘 다 [아무문자]라는 뜻을 갖는다.하지만 %는 글자수 제한이 없는 아무문자, _는 아무문자 한 자를 뜻한다.ex)[%안녕%]은 안녕이라는 키워드가 포함된 모든 검색.[%안녕]은 안녕이라는 키워드로 끝나는 모든 검색.[안녕%]은 안녕이라는 키워드로 시작하는 모든 검색.[_안녕_]은 중간에 안녕이라는 키워드가 포함된 4글자 검색.[_안녕]은 끝에 안녕이라는 키워드가 포함된 3글자 검색.[안녕_]은 처음에 안녕이라는 키워드가 포함된 3글자 검색.[안녕__]은 처음에 안..

[MySQL] 데이터 필터링(WHERE)

WHERE데이터 필터링을 도와주는 아주 기본적인 문법이다.SELECT * FROM [테이블명]WHERE [조건식]

[MySQL] 데이터 정렬(ORDER BY)

ORDER BY매우 기초적인 문법이다.데이터를 오름차순 혹은 내림차순으로 정렬할 수 있게 해 준다. asc : 오름차순 (작 -> 큰)[1,2,3,4,5] desc : 내림차순 (큰 -> 작)[5,4,3,2,1]SELECT * FROM [테이블명]ORDER BY [컬럼명] [asc or desc];*asc(오름차순)의 경우 생략 가능하다.   order by는 기본적으로 오름차순으로 설정되어 있기 때문.

[MySQL] 테이블의 컬럼 추가, 수정, 삭제

DBeaver, Workbench와 같은 GUI를 사용하면 손쉽게 추가, 수정 및 삭제가 가능하다.하지만 SQL코드로도 테이블 안의 컬럼을 추가, 수정 및 삭제가 가능하다. -- 컬럼 추가ALTER TABLE [테이블명] ADD [추가할 컬럼명] [추가할 컬럼의 타입]-- 컬럼 수정ALTER TABLE [테이블명] MODIFY COLUMN [수정할 컬럼명] [수정할 컬럼의 타입]-- 컬럼 제거ALTER TABLE [테이블명] DROP COLUMN [제거할 컬럼명] - 맨 앞에 ALERT TABLE 입력이 필요함.- 추가는 ADD, 수정은 MODIFY COLUMN, 삭제는 DROP COLUMN을 통해 가능함.* 이미 행이 채워져있는 상태에서 추가를 할 경우 자동적으로 null값이 채워진다.    하지만, ..

[MySQL] 테이블 생성,삭제

DBeaver, Workbench와 같은 GUI를 사용하면 손쉽게 생성 및 삭제가 가능하다.하지만 SQL코드로도 간단하게 테이블을 생성 및 삭제가 가능하다.-- 테이블 생성CREATE TABLE 테이블명 ( 컬럼명1 datatype, 컬럼명2 datatype, 컬럼명3 datatype, ...); -- 테이블 삭제DROP TABLE 테이블명 삭제는 DELETE가 아닌 DROP인 점에 주의!

[MySQL] 데이터베이스 생성, 삭제

DBeaver, Workbench와 같은 GUI를 사용하면 손쉽게 생성 및 삭제가 가능하다.하지만 SQL코드로도 간단하게 데이터베이스를 생성 및 삭제가 가능하다. -- 데이터베이스 생성CREATE DATABASE 데이터베이스명-- 데이터베이스 삭제DROP DATABASE 데이터베이스명 삭제는 DELETE가 아닌 DROP인 점에 주의!