숭구리 개발일지

자바스크립트를 깊이 이해하다 보면, 변수나 함수가 실제로 어떻게 메모리에 저장되고 어떻게 접근되는지에 대한 의문이 생기기 마련이다. 이를 공부하며 생긴 궁금증과 이를 해결하는 과정을 바탕으로 정리해보았다 ! 🧠 궁금증 1: "변수는 복사되어 새로운 메모리를 차지하는 걸까?"자바스크립트에서는 기본형과 참조형 데이터가 메모리에 저장되는 방식이 다르다.기본형 (number, string, boolean, null, undefined, symbol, bigint):값을 스택(stack) 영역에 직접 저장. 변수에 할당 시 값 자체가 복사됨.참조형 (object, array, function 등):실제 값은 힙(heap) 영역에 저장되고, 변수에는 그 주소값(참조값) 만 저장됨.따라서 같은 객체를 여러 변수에..

우리가 리액트를 사용하면서 리액트가 왜 빠르게 페이지를 브라우져에 그려주는지에 대해 많이 이야기하는데그때 그 이유를 "리액트는 Virtual Dom을 사용하기 때문이다!" 라고 할 만큼 가상돔의 대한 이해가 중요시해졌습니다. 우선 DOM(Document Object Model)이란?HTML의 Element 요소 하나하나를 담고 있는 웹페이지를 Document라고 하고, 브라우저는 이 요소들을 분석하여 페이지를 띄워주는 방식으로 작동합니다.즉, DOM이란 이런 HTML 요소들을 tree형태로 DOM Tree를 구성하여 표현한 것 입니다. DOM Tree 안에는 각 요소에 상응하는 노드들이 들어있고, 이를 활용해서 개발을 할 때 DOM 구조에 접근하여 원하는 Element들을 조작하여 작업 목적에 따른 개발..

현재 진행하는 프로젝트에서는 사용자들이 선택한 좌표와 정답 좌표를 연결지어서 시각적으로 보여주고,좌표 간 계산을 통해 점수를 차등부여하는 게임을 제작중에 있다.언제나 그렇듯 Google Map을 이용해서 좌표들끼리 연결하는데는 문제가 없었으나, 디자이너 님이 구글 맵 디자인 요구사항을 수용하는 과정에서 어려움이 있었기에 정리해보려고 한다!  디자이너님 요구사항 List1. 좌표 마커에 이미지를 넣어주세요2. 정답 좌표와 유저 간의 마커 아이콘을 다르게 해주세요.3. 정답 좌표와 유저를 실선이 아닌 점선으로 이어주세요.4. 유저 프로필 이미지를 마커 안에 넣어주세요 (V2.0)  하나씩 해결한 방법은 다음과 같다. 1. "마커에 이미지를 넣어주세요"[문제발생]처음에 다음과 같이 icon에 들어갈 .svg를..

"Next.js에서 더 나은 UX를 위한 비밀 무기: Link의 prefetch 속성"웹 페이지에서 사용자 경험(UX)을 개선하는 것은 매우 중요하다.특히, 사용자가 페이지를 이동할 때 긴 로딩 시간을 경험한다면 유저의 유입이 끊기기 마련이다.Next.js에서는 이러한 문제를 어떻게 이문제를 해결하는지 알아보자! 왜 미리 데이터를 받아와야 할까?Next.js는 기본적으로 Client-side Rendering(CSR) 방식을 사용하는 라이브러리와는 다르게, 필요한 데이터를 페이지 요청마다 받아오는 구조를 채택하고 있다.이는 불필요한 데이터 로딩을 줄이는 장점이 있지만, 사용자가 페이지를 라우팅하기 위해 Link를 클릭한 후 데이터를 받아온다면, 데이터 양이 많을 경우 기다리는 시간이 길어질 수 있다. ..

개발을 하다 보면, 다양한 방식의 렌더링 방법을 접할 수 있는데그 중에서 Next.js는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 프레임워크이자 웹 애플리케이션을 구축하는 데 매우 유용한 도구입니다.Next.js는 React의 기능을 바탕으로, 개발자에게 더 나은 성능과 사용자 경험을 제공하는 다양한 기능을 내장하고 있다고 하여예전부터 종종 사용하곤 했는데 본격적으로 왜 Next.js를 쓰는지 SSR이 뭔지에 대해 설명하고자 합니다!  CSR (Client-Side Rendering)이란? : CSR은 모든 UI 렌더링이 클라이언트에서 발생하는 방식CSR의 과정:페이지 이동 시, Next.js는 서버에서 애플리케이션을 렌더링합니다.서버에서 모든 컴포넌트를 렌더링하여..

react-toast가 뭐야?현재 프로젝트를 진행하며 로그인 - 회원가입 관련 모달 테스트 중 'react-toastify'를 사용했을 때클릭하는 개수마다 toast가 뜨는 현상을 팀원분께서 지적해주셨다. 처음에 로직을 짤 때에는 유효성 검사를 하여 "유효하지 않을 경우 toast로 에러처리를 하자!"라는 단순한 생각으로 코드를 작성하였는데팀원 분의 지적 덕에 사용자 입장에서 다시 생각해본 후, 토스트 메시지가 같은 위치에 재생성되도록 설정해보는게 좋을 것 같다고 느꼈다! 기존 에러 처리 핸들러는 다음과 같다 const handleSubmit = async () => { if (validateForm(formData)) { try { await login(formData.em..

MDN | W3SCHOOL🤔 미디어쿼리를 왜쓸까?이유는 간단하다!사용자마다 가지고 있는 모니터 사이즈 혹은 모바일의 화면의 크기가 다 제각각이고 이를 @media로 max사이즈를 지정해주지 않고 UI를 개발한다면 화면 사이즈 별로 어떤 이미지는 오른쪽 사이드 어떤 글은 가운데…화면별로 엉망진창으로 보여지기 때문에 사이즈를 규제하여 화면 사이즈에 맞춰 일관된 혹은 적당한 UI를 보여주고자 사용한다..!MDN 문서에서 가져온 내용을 통해 간단히 익히고 직접 사용해 보자!@media (max-width: 1000px) { header nav { display: none; }}*뷰포트 : 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역Media..

transformtransform 속성이란 HTML 요소를 회전, 크기 조절, 기울이기, 이동효과를 나타낼 때 사용 💡 transform 사용 시 해당 요소의 display 속성이 block or inline-block/* x축(가로)으로 20px 이동 */transform: translateX(20px);/* y축(세로)으로 40px 이동 */transform: translateY(40px);/* x축(가로)으로 20px, y축(세로)으로 40px 이동 */transform: translate(20px, 40px);요소의 변화 효과 지정transform: 변환함수1 변환함수2 변환함수3 ... ;transform: 원근법 이동 크기 회전 기울임;2D 변환함수translate(tx, ty)지정한 크기만..

+ 채팅방 로드이미지 중 gif 이미지를 넣을 수 있을까? (해결방안) Next JS gif이미지 넣기 자료 https://sig03.medium.com/nextjs-%EC%97%90%EC%84%9C-gif-%ED%98%B8%EC%B6%9C-%EC%8B%9C-500-error-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EB%AC%B8%EC%A0%9C-37ecaefaec23

MySQL 서버를 실행하기 위해 해당 명령을 수행하였는데 다음과 같은 명령어가 출력되었다. Starting MySQL .... ERROR! The server quit without updating PID file (/opt/homebrew/var/mysql/kimhyesuui-MacBookPro.local.pid). [에러코드] "Starting MySQL .... ERROR! The server quit without updating PID file (/opt/homebrew/var/mysql/kimhyesuui-MacBookPro.local.pid)." 해결방법 For Mac https://stackoverflow.com/questions/4963171/mysql-server-startup-erro..