본문 바로가기

Frontend Study - 2

 (94)
Typescript : 복습정리 - 1 (타입스크립트의 설치, any와 unknown의 차이, Narrowing, Literal Type, Union Type..) 자바스크립트는 동적언어이다. 자유도가 높은 언어이며 타입이 렌더링 되면서 정해진다. 이러한 점은 규모가 큰 프로젝트가 될 수록 단점으로 작용한다. 유지보수에 어려움을 겪는다. 타입을 엄격하게 동적->정적으로 관리하기 위해 타입스크립트를 사용한다. 타입스크립트에서는 타입이 잘못되었을 경우 그 부분이 잘못되었다고 구체적으로 알려주고, 오타교정도 가능하다. 리액트 + 타입스크립트의 설치 1) 기존의 React프로젝트에 타입스크립트 설치하기. 작업폴더경로에서 터미널을 오픈한 뒤, npm install --save typescript @types/node @types/react @types/react-dom @types/jest or yarn add --save typescript @types/node @type..
쿠키 & 세션 & 캐시 HTTP의 특징 중 하나는 stateless 하다는 점이다. 서버가 클라이언트의 상태 정보를 가지지 않는다는 것, 기존의 정보를 유지하지 않는다. 이전에 '클라이언트 - 서버' 통신을 통해 데이터를 주고 받았다 하더라도, 다시 통신을 할 때 이전의 데이터 들을 가지고 있지 않기 때문에 처음부터 다시 시작해야 한다. 이것과 반대되는 개념은 stateful. 이전의 과정을 기억하는 것이다. stateful의 경우 기존의 상태를 기억하고 유지해야 하기 때문에 같은 서버를 통해 통신이 진행되어야 한다. 반면 stateless의 경우 상태를 보관하지 않기 때문에 클라이언트의 요청을 기존의 서버가 아닌, 다른 서버를 통해 response 해도 상관 없다. +http의 또다른 특징 connectionless http..
Javascript : 일반함수와 화살표함수의 차이. Arrow function (화살표 함수)는 ES6에서 추가되었다. 일반 함수 표현식 const expression = function() {} 화살표 함수 const arrow = () => {} 화살표 함수는 표기면에서 간편하다. 기존 함수에 비해 비교적 간단하게 사용된다. 일반 함수와 화살표 함수 둘은 크게 세가지 차이점이 있다. 첫째로 this 바인딩에 관한 것이다. 자바스크립트에서 함수를 호출하면 함수 내부에 this 객체가 자체적으로 전달된다. 이 this가 가리키는 값이 있을텐데, 그 가리키는 값과 this를 연결하는 것이 this 바인딩이다. 일반 함수 일반함수에서는 함수를 선언할 때 this에 바인딩할 객체가 결정되는 것이 아니라 (정적), 함수 호출 (실행) 할 때 함수의 호출에 따라 ..
Javascript : 함수 선언식과 함수 표현식 비교 자바스크립트에서 함수를 생성하는 방법 중 함수 선언식, 함수 표현식을 비교해 보려고 한다. 1. 함수 선언식 function counter(x) { return x+1 } 2. 함수 표현식 const counter = function(x) { return ( x+1 ) } - 함수 선언식과 함수 표현식의 차이점. 생김새가 비슷하지만, 표현식의 경우 함수를 변수안에 저장을 해두었다는 점에서 다르다. 표현식은 일반적으로 선언한 변수명을 함수명으로 대체한다. 주요한 차이점은 호이스팅이다. counter(3) //4 newCounter(3) // error function counter(x) { return x+1 } const newCounter = function(x) { return ( x+1 ) } 코드..
Javascript : 동기와 비동기 (4) Async & await Async & await 은 기존 비동기 처리방식인 콜백함수, 프로미스의 단점을 보완한다. 사용하기 편리하고 가독성이 좋다. Async & await 은 비동기적인 코드를 더 쉽게 절차적으로 이용할 수 있게 한다. function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. async function test() { return "hi" } test().then(alert) // hi 프로미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. return 값이 Resolve( ) 안의 값이 된다고 생각하면 된다. 직접 프로미스를 써줄 수 도 있는데, 결과값은 같다. async function test() { ..
Javascript : 동기와 비동기 (3) Promise Promise. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 무겁고 오래 걸리는 일을 비동기적으로 처리할 때 유용하게 쓰인다. 프로미스는 어떤 비동기적인 일을 실행했을 때 그 일이 끝난 이벤트, 즉 끝났을 때를 알려준다. 비동기적으로 수행한 결과값 (성공 or 실패) 을 알려주는 오브젝트이다. 앞선 콜백 함수 파트에서는 위 과정을 콜백함수를 통해 진행하였다. 다만 복잡한 작업의 경우 콜백지옥이 발생하고 가독성과 유지보수 측면에서 bad했다. Promise를 통해서 해결 가능한 부분이다. 프로미스는 생성되고 종료될 때까지 세가지 상태를 가진다. - Pending (대기) : 비동기 처리 로직이 완료되지 않은 상태 - Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반..
Javascript : 동기와 비동기 (2) 콜백함수 동기 사용, 비동기 사용 콜백함수란 다른 함수에 인자로 쓰이는 함수를 말한다. 그 다른 함수의 명령에 따라 즉시 실행될 수 도 있고(동기), 나중에 실행될 수 도 있다(비동기). 아래는 동기적으로 쓰이는 콜백함수와, 비동기적으로 쓰이는 콜백함수에 대한 예시. 동기적예시 function sayHello() { console.log("hello") } function firstMeeting(callback) { callback(); console.log("nice to meet you"); } firstMeeting(sayHello) // hello nice to meet you - firstMeeting(sayHello) 실행 - firstMeeting 함수를 보니 (callback) 파라미터값이 있고, 이 callback() 에..
Javascript : 동기와 비동기 (1) 자바스크립트 엔진과 Web Api. 비동기와 멀티쓰레드. 동기적 언어 : 한번에 하나의 일을 처리한다. 비동기적인 언어 : 여러가지 일을 동시에 처리한다. 자바스크립트는 기본적으로 동기적인 언어이다. 싱글쓰레드로서 한번의 하나의 일만 처리할 수 있다. 한번의 하나의 일만 처리할 수 있기 때문에 a -> b -> c의 명확한 실행 순서가 있고, 순차적이라는 점에서 결과 예측이 용이하다. 하지만 한번에 여러 일을 수행 할 여력이 있음에도 하나씩 처리하는 경우가 생기기 때문에 리소스의 낭비, 즉 비동기적 구조에 비해 효율적으로 동작하지 못할 수 있다. 이런 점을 호스트환경 (Web, Node js) 에서 제공해주는 api들을 통해서 해결할 수 있다. api 를 이용하면 자바스크립트도 여러가지 일을 동시에 처리할 수 있다. 대표적인 비동기 처리 api로 fetch와 ..

티스토리툴바