본문 바로가기

All posts123

[CS] 컴파일러(Compiler)와 인터프리터(Interpreter) ✨ 컴파일러와 인터프리터: 둘 다 고급 언어 (개발자가 작성한 source code)를 기계가 이해할 수 있는 언어(machine code)로 번역해주는 프로그램이다. 고급 언어란? 사람이 이해할 수 있는 언어이다 (C, python 등 대부분의 프로그래밍 언어) ✨ 컴파일러 vs 인터프리터 그렇다면 무엇이 다른가? 컴파일러: 프로그램 전체를 스캔한 뒤 한꺼번에 기계어로 번역한다. 스캔이 완료될 때까지 에러 메세지를 표시하지 않기 때문에 디버깅이 어렵다. 컴파일이 완료된 이후의 프로그램 실행 속도가 빠르다는 장점이 있다. 중간 언어(Intermidiate code)를 생성하기 때문에 더 많은 메모리가 필요하다. (중간 언어란? 컴파일러가 원시 언어로 된 프로그램을 목적 코드로 번역하는 과정에서 생성되는 .. 2021. 5. 27.
[Javascript] Fetch API ✨ Fetch API 란? 원격 API를 호출할 수 있도록 하는 함수이며, 전달인자로 url 과 options 를 받는다. url 에는 API 주소를 입력하고, options 에는 request 내용을 세부적으로 추가한다. let url = 'http://something.com' let options = { method: 'POST', body: JSON.stringify({ username:"아이스", text:"아메리카노" }), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } } fetch(url, options) .then((response) => console.log("response:", respons.. 2021. 5. 27.
[Javascript] Async 함수와 Await ✨ Async 함수란? Promise 를 조금 더 편리하게 사용할 수 있는 함수이다. 함수 선언 앞에 async 키워드를 붙여서 사용할 수 있으며, 해당 함수는 항상 Promise 를 반환한다. 또한, return 값이 Promise 가 아니더라도 Resolved Promise 로 해당 값을 감싸서 반환한다. async function Callback(){ // some code here } ✨ Await 이란? Async 함수 내부에서만 호출 가능한 키워드이다. Promise 가 처리될 때까지 함수 실행을 기다린 후에 결과를 반환하도록 한다. 프라미스가 처리되길 기다리는 동안에 엔진이 다른 일을 할 수 있도록 한다. async function f() { let promise = new Promise((.. 2021. 5. 27.
[Javascript] Promise (프로미스) ✨ Promise 란? 향후 사용하게 될 비동기 연산의 결과값을 처리하도록 도와주는 JS 객체이다. 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있다. 예제) const testing = new Promise((resolve, reject) => { if (something) resolve(something) else reject(error message) }) testing .then(() => return something2) .catch(() => return error) .finally(() => return final) ✨ Promise 의 3가지 상태: Fulfilled: 연산이 성공적으로 완료된 상태이다. Rejected: 연산이 실패한 상태이다. Pending: Resolve 나 Re.. 2021. 5. 27.
[Javascript] 비동기, 동기 함수 (Asynchronous, Synchronous) 란? ✨ Synchronous vs Asynchronous 동기식: 코드의 execution 이 요청과 동시에 일어나며, 순차적으로 실행된다. 비동기식: 코드의 execution 이 요청과 동시에 일어나지 않으며, 병렬적으로 실행된다. 예시) 작업 목록: 1. 화면에 영상 목록을 띄워라 2. 첫 번째 영상을 틀어라 3. 하단에 추천 영상 목록을 띄워라 동기식: 1 실행 -> 2 실행 -> 영상 정보 요청 -> 영상 정보 수신 -> 영상 출력 -> 3 실행 비동기식: 1 실행 -> 2 실행 -> 3 실행 |_ 영상 정보 요청 -> 영상 정보 수신 -> 영상 출력 동기식 방법을 따르면 첫 번째 영상의 데이터가 모두 들어오고, 끝까지 재생되기 전까지는 3을 실행할 수 없다. 비동기식 방법을 따를 경우, 2가 실행되.. 2021. 5. 27.
[React] React 의 생명주기(Life Cycle) 란? ✨ Life Cycle 이란? 컴포넌트가 브라우저상에 나타나고(Mount), 업데이트 되고(Update), 사라지는 일련의 과정을 칭한다. 이러한 과정에서 호출되는 메서드를 Life Cycle Method 라고 부르며, 클래스형 컴포넌트에서만 사용할 수 있다. (함수형 컴포넌트는 React 16.8 버전부터 도입되었으며, 현재는 useState 나 useEffect로 더욱 많이 활용된다) 각 단계별로 호출되는 메서드의 순서와 종류가 다르다. ✨ 1. Mount : DOM 에 엘리먼트를 넣는 작업 constructor: 컴포넌트 클래스의 생성자 함수이자, 컴포넌트가 생성될 때 호출되는 함수이다. State와 다른 값들의 초기값을 지정할 때 사용한다. 또한, props 를 매개변수로 받고, super(pro.. 2021. 5. 27.
[Javascript] Class ✨ Class 란? 객체를 생성하기 위한 템플릿이다. ES6부터는 class 키워드로 생성할 수 있다. class Student{ constructor(name, age, major){ // constructor(생성자) 함수, 그리고 instance 의 properties(attributes) //instance 속성 정의 this.name = name; this.age = age; this.major = major; // this = 생성되는 인스턴스 } } Class 의 특징: - 함수형 Class 는 호이스팅이 일어나지만, 선언형 Class 는 호이스팅이 일어나지 않는다. - 클래스 안에는 하나의 constructor 메서드만 존재할 수 있으며, 여러 개의 constructor 메서드가 있을 경우.. 2021. 5. 13.
[Network] 캐싱 (Caching), 캐시 (Cache) ✨ 캐시(Cache)란? 컴퓨터의 성능을 향상시키기 위해 사용되는 메모리이다. ✨ Caching(캐싱)이란? 캐싱: 어떤 것을 나중에 유용하게 사용하기 위해 저장하는 것이다. 브라우저나 웹에서는 프로그램과 웹사이트의 정적인 자산을 저장하는 것이다. (정적 자산: 이미지, HTML, CSS, JAVASCRIPT) 즉, 이전에 이미 가져왔던 리소스들을 복사하여 저장해놓고 요청 시에 재사용하는 것이다. 웹과 앱의 성능을 향상하며, (캐시는 원본 리소스보다 클라이언트 사이드에 가까이 있으므로) 웹의 반응 속도를 높인다. ✨ Cache 의 종류 사설 (Private) 한 명의 사용자만 사용하는 캐시이다. 사설 브라우저 캐시는 사용자에 의해 HTTP로부터 다운로드한 모든 문서들을 가지고 있다. 이는 오프라인 브라우.. 2021. 5. 13.
[CS] 라이브러리 & 프레임워크 ✨ Library 란? 프로그램을 개발하는데 필요한 여러 기능을 활용할 수 있도록 묶어놓은 함수나 기능의 집합이다. 자주 활용하거나 필요한 기능을 편리하게 사용할 수 있도록 해준다. 제어권이 개발자에게 주어진다. 예 : JS 의 React 와 jQuery, Python 의 numpy Library 와 Module 의 차이는? Module 은 함수와 클래스, 변수가 스크립트로 이루어져어 있는 하나의 파일이자 객체. import 하여 사용할 수 있다. Library 는 module 의 집합체로 불리기도 하나, 그 범위가 다양하여 개발에서는 같은 개념으로 사용되곤 한다. ✨ Framework 란? 프로그램을 개발하기 위한 구조를 제공하는 개발 환경이다. (& 그 자체로 Application 이다.) 자주 사용.. 2021. 5. 13.

티스토리툴바