전체 글 (112) 썸네일형 리스트형 var, let, const 차이를 설명해주세요 답변var, let, const는 자바스크립트에서 변수를 할당할 때 사용하는 키워드입니다.먼저 var는 함수 스코프를 따르고, 블록 스코프를 무시하고 호이스팅이 발생해 변수 선언 전 접근 시 undefined가 반환됩니다. 또한 변수 재할당이 가능합니다.let은 블록 스코프를 따르며, 호이스팅이 되지만 선언 전 접근 시 ReferenceError가 발생합니다.let 역시 재할당이 가능합니다.const도 블록 스코프를 따르며, 호이스팅이 되지만 선언 전 접근 시ReferenceError가 발생합니다. 또한 const는 재할당이 불가능합니다.다만 객체나 배열의 내부 값은 변경할 수 있습니다. 꼬리 질문var가 블록 스코프를 무시할 때 발생할 수 있는 실제 문제는 무엇인가요?var는 함수 스코프를 따르기 때문.. async, await 사용방법을 설명해주세요. 답변async, await 방식을 Promise 기반 코드를 동기식 코드처럼 작성할 수 있도록 해줍니다.async는 함수가 비동기 함수임을 선언한 것이고, await는 해당 비동기 작업이 완료될 때까지 기다린다는 의미입니다.함수 앞에 async를 선언하면 해당 함수는 Promise 객체를 반환한다는 의미이고, 내부적으로 Promise를 반환하는 작업 앞에 await를 붙여 해당 작업이 완료될 때까지 기다리도록 하여 마치 동기적인 코드처럼 사용할 수 있습니다.꼬리 질문async/await와 Promise.then()은 언제 사용하는 게 더 적합한가요? 답변async/await는 비동기 코드들을 순차적으로 실행할 때 더 적합합니다.비동기 코드를 동기 코드처럼 사용할 수 있어 흐름을 파악하기에 유리합니다.반면.. Promise와 Callback의 차이점을 설명해주세요 답변Callback은 함수 실행 후 다시 호출되는 함수로, 비동기 작업 완료시 호출될 수 있습니다.하지만 중첩될 경우 Callback Hell 문제를 일으킬 수 있습니다.Promise는 비동기 작업의 성공, 실패를 처리하는 객체로, Callback보다 가독성이 좋고 체인형식으로 작업을 이어나갈 수 있습니다.then, catch, finally를 사용해 비동기 작업의 흐름을 제어할 수 있습니다. 꼬리 질문Callback Hell이란 무엇인가요?이에 대한 해결책으로 앞서 말한 Promise나 async/await 방법들을 사용할 수 있습니다.Callback Hell은 비동기 작업을 처리할 때, 여러 개의 중첩된 콜백 함수들이 순차적으로 호출되는 구조를 말합니다. 이로 인해 코드의 가독성이 떨어져, 유지보수나.. 애니메이션 최적화 이전 프로젝트에서 3D 애니메이션 렌더링 최적화 때문에 애먹은 적이 있었다..그런데 테코톡에서 애니메이션 최적화와 관련된 부분이 올라와서 정리해볼까 한다.참고 링크브라우저의 렌더링 과정파싱 단계HTML 파일을 파싱하여 DOM 트리를 생성한다.CSS 파일ㅇ르 파싱하여 CSSOM 트리를 생성한다.DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.Layout 단계각 요소의 크기와 위치를 계산한다.각 요소를 벡터 박스로 표현하여 배치한다.- 리플로우 : 요소의 크기나 위치를 계산 또는 변경할 경우리플로우가 발생하면 브라우저는 파싱 단계부터 브라우저가 렌더링되는 모든 단계를 다시 수행하야하기 때문에 상당히 큰 작업이다.Paint 단계레이아웃 벡터 박스들을 레스트화 한다.화면을 어떻게 그릴지에 대한 페인트 레코드.. 프론트엔드 성능 측정 참고자료 : 테코톡 프론트엔드 성능 측정프론트엔드에서 성능이란?웹 화면을 구현하고 서버로부터 데이터를 받아오는 과정에서 리소스들을 사용자들에게 빠르게 보여줄 수 있는 것성능 == 속도그렇다면 프론트엔드에서 성능은 왜 중요할까?성능이 중요한 이유웹 성능 측정의 기준은?동일한 사이트더라도 사용자의 환경은 모두 다를 수 있음따라서 속도는 상대적인 개념임사용자 정의 지표처음 그려지는 화면이 어떤 화면인지, 어떤게 사용자에게 의미있는 화면인지, 상호작용하는 시점은 언제인지와 같은 고민을 통해 보다 다양한 사용자 환경에서 성능을 측정한다.따라서 사용자 정의 지표가 제공하는 특징들을 이해한 다음 사용자 경험에 중요한 부분들을 설정하는 것이 중요성능 측정 지표Core Web Vitals : 구글에서 만든 신뢰성 있는 .. 리액트 렌더링 최적화 출처 : 리액트 렌더링 최적화브라우저 랜더링 과정먼저 HTML을 파싱해서 DOM을 만들고 CSS를 파싱해서 CSSOM을 만든다.DOM과 CSSOM을 활용해서 렌더트리를 만든다.그리고 layout과 repaint 과정을 거쳐 화면에 웹사이트가 렌더링이 된다. 즉 사용자가 웹 사이트를 볼 수 있게 된다.리액트에서의 렌더링그렇다면 리액트에서의 렌더링은 뭘까??리액트에서의 렌더링 === 함수를 호출하는 것예를들어 APP 컴포넌트가 있을 때 이 컴포넌트가 렌더링 된다는 말의 뜻은 APP 컴포넌트가 호출이 되어서 내부 로직들이 실행이 되고 return 문을 통해 리액트 element를 반환하는 것이다.예시 코드위의 코드를 예시로 들어 렌더링을 알아보자먼저 Parent 컴포넌트 내부에 FirstChild 컴포넌트와 .. CSS 프레임워크(Tailwind) 출처 : CSS 프레임워크CSS 프레임워크CSS 프레임워크를 이용함으로써 개발자가 얼마나 편해질 수 있는지 알아보자CSS 프레임워크란?웹 사이틀를 만들 때 쉽고 빠르게 만들 수 있도록 CSS 스타일과 규칙, 그리고 클래스를 선정해둔 모음디자인보다 사용자 경험에 집중할 수 있도록 도움을 줌CSS 프레임워크의 장점미리 작성된 UI 요소들을 제공함Header, input, button 같은 일반적인 요소를 제공함으로써 더 빠른 개발 프로세스를 제공템플릿을 제공함, 웹 디자이너와 웹 개발자 같이 전문적인 사람들이 만든 템플릿은 사용자에게 일관된 상요자 경험을 줌으로써 사용자가 더 만족할 수 있는 장점이 있음CSS 프레임워크 종류각 프레임워크 요소마다 고유한 기능과 디자인 언어들이 다름, 필요와 선호에 따라 선택.. 쿠키와 웹 스토리지 참고자료파인의 쿠키와 웹 스토리지목차쿠키 등장 배경과 특징쿠키 활용 예시쿠키 단점과 해결법웹 스토리지 특징웹 스토리지 종류와 예시웹 스토리지 단점과 해결법즁요 정보를 어디에 저장할까?쿠키의 등장 배경쿠키에 앞서 먼저 우리가 자주 사용하는 HTTP를 살펴보자HTTP는 비연결성과 무상태성이라는 특징이 있다.서버에 요청을 보내고 응답을 했으면 연결이 끊기게 된다.이후 서버에 또 다시 요청시에 서버는 클라이언트가 누군지 식별을 할 수 없게된다.만약 연결이 끊겨도 기억하고싶은 정보가 있다면?이러한 요구사항을 해결하기 위해 쿠키가 등장했다.쿠키?브라우저에 저장되는 key와 value로 이루어진 작은 크기의 문자열특징4KB의 크기 제한만료 시간 설정 가능, 설정하지 않으면 브라우저 종료시 삭제HTTP 요청시 따로 설.. 이전 1 2 3 4 5 6 7 ··· 14 다음
