creamymood의 개발 공부 발자취 💭

URL은 웹상의 자원(Resource)의 위치를 지정하는 표준화된 방법이며, 프론트엔드 개발에서는 API 호출, 라우팅, 사용자 세션 관리 등에 핵심적으로 사용됩니다.🌐 URL의 기본 구조URL은 여러 구성 요소로 나뉘며, 가장 일반적인 형태는 다음과 같습니다.Protocolhttps:웹 자원에 접근하는 데 사용되는 규칙(통신 규약)입니다.Hostnamewww.example.com자원이 호스팅된 서버의 이름입니다.Port:8080서버 내에서 특정 서비스(프로세스)를 식별하는 번호입니다. HTTP는 기본적으로 80, HTTPS는 443을 사용하므로 생략되는 경우가 많습니다.Pathname/users/detail서버에서 자원의 정확한 경로(위치)를 나타냅니다.Search (Query String)?id=1..

동생네 회사에서 프론트엔드 개발자 구인을 하고 있는데, 긴장감을 늦추지 말고 사이드 프로젝트를 다시 진행해보면 좋을 것 같아서 여럿 프론트엔드 포트폴리오를 검색해보며 다시 공부 스타튜 그 중 웹소켓을 활용한 포폴이 눈에 띄었는데 ••어떤건지 공부해보고 나도 내 프로젝트에 적용해볼 수 있도록 개념 공부해보기웹소켓의 등장 배경 초기의 인터넷 통신 방식은 주로 HTTP 를 이용한 클라이언트(요청) - 서버(응답) 모델을 통해 진행되었습니다.즉, 클라이언트가 서버에 요청(Request)을 보내고, 서버가 이에 응답(Response)하는 통신 방식을 따릅니다.현재 가장 많이 쓰는 기술중 하나이며 대부분의 작업에서는 큰 문제가 없어 보입니다.하지만, 실시간으로 데이터를 주고받는 데에는 한계점이 발생하게 됩니다. H..

요즘,, 자바스크립트를 다시 복습중인데반가운 for, while문을 다시 만났댜 프로젝트 하며 거의 쓸 일 없던 친구들인데,,왜 거의 안썼을까,.,? 궁금해졌다 -> 이유는 jsx 안에서는 값만 넣을 수 있지, 문(statement)를 쓸 수 없기 때문에주로 map을 돌려야 했던 것! (map은 새로운 배열을 반환하는 값)! for나 while도 뭔가 반복 ,, 반복 하며 값을 만들어내는 것 같지만 그건 아님 더보기겉으로 보기엔 for나 while도 뭔가를 “반복해서 결과를 만들어내는 것처럼” 느껴지지만, js 문법상 차이가 있다.- for / while → 문(statement)“반복한다”는 동작만 있을 뿐, 최종적으로 값 자체를 반환하지 않음그래서 이렇게 하면 에러 나옴. 왜냐면 for 자체는 “값..

1. 웹사이트에 이미지 넣는 방법은 크게 두 가지 🐰URL(주소)로 접근하는 방법그냥 “이 이미지 여기 있어!” 하고 경로를 알려주는 방식예:코드 안에서 가져와서 쓰는 방법코드에서 직접 import 해서 변수처럼 쓰는 방식예:import logo from "@/assets/logo.png"; 2. Next.js에서 폴더 구분Next.js는 이 두 방식을 나누기 위해 두 공간을 준비해둠📂 public/그냥 URL로 접근하는 공간네가 넣은 그대로 서버에서 제공됨→ "주소만 알면 가져다 쓸 수 있는 이미지 창고"📂 src/ (예: src/assets/)코드에 포함되는 공간여기 있는 파일을 쓰려면 import 해야 함Next.js(Webpack)가 최적화해서 번들에 포함시킴→ "코드랑 같이 묶여서 관리되..

요즘 넥스트 공부할 겸 포폴용 사이트를 next로 만들고 있는데..서버가 따로 필요없고, 내 이력들은 하드코딩해야하나..? 싶었다하드 코딩 해도 되고, 아래와 같은 방법들이 있다고 지피티가 알려줌..! 포트폴리오 사이트에서는 실시간 서버 데이터가 필요하지 않기 때문에, 보통은 이렇게 처리한다 1. 하드코딩 (가장 흔함)자기소개, 경력, 기술스택 → 그냥 about.js나 data/about.js에 문자열로 작성수정할 일이 있을 때 직접 코드 열고 고치면 됨가장 간단하고 빠른 방법// data/about.jsconst about = { name: "Jane", title: "Frontend Developer", description: "사용자 경험을 중시하는 프론트엔드 개발자입니다. React와 ..

지난번 e commerce 프로젝트를 진행할 때 리액트 타입스크립트 환경이었는데멘토님이 넥스트로 하는게 어떻냐고 조언해주셨는데,, 이유는 SEO 때문이었는데, next가 SEO에 최적화 되어 있기 때문이다 ! SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트가 구글 같은 검색엔진에 더 잘 노출되도록 최적화하는 과정 으로써쉽게 말하면, 사람들이 내 사이트를 검색할 때 더 위쪽에 뜨게 해주는 것 🔑 왜 React는 SEO에 불리하고, Next.js는 유리할까?React (CRA 기준)기본적으로 **CSR(클라이언트 사이드 렌더링)**처음 접속할 때 서버에서 내려주는 건 같은 빈 HTML이고, 실제 콘텐츠는 자바스크립트가 실행된 후에야 보이는데검색엔진 크롤러가 이 시점..

리액트에서 하던 대로 태그를 만들어서 이미지를 넣었더니 오류가 자꾸 떴다next에서는 next가 제공하는 Image를 사용하라고 하더라 .. ? (하면 좋다고 하더라.. !) 실무적으로 어떤 방법으로 이미지를 넣는지 한번 공부해보기 👩🏻‍💻1. Next.js에서 이미지를 넣는 방법 Next.js는 기본적으로 두 가지 방식이 있다.(1) 기존 HTML 태그 쓰기public 폴더에 있는 이미지를 그대로 가져와서 보여줄 수 있다.(예: /public/logo.png → )장점: 단순하고 React처럼 익숙단점: **최적화(자동 리사이즈, lazy loading, webp 변환)**가 안 돼. 즉, 성능 면에서 손해... (2) Next.js에서 제공하는 컴포넌트 쓰기import Image from ..

15버전으로 현재 공부중인데, 13버전과의 대표적인 큰 차이는* app 라우팅이 표준이 되었다. *👩🏻‍💻 next.js는 리액트랑 다르게, 라우팅 시 폴더구조로 라우팅한다!이 때, 폴더구조로 페이지 url 주소를 만들어주는거고link로써 이동해주는 역할이다폴더 구조 (app/about/page.tsx) → 👉 /about 같은 URL 경로를 자동으로 만들어 줌Link 컴포넌트 → 👉 그 경로로 이동할 때, 새로고침 없이 빠르고 부드럽게 이동시켜 줌즉, 폴더 구조 = 주소 생성기 Link = 주소 이동 도우미 예를 들어, app/about/page.tsx 파일을 만들면 URL /about이 생기고, 헤더에서 이렇게 연결한다.import Link from "next/link";About폴더 구조 ..

SEO 최적화에 강점이 있는 Next.js좀 더 최적화를 하려면 시맨틱 태그를 적절히 사용해주면 좀 더 SEO에 친화적이다. 용도: 페이지나 섹션의 상단 영역, 주로 사이트 로고, 내비게이션 메뉴, 주요 타이틀 포함.실무 예시: 페이지 전체의 헤더를 layout.tsx에 넣고, 각 페이지에서는 필요 없으면 생략 가능. 용도: 내비게이션 링크 모음.실무 예시: Home About Projects 안이나 안에도 들어갈 수 있음. 용도: 페이지의 핵심 콘텐츠. SEO에서 가장 중요한 영역.규칙: 페이지마다 1개만 사용.실무 예시: 용도: 주제별 콘텐츠 블록 단위 구분.실무 예시: Projects Testimonials 각 섹션마다 h2나 aria-label을 붙여서 접근성을 강화..

바이럴 테스트를 마치고 유저가 내 결과를 이미지로 저장 하고 싶다면 ?! 그 때 사용할 수 있는 기능 구현 해보기 준비물 : 라이브러리 html2canvas, useRef한 줄 원리 요약html2canvas는 웹페이지에 보이는 내용을 그림처럼 똑같이 따라 그린 다음, 그 그림을 이미지 파일로 만들어 저장하는 방식. 좀 더 자세한 설명html2canvas는 웹페이지의 복잡한 HTML과 CSS 코드를 직접 이미지로 변환하는 것이 아니라, HTML 요소를 '그림 재료'로 보고 ****라는 빈 종이 위에 똑같이 따라 그립니다. 마치 눈으로 보고 있는 그림을 손으로 옮겨 그리는 것과 비슷하다. 그렇게 ****에 다 그려진 그림을 컴퓨터가 이해할 수 있는 PNG나 JPEG와 같은 이미지 파일로 변환하여 저장하는 ..