분류 전체보기

1) 문제 발생이 오류는 여러번 발생했던 오류이다. 왜 발생하냐면 서버가 클라이언트에 둘 이상의 응답 을 보내려고 할 때 발생하는 오류이다. 이것이 의미하는 바는 주어진 클라이언트 요청에 대해 서버가 이전에 응답 (요청된 리소스가 있는 성공 응답 또는 잘못된 요청에 대한 오류 응답)을 클라이언트로 보냈고, 또 다른 에러 응답을 보내려고 하는 것이다.EX) axios를 예를 들면 then에 대한 응답을 보내고 error에 대한 응답도 보내는 것이다.2) 문제 해결if 조건부에서 전송되는 응답에 javascript return 문을 추가하여 응답이 클라이언트에 전송되면 코드를 종료시킨다.if (!req.body.name) { return res.status(400).json({ status: 'err..

git branch 관련해서 정리하다가 reset까지 오게 되어 정리하면 유용하게 쓰일 것 같아서 정리하고자 한다.개념reset : 시간을 과거의 특정 사건(commit)으로 되돌린다. 파일의 기록이 없어진다.revert : 현재에 있으면서 과거의 특정 사건(commit)들만 없던 일로 만든다. 기록이 남는다.→ reset은 아예 현재가 없었던 것 처럼 원하는 과거로 돌아갈 수 있다. 정말 말 그대로 리셋 즉 초기화가 된다. reset은 이력을 남기지 않는다. 따라서 현재까지의 commit 이력을 남기지 않고 원하는 시점으로 완전히 되돌아가고 싶을 때 사용할 수 있다. 또한, 기록이 남지 않아 그에 대한 파일이나, 협업을 하고자 할 때는 피하는 것이 좋다.revert는 과거로 돌아가겠다는 이력을 남겨두고..

Mariadb 설치하기sudo apt install mariadb-server mariadb-clientmariadb-server : 오픈 소스 관계형 데이터베이스인 mariadb를 설치한다.mariadb-client : MariaDB 데이터베이스 제품에 연결할 수 있다.sudo mariadb-secure-installationmariadb-secure-installation : Unix 시스템에서 사용할 수 있는 쉘 스크립트이며 다음과 같은 방법으로 MariaDB 설치의 보안을 향상시킬 수 있다. 이는 루트 계정의 비밀번호를 설정할 수 있다.위와 같이 설치되었다면 아래의 command를 쳐서 들어간다.sudo mariadb오류가 생겼을 경우)위와 같이 command를 작성하다가 mariadb 설치 부분..

BranchSoftware개발시 개발자들은 동일한 소스코드 위에서 신규 개발, 버그 수정 등의 업무를 협업한다. 이 경우, 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주는 기능이 Branch이다. 브랜치를 통해 하나의 프로젝트를 여러 갈래로 나누어서 관리할 수 있다. 또한, 각각의 독립된 Branch에서 마음대로 소스코드를 변경하여 작업 한 후 원래 버전과 비교하여 또 하나의 새로운 버전을 만들어 낼 수 있다.브랜치 확인git branchgit branch명령어를 통해 브랜치가 무엇이 있는지 확인할 수 있고, *가 붙어있는 브랜치가 지금 활성화된 브랜치이다. 또한 확인하고 나갈려면 :q명령어를 통해 나갈 수 있다.git status위 명령어를 통해 어디 브랜치에 위에 있는지 확인이 가능하다..

1. Link 사용하기1) 선언하기import Link from 'next/link'next.js에서 Link는 아래와 같이 선언하여 사용한다.2) 사용하기 #{cat}({categoryCounts[cat]}) 그리고 Link는 a 태그를 포함하여 사용해준다. Link 태그 안에는 legacyBehavior를 써서 같이 사용해준다.3) 활용하기import Link from 'next/link'//생략 About us //생략export default Homehref : 실제 URL 주소이다.query : query string으로 보내고 싶은 데이터와 함께 보낼 ..

이미지 최적화에 대해서 관심이 많은데 이와 관련된 글을 읽다가 나중에 적용해보고자 글을 쓴다.Sharp 사용하기Sharp의 경우에는 vercel에서 배포하면 자동적으로 깔리지만, 이전에 개발 환경에서 사용할려고 하면 사용자 본인이 깔아서 사용해야 한다.우선 Sharp란? Sharp는 Node.js의 빠른 오픈 소스 이미지 처리 모듈이다. 압축되지 않은 이미지 데이터의 일부 영역만 메모리에 저장하므로 처리 속도가 빠르다. Sharp는 여러 이미지 형식(JPEG,PNG,GIF,Webp,Avif,SVG)과 압축되지 않은 원시 픽셀 데이터도 지원한다.이미지 최적화최적화를 위해 sharp와 squoosh라는 두 라이브러리를 사용한다. Next.js에서 production환경에서는 sharp를 권장하고, 유저가 따..

useOptimistic 이걸 활용하려고 하다가 생각보다 이해가 잘 안되서 글까지 쓰게 되었다. 이전의 쇼핑몰 프로젝트를 하면서 하트의 좋아요 버튼을 구현한 적이 있다. 그런데 바로바로 업데이트되지 않고 서버에는 데이터가 갔지만 사이트에서는 그게 보이기까지 걸리던가, 아니면 새로고침을 해서 서버에 전달됨을 알려야 했다.그러다가 이 글을 보게 되어 유익하다고 느꼈다.1. Optimistic이란?: "낙관적"이라는 뜻으로, 클라이언트가 서버에서 응답을 받지 않고도 낙관적으로 요청이 성공적으로 끝났다고 가정하는 것을 말합니다. 즉, 사이트에서 서버의 요청을 받은 것처럼 행동하는 것을 의미한다.예를 들어) 멀티플레이어 게임 서버를 생각해 봅시다. 만약 게임 클라이언트가 optimistic하게 동작하지 않는다면 ..

코드 리뷰를 계속 해야지 이랬는데, 시기를 놓쳐서 지금 하게 되었다.강의를 들으면서 짠 코드인데 이를 어떻게 더 발전시킬까 하다가, 우연히 chatgpt 글을 보게 되어서 ai한테 코드리뷰를 시켰다. 아래는 해당되는 코드리뷰이다.1. project-items의 코드 설명아래의 코드를 조금 설명하자면, notion api를 사용해서 가져온 데이터이다. 이는 fetch를 사용해서 가져온 데이터이다.→ 코드를 실행시키면 위의 이미지를 가져오면서 아래의 해당 프로젝트에 대한 내용이 보여진다.2. 코드 리뷰1) data.properties의 반복1-1) 수정전 코드 const icon = data.icon.emoji; const title = data.properties.Name.title[0].plain_te..