Web Concepts 101

Minwoo Gwak·2023년 4월 10일
0

What is Promise and what is use case?

Promise는 비동기적으로 코드를 처리해야할때 사용된다. 예를들어 서버로부터 많은 양의 데이터를 받아와야 한다고 해보자. 서버로 부터 데이터를 가져오는 시간이 오래 걸릴 경우 동기적으로 코드가 작동하면 데이터가 다 받아지기 전까지 다른 코드가 실행을 멈추고 기다리게된다. 이는 상당히 비효율적인 일이므로 비동기적으로 코드를 실행하게 되면 이를 해결할수 있다. 데이터를 받아오기 전까지 다른 코드를 실행할수 있다.
async/await 키워드를 사용해서 비동기적 코드를 동기적으로 처리하는것 처럼 보이게 코드를 짤수있다.

What is Pure function?

순수함수란 어떤 값을 함수 파라미터에 넣었을때 그 함수의 결과값이 항상 일정한 함수를 말한다. 또한 순수함수는 side effect가 없어야 한다.
여기서 side effect란 함수가 실행될때 외부환경에 영향을 주는것을 말한다. 예를들어, 글로벌변수 count가 있다고 해보자. 그리고 adding이라는 함수는 count의 값을 하나씩 더하는 함수이다. 이 경우, adding함수는 글로벌변수 count에 변화를 가져다 주기때문에 순수함수가 아니라고 할수있다.

What is State and props in React?

state는 리엑트 componenet가 가지고 있는 변수이다. state로써 변수가 선언되면, 그 변수에 값이 재할당 될때마다 compnent가 re-render된다.
props는 부모 component로부터 받아오는 값을 받아올때 사용된다. props는 read only이기 때문에 props값 자체를 변경해서는 안된다.

key in React component

key를 사용하게 되면 각각의 component가 고유한 key값을 가지게 되어 React가 코드를 최적화하는데 도움을 준다. React가 dom을 생성할때 key값을 가지고 있는 기존의 component를 알고있으면 새로운 component를 생성할때 불필요한 dom 업데이트를 막을수 있다.
map함수를 사용할때 각각의 component에 키를 할당해서 새로 생성되는 component를 서로 구별할수 있게 해준다.

useEffect and dependency array

CSR and SSR

서로 다른 렌더링 방식이다. 미술관예시.
CSR: 브라우저는 최소한의 html 파일을 받아오고, 사용자가 특정 페이지에 접근할때마다 필요한 자바스크립트 코드가 실행이 되면서 다이나믹하게 DOM을 생성하게 된다. 이를 통해 서버가 application을 로드하는것을 줄일수 있고 이를 client-side에서 처리를 하게된다. 캐싱을 통해서 빠른 페이지 로드를 가능하게 한다.
하지만 처음 페이지에 접속할때 자바스크립트코드를 미리 받아와야 하기때문에 실행이 느릴수 있다.
SEO측면에서 단점이 있다.

SSR: 서버에서 렌더링을 끝내고 브라우저에 html코드를 보내주기때문에 빠른 초기접속을 보여주지만 접속량이 많을경우 서버에 부하가 많이 걸리게 된다. 다른 페이지로 이동할때에도 다시 렌더링을 처음부터 해야하기 때문에 시간이 많이 걸린다.

GET and POST

HTTP METHOd 중에 하나이다.
GET: 데이터를 받아올때 사용
POST: 서버로 데이터를 보내야 할때 사용된다.

profile
CS and Math student at the University of Illinois with a passion for web development and aspiring to become a frontend developer.

0개의 댓글