Unity 개발일지

지금까지 변수, 함수, 스코프, 비동기에 관련 되어 자바스크립트에 대한 기본기를 다루어 봤다. 이제 이 모든 지식을 합쳐 외부 서버로부터 데이터를 가져오는 방법을 알아보며 자바스크립트 기본 문법에 대한 글을 마무리 하려고 한다. 1. Fetch API란?fetch()는 브라우저에서 제공하는 함수로, 서버에 네트워크 요청을 보내고 데이터를 받아올 때 사용한다.요청(Request): 서버에 "이 데이터 줘!"라고 요청한다.응답(Response): 서버로부터 데이터를 받는다.형태: 결과값은 Promise 객체로 반환된다. 그래서 await와 조합이 좋다.2. 서버에서 데이터 가져오기 (실전 패턴)서버에서 데이터를 받아오는 과정은 보통 "데이터 요청 -> 응답 확인 -> JSON 파싱"의 3단계로 이루어진다. ..

개발 환경 설정 Node.js 설치하기들어가며 ..React를 비롯한 대부분의 프론트엔드 도구(Vite, npm 등)는 Node.js 위에서 동작한다. 그래서 본격적인 개발에 앞서 Node.js부터 설치해야 한다.이 글에서는 Node.js가 무엇인지 간단히 짚고, Windows와 macOS 에서설치하는 방법, 그리고 여러 버전을 오가며 쓸 수 있는 버전 관리 도구까지 정리한다.1. Node.js와 npm- Node.js : 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 런타임Vite 개발 서버, 빌드 도구 등이 모두 Node 위에서 돈다.- npm (Node Package Manager) : Node.js를 설치하면 함께 따라오는 패키지 관리자. `npm install` 로 라이브러리를..

콜백지옥에서 탈출하여 비동기 코드를 마치 동기 코드처럼 깔끔하게 짜는법을 배워보자.1. Promise: 비동기의 상태를 약속하다Promise는 비동기 작업이 성공(Resolve)했는지, 아니면 실패(Reject)했는지를 나타내는 '객체'이다.Pending (대기): 작업이 진행 중Fulfilled (성공): 작업 완료, 결과값 반환Rejected (실패): 오류 발생, 이유 반환JavaScript // Promise 생성: 작업이 성공하면 resolve, 실패하면 reject 호출const orderCoffee = new Promise((resolve, reject) => { const isCoffeeReady = true; setTimeout(() => { if (isCoffee..

자바스크립트에서 시간을 다루는 법과, 자바스크립트에서의 병렬작업인 비동기 프로그래밍의 기초를 알아보자.1. Date 객체와 날짜 다루기자바스크립트에서 시간은 Date 객체로 관리한다. 현재 시간, 특정 날짜 생성, 날짜 형식 변환 등을 수행한다.JavaScript // 현재 시간 생성const now = new Date();// 특정 날짜 생성 (년, 월-1, 일, 시, 분, 초)const targetDate = new Date(2026, 4, 24, 17, 40, 0); // 날짜 데이터 가져오기console.log(now.getFullYear()); // 2026console.log(now.getMonth() + 1); // 5 (0부터 시작하므로 +1 필수!)console.log(now.getDat..

자바스크립트에서 데이터를 다루는 가장 강력한 도구인 배열 메서드를 정리해 보자. 단순 반복문보다 훨씬 간결하고 가독성 높은 코드를 작성할 수 있게 해준다. 1. 요소 조작 (기본 다루기)배열의 앞뒤에서 데이터를 넣고 빼거나, 특정 부분을 잘라내는 기초 메서드들이다. JavaScript let arr = [1, 2, 3];arr.push(4); // [1, 2, 3, 4]arr.shift(); // [2, 3, 4]const sliced = arr.slice(0, 2); // [2, 3] (index 0부터 2 전까지)console.log(arr); // [2, 3, 4] 원본은 그대로!2. 탐색 및 순회 (찾기)배열 안에 원하는 데이터가 있는지, 어디에 있는지 확인한다.indexOf / incl..

자바스크립트 성능 최적화와 버그 방지의 핵심인 데이터 타입의 저장 방식과 이를 효율적으로 순회하는 방법을 알아보자. 1. 원시 타입 (Primitive Types)"값(Value) 그 자체가 복사된다"원시 타입은 스택 메모리에 실제 값이 직접 저장된다. 변수를 다른 변수에 할당할 때, 값이 '복사'되어 전달되므로 두 변수는 서로 독립적이다.종류: number, string, boolean, null, undefined, symbol특징: 불변성(Immutable). 한 번 생성된 원시 값은 변하지 않는다.JavaScript let a = 10;let b = a; // 값을 복사해서 전달b = 20;console.log(a); // 10 (b를 바꿔도 a는 그대로!)2. 객체 타입 (Object Types..

주제: 코드의 양을 획기적으로 줄여주는 ES6+ 문법핵심: 객체와 배열에서 필요한 것만 쏙 뽑아 쓰는 법, ... 연산자의 두 얼굴(펼치기 vs 모으기).팁: 리액트의 Props나 State를 다룰 때 필수! 세 가지 핵심 문법을 알아보자. 이 문법들은 데이터를 분해하고, 펼치고, 모으는 데 특화되어 있다. 1. 구조 분해 할당 (Destructuring Assignment)배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.① 배열 구조 분해 할당배열의 인덱스 순서대로 변수에 할당된다.JavaScript const colors = ["red", "green", "blue"];// 기존 방식// const first = colors[0];// const second = c..

1. Truthy & Falsy (참 같은 값, 거짓 같은 값)자바스크립트는 불리언(true, false) 타입이 아니더라도, 조건문 내에서 참이나 거짓으로 평가되는 고유한 규칙이 있다.① Falsy (거짓 같은 값)아래의 값들은 조건문에서 false로 인식된다. 딱 7가지만 기억해보자undefinednull0 (숫자 0)-00n (BigInt)"" (빈 문자열)NaN (Not a Number)② Truthy (참 같은 값)위의 Falsy 값들을 제외한 나머지 모든 값은 true로 평가된다."0" (내용이 있는 문자열)[] (빈 배열){} (빈 객체)Infinity (무한대) JavaScript // Truthy & Falsy 확인 예제function check(value) { if (value) ..

단순히 값을 담는 것을 넘어, 데이터를 자유자재로 가공하는 배열 메서드와 코드를 획기적으로 줄여주는 비구조화 할당을 알아보자1. 객체(Object) 객체는 키(Key)와 값(Value)의 집합이다. C#의 Dictionary나 Class의 필드와 유사하다.① 단축 속성명 (Shorthand Property Names)변수명과 객체의 키 이름이 같다면 생략이 가능하다.JavaScript const name = "SinYoung";const age = 30;// 기존 방식const user1 = { name: name, age: age };// 현대적 방식 (Short)const user2 = { name, age }; ② 계산된 속성명 (Computed Property Names)객체의 키를 동적으로 결정..

Flutter란?Flutter는 구글이 만든 크로스플랫폼 앱 개발 프레임워크이다. 코드 한 벌로 Android와 iOS 앱을 동시에 만들 수 있다는 게 가장 큰 장점이다. 사용 언어는 Dart인데, JavaScript나 Java와 문법이 비슷하다는 점이 있다.내 Mac 칩 종류 확인설치 방법이 칩에 따라 조금 다르므로 먼저 확인화면 왼쪽 상단 애플 로고() → 이 Mac에 관하여 클릭Apple M1 / M2 / M3 라고 나오면 → Apple Silicon (ARM)Intel 이라고 나오면 → Intel Mac Rosetta 2 관련Mac 칩 종류가 뭔가요? 아까 확인 방법 알려드린 것처럼 애플 로고 → 이 Mac에 관하여에서 확인해 보면 된다.Apple Silicon (M1/M2/M3) 이면 Roset..