본문 바로가기

전체 글328

[웹개발] 자바스크립트 프레임워크 React와 Vue의 장점과 비교 React와 Vue 비교 리액트는 라이브러리이므로 비교적 자유도가 높은 반면 뷰는 프레임워크이므로 기능이 이미 다 정해져 있다 라이브러리 vs 프레임워크 라이브러리: 사용자가 필요할 때에 가져다 썼다가 뺐다가 할 수 있고 부분적으로 사용이 가능 (리액트) 프레임워크: 부분적 사용이 불가능하고 프레임 워크의 안으로 들어가서 프레임 워크가 지원해주는 문법에 따라서 작성해줘야 제대로 동작 (뷰) 예시 자유도가 높은 React, 정해진 방식대로만 하면 되는 Vue 리액트: 여러가지 방법중 마음에 드는것을 선택해 개발 (자유도가 높음) 뷰: 해당 기능을 개발하는 방법이 정해져있음 (프레임워크 문법을 따라야함) 1. 버튼을 화면에 안보이도록 만들기 리액트: && 연산자 방식, 삼항 연산자 방식 // 1. && 연산.. 2022. 11. 22.
[웹개발] 번들러와 웹팩 번들러(Bundler) 리액트 프로젝트를 시작하기 위해 create-react-app이라는 도구로 필요한 환경을 모두 구축해준다. 이때 웹팩이라는 번들러도 함께 설치가 된다. 번들러란 여러개로 나눠진 파일을 하나로 합쳐주는 도구를 말한다. 리액트에서는 왜 여러개로 나눠진 파일을 하나로 합쳐주는 도구가 필요할까? 리액트에서는 import라는 예약어를 사용해 모듈을 불러온다. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이다. 즉, 브라우저는 import라는 코드를 해석할 수 없다. 리액트로 된 프로젝트를 브라우저가 이해할 수 있으려면 번들러라는 도구를 사용해 불러온 모듈을 모두 합쳐서 하나의 파일을 생성한 후 브라우저에 전송해야한다. 번들러의 종류는 여러개가 있지만 리액트에서는 대부분 웹팩을 사용한다.. 2022. 11. 22.
[웹개발] 프론트앤드 빌드 시스템 (바벨, Node.js, NPM, ESLint, Prettier) 프론트앤드 빌드 시스템 프론트앤드 개발은 여러 컴포넌트를 빌드해 소스코드 파일을 컴퓨터에서 실행할 수 있게 변환한다. 이때 코드를 변환하도록 도와주는 도구가 빌드 시스템이다. 컴파일 (Compile) 사람이 프로그래밍 언어로 작성한 소스코드를 컴퓨터가 이해할 수 있는 바이너리 언어로 작성된 코드로 변경하는 것 (사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업) 컴파일러 (Compiler) 개발자가 작성한 소스코드를 컴퓨터가 이해할 수 있는 코드로 변경해주는 프로그램 빌드 (Build) 소스코드 파일을 소프트웨어로 만드는 과정 (소스코드 파일을 컴퓨터에서 실행할 수 있게 변환하는 과정) 빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다 빌드 시스템 .. 2022. 11. 22.
[자바스크립트] 호이스팅(Hoisting)이란? 자바스크립트는 동기적이다 호이스팅이 된 후 부터 코드가 작성한 순서에 맞춰 순차적으로 실행된다 호이스팅(Hoisting)이란? 자바스크립트 코드에 선언된 함수 및 변수 코드가 실제로 이동하지는 않지만 최상단으로 끌어올린 것처럼 동작하는 것을 호이스팅이라고 한다. 스코프 내부 어디서든 변수 선언(var, let, const)은 최상위에 선언된 것 처럼 행동하는 것을 말하며 호이스팅은 스코프 단위로 일어난다. 호이스팅의 대상 var 변수 선언, 함수 선언만 호이스팅이 되며 할당은 호이스팅이 발생하지 않는다 let/const 변수의 선언도 호이스팅이 일어나지만 TDZ(Temporary Dead Zone)에 영향을 받기 때문에 호이스팅이 발생하지 않는것처럼 보인다 let/const 변수 선언과 함수 표현에서는 .. 2022. 11. 22.
[타입스크립트] 다형성(polymorphism) 제네릭(generic) 클래스(class) 인터페이스(interface) 합치기 다형성: 다른 모양의 코드를 가질 수 있게 해주는 것 (제네릭 사용) 제네릭은 placeholder 타입을 쓸 수 있도록 해줌 (placeholder concrete) 타입스크립트가 placeholder 타입을 concrete 타입으로 바꾸어줌 예제 브라우저에서 쓰는 로컬스토리지 API와 비슷한 API 만들고 타입만 넣어주기 // Storage is reserved word interface SStorage { [key:string]: T } class LocalStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value } remove(key:string){ delete this.storage[ke.. 2022. 11. 20.
[자바스크립트] async & await async & await 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완하기 위해 최근에 나온 자바스크립트의 비동기 처리 문법을 말한다 콜백함수가 여러번 사용되면 콜백 지옥이 발생한다 → 프로미스의 등장 프로미스가 여러번 체이닝(중첩)이 되면 콜백 지옥과 같은 문제점이 발생한다 → async & await을 사용해서 마치 동기적으로 코드가 진행되는 것처럼 사용 함수 앞에 async라는 키워드를 붙여주면 함수 블럭 안에 있는 코드가 자동으로 프로미스를 사용하는 것처럼 변환이 되어진다 async라는 키워드가 붙은 함수내에서만 await을 사용할 수 있다 기본문법 async function 함수명() { await 비동기처리메서드명(); } 비동기로 처리하고 싶은 함수 앞에 async라는 예약어를 붙인다 .. 2022. 11. 20.
[자바스크립트] 프로미스 (프로미스 체이닝, 프로미스 에러 핸들링) 프로미스(Promise)란? 비동기처리에서 흔하게 사용되는 콜백함수는 여러번 중첩될 경우 콜백지옥의 문제점이 생긴다. 프로미스는 콜백을 대신해 비동기 처리에 사용하는 객체다. 예제 새로운 프로미스가 생성될때 (new Promise) 프로미스 안에 있는 콜백함수가 바로 실행된다. const promise = new Promise((resolve, reject) => { // 비동기적으로 실행하고 싶은 코드를 작성 // doing some heavy work (network, read files) console.log('doing something...') }) 프로미스의 2가지 결과값 (성공과 실패) 성공: 정해진 시간에 수행했을 경우 → 성공의 메시지와 함께 처리된 결과값을 전달 실패: 예상치 못한 문제.. 2022. 11. 18.
[자바스크립트] 콜백함수와 콜백지옥 콜백함수(callback function) 콜백함수란 함수의 파라미터로 함수를 넘겨주고 이를 내부에서 호출하는 것 함수가 다른 함수의 입력값(argument)로 전달되서 다른 함수에 의해서 나중에 호출된다 function greeting() { console.log('hello'); } function func(cb) { // 함수 func가 다른 함수 greeting을 파라미터로 받는다 cb(); // 해당 함수 func 내부에서 호출한다 } func(greeting); 콜백의 두가지 종류 1. 동기적 콜백 동기적인 콜백함수인 () => console.log("sync callback") 는 순차적으로 실행된다 function printImmediately(print){ print(); } printI.. 2022. 11. 18.
[자바스크립트] 동기적 코드와 비동기적 코드 동기적 코드와 비동기적 코드 동기적(Synchronous) 코드 어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식 (순차적 코드 진행) 요청을 보낸 후 응답 (결과물)을 받아야지만 다음 코드가 동작된다 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다 장점: 코드가 순차적으로 실행되므로 설계가 간단하고 직관적이다 단점: 요청에 대한 결과가 나올때까지 다음코드는 대기해야한다 // 동기적인 코드 (순차적으로 실행되는 코드) console.log(1); // 1번째 console.log(2); // 2번째 console.log(3); // 3번째 비동기적(Asynchronous) 코드 언제 코드가 실행될지 예측할수 없는것 (비순차적 코드 진.. 2022. 11. 18.
[자바스크립트] 이벤트 관리 방법 (버블링, 캡쳐링, 이벤트 위임) 이벤트란? 웹 브라우저나 사용자가 행하는 어떤 동작 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것 i.e.) 웹 문서에서 키보드의 키를 누르는 것, 브라우저가 웹 페이지를 불러오는 것 * 이벤트 리스너 / 이벤트 핸들러: 어떤 이벤트 발생 시 처리하는 함수 이벤트의 종류 마우스 이벤트: 마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트 키보드 이벤트: 키보드에서 특정 키를 조작할 때 발생하는 이벤트 문서 로딩 이벤트: 서버에서 웹문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여줄 때 발생하는 이벤트 폼 이벤트: 폼 요소에 내용을 입력하면서 발생할 수 있는 이벤트 이벤트 등록 방법 3가지 1. 인라인 방식 (Inline) 이벤트를 HTML 요소의 속성으로 .. 2022. 11. 18.
[자바스크립트] 자바스크립트에서 this란? this란? 자바스크립트에서 키워드 this는 해당 오브젝트를 가리킨다 전역공간 → window 일반 함수 호출시 → window 화살표 함수 호출시 → 상위 스코프 함수가 strict mode일때 → undefined 메소드 호출시 → 메소드를 부른 오브젝트 call, apply, bind → call, apply, bind는 함수의 메소드로서 this를 첫번째 아규먼트와 바꿔치기한다 (함수의 호출방식과 관계없이 this를 지정할 수 있다) 콜백 호출시 → 경우에 따라 다르다 일반적인 함수 호출일때: this는 전역객체 함수 메소드 call, apply, bind를 사용할 경우: this는 바꿔치기 됨 생성자 함수 호출시 → 해당 인스턴스 this의 특징 코드가 작성될때는 this가 어떤값인지 모른다 .. 2022. 11. 18.
[웹개발] 브라우저 저장소 (로컬스토리지, 세션스토리지, 쿠키) 배경설명 브라우저 저장소가 필요한 이유 클라이언트는 서버에게 요청하고 (request), 서버는 클라이언트에게 응답한다 (reponse) 통신이 끝나면 인증에 쓰이는 상태 정보를 유지하지 않는다 계속해서 통신 연결을 하지 않기 때문에 자원낭비가 줄어든다 하지만 통신을 할때마다 새로 서버 요청을 해야되기 때문에 클라이언트가 그때마다 인증을 다시 해주어야한다는 단점이 생긴다 클라이언트와 서버가 통신하지 않고도 인증에 쓰이는 상태 정보를 유지하기 위해 사용하는 저장소가 브라우저 저장소다! → 브라우저 저장소가 있기 때문에 사이트를 불러오는 속도가 빨라지며 네트워크 연결 없이도 사용이 가능하다 브라우저 저장소가 없다면? 웹사이트에서 로그인을해도 페이지를 이동할때마다 로그인을 다시 해줘야한다... 브라우저 저장소.. 2022. 11. 18.
[타입스크립트] 인터페이스란? (인터페이스와 클래스의 차이점) 인터페이스란? 오브젝트의 타입을 설정하는 일종의 오브젝트 설계도 + 추상화 클래스와 같이 표준화된 프로퍼티와 메서드를 갖도록하는 설계도 추상화 클래스 vs 인터페이스 공통점: 클래스의 모양을 결정할 수 있다 (클래스의 프로퍼티와 메서드를 지정) 클래스: 추상화 클래스는 자바스크립트로 변환되며 추상화 클래스를 상속받은 클래스의 프로퍼티와 메소드에 private, protected, public를 지정할 수 있다 인터페이스: 인터페이스는 자바스크립트로 변환되지 않아 파일이 가벼워지며 인터페이스를 상속받은 클래스의 프로퍼티와 메소드에는 public만 지정할 수 있다 추상화 클래스 예제 클래스 Player에서는 User의 모든 메서드를 구현해야한다. abstract class User { constructor(.. 2022. 11. 17.
[타입스크립트] 인터페이스란? (인터페이스와 타입의 차이점) 인터페이스란? 오브젝트의 타입을 설정하는 일종의 오브젝트 설계도 타입 vs 인터페이스 공통점: 오브젝트의 모양을 결정할 수 있다 (오브젝트 타입지정 가능) 타입: 여러 데이터의 타입을 지정할 수 있다 인터페이스: 오직 오브젝트 데이터의 타입만을 지정할 수 있다 타입 예제 type Team = 'red' | 'blue' | 'yellow' type Health = 1 | 5 | 10 type Player = { nickname: string, team: Team, health: Health } const nico: Player = { nickname: 'nico', team: 'yellow', health: 10 } 인터페이스 예제 type Team = 'red' | 'blue' | 'yellow' typ.. 2022. 11. 15.
[타입스크립트] 타입의 종류와 인터페이스 타입의 종류 1. 오브젝트 모양 알려주기 type Player = { nickname: string, healthBar: number } 2. 특정 타입이라고 지정해주기 (concrete type) type Food = string const kimchi:Food = 'delicious' type Friends = Array const kakao:Friends = ['Ryan', 'Muzi', 'Apeach', 'Frodo'] 3. alias(대체명, 별명)를 사용해 타입 지정해주기 type Nickname = string type Health = number type Player = { nickname: Nickname, healthBar: Health } 4. 특정값을 지정 타입을 지정된 옵션으로만 .. 2022. 11. 15.

티스토리툴바