오늘 공부한것 & 기억하고 싶은 내용 typescript와 next.js를 접목시켜서 코드를 짜고 있는데, 가끔씩 느낌표가 나왔다. 내가 아는 느낌표는 부등호와 함께 앞에 사용하는 not의 의미밖에 몰랐는데, 드문드문 뒤에 느낌표가 찍히는 것이다. 저게 뭘까 저게 뭘

오늘 공부한것 & 기억하고 싶은 내용 createObjectURL URL.createObjectURL은 브라우저에서 로컬 파일을 로드하여 미리보기를 제공하는 간단한 방법이다. 브라우저에서 로컬 파일을 간단히 로드 가능 이미지 파일을 업로드하기 전에 사용자에게

오늘 공부한것 & 기억하고 싶은 내용 .superRefine ctx.addIssue를 통해 원하는 만큼 이슈를 추가할 수 있다. 함수 실행 중에 ctx.addIssue가 호출되지 않으면 유효성 검사가 통과 fatal: true 설정 시, 그 다음 refine이 실행

오늘 공부한것 & 기억하고 싶은 내용 Image 컴포넌트 기본 jsx img가 지원하지 않는 여러가지 강력한기능을 지원한다. 로딩 전후로 컴포넌트 위치가 밀리는 content shift를 방지한다. 압축률이나, 화면 크기별 압축 옵션을 제공한다. 필수 prop으로

말 그대로 중간에서 동작하는 일종의 소트프웨어를 뜻한다. 어떤 것과 다른것 사이에서 실행되는 코드.미들웨어를 사용하면 request가 완료되기 전에 코드를 실행할 수 있다.이미지, CSS, JS, Favicon 요청 등 웹 사이트의 모든 단일 request 하나하나 마

오늘 공부한것 & 기억하고 싶은 내용 bcrypt 비밀번호를 해시할 때 사용하는 라이브러리 해시함수는 단방향 멱등성 함수 데이터베이스에 비밀번호를 그대로 저장하지 않는다.(해킹의 위험성) 정해진 입력에 따라 정해진 난수를 출력함 bcrypt하는 이유 보안상 데이터가

문자열 유효성 검사 라이브러리coerce는 기본 값을 강제로 변환내장 생성자(String(input), Number(input), new Date(input) 등))를 사용하여 모든 입력을 강제함input의 값은 항상 string으로 오기 때문에 전화번호 같은건 꼭 n

데이터베이스와 애플리케이션 사이에서 통역사 역할을 해주는 도구내가 사용하는 데이터베이스에 맞춰 필요한 파일이나 마이그레이션 파일을 자동으로 생성해주기 때문에 정말 유용함SQL을 몰라도 데이터베이스를 효율적으로 다룰 수 있게 도와줘서 개발 초보자에게도 유용함데이터베이스

Zod에는 몇 가지 문자열 관련 유효성 검사가 포함되어 있다.(https://zod.dev/?id=strings)문자열 스키마를 만들 때 몇 가지 오류 메시지를 지정할 수 있다.const name = z.string({required_error: "Name은

npm i zodserver action으로 보내는 데이터의 유효성 검사에 도움을 준다. 또한 데이터 변환(예: 기본값 추가, 형식 변환)을 할 수 있다.예를 들어 Username을 3자~10자로 설정하고 싶다면 Zod에게 데이터를 보내주면 Zod가 내부적으로 모든 i

Next.js는 POST 요청 처리를 더 간단하게 만들어주는 Server Actions를 제공한다.Next.js 13 이상 버전에서 사용 가능 하다.이전에는 POST 요청을 처리하기 위해 route handler를 만들어야 했지만, 이제 "use server" 키워드

기존 next.js 버전에서는 API route를 만들어서 post, delete, get 등의 모든 요청을 보냈다.하지만 최신버전(14)에는 이 방법 뿐만 아니라 더 편한 방법이 도입되었다.어떨때는 GET 요청을 받을 것이고, 어떨 때는 POST 요청을 받을 것이다.

Tailwind CSS 제작자가 손으로 만든 아름다운 SVG 아이콘 (무료 아이콘 라이브러리)순수 SVG 아이콘으로. Tailwind의 유틸리티 클래스와 쉽게 결합하여 커스터마이징 가능https://heroicons.com설치: npm install @hero

오늘 공부한것 & 기억하고 싶은 내용 TailWind는 기존의 css 프레임워크처럼 고정된 css파일을 사용하는 것이 아니라, 유틸리티 클래스 기반의 접근 방식을 사용하고, 다음과 같은 특징을 갖고 있다. (요청에 따라 생성되는 것임) 특징 미리 정의된 유틸리티 클래

오늘 공부한것 & 기억하고 싶은 내용 odd: 자식 요소 중 홀수번째에만 스타일 줄때 사용 odd:bg-gray-100 CSS에서 :nth-child(odd) 에 해당 even: 자식 요소 중 짝수번째에만 스타일 줄때 사용 even:bg-cyan-100 CSS에서

오늘 공부한것 & 기억하고 싶은 내용 gradient: Search .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); } .from-cy

Tailwind CSS는 모바일 우선이다.작성하는 css는 모두 소형 기기에 적용된다는 뜻이다. 그렇기 때문에 더 큰 화면에 적용시키는 modifier들이 존재한다. Tailwind Css는 모바일 디자인을 먼저 구현하고 그 뒤에 큰 화면으로 키워가는 것을 명심하자.다

Tailwind를 사용하기에 앞서 vscode에 꼭 설치해야 하는 확장 프로그램이다.자동완성 기능을 제공하고, 사용할 색상 값이나 기존 css 코드를 알려줘서 보기가 편하다.class 중복이 있거나 오타가 있을때도 알려주기에 굉장히 유용하다.tailwind.config

이렇게 하면 next.js 최신 버전이 설치 된다.다른 버전 설치를 원한다면 latest대신 버전을 넣어주면 된다.ex) nextjs14버전 설치를 원한다면 npx create-next-app@14 입력!설치를 하게되면 다음과 같은 질문이 나온다!그냥 엔터치면 됨!!

package.json에 코드 추가 -> 이 명령어들은 직접 호출하진 않고 vercel이 호출하는 용으로 넣어줌vercel 홈페이지 들어감 1\. Add New > Project2\. 내 깃허브 디렉토리랑 연결해서 맞는 프로젝트 import3\. Project Name