📙 개요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..
📙 로컬 파일로 Nextjs 폰트 적용하는 기본적인 방법로컬파일(.ttf, .woff, …)을 Nextjs 폰트로 적용하기 위해서는 기본적으로 아래의 방법을 사용한다. 🟡 app/layout.tsx에 next/font 를 사용하여 변수를 선언하고, className에 전달// app/layout.tsximport localFont from "next/font/local";const suit = localFont({ src: "../../public/fonts/SUIT-Regular.ttf", display: "swap", variable: "--font-suit",});const suitBold = localFont({ src: "../../public/fonts/SUIT-Bold.ttf", ..
포트폴리오 사이트를 개발할 때 포트폴리오에 들어가는 내용을 마크다운 파일로 가져와 사이트에서 보여주고 싶었다. 기존에는 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 점수 Performance OPPORTUNITIES 리소스 관점에서 웹 페이지의 더 나은 성능을 위해 어떤 점을 개선시킬 수 있는지 제안해준다. 즉, 로딩 성능을 개선하는 방법을 제시한다. Reduce unused JavaScript 추후 JavaScript 기능을 넣기 위해 코드를 미리 세팅해두었더니 사용되지 않는 JavaScript 코드를 삭제하라며 성능 점수를 떨어트렸다. DIAGNOSTICS 페이지의 실행 관점에서 개선할 수 있는 방법을 제시한다. (⇒ 렌더링 성능) Serve static assets with an efficient cache policy 정적 리소스는 캐시를 사용하라는 의미로, 변화 주기가 ..
정규 표현식? 들어는 봤는데 .. 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. JavaScript에서 정규 표현식 또한 객체로 RegExp 의 메서드인 exec(), test() 뿐만 아니라 String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드도 사용할 수 있다. 정규 표현식 만들기 리터럴 표기법 리터럴 표기법의 매개변수는 따옴표를 사용하지 않고, /pattern/flags의 순서로 작성한다. const reg = /FE-DEV/g; 리터럴 표기법은 표현식을 평가할 때 정규 표현식을 컴파일한다. 반복문 안에서 사용할 정규 표현식을 리터럴 표기법으로 생성하게 되면 정규 표현식을 매번 다시 컴..
🔍 설문조사 폼 HTML구조 파악하기 JS 스터디 모집 설문조사 설문지를 작성하세요! 질문 1. 무엇을 가장 배우고 싶으세요? 질문 2. 시간은 언제가 적당한가요? 질문 3. 몇 시간정도 예상하세요? 질문 4. 난이도를 조정한다면? 질문 5. 끝으로 하고싶은 말이 있나요? 제출 초기화 설문지 폼은 사용자에게 입력을 받고, 입력 받은 내용을 서버로 제출하는 목적을 가지고 있기 때문에 요소로 구성되어 있다. 요소로 사용자에게 질문에 대한 응답을 입력받고 있고, 요소를 사용하여 입력창과 연결시켜 스크린 리더와 터치스크린 사용자에게 좋은 UX를 줄 수 있다. 요소는 form과 같은 양식 요소를 그룹화 할 수 있다. 요소로 그룹의 설명을 제공할 수 있어서 해당 콘텐츠가 어떤 목적 혹은 주제를 가지고 있는지 나타낼..
😎 오늘의 잘한점 액션 해결하지 못한 과제를 포기하지 않고 해결해 낸 것! 칭찬 풀리지 않는 것이라고 포기한 채로 두지 않았다니 또 한 번 성장했다는 것을 느꼈다. 예전이었다면 주어진 시간 내에 풀지 못해 부족한 사람이라고 자책하고 있었을 텐데 요즘에는 내가 제어하지 못하는 것이 아닌 제어할 수 있는 것에 초점을 두는, 생각의 전환을 할 수 있는 내가 되어 간다는 점이 뿌듯했다😀 ✔️ 오늘의 개선점 문제 풀 수 있는 문제였음에도 제한 시간 내에 문제를 풀지 못하였다. 원인 문제를 파악하고 구현하는 것보다 효율적인 코드를 작성하는 것을 우선순위로 생각하면서 문제를 푸는 시야가 좁아졌다. 액션 플랜 효율적인 코드를 작성하는 것도 물론 중요하지만 100% 완벽한 코드는 없다고 했다. 80-90% 정도의 코드를..
들어가기에 앞서 멋쟁이사자처럼 5기를 같이 참여하고 있는 분께서 Git 오류에 대해 도움을 요청해 주셨다. 예전에 경험해 봤던 문제이면서 Git의 동작 과정을 다시 한번 정리해 볼 수 있었기에 해결한 과정에 대해 기록해보고자 한다. 🚚 현재 레파지토리(Repository)에서 새로운 레파지토리로 파일 이동하기 현재 레파지토리에 있는 파일들을 다른 레파지토리와 합치고 싶다면 어떻게 해야 할까? 우선 나의 컴퓨터에 있는 폴더 즉, 로컬 환경에 있는 폴더와 연결된 remote를 옮기고 싶은 새로운 레파지토리와 연결시켜주어야 한다. 💡 여기서 Git의 remote란 무엇일까? 쉽게 얘기하자면 내 컴퓨터에 있는 폴더와 원격 저장소를 연결시켜 주는 명령어이다. 많은 사람이 사용하고 있는 Github는 Git을 기반..