seongmin08 님의 블로그

보호되어 있는 글입니다.

1. 1xx : 정보성 코드- 요청이 수신되었으며 처리 중임2. 2xx : 성공 상태 코드- 요청이 성공적으로 수신되고 이해되었으며 수락되었음3. 3xx : 리디렉션 상태 코드- 요청을 완료하기 위해 추가 조치를 취해야 함4. 4xx : 클라이언트 에러● 400 Bad Request- 필수 파라미터 누락, JSON 형식 오류 (요청내용이 잘못됐을 때)● 401 Unauthorized- 로그인 안됨, 토큰 만료 (인증이 필요 할 때)● 403- 클라이언트가 콘텐츠에 대한 접근 권한이 없을 때● 404 Not Found- 경로가 틀림 (접근하려는 웹페이지가 존재하지 않을 때) 5. 5xx : 서버 에러● 500 Internal Server Error- 서버 코드 터짐 (NullPointerExceptio..

ESM이란?: javascript 언어 자체에 포함된 공식 모듈 시스템.import / export 문법을 사용해 파일 간 의존성을 정적으로 선언하는 방식표준(ECMAScript)브라우저 + Node.js 공용정적 분석 가능CJS란?: Node.js가 초기에 채택한 모듈 시스템require / module.exports를 사용해 런타임에 모듈을 불러오는 방식 Node.js 전용에서 시작오래된 생태계동적 로딩 중심모듈 시스템이 왜 필요한가?- 파일이 많아질수록 전역 오염 발생- 의존성 관계 추적 불가- 유지보수 비용 폭증 모듈 시스템은 파일 간 경계를 명확히 하고 의존성을 드러내기 위해 존재 ESM을 사용하는 이유빌드 단계에서 의존성 분석 가능Tree Shaking 가능 (사용 안 하는 코드 제거)브라우저..

IntersectionObserver개념: 특정 DOM 요소가 화면(Viewport) 또는 특정 컨테이너와 교차(보이기 시작 / 사라짐)하는 시점을 비동기적으로 감지하는 브라우저 API웹사이트 ex) 네이버 웹툰, Instagram, 쿠팡사용하는 이유?● IntersectionObserver 없이 구현 할 때window.addEventListener("scroll", () => { const rect = target.getBoundingClientRect(); if (rect.top - 스크롤 시 수십~수백번 호출- 매번 레이아웃 계산 발생- 모바일에서 프레임 드랍 ● IntersectionObserver를 사용 하게 되면const observer = new IntersectionObserver( ..

Generator개념: 웹 렌더링 시 한번에 모든 걸 처리하지 않고 조금씩 나눠서 처리하는 방법 페이지 전체를 다 만들 때까지 기다리게 하지 않고 보여줄 수 있는 것을 먼저 보여주기 위해 사용한다. 웹사이트 ex) 관리자 페이지, 대시보드사용하는 이유?● Generator 없이 한번에 로딩 할 때 문제function renderPage() { renderHeader(); renderProductList(); // 수백 개 DOM renderFooter();}renderPage();- 모든 DOM 생성이 한번에 실행- 메인 스레드 점유- 사용자 화면은 하얀 화면에서 멈춤- 특히 모바일에서 체감 속도 급락 ● Generator 사용하게 되면//무엇을 -> 어떤 순서로 -> 어디서 멈출지function*..

객체 지향 프로그래밍(OOP)개념 : 현실 세계의 개념을 코드 구조로 옮겨, 복잡한 시스템을 관리하기 쉽게 만드는 것1. 캡슐화2. 상속3. 다형성4. 추상화 ● 캡슐화더보기설명: 데이터(변수)와 그 데이터를 다루는 로직(메서드)을 하나로 묶고 외부에서 직접 접근하지 못하게 보호하는 설계 방식 주로 쓰이는 기능 - 로그인 상태, 잔액, 토큰 값 웹 코드 예시 (적용 전)const user = { password: "1234"};function login(input) { if (user.password === input) { console.log("Login success"); }}적용 전 문제- password가 외부에서 직접 접근 가능- 어디서든 값 변경 가능 -> 보안, 추적 불가 웹 ..

1. 개발 목표React Native 앱에서 사용자가 업로드한 배경 이미지를 가로 스크롤 형태의 썸네일 카드로 보여주는 기능을 구현하려고 했다.이미지는 AWS S3에 저장되어 있으며, 백엔드에서 URL을 내려받아 프론트에서 컴포넌트로 표시하는 구조다.2. 문제 발생: 이미지가 로드되지 않음기능 구현 후 테스트를 진행했을 때, 백엔드에서 받은 S3 이미지 URL로는 테스트 화면에서는 정상 표시되는데,정작 BackgroundList 컴포넌트 내 썸네일에서는 이미지가 보이지 않는 현상이 발생했다. 그러나 같은 URL을 **단독 테스트 화면(ImageTestScreen)**에서 넣어 로드하면정상적으로 선명하게 이미지가 나타났다.→ 결론문제는 **URL(백엔드/S3/CORS)**이 아니라 BackgroundL..

🎯 mac (React Native) Xcode 환경세팅 쉽게하기 (따라만 하세요!)React Native로 iOS 앱을 개발하려면 macOS, Xcode, CocoaPods, React Native CLI 환경이 모두 올바르게 설치되어 있어야 합니다.처음 세팅할 때 가장 많이 겪는 문제가 Xcode 설치 미완료, CocoaPods 설치 실패, pod 명령어 인식 안 됨 같은 부분이에요.이 글에서는 초보자도 완전히 따라 할 수 있는 환경세팅 전체 과정을 정리합니다.미래의 나도 다시 읽고 바로 따라 할 수 있도록 아주 꼼꼼하게 설명합니다.📌 목차Xcode란?1-1. Xcode 다운로드(App Store에서 설치)React Native 프로젝트 생성(VS Code)CocoaPods / Pod란? 개념 쉽..

💡 들어가며우리는 사용자의 현재 위치를 받아서 외부의 **날씨 API(OpenWeather 등)**에 전달한 뒤,반환된 온도·기상 상태·예보 정보 등을 화면에 띄울 수 있다.오늘은 날씨 API 연동을 통해 각 날씨 정보를 가져와 앱 내 띄워 보도록 한다.🌍 1. 날씨 API란?앱이나 웹에서 현재 날씨를 표시하려면 기상 정보를 얻어야 한다.이때 대부분은 기상청 API 또는 글로벌 날씨 API를 사용해야 하는데이때 가장 많이 사용하는 API는 OpenWeather API이다.☁️ 2. OpenWeather API 종류 쉽게 이해하기API 종류설명 Current Weather API지금 이 순간의 날씨무료5-Day / 3-Hour Forecast5일 동안 3시간 간격 예보무료Air Pollution API..

💡 1. React의 작동 원리React는 웹 브라우저에서 동작하는 자바스크립트 기반 UI 라이브러리즉, 브라우저가 존재하고, HTML/CSS/JS 환경 안에서 컴포넌트를 렌더링함.⚙️ 작동 구조브라우저 DOM(Document Object Model)React는 HTML 문서의 구조를 이해하고 조작하기 위해 브라우저가 제공하는 DOM을 사용 한다.Virtual DOM (가상 DOM)React는 실제 DOM에 직접 접근하지 않고 가상의 복제본(Virtual DOM)을 메모리 안에서 생성 한다.이 가상 DOM이 변경되면 React가 실제 DOM과 비교(Diffing) 후 바뀐 부분만 효율적으로 업데이트 한다.렌더링 과정 예시→ React는 이 요소를 HTML의 태그로 변환하여 브라우저에 렌더링 한다fu..