전체 글76 [JavaScript] 이벤트 루프 🙋♀️목차 JavaScript는 싱글 스레드로 동작?! 브라우저 환경 비동기 코드는 어떻게 작동하는가? 헷갈리기 쉬운 예제 (0초 후에 실행?) 💻Javascript는 싱글 스레드로 동작?! ✅싱글스레드 = 한 번에 하나의 작업만 수행 그런데 어떻게 비동기로 일을 처리할 수 있는거지?🤔?? → 자바스크립트가 구동되는 환경(브라우저, Node.js 등)에서는 주로 여러개의 스레드가 사용되며, 이러한 구동 환경이 단일 호출 스택을 사용하는 자바 스크립트 엔진과 상호 연동하기 위해 사용하는 장치가 바로 이벤트루프!! 💻브라우저 환경 위 그림은 브라우저 환경을 간단하게 그림으로 표현한 것이다. 자바스크립트 엔진 (자바스크립트 코드를 해석하고 실행하는 인터프리터) Heap : 메모리 할당이 일어나는 부분 Cal.. 2021. 8. 14. 브라우저의 작동 원리 🙋♀️목차 브라우저에 관하여 브라우저 브라우저의 구성 렌더링 엔진 브라우저마다 다른 렌더링 엔진을 사용 렌더링 엔진의 목표 렌더링 엔진의 동작 과정 UI가 업데이트 되는 상황 UI 업데이트 프로세스 UI 업데이트 처리 방법에 따른 분류 💻브라우저에 관하여 ✅브라우저 웹 서버에서 쌍방향 통신하는 HTML문서나 파일과 연동하고 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어 웹서버에 웹페이지 요청 → 웹 서버로부터 응답을 받음 → 응답(HTML문서 등)을 읽어서 해석 → 사용자에게 보여줌 구글 크롬, 인터넷 익스플로러, 모질라 파이어폭스 등이 대표적인 예 ✅브라우저의 구성 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 (요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.. 2021. 8. 13. [프리온보딩코스] 3주차 - 과제4 ✍알게된 것과 느낀점 데이터 구조에도 설계가 필요하다 CSS에서 할 수 있는 건 CSS에서 (일정 글자 수 이상이면 자르고 ... 붙이기 = ellipsis) 컴포넌트 내 변수 위치 조건부 렌더링, 삼항연산자 그만 사랑하자 lodash의 uniqBy 리덕스 툴킷 Redux DevTools 잊지말자 프론트엔드 클린코드 🔥그래서 해보는 정리 1. 데이터 구조에도 설계가 필요하다 생각해보면 자바로 프로젝트 할 때도 설계가 거의 개발이랑 맞먹게 걸렸었는데 크게 다를리가 없겠지..! 예를들면 저번 과제 리뷰인데, 사용자 등급이 있어서 각 등급별로 접근할 수 있는 게시판이 다른 경우에 위와 같이 access(접근할 수 있는 페이지)를 하나하나 적어주지 않고 해당 유저의 권한 level만 전달한 후 그에 따른 접근 .. 2021. 8. 11. [React] Intersection Observer로 무한스크롤 만들어본 후기 이 글에서 써보고 후기를 남기겠다고 했기에 까먹기전에 적기! Intersection Observer이란? let observer = new IntersectionObserver(callback(entries, observer) [, option]); target을 정하고 그 target이 기기 뷰포트나 특정 요소와 교차할 때 콜백을 생성한다. callback : target에 교차가 일어났을 때 호출되는 함수 entries : IntersectionObserverEntry 객체 리스트를 배열 형식으로 반환 그래서 작성한 코드 (1) intersecting이 일어날 시, IncreasePage를 호출 + 로딩중 문구를 보이도록 true로 설정 (2) IncreasePage가 불려서 Page가 +1 됐기 때.. 2021. 8. 8. [프리온보딩코스] 2주차 -과제3(2) ✍알게된 것과 느낀점 forwardRef styled component를 import할 때 내가 한 실수 - Circular dependency 상수를 관리한다는 것은 - const와 Object.freeze 나무말고 숲을보는 코드를 짜고싶다 netlify에서 배포하기 (treat warning as errors) - CI=false npm run build 🔥그래서 해보는 정리 1. forwardRef 하위 컴포넌트에 있는 엘리먼트에 접근하고 싶을 때 사용한다. 이번에 회원가입을 구현하면서, 제대로 입력 되지 않은 경우에 toast를 띄우면서 해당 input에 focus를 주는 작업을 하는데, 주소 입력하는 칸이 컴포넌트로 들어와있어서... focus를 어떻게 주죠? ~고민의 시작~ (1) 상위 컴포넌.. 2021. 8. 8. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음
