프론트엔드/기본 프론트 지식들 모음6 Critical Rendering Path What's Critical Rendering Path? The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Why is it important? Optimizing the critical rendering path improves the time to first render. The Rendering Proccess A request for a web page or app starts with an HTTP request. The server sends a response containing th.. 2024. 3. 5. [WHY] 프론트엔드 개발자가 왜 네트워크 관련 지식을 알아야 할까? 1. 네트워크 환경에서 데이터가 오가는 과정을 이해하는 것이 중요한 이유 문제 해결: 데이터 전송 중 문제가 발생할 경우, 오류를 찾아내고 해결하는 데 도움이 됩니다. 예를 들어, 데이터가 손실되거나 손상될 수 있습니다. 이러한 문제는 대개 데이터가 이동하는 경로를 추적하여 해결할 수 있습니다. 보안: 데이터는 민감한 정보를 포함할 수 있으므로, 데이터가 전송되는 방식을 이해하는 것은 보안 측면에서 매우 중요합니다. 암호화, 인증 및 권한 부여 등의 보안 기능이 데이터 전송 프로세스에 포함될 수 있으며, 이러한 기능을 이해하면 데이터 보안을 강화할 수 있습니다. 최적화: 데이터 전송 프로세스를 최적화하여 더 빠르고 효율적인 데이터 전송을 할 수 있습니다. 데이터가 전송되는 방식, 전송 프로토콜, 데이터의.. 2024. 2. 27. Event Loop 0. 누군가 Event Loop에 대해 설명해주세요, 라고 한다면? 이벤트 루프(Event Loop)는 자바스크립트의 비동기 동작을 가능하게 하는 런타임 메커니즘입니다. 자바스크립트는 기본적으로 단일 스레드 언어이며, 이는 한 번에 하나의 작업만 처리할 수 있다는 것을 의미합니다. 이벤트 루프는 자바스크립트 엔진 밖에 존재하는 브라우저 내장 기능 중 하나인데요, 이벤트 루프는 이러한 단일 스레드 환경에서도 비동기 이벤트(예: 사용자 입력, 네트워크 요청, 타이머 등)를 효율적으로 처리할 수 있도록 설계되었습니다. 일단 자바스크립트 코드 내에서 비동기 작업을 만나게 되면, 자바스크립트 엔진은 해당 작업을 자바스크립트 엔진 외부의 Web API에 위임합니다. 지정된 시간이 지나거나 이벤트가 발생하면, Web.. 2024. 2. 27. 크롬에 'https://www.google.com' 이라고 주소를 적고 엔터를 치면? [1] 데이터 받아오기 크롬에 'https://www.google.com' 이라고 주소를 적고 엔터를 치면 유저가 보는 화면이 완성될 때까지 어떤 일들이 발생할까요? 우선 주소를 살펴보면 'https' 부분과 'www.google.com' 부분으로 나눌 수 있습니다. HTTP: the way(method) of connection HTTP는 클라이언트와 서버가 통신하는 여러 방법 중 하나입니다. 클라이언트에서 HTTP Request 메세지의 틀에 맞춰서 메세지를 제작하고 서버에 보내면, 서버에서는 HTTP Response를 줍니다. 즉, HTTP라는 프로토콜 규약을 지키며 서버와 클라이언트가 서로 데이터를 교환합니다. 마치 우편을 보낼 때 요구하는 틀에 맞춰서 정보를 적는 것과 동일합니다. DNS: in.. 2024. 2. 27. 코드를 짜면서 항상 기억해야할 원칙들 1. 중복 제거(DRY) 2. 하나의 함수는 하나의 일만 하도록 하는 것 3. 한 가지 UI에 여러 개의 state가 개입된다면 그것도 최대한 합치려고 노력 4. 각 케이스를 다르게 처리하지 않고 최대한 같은 인터페이스로 처리하게 하려는 노력 -> 하지만 너무 막연히 최고의 유연성을 추구하지 말 것. (매우 유연하게 설계했는데, 막상 작업 하려니 불편하게 되는 상황도 자주 발생하기 때문.) 5. 공통으로 사용할 수 있는 hook을 만들어본다. 컴포넌트 설계에 대한 인사이트 link https://toss.im/slash-21/sessions/3-3 실무에서 바로 쓰는 Frontend Clean Code 실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이.. 2023. 9. 28. eslint & prettier (차이 및 작동방법 등) ESLint 개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 엄청나게 많은 방식이 있다. 이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는 역할이다. prettier prettier는 eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다. 출처: https://helloinyong.tistory.com/325 ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부.. 2022. 7. 6. 이전 1 다음
