[Next.js] Learn Next.js Chapter 1 : Getting Started

프로젝트 생성npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm패키지 관리자는 npm 과 yarn 보다 빠르고 효율적인 pnpm 을 사용하여 프로젝트 생성튜토리얼에서 제공하는 예제 코드로 프로젝트 생성 프로젝트 생셩 완료! 해당 튜토리얼은 대부분의 코드가 작성되어 있다. 모든 코드를 작성할 필요 없이 Next.js 의 주요 기능을 학습하는데 집중할 수 있도록 하기 위해서라고한다. 프로젝트 구조/app : 애플리케이션의 모든 경로, 컴포넌트, 로직이 있고 대부분 이곳에서 작업한다./app/lib : 재사용 가능..

• format_list_bulleted Next.js
• · 2024. 12. 25.
• textsms

[백준] 1158 | 요세푸스 문제 | Javascript

문제https://www.acmicpc.net/problem/1158 정답 코드const fs = require("fs");const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";const input = fs.readFileSync(filePath).toString().trim().split(" ");function solution(input) { const N = Number(input[0]); const K = Number(input[1]); const result = []; const people = []; let startIdx = 0; for (let i = 1; i `;}console.log(solut..

• format_list_bulleted 코딩문제풀기
• · 2024. 12. 24.
• textsms

[백준] 1406 | 에디터 | 자바스크립트

문제https://www.acmicpc.net/problem/1406 정답 코드const fs = require("fs");const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";const input = fs.readFileSync(filePath).toString().trim().split("\n");function solution(input) { const initialString = input[0]; const commands = input.slice(2); // 스택 두개 초기화 const leftStack = initialString.split(""); const rightStack = []; for (..

• format_list_bulleted 코딩문제풀기
• · 2024. 12. 10.
• textsms

[백준/9093] 단어 뒤집기

문제https://www.acmicpc.net/problem/9093 정답const fs = require("fs");const filePath = process.platform === "linux" ? "/dev/stdin" : "./input.txt";const input = fs.readFileSync(filePath).toString().split("\n");function solution(input) { const caseCount = Number(input[0]); for (let i = 1; i { return word.split("").reverse().join(""); }) .join(" "); console.log(result); }}solut..

• format_list_bulleted 코딩문제풀기
• · 2024. 12. 2.
• textsms

[✈️ 최종프로젝트] 배포 환경에 따라 다르게 보이는 오류 메세지

✏️ 문제 상황로그인 로직에서 사용자가 잘못된 이메일 또는 비밀번호를 입력할 경우 "잘못된 이메일 또는 비밀번호입니다." 라는 alert 메시지가 나타나도록 개발했다.이 로직은 개발 모드에서는 정상적으로 동작했으나, 프로적션 모드에서는 사용자 정의 메시지가 아닌 서버 오류 메시지가 알림창에 그대로 노출되는 문제가 발생했다. 🤯해당 오류가 발생하는 원인을 파악해 보고 해결한 방법을 정리해 보자!! ✏️  오류프로덕션 모드에서 기대한 결과개발모드에서는 의도한 대로 메시지가 표시되었다. 프로덕션 모드에서 실제 결과하지만 프로적션 모드에서는 아래와 같이 서버 오류 메시지가 그대로 노출되었다. ㅜㅜ ✏️  원인 분석이 문제는 Next.js 와 같은 프레임워크의 프로덕션 빌드 환경 특성 때문에 발생한 것이었다.프..

• format_list_bulleted 🔥 프로젝트
• · 2024. 11. 17.
• textsms

[✈️ 최종프로젝트] supabase 에서 transaction 적용하기

✅ 개요게시글 삭제 기능을 구현하는 과정에서, 게시글을 삭제할 때 해당 게시글에 연관된 이미지도 함께 삭제되어야 한다. 이 작업은 게시글과 이미지 두 개의 테이블에서 업데이트가 이루어져야 하며, 둘 중 하나라도 실패할 경우 데이터 무결성이 깨질 위험이 있다.  그러나... 수파베이스는 현재 트랜잭션을 간편하게 지원하지 않는다고한다. supabase Discussion 에도 언급되었듯, 수파베이스는 PostgreSQL 을 기반으로 하고 있어서 PostgreSQL 에서 제공하는 함수를 이용하면 특정 쿼리에 대해 트랜잭션을 적용할 수 있다! 🥹 따라서 두 요청(게시글 삭제/이미지 삭제) 을 안전하게 처리하려면 PostgreSQL 함수를 작성하여 트랜잭션을 적용해 보도록 하자. ✅ 함수 만들기PostgreSQ..

• format_list_bulleted 🔥 프로젝트
• · 2024. 11. 15.
• textsms