개발환경next: v14.2.15@toast-ui/react-editor: v:3.2.3 📙 TUI Editor 설치npm i @toast-ui/react-editor 설치를 하자마자 에러가 발생해 머리를 잡고 싶었지만 ,,이는 이슈에도 나와있듯이 react 18을 지원하고 있지 않아서 버전 오류가 발생하는 것이다.이때 --force 옵션을 사용하여 설치하면 설치가 완료된 모습을 볼 수 있다. npm i @toast-ui/react-editor --force --force 옵션을 사용하여 설치하는 것은 무슨 의미일까?터미널에서도 볼 수 있듯이 의존성 충돌이나 경고를 무시하고 설치를 강제로 진행한다.최후의 수단으로 사용하는 옵션이기 때문에 이를 염두해 두고 사용하여야 한다.추가사항React 환경에서 @t..

개발 환경next: v14.2.15@tanstack/react-query: v5.60.6@tanstack/react-query-devtools: v5.60.6 오늘은 개인 프로젝트에 Tanstack Query(React Query)를 적용하는 과정 중에 여러 코드에서 볼 수 있던 QueryClient에 useState를 적용하는 이유에 대해서 작성해보고자 한다. 📙 설치npm i @tanstack/react-queryyarn add @tanstack/react-query 📙 적용🟡 Provider 설정NextJS에서는 use client 로 Provider를 클라이언트 컴포넌트로 변경해주어야 에러가 발생하지 않는다.// RQProvider.tsx"use client";import { QueryCli..

📙 개요Tailwind를 사용하여 모달을 만드는 도중, 모달 닫기 버튼의 위치가 제대로 적용되지 않았다.분명 아까까지는 잘 적용됐는데 갑자기 아래로 가있는 닫기 버튼을 보자 당황할 수 밖에 없었다😭 📙 문제 파악 - 현재 컴포넌트 코드 살펴보기"use client";import { useRouter } from "next/navigation";import Icon from "./Icon";interface Props { size: number; right: number; top: number;}export default function CloseButton({ size, right, top }: Props) { const router = useRouter(); const handleClic..

포트폴리오 사이트를 개발할 때 포트폴리오에 들어가는 내용을 마크다운 파일로 가져와 사이트에서 보여주고 싶었다. 기존에는 express 서버로 파일 시스템(fs) 모듈을 가져와서 사용했지만, 이는 로컬에서만 동작하고 있었고 배포를 위해서는 AWS EC2를 사용하는 방법이 존재했다. 하지만 나에게는 마크다운 파일을 가져오는 HTTP GET 메서드만 필요했고 EC2 배포는 부담스러운 선택지였다. 이 때 찾아낸 것이 AWS Lambda와 S3를 연동하여 사용하는 방법이다. 오늘은 프론트엔드 입장에서 처음 AWS를 맞이했을 때 당황하며 해결해낸 과정을 작성해보려 한다. 💡 AWS Lambda란? AWS Lambda란 AWS에서 제공하는 서버리스 컴퓨팅 플랫폼이다. (서버리스 학습 TIL) 별도의 서버 구성 없이 ..

평상시 노션에 공부한 내용을 정리하며 티스토리에 옮기는 편인데 기존에 노션을 사용하면서 글자 지워짐 현상, 티스토리에 마크다운으로 옮기기 어려운 문제 등이 지속되면서 이전에 Github Star를 눌러두었던 유림님의 TIL이 생각났다. 처음에는 얼핏 봤을 때 GitBook으로 만들어졌구나! 하고 넘어갔었는데 오늘날에서야 코드를 보니 VuePress로 만들어진 것을 확인할 수 있었다. 💡 VuePress? Vue 기반 정적 사이트 생성기 Vue를 기반으로 GitBook과 같이 문서화, 블로그 등에 많이 쓰이는 라이브러리였다. GitBook으로 알고 있던 사이트들이 VuePress 였었다는 것에 정말 관심을 가지지 않았구나 싶었다..😅 npmtrends에서 확인해보니 GitBook 보다는 VuePress가 ..

🔍 기능 미리 보기 ✨ 구현할 기능 +/- 버튼으로 수량 조절하기 1개 보다 작거나, 재고 보다 큰 수량을 입력할 수 없게 예외처리 하기 에 값을 입력하여 수량 조절하기 1️⃣ 버튼으로 수량 조절 자식 컴포넌트의 구성 요소인 버튼으로 수량을 조절하여 부모 컴포넌트가 가지고 있는 수량과 가격에 대한 상태 값을 변경하고 싶다면, 해당 상태들을 변경할 수 있는 함수를 자식 요소인 QuantityInput의 props로 전달하여 QuantityInput에 있는 button의 이벤트 핸들러로 추가해주면 된다. // ProductInfo.jsx export default function ProductInfo({ product }) { const [quantity, setQuantity] = useState(1); ..

🔍 프로젝트 미리보기 💠 Lighthouse 점수 분석하기 - 기존 Lighthouse 점수 PerformanceOPPORTUNITIES리소스 관점에서 웹 페이지의 더 나은 성능을 위해 어떤 점을 개선시킬 수 있는지 제안해준다. 즉, 로딩 성능을 개선하는 방법을 제시한다.Reduce unused JavaScript추후 JavaScript 기능을 넣기 위해 코드를 미리 세팅해두었더니 사용되지 않는 JavaScript 코드를 삭제하라며 성능 점수를 떨어트렸다. DIAGNOSTICS페이지의 실행 관점에서 개선할 수 있는 방법을 제시한다. (⇒ 렌더링 성능)Serve static assets with an efficient cache policy정적 리소스는 캐시를 사용하라는 의미로, 변화 주기가 짧다면 캐..

🔍 설문조사 폼 HTML구조 파악하기 JS 스터디 모집 설문조사 설문지를 작성하세요! 질문 1. 무엇을 가장 배우고 싶으세요? 질문 2. 시간은 언제가 적당한가요? 질문 3. 몇 시간정도 예상하세요? 질문 4. 난이도를 조정한다면? 질문 5. 끝으로 하고싶은 말이 있나요? 제출 초기화 설문지 폼은 사용자에게 입력을 받고, 입력 받은 내용을 서버로 제출하는 목적을 가지고 있기 때문에 요소로 구성되어 있다. 요소로 사용자에게 질문에 대한 응답을 입력받고 있고, 요소를 사용하여 입력창과 연결시켜 스크린 리더와 터치스크린 사용자에게 좋은 UX를 줄 수 있다. 요소는 form과 같은 양식 요소를 그룹화 할 수 있다. 요소로 그룹의 설명을 제공할 수 있어서 해당 콘텐츠가 어떤 목적 혹은 주제를 가지고 있는지 나타낼..

📜 Develop Log 2022.02.28 - STEP1. 콘솔에 값을 출력하는 계산기 2022.03.09 - STEP2. input에 값을 입력 받아 화면에 보여주는 계산기 2022.03.18 - STEP3. button 이벤트로 사용자 입력을 받아 화면에 보여주는 계산기 2022.03.25 - STEP3 보완 STEP 1. 콘솔에 값을 출력하는 계산기 Language: HTML, JavaScript Comment: calculator 객체에 console에 결과값을 찍어주는 plus, minus, multi, divide 메서드를 만들었다. ✍️ 요구사항 두 수로 덧셈, 뺄셈, 곱셈, 나눗셈이 가능한 calculator 만들기 console.log로 계산 결과 출력 💻 CODE function Ap..