JavaScript Basics. 08. 자바스크립트 API 활용 및 그림판 프로그램 만들기

API 활용 클라이언트 측 고유 기술 요소 웹브라우저에서 동작하는 자바스크립트를 클라이언트 측 자바스크립트라 함 클라이언트 측 자바스크립트 구성 ECMAScript가 규정한 코어 언어와 웹 브라우저의 API(Application Program Interface) 웹 브라우저의 주요 API window 인터페이스 자바스크립트로 브라우저 및 창을 제어하는 기능 제공 DOM 자바스크립트 HTML 문서의 요소를 제어하는 기능 제공 XMLHttpRequest 서버와 비동기로 통신하는 기능 제공 서버 측 자바스크립트의 고유 기술 요소 웹 서버에서 동작하는 자바스크립트 웹 서버를 구현하는데 Perl, PHP, Python, Ruby 등의 프로그래밍 언어를 이용 ...

June 9, 2025

JavaScript Basics. 07. 자바스크립트 예외처리 및 이벤트 처리

예외 처리 예외 → 실행에 문제가 발생하면 자동 중단됨 예외 처리 → 오류에 대처할 수 있게 하는 것 예외와 기본 예외 처리 TypeError 기본 예외 처리 사전에 해당 데이터가 undefined인지 조건문으로 확인 고급 예외 처리 try, catch, finally 구문 try { // 예외 발생 } catch (exception) { // 예외 처리 } finally { // 무조건 실행 } catch구문, finally구문 생략 가능 예외 객체 예외가 발생하면 어떤 예외가 발생했는지 정보를 전달함, catch 구문의 괄호 안의 변수 ...

June 9, 2025

Call by reference와 Call by pointer의 차이

Call by reference와 call by pointer는 모두 호출자가 가진 객체를 함수 안에서 변경할 수 있어 비슷해 보인다. 하지만 C++ 언어에서 파라미터가 가지는 의미와 사용할 수 있는 연산은 다르다. Pointer를 값으로 전달하기 포인터 파라미터는 주소를 저장한 포인터 객체를 값으로 전달받는다. 함수는 복사된 포인터를 역참조해 호출자의 객체를 변경할 수 있다. void updateByPointer(int* value) { if (value != nullptr) { *value = 10; } } int number = 0; updateByPointer(&number); 포인터 자체는 복사본이므로 함수 안에서 다른 주소를 대입해도 호출자가 가진 포인터 변수는 바뀌지 않는다. ...

June 7, 2025

JavaScript Basics. 06. 브라우저 및 문서 객체

브라우저 객체 모델 웹 브라우저와 관련된 객체의 집합 대표적인 브라우저 객체 모델 window, location, navigator, history, screen, document… window 객체 브라우저 기반 자바스크립트의 최상위 객체 alert(), prompt()함수 모두 window 객체의 메소드 open(URL, name, features, replace)메소드를 통해서 window 객체 생성 가능 URL: 열고자 하는 HTML 페이지의 URL name: 윈도우 간 통신하는 데 사용하는 윈도우 이름 features: 윈도우 출력 모양을 지정하는 옵션 height: 새 윈도우의 높이 width: 새 윈도우의 너비 replace: URL이 새로운 것인가, 기존의 문서를 대체할 것인가를 나타내는 부울리언 값 window 객체는 자신의 형태와 위치를 변경할 수 있도록 메소드 제공 moveBy(x, y): 윈도우의 위치를 상대적으로 이동합니다. moveTo(x, y): 윈도우의 위치를 절대적으로 이동합니다. resizeBy(x, y): 윈도우의 크기를 상대적으로 지정합니다. resizeTo(x, y): 윈도우의 크기를 절대적으로 지정합니다. close(): 윈도우를 닫습니다. screen 객체 웹 브라우저의 화면이 아닌 운영체제 화면의 속성을 가치는 객체 ...

June 6, 2025

SniffMEET. Xcode 프로젝트 파일 정리하기

작업 내역 Xcode에서 프로젝트 파일 관련 경고가 많이 떠서 정리했다. 작업 내역 null 파일 제거 320043702CDC9A0D00D08B6D /* (null) in Sources */ = {isa = PBXBuildFile; }; 320043722CDC9E5F00D08B6D /* (null) in Sources */ = {isa = PBXBuildFile; }; 320043762CDCA18E00D08B6D /* (null) in Sources */ = {isa = PBXBuildFile; }; 320043782CDCA49100D08B6D /* (null) in Sources */ = {isa = PBXBuildFile; }; 3200437C2CDCA6F300D08B6D /* (null) in Sources */ = {isa = PBXBuildFile; }; 이전에 있었던 구조 변경이나, git 충돌/머지 등 다양한 이유로 프로젝트 파일 안에 (null) 파일을 참조하는 라인이 많이 있었다. ...

June 5, 2025

JavaScript Basics. 05. 자바스크립트 내장 객체

객체 배열 기본 형태 let array = ['사과', '바나나', '망고', '딸기']; array[0] // '사과' array[1] // '바나나' 배열은 요소에 접근할 때 인덱스를 사용한다. 객체 기본 배열과 다르게 키를 통해서 접근하게 된다. 객체 선언 let product = { 제품명: '7D 건조 망고', 유형: '당절임', 원산지: '필리핀' }; console.log(product); // {제품명: '7D 건조 망고', 유형: '당절임', 원산지: '필리핀'} 객체 접근 product['제품명'] // '7D 건조 망고' product['유형'] // 당절임 product['원산지'] // 필리핀 product.제품명 // '7D 건조 망고' product.유형 // '당절임' product.원산지 // '필리핀' 객체와 반복문 for in 반복문을 사용해 객체에 반복문을 적용 let object = { name: '바나나', price: 1200 }; for (let key in object) { console.log(`${key}: ${object[key]}`); } 메소드 객체의 속성 중 자료형이 함수인 속성 ...

June 3, 2025

JavaScript Basics. 04. 자바스크립트 함수

함수 생성 방법 익명 함수 이름을 붙이지 않고 함수 생성 함수를 호출하면 함수 내부의 코드 덩어리가 모두 실행 let helloWorld = function() { console.log("Hello, World!"); ; helloWorld(); // 함수 호출 console.log(helloWorld); // 함수 자체를 호출 // Hello, World! // f () { // console.log("Hello, World!"); // } 선언적 함수 이름을 붙여 함수를 생성 function helloWorld() { console.log("Hello, World!"); } helloWorld(); // 함수 호출 console.log(helloWorld); // 함수 자체를 호출 // Hello, World! // f () { // console.log("Hello, World!"); // } 화살표 함수 하나의 표현식을 리턴하는 함수를 만들 때는 중괄호 생략 가능 ...

June 2, 2025

JavaScript Basics. 03. 자바스크립트 사용자 정의 자료형 활용

조건문 if 조건문 bool 표현식이 true이면 문장을 실행, false이면 문장을 무시 let input = 32; if (input % 2 == 0) { console.log("짝수입니다!"); } if (input % 2 == 1) { console.log("홀수입니다!"); } let date = new Date(); if (date.getHours() < 12) { console.log("오전입니다."); } if (12 <= date.getHours()) { console.log("오후입니다."); } if else 조건문 조건이 합당하지 않은 경우의 표현식도 포함하는 조건문 let input = 32; if (input % 2 == 0) { console.log("짝수입니다!"); } else { console.log("홀수입니다!"); } let date = new Date(); if (date.getHours() < 12) { console.log("오전입니다."); } else { console.log("오후입니다."); } 중첩 조건문 조건문이 중첩된 형태 let date = new Date(); let hours = date.getHours(); if (hours < 11) { console.log("아침 먹을 시간입니다."); } else { if (hours < 15) { console.log("점심 먹을 시간입니다."); } else { console.log("저녁 먹을 시간입니다."); } } if else if 조건문 중복되지 않는 세 가지 이상의 조건을 구분할 때 사용 ...

June 1, 2025

JavaScript Basics. 02. 연산자와 명령문

기본 명령어 표현식 문장 표현식이 하나 이상 모일 경우, 마지막에 종결 의미로 세미콜론(;) 프로그램 문장이 모이면 프로그램이 됨 문장을 작성하고, 다음 줄에 문장을 작성하면 앞 문장 끝에 세미콜론이 없어도 자바스크립트 엔진이 자동으로 세미콜론 추가 자바스크립트 엔진이 세미콜론을 생략한 줄이 다음 줄과 이어지고 있다고 판단하면? // 세미콜론을 안붙이면 c = a + b (x + y).toString() // 이렇게 해석될 수 있다 c = a + b(x + y).toString() 예악어 자바스크립트 문법을 규정짓기 위해 자바스크립트 언어 사양에서 사용하는 특수한 키워드는 식별자로 사용하지 않는 편이 좋다. ...

June 1, 2025

Swift. C부터 시작하는 메소드 디스패치

Introduction 메소드 호출이란 과연 무엇일까? 우리가 평소에 사용하는 메소드 호출은 내부적으로 어떻게 동작하는지 궁금해진 적이 있다. C++로 PS를 풀 때 가끔 함수 포인터를 써야 하는 경우가 생기는데, Swift에서 클로저를 이용하는 것과 비슷하지만 주변 값을 캡처할 수 없다는 특징이 있다. 함수 포인터는 C에도 존재하는 개념이므로, 다음과 같이 생각이 뻗어나갔다. 함수 포인터와 C 스타일 스트럭처를 사용하면 C언어에서도 OOP 스타일의 메소드가 구현 가능할 것 같다. 생각이 계속 확장되다 보니 실제 OOP 언어의 클래스 구현도 이런 방식으로 되어있지 않을까? 라는 생각에 도달했고, 메소드 디스패치를 포함해서 여러 개념들을 이어서 생각해볼 수 있었다. ...

May 31, 2025