jonbeo 님의 블로그

React를 공부하다 보면 fetch로 JSON 데이터를 가져온다, props로 JSON 넘긴다 이런 말들을 자주 보게 됩니다.처음엔 “그 JSON이라는 게 도대체 뭐지?” 하고 막막하셨을 거예요.이번 포스팅에서는 JSON이 뭔지, 왜 React에서 자주 쓰이는지, 그리고 실제로 어떻게 사용하는지 예제를 통해 하나씩 살펴보겠습니다.✅ JSON이란?**JSON(JavaScript Object Notation)**은 데이터를 주고받을 때 사용하는 가벼운 텍스트 형식입니다.간단하게 말하면, 정보를 담기 위한 약속된 문장 구조예요.{ "name": "홍길동", "age": 28, "isStudent": false} 위처럼 중괄호 {} 안에 "key": value 쌍으로 이루어진 데이터 구조를 JSON이라고..

포토샵으로 작업하다 보면 글자 크기 단위가 pt로 되어 있어서“어? 난 px로 보고 싶은데 왜 이게 포인트지?” 하는 순간이 있죠.특히 웹디자인이나 모바일 UI 작업할 땐 픽셀(px) 단위가 더 익숙하고 정확하니까,단위를 pt에서 px로 바꿔주는 게 훨씬 편해요!✅ pt가 뭐고 px는 뭔가요?pt는 포인트 단위예요. 인쇄 기반 디자인에서 자주 쓰이는 단위죠.px는 픽셀 단위예요. 웹에서는 이게 기본 단위예요.💡 인쇄(포토샵 기본 설정) = pt💡 화면(Web) 작업 = px 🛠 단위를 px로 바꾸는 방법📍 1단계. 환경설정 열기윈도우: 편집(Edit) → 환경설정(Preferences) → 단위 및 눈금자(Units & Rulers)맥: Photoshop → Preferences → Units &..

웹 레이아웃을 만들다 보면 display: flex와 display: grid,둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?둘 다 정말 강력한 CSS 레이아웃 도구지만,방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요항목FlexboxGrid정렬 방식1차원(한 줄 또는 한 열)2차원(행과 열 동시에)사용 목적콘텐츠 흐름대로 정렬정확한 영역 배치배치 기준아이템 순서 중심위치 중심 (그리드 영역 지정)대표 용도메뉴바, 버튼 정렬, 카드 나열 등전체 페이지 레이아웃, 포털형 구성 등 🧭 Flexbox가 잘 어울리는 상황은?Flexbox는 콘텐츠..

1. 디버깅(Debugging)이란?디버깅은 프로그램 속의 오류(Bug)를 찾아 고치는 과정이에요.VS Code는 아주 강력한 디버깅 기능을 갖추고 있어서, 오류 위치를 직접 확인하고 변수 상태도 볼 수 있어요.2. VS Code에서 디버깅 시작하기왼쪽 사이드바의 벌레 아이콘(🐞) 또는 실행 및 디버그 클릭→ 언어에 맞는 디버거가 없으면 VS Code가 자동으로 설치 안내를 해줘요.3. launch.json 파일 설정 (자동 생성 가능)디버깅 환경을 세팅하면 .vscode/launch.json 파일이 만들어져요.(자동으로 생성되기 때문에 초보자는 설정 없이 시작해도 OK!)예시 (JavaScript 디버깅 설정):{ "version": "0.2.0", "configurations": [ { ..

1. 터미널이란?**터미널(Terminal)**은 컴퓨터와 대화하는 방법 중 하나예요.명령어를 직접 입력해서 프로그램을 설치하거나 파일을 관리할 수 있어요.그래픽 버튼 없이도 모든 걸 조작할 수 있는 도구!2. VS Code에서 터미널 여는 방법단축키: Ctrl + (백틱)또는 상단 메뉴에서[터미널 > 새 터미널] 클릭3. 기본 명령어 실습 (Git Bash 기준)✅ 현재 위치 확인pwd ✅ 폴더 안 파일 목록 보기ls ✅ 새 폴더 만들기mkdir test-folder ✅ 폴더 이동cd test-folder ✅ 상위 폴더로 이동cd .. 4. 자주 쓰는 꿀팁Tab 키: 자동완성 기능! 디렉토리 이름 입력 시 매우 유용방향키 ↑↓: 이전에 입력했던 명령어 불러오기clear: 화면 깨끗하게 정리5. 명령어 ..

1. Git 설치 여부 확인먼저 Git이 설치되어 있어야 VS Code에서도 Git을 사용할 수 있어요!VS Code 터미널 열기 (단축키: `Ctrl + ``)아래 명령어 입력git --version 설치되어 있다면 버전 정보가 출력됩니다. 없다면 Git 공식 사이트에서 설치하세요.2. GitHub 계정 만들기 (이미 있다면 생략 가능)https://github.com/ 접속우측 상단 Sign up 클릭이메일, 비밀번호 입력 후 계정 생성3. 로컬 Git 저장소 만들기VS Code에서 만든 웹 프로젝트 폴더 열기터미널에서 다음 명령어 실행git init 3. 변경된 파일을 Git이 추적할 수 있도록 스테이징git add . 4. 커밋 메시지와 함께 첫 커밋git commit -m "처음 ..

공개로 만든 저장소, 비공개로 바꾸고 싶다면 이렇게 하세요!✅ Public과 Private의 차이점 먼저 알아볼까요?구분 Public 저장소 Private 저장소 접근 권한누구나 접근 가능초대된 사람만 접근 가능검색 노출GitHub 검색 및 Google 검색 가능검색에 노출되지 않음오픈소스 공유누구나 포크, 이슈, PR 가능초대한 사람만 협업 가능보안민감 정보 노출 주의 필요민감한 내용 보호에 유리💡 Tip:팀 협업이나 오픈소스를 위한 저장소는 Public이 적합하지만, 개인 프로젝트나 민감한 정보를 담고 있는 경우에는 Private으로 설정하는 게 좋아요.🔁 Public 저장소를 Private으로 바꾸는 방법GitHub에 로그인 후, 비공개로 바꾸고 싶은 저장소로 이동해요.👉 GitHub 접속 ..

1. 새로운 폴더 만들기바탕화면이나 원하는 위치에 새 폴더 생성이름 예: my-first-websiteVS Code 실행 후 [파일 > 폴더 열기] 클릭 → 방금 만든 폴더 선택 2. 새 파일 만들기폴더가 열리면 왼쪽 사이드바에서우클릭 > 새 파일 선택다음 3개의 파일을 만듭니다:index.html style.css script.js 3. HTML 기본 구조 작성index.html 파일에 다음 코드 입력: Hello, VS Code! 눌러보세요 4. CSS로 디자인 추가style.css 파일에 다음 코드 입력:body { font-family: 'Arial'; text-align: center; padding-top: 100px; background-color: #f0f8ff;}h1 ..

✍ 포스팅 본문 요약2025년 5월, 마이크로소프트가 미국 워싱턴주에서 약 2,000명의 직원을 정리해고했습니다.놀라운 건 이 중 약 절반에 해당하는 817명이 소프트웨어 엔지니어였다는 점입니다.해고 사유는 단순한 구조조정이 아닌, AI 도입으로 인한 역할 축소였다는 공식 입장이었습니다.🤖 AI가 코드를 작성하는 시대사티아 나델라 마이크로소프트 CEO는“AI가 일부 프로젝트에서 전체 코드의 약 30%를 작성하고 있다”고 밝혔습니다.실제로 마이크로소프트가 인수한 GitHub에서 제공하는 Copilot은기본적인 코드 작성, 반복 작업, 테스트 자동화 등 다양한 역할을 AI가 직접 처리할 수 있는 수준에 이르렀습니다.📰 해고 상세 내용항목내용전체 해고 인원약 2,000명소프트웨어 엔지니어817명 (약 40..

💡 이런 분께 꼭 필요한 내용이에요!광고 클릭은 많이 나는데 매출은 안 나오는 분광고 성과를 숫자로 정확히 확인하고 싶은 분네이버 스마트스토어 전환 분석이 어려운 초보 사장님!🌀 Step 1. 전환이란? 클릭만으로는 부족해요!광고의 진짜 목표는 ‘클릭’이 아니라 ‘구매’입니다!그래서 우리는 클릭률(CTR)보다 전환률(CVR), 그리고 **ROAS(광고 수익률)**를 함께 봐야 해요. 용어뜻예시CTR클릭률 = 광고를 본 사람 중 몇 명이 클릭했는가1000회 노출 중 50회 클릭 → 5%CVR전환률 = 클릭한 사람 중 몇 명이 구매했는가50회 클릭 중 3명 구매 → 6%ROAS광고수익률 = 광고비 대비 매출10,000원 광고비로 50,000원 매출 → 500%📊 Step 2. 스마트스토어 통계에서 전환..