본문 바로가기

Language

(95)
📘 옵셔널 체이닝(?.) ✅ 옵셔널 체이닝( Optinal Chaining, ?.)객체의 속성이나 메서드에 접근할 때, 해당 값이 null 또는 undefined 라면 에러 대신 undefined를 반환하는 연산자즉, 안전하게 속성에 접근할 수 있게 해주는 문법 이다. const user = { name: "홍길동", profile: { age: 25 } }; // 정상 접근 console.log(user.profile.age); // 25 // 잘못된 접근 (address가 없음) // console.log(user.address.city); // 에러 발생! // 옵셔널 체이닝 사용 console.log(user.address?.city); // undefined 그냥 user.address.city라고 쓰..
📘 SSR (Sever-Side Rendering) ✅ 서버 사이드 렌더링 (SSR) 이란웹 애플리케이션을 서버에서 먼저 HTML을 생성해 클라이언트(브라우저)로 전달하는 방식을 말한다. 쉬운 설명웹 사이트 화면을 서버에서 먼저 만들어서 보내주는 방식 비유 CSR ( 클라이언트 사이드 렌더링)손님이 주문하면 -> 재료(데이터)만 주고 -> 손님이 직접 햄버거(화면)를 조립해야 함처음엔 빈 접시 ( 빈 화면)만 보이고, 다 조립되기 전까진 기다려야함 SSR( 서버 사이드 렌더링 ) 손님이 주문하면 -> 가게(서버)에서 햄버거(완성된 화면)를 만들어서 바로 내줌 손님은 받자마자 먹을 수 있음 ( 브라우저는 바로 화면에 보여줌 ) ✅ 기본 동작 흐름클라이언트 요청 : 사용자가 특정 URL에 접속서버 처리 : 서버가 해당 페이지의 데이터를 불러와서 HTML을 완..
📘React 흐름 ✅ React의 흐름도 (전체 과정)React 앱은 index.html 안의 하나만 존재main.jsx(또는 index.js) 에서ReactDOM.createRoot(document.getElementById('root')).render()로App 컴포넌트를 root에 렌더링✅ 컴포넌트 단위 구조React는 화면을 컴포넌트 (Component)라는 작은 단위로 나눈다.function App() { return ( ) }App -> Header, Main,Footer 처럼 트리 구조로 연결 된다.✅ 데이터(State) 흐름React는 단방향 데이터 흐름을 가진다.부모->자식 으로 props 전달컴포넌트 내부에서 useState 등으로 상태를 ..
📘React 실전 많이 사용되는것들 정리 ✅ 상태관리useState, useRedecer 로컬 상태 관리useContext + Context API 전역 상태 공유Redux / Zustand / Recoil 같은 외부 상태 관리 라이브러리 사용로그인 상태, 다크모드, 사용자 정보 같은 전역 데이터 관리 ✅ 데이터 통신fetch, axios API 호출React Query(TanStack Query) 서버 상태 관리, 캐싱, 자동 리페치Supabase / Firebase 같은 BaaS와 연결게시판 글 목록 불러오기, 무한 스크롤, 로딩/에러 처리 ✅ 라우팅React Router 페이지 이동, 동적 라우팅, URL 파라미터 처리useNavigate, useParams,Outlet 등/post/123 같은 상세 페이지 구현 ✅ 폼 처리react-ho..
📘 실무에서 많이 사용되는 자바스크립트(JS) ✅ 데이터 다루기 (Array & object)배열 메서드const arr = [1,2,3,4,5];arr.map(x=>x * 2); [2,4,6,8,10] // 변환arr.filter(x=>x >2) // [3,4,5] // 조건 걸러내기arr.find(x=>x ===3) 3 조건에 맞는 첫번째arr.some (x=> xarr.every(x=>x>0) //true 모두 조건 맞는지arr.redyce((sum,x)=> sum + x,0) 객체 다루기const user = {name:'홍길동',age:25}const {name, age} = user ; // 구조 분해const newUser = {...user,age:30}; /// 기존 데이터 복사 후 수정 ✅ 비동기 처리(실무 최중요)async fu..
📘 비동기 처리 심화 ✅ 왜 비동기가 중요한가?자바스크립트는 싱글 스레드 언어라서 한 번에 하나의 작업만 처리한다.근데 실제 웹 에서는API 요청 -> 응답 대기파일 업로드사용자 입력 처리애니메이션, 렌더링이런게 동시에 일어나지 않으면 앱이 멈춰버린다.그래서 비동기 처리가 필수 이다. ✅ Promise 기본 & 고급 활용기본 형태const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve("완료!"); // 성공 // reject("에러 발생!"); // 실패 }, 1000);});promise .then(result => console.log(result)) // 성공 시 .catch(error => console.error(e..
📘API ✅ API란?어플리케이션(프로그램)들이 서로 데이터나 기능을 주고받기 위해 정해 놓은 규칙과 인터페이스를 말한다. ✅ 쉬운설명 A프로그램 - B프로그램 이 서로 대화할 때 사용하는 공식 언어 문법'이렇게 요청(Request)하면, 이렇게 응담(response)할게' 라고 약속해둔 통신 규칙 ✅ 예시날씨 앱 -> 기상청 API앱은 '서울 날씨 알려줘' 요청을 보냄(Request)기상청 서버가 날씨 데이터를 보내줌(Response) 카카오 로그인 API내 웹사이트가 카카오에 '이 사용자 로그인 정보 확인해줘' 요청카카오가 사용자 정보(닉네임,이메일 등) 응답✅ 특징표준화된 방식으로 다른 시스템과 통신 가능코드 내부를 다 공개하지 않아도 됨(보안적 이점)프로그램 개발 속도를 빠르게 함(재활용 가능)✅ API ..
📘 JSON.parse() ✅ JSON.parse()란?JSON 문자열을 JavaScript 객체로 변환하는 함수서버에서 받은 데이터가 대부분 문자열(JSON)형태로 오기 떄문에, 이를 실제 JS에서 쓸 수 있는 객체로 바꿔주는 역할을 한다. ✅ 문법JSON.parse(JsonString);인자 : JSON 문자열 (반드시 올바른 JSON 형식이어야 함)반환값 : JavaScript 객체✅ 예제1) 기본 변환const jsonStr = '{"name": "홍길동", "age": 30}'; const obj = JSON.parse(jsonStr); console.log(obj.name); // "홍길동" console.log(obj.age); // 30✅ 예제2) 배열 변환const jsonStr = '[1, 2, 3, 4, 5]..