프론트엔드 면접 스터디
JS
비동기처리 방식
1. 콜백함수
다른 함수에 매개변수로 넘어가 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.
콜백 함수를 사용하는 이유는 서버로 어떠한 요청을 보낸다고 가정할 때 응답을 기다리는 동안 가만히 시간을 버리는 것이 아닌, 다른 작업을 함으로써 동기적인 코드에 비해 성능을 향상시킬 수 있기 때문이다.
하지만 문제점도 존재한다.
콜백 함수의 호출을 중첩하여 사용할 경우 계속해서 함수를 도는 콜백 지옥이 발생한다. 또한 에러 처리가 힘들다는 단점이 있다.
2. Promise
콜백함수의 문제점을 해결하기 위해 ES6에 도입된 Promise
비동기 처리를 성공했을 때와 실패했을 때의 결과를 반환할 수 있다.
- 대기(pending): 비동기 처리가 수행되지 않은 초기 상태.
- 이행(fulfilled): 비동기 처리 성공
- 거부(rejected): 비동기 처리 실패
3. async/await
async와 await을 통해 promise를 쓰지 않더라도 간편하게 비동기 처리를 할 수 있다. 코드가 깔끔해지고, 프로미스를 사용할 때보다 에러 처리가 수월하다.
async 함수
: async 키워드를 사용해 정의하며 프로미스를 반환
await 키워드
: 프로미스가 resolve 결과의 반환을 기다려주는 키워드
⇒ 반드시 프로미스 앞에서 사용해야 함
예외 처리
프로미스에서 reject의 역할이 async에선 throw로!!
try/catch문을 통해 예외 처리가 가능하다.
CSS
position
html 태그의 위치를 지정해주는 css 속성, 페이지 레이아웃을 결정할 수 있다.
static(기본 값)
html에 쓴 태그 순으로 위치가 지정되어 순서대로 나타난다.
따로 position을 지정하지 않으면position: static 기본으로 적용된다.
relative
static 자리를 기준으로 지정한 위치만큼 움직인다.
absolute
조상 요소 중 기본 값 position: static을 제외한 position: relative position: absolute position: fixed 을 가진 가장 가까운 조상을 기준으로 지정한 위치만큼 움직인다.
모든 조상 요소가 position: static이라면 자신이 담긴 박스를 기준으로 지정한 위치만큼 움직인다.
fixed
뷰포트를 기준으로 고정, 스크롤을 계속 내려도 뷰포트가 기준이 되기 때문에 부모 태그와 상관없이 쭉 그 자리를 유지한다.
sticky
부모 박스를 기준으로 고정, 스크롤되면서 부모 박스 위치까지 같은 자리를 유지, 부모 박스가 넘어가면 사라진다.
svg는 무엇일까요?
확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차원 그래픽입니다. HTML 태그의 집합으로 이루어져 있습니다. 즉, css와 javascript로 컨트롤이 가능합니다.
SVG의 장점
아무리 확대를 해도 이미지가 깨지지 않습니다. 또한, 이미지의 크기를 키워도 용량이 늘어나지 않습니다.
SVG의 단점
코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 파일 사이즈가 커집니다. 단순한 모양일수록 효율이 좋습니다. 복잡한 이미지를 굳이 SVG로 표현하고자 하면 오히려 용량이 너무 거대해져 역효과가 날 수 있습니다. 그렇기 때문에 주로 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용합니다.
마무리 회고
css는 늘 알고있다고 생각해도 헷갈리는 개념이 너무 많다. 많이 써서 확실하게 내 것으로 만들 것이다!
내일은 리액트 강의 듣고 미니 팀 프로젝트 기능 구현할 예정이고,
일요일은 리액트 강의와 깃 강의를 들을 예정이다.
