프론트엔드
-
호이스팅 (hoisting)개발공부/CS 2023. 11. 20. 20:00
자바스크립트에서 중요한 개념 중 하나가 "호이스팅"이라고 생각한다. 호이스팅을 이해해야지 코드의 동작을 더 정확하게 파악할 수 있고, 예상 외 동작을 방지할 수 있다. 그래서 오늘은 호이스팅에 대해 자세하게 공부해보려고 한다. 호이스팅이란? 변수 및 함수의 선언문이 스코프 내의 최상단으로 끌어올려지는 현상 (대입문이 아닌 선언문이 끌어올려진다는 것을 기억할 것!) 위에 내용을 이해하기 위해서는 자바스크립트 엔진의 실행 과정을 알아야 한다. JS 엔진은 코드 실행 전 실행 가능한 코드를 형상화 및 구분하는 과정(실행 컨텍스트를 위한 과정)을 거치는데, 이 과정에서 모든 선언 (var, let, const, function, class)를 스코프에 등록한다. 이로 인해 이미 코드 실행 전 변수 및 함수 선언..
-
주소창에 google.com을 입력하면 일어나는 일개발공부/CS 2023. 11. 13. 15:06
프론트엔드 개발자는 웹이 어떤 과정을 통해 동작하는지를 기본으로 알고 있어야 한다고 생각한다. 데이터가 어떻게 전달되어 화면에 렌더링 되는지 알아야 올바른 개발을 할 수 있다. 즉, 내가 어떤 환경에서 어떤 개발을 하는지에 대한 이해가 반드시 필요하다! 그래서~! 오늘은 웹 동작 방식에 대한 공부를 하고자 한다. 동작 방식은 아래와 같다. 사용자가 웹 브라우저를 통해 URL을 입력하면 그 중 도메인 네임 부분을 DNS 서버에서 검색 DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달 브라우저는 HTTP 프로토콜을 사용해 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용해 서버로 전송 서버는 response 메시지를 생성하여 다시..
-
브라우저 렌더링 원리개발공부/CS 2023. 11. 9. 10:34
오늘은 브라우저 렌더링에 대해 알아보고자 한다. HTML 파싱 후 DOM 트리 구축 CSS 파싱 후 CSSOM 트리 구축 JavaScript 실행 DOM과 CSSOM를 조합하여 렌더트리 구축 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산 (Layout 단계) 계산한 위치 및 크기를 기반으로 화면에 그림 (Paint 단계) 위에 과정을 통해 브라우저가 렌더링된다고 한다. 하지만 나는 아직 완벽하게 이해하지 못했기 때문에 하나씩 차근 차근 알아보고자 한다. 브라우저란? 동기적으로 HTML, CSS, JS 언어를 해석하여 내용을 화면에 보여주는 프로그램 CSSOM (CSS Object Model) CSS 내용을 파싱하여 자료를 구조화 한 것 즉, CSS 내용을 해석하고 노드를 만들어 ..
-
DOM에 직접 접근하기 (useRef)개발공부/React 2023. 10. 26. 15:55
오늘은~! useRef에 대해 자세하게 공부해보자. 소분소분 프로젝트에서 회원가입을 담당했는데 정말 고민이 많았다. 실시간 유효성 검사하여 사용자에게 안내 메시지도 보여줘야 하고, input 태그가 각자 리렌더링 되도록 해야하고... 허헣.. 나름 신경써서 작업했는데 아쉽게도 라이트 하우스 90점을 넘지 못해 개선중이다. 일단 1차로 해결하고 싶은 부분은 리렌더링이다. 단순하게 컴포넌트를 상세하게 분류하거나, 아니면 커스텀 훅을 활용하거나 등등 여러가지 고민을 했지만 비밀번호 확인 때문에 쉽지가 않다. 사용자가 입력한 비밀번호와 일치하는지 확인하기 위해서는 같은 단에 선언해야 하는데.. 이 경우 하나만 변해도 다른 부분이 같이 리렌더링이 된다... 일단 객체를 활용해서 그나마 리렌더링 덜 하게 바꾸긴 했..
-
리액트 프로젝트 구조개발공부/React 2023. 10. 25. 14:56
오늘은 터미널에 yarn create react-app {프로젝트 이름} 을 입력 했을 때 생성되는 파일 및 폴더에 대해 공부할 예정이다. (중요한 것들 위주로만!) 일단 실행 순서는 index.js > index.html > App.js 이다 src 폴더 index.js: 진입점 JS 파일, 주로 DOM에 렌더링 하는 역할 App.js: 루트 컴포넌트로 여기에서 다른 컴포넌트를 조합 및 렌더링 public 폴더 index.html: 진입점 HTML, 리액트 어플리케이션이 렌더링 되는 곳 그 외 폴더 node_modules: 프로젝트의 의존성 라이브러리가 설치되는 폴더 package.json: 프로젝트에서 어떤 것 (모듈 등)을 사용하는지에 대한 정보가 기록된 파일 처음에 리액트 공부할 때 프로젝트 구조..
-
리액트에서의 메서드 (map, concat, filter)개발공부/React 2023. 10. 20. 11:49
리액트를 기초부터 다시 공부해보려고 한다. 우선 리액트에서 자주 사용하는 JS 메서드부터 시작해보자! :) Map 배열을 순회하면서 각 요소에 대해 주어진 함수를 호출, 반환 값으로 새로운 배열을 생성 원본 배열을 변경하지 않고 새로운 배열을 반환 -> 배열을 변환하거나 재구성할 때 유용~! 이제 위에 내용은 Map의 기본 내용이고, 리액트에서 map 메서드는 반복되는 컴포넌트를 렌더링 할 수 있게 해준다. 이 때, key 값을 넣어줘야지 경고 메시지가 뜨지 않는다. const names = ["눈사람", "얼음"]; const nameList = names.map((name, index)=> {name}); key를 설정해줘야 하는 이유 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었..
-
동기와 비동기_3 (Async & Await)카테고리 없음 2023. 10. 19. 19:30
https://hani-develop-history.tistory.com/43 동기와비동기_2 (Promise) https://hani-develop-history.tistory.com/42 동기와 비동기_1 오늘은 동기와 비동기에 대해 공부했다. 예전 직장에 다닐 때 성능 개선을 위해 비동기 작업에 대해 공부 했던 적이 있었다. 당시에 자사 프로 hani-develop-history.tistory.com 위에 글에 이어서 비동기 공부한 내용을 정리하고자 한다. JS에서 비동기 작업을 도와주는 객체 중 하나인 Async & Await에 대해 공부해봤다. Async & Await Promise의 단점을 보안하여 코드를 훨씬 직관적으로 나타낼 수 있게 해줌 Async return 값으로 Promise를 반환..