목록전체 글 (63)
프로그래밍 공부방
[JavaScript] var, let, const 차이점 정리 (호이스팅, 스코프)
🐥 var, let, const 차이점 정리 (호이스팅, 스코프) 자바스크립트 로드맵의 전체를 보고싶으시다면 👉 자바스크립트 로드맵 (JavaScript Roadmap) 이 포스팅을 통해 알 수 있는 내용✍️ 1. 변수 선언 방식 (var, let, const) 2. 호이스팅 3. 스코프 (block, function, global) 4. var, let, const 차이점 안녕하세요. 오늘은 자바스크립트 변수에 대해서 알아보겠습니다. 자바스크립트의 변수 선언 방식에는 var, let, const가 있습니다. 이것들은 호이스팅과 스코프에서 차이가 있습니다. 호이스팅이란 ? 인터프리터(소스 코드를 한줄씩 바로 실행하는 컴퓨터 프로그램 또는 환경)가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을..
[JavaScript] 자바스크립트 로드맵 (JavaScript Roadmap)
개발을 하다가 뭔지는 아는데 설명하려니 힘든 개념들이 있었습니다. 따라서 알고 있는 내용은 더 확실하게 알고, 모르는 내용은 새롭게 배우기 위해서 자바스크립트 로드맵을 가져왔습니다!✋ 한개씩 내용을 정리해서 블로그에 올려보도록 하겠습니다. 출처: https://roadmap.sh/javascript JavaScript Developer Roadmap: Step by step guide to learn JavaScript Community driven, articles, resources, guides, interview questions, quizzes for javascript development. Learn to become a modern JavaScript developer by followin..
[Next.js] register와 ref를 같이 사용할 때의 문제점
🙀문제점 👉문제 내용 기존에 useForm에 register를 이용해서 댓글 등록 기능을 구현했었습니다. 댓글 등록 기능에 댓글 길이에 따른 동적인 textarea를 만들어주기 위해서 ref를 추가해주었는데요. ref를 추가하기 전에는 정상적으로 댓글이 잘 등록됐지만 ref를 추가한 이후 댓글이 등록되지 않는 문제가 생겼습니다. import { cls } from "@libs/client/utils"; import { useRef, useState } from "react"; import { UseFormRegisterReturn } from "react-hook-form"; interface TextAreaProps { label?: string; name?: string; register: UseFo..
[Next.js] useForm register 같은 값이 들어가는 문제
🙀문제점 👉문제 내용 일단 저는 useForm을 이용해 댓글 수정 기능을 구현했었습니다. 그 후에 댓글 수정 기능을 테스트하고 있는데 잘 된다고 생각했던 댓글 수정 기능이 이상한 점이 있었습니다. 수정하려는 댓글이 아닌 다른 댓글이 수정되는 오류입니다. 테스트할 때 수정을 처음 한 번만 진행해서 몰랐는데 처음 댓글을 수정하고 그 이후에 다른 댓글을 수정하려고 하면 제일 처음 댓글이 수정됐습니다. 아래 이미지를 보시면 엉뚱한 댓글이 수정된 것을 알 수 있습니다. const { register: answerEditRegister, handleSubmit: answerEditHandleSubmit, setValue, } = useForm(); ... //위에 생략된 코드: map을 이용해서 댓글마다 댓글 수정..
[Tailwind CSS] inner width/height 설정하는 방법
🐥 Tailwind inner width/height 설정하는 방법 안녕하세요. 오늘은 간단하게 tailwind inner width/height 설정하는 방법에 대해서 알아보겠습니다. border 때문에 layout이 묘하게 어긋나서 inner width/height을 설정하려고 했는데요..! tailwind에 inner가 없었습니다 ㅠㅠ 따라서 그냥 따로 제가 설정해줬습니다. 방법은 매우 간단해서 설명한다고 하기 민망하네요...ㅎ inner width/height 설정하기 실제 width/height을 적용할 크기의 div를 하나 만들어줍니다. (저는 안에 input file이 있어서 label로 설정해지만 별 상관 없습니다.) 그리고 그 안에 border를 적용할 div를 하나 더 만들어서 해당 d..
[Next.js] 당근마켓 프로젝트 성능 최적화 과정3 - 이미지 업로드 후 게시글 올리는 작업
🐥 당근마켓 프로젝트 최적화 과정3 안녕하세요. 오늘은 당근마켓 프로젝트 최적화 과정 세 번째입니다! 이미지를 업로드해서 게시글을 올리는 작업을 최적화 해보겠습니다. 1. 이미지를 압축시켜서 렌더링 속도 최적화하기 2. 적절한 작업 순서를 고려해서 최적화하기 3. 블러 처리된 이미지 먼저 보여주기 4. Layout shift를 줄여서 CLS 개선시키기 위 작업들을 통해서 성능 최적화를 해보도록 하겠습니다! 1. 이미지를 압축시켜서 렌더링 속도 최적화하기 이미지를 압축시키는 작업은 browser-image-compression을 이용했습니다. option에는 maxSizeMB, maxWidthOrHeight이 있습니다. maxSizeMB는 1로 설정을 해서 이미지의 용량이 1MB를 넘지 않도로 설정했습니다..
[AWS] S3 업로드 에러 400 (Bad Request)
🙀문제점 👉문제 내용 createPresignedPost를 통해 받은 URL을 통해 S3 업로드를 하려는데 오류가 발생했습니다. 👉문제 원인 해당 url로 보내줄 데이터에 제대로 된 값을 넣지 않은 것이 원인이었다. ✨해결 방법 아래 코드에서 productImage를 file: productImage로 바꾼 후 문제를 해결했습니다. file을 key값으로 해서 이미지 데이터를 넣어줘야하는데 key값을 잘못 넣어주고 있었더라구요..ㅠㅜ 수정 전 코드 const onValid = async ({ name, price, description }: UploadProductForm) => { if (loading || !uploadUrl || !compressedFile) return; const { nFilen..
[Next.js] 당근마켓 프로젝트 성능 최적화 과정2 - 제품 검색 후 제품 상세 페이지로 이동하는 과정
🐥 당근마켓 프로젝트 성능 최적화 과정2 상품 검색을 한 후 해당 상품에 들어가기까지의 시간을 측정하고 있었습니다. 근데 시간이 오래 걸려서 최적화 작업을 진행했습니다. 확인해보니 비슷한 상품이 적을 경우에는 상관이 없는데 많아질 경우에 느려지는 문제가 생겼습니다. 비슷한 상품을 가져오는 개수 설정하기 비슷한 상품을 가져오는 개수에 제한을 두도록 하겠습니다. 비슷한 상품을 가져오는 개수 설정하기 첫 번째 문제 저는 test라는 검색어로 상품을 검색했습니다. 하지만 네트워크 쪽을 보면 시간이 꽤 긴 것을 확인할 수 있었습니다. 노란색으로 표시한 부분이 FID라고 볼 수 있습니다. 입력 지연 시간은 100ms 가 양호한데 이 경우에는 약 2500ms ~ 2900ms가 약 400ms가 걸리는 것을 확인할 수 ..