본문 바로가기

Language/Javascript

(53)
📘 옵셔널 체이닝(?.) ✅ 옵셔널 체이닝( 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라고 쓰..
📘 실무에서 많이 사용되는 자바스크립트(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]..
📘JSON ✅ JSON이란?JavaScript Object Notation의 약자이며, 데이터를 문자열 형식으로 표현하는 규칙이다.사람이 읽기 쉽고, 기계가 파싱(해석)하기 쉽다는 장점이있고, 프로그래밍 언어나 플랫폼에 관계없이 사용 가능하다.✅ 특징텍스트 기반 데이터 형식(사람이 읽기 쉬움)키-값 쌍 (key-value) 구조데이터 교환에 최적화( 특히 서버- 클라이언트 통신 )가볍고 단순함데이터 타입 지원-문자열-숫자-불리언-배열객체-null✅ 예제{ "name": "홍길동", "age": 30, "isStudent": false, "hobbies": ["독서", "게임", "코딩"], "address": { "city": "서울", "zip": "12345" } }✅ JSO..
📘 AJAX ✅ AJAX란?Asynchronous JavaScript And XML의 약자로, 웹 페이지가 전체를 새로고침하지 않고도 서버와 데이터를 주고 받을 수 있게 해주는 기술이다.즉, 페이지 일부만 동적으로 업데이트 할 수 잇도록 하는 방식✅ 주요 특징비동기 통신(Asynchronous)요청을 보내도 웹 페이지가 멈추지 않음 전체 페이지 새로고침 불필요필요한 데이터만 서버에서 받아와서 특정 영역만 갱신 데이터 포맷 다양이름에 XML이 있지만, 현재는 JSON이 훨씬 더 많이 사용 됨✅ 동작 흐름사용자가 이벤트 발생(버튼 클릭 등)JavaScript가 XMLHttpRequest나 fetch() API를 통해 서버에 요청 전송서버가 요청을 처리 후 데이터 반환(주로 JSON)JavaScript가 받은 데이터를 이..
📘JavaScript Slide 복습 ✅ 이미지를 자동으로 넘기거나 버튼으로 넘기는 슬라이드(캐러셀)✅ 1. 기본 구조 만들기 ◀ ▶ 먼저 HTML에서 슬라이드 영역과 이미지들, 그리고 버튼을 만들어야한다. ✅ 2. 스타일 잡기.slider { position: relative; width: 400px; height: 250px; overflow: hidden; } .slides { display: flex; transition: transform 0.5s ease; } .slide { width: 400px; height: 250px; object-fit: cover; } button { position: absolute; top: 50%; tran..