Salangdung_i의 기록

Virtual DOM이 무엇인지 설명해주세요. Virtual DOM의 작동원리에 대해 설명해주세요. 결론 DOM과 동일한 구조를 가지지만, 메모리상에 존재하는 자바스크립트 객체입니다. 설명 Virtual DOM이란 리액트의 UI를 구성하는 HTML 엘리먼트들을 메모리 내에 구현한 것입니다. 실제 DOM에 접근하여 조작하는 대신, 추상화된 자바스크립트로 객체를 구성하여 사용합니다. 리액트에서 데이터가 변하여 실제 DOM에 반영되기까지는 3가지의 과정을 거칩니다. 먼저 데이터를 업데이트하면 컴포넌트 UI전체를 Virtual DOM에 랜더링 합니다. 다음으로 이전의 Virtual DOM의 내용과 현재의 내용을 비교합니다. 바뀐 내용만 실제 DOM에 적용합니다. DOM 전체를 다시 랜더링할 필요 없이 실제 DO..

📝 한 일 유튜브 프로젝트 카드 메이커 프로젝트 CSS 정리 서류 넣기 포트폴리오/이력서 수정 코딩 테스트 🧐 알게 된 것 firebase > Authentication react-router github-page배포 시 주의사항 ❗️ 느낀 점 이전에 했던 프로젝트들을 다시 만들어보면서 생각지도 못한 오류들을 만나면서 서류를 넣는 것이 늦어진다. 악 조급해... 원래 월요일에 넣으려던 서류가 밀리고 밀려서 수요일에 서류를 내게 되었다. 유튜브 api는 할당 량 제한이 생겨서 구현 시 넘어온 데이터를 확인할 수 없는 문제 news API 배포 시 무료로 제공하지 않아 배포 후 빈 화면이 나오는 문제 react-router github-page배포 시 라우터가 가리키는 경로와 실제 프로젝트가 있는 경로가 다..

👉 문제는 여기 오픈채팅방 카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다. 신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다. "[닉네임]님이 들어왔습니다." 채팅방에서 누군가 나가면 다음 메시지가 출력된다. "[닉네임]님이 나갔습니다." 채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다. 채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다. 채팅방에서 닉네임을 변경한다. 닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다. 예..

프로젝트를 구현하면서 헷갈리는 CSS이 있었다. 이번 포스팅은 내가 헷갈려하는 CSS들의 정리한 것이다. CSS와 박스 모델 CSS 박스 모델이란, 박스 형태의 모델이다. 이 박스 모델들이 모여 웹문서를 이룬다. 또한 그 안에는 margin과 padding, border 등 여러 겹의 박스가 들어있다. 블록 레벨 요소 VS 인라인 레벨 요소 박스 모델은 블록 레벡 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. width, margin, padding 등을 이용해 크기나 위치를 ..

📝 한 일 풀었던 코딩 테스트 다른 관점에서 공부하기 일정관리 웹애플리케이션 완성 뉴스 뷰어 웹 애플리케이션 완성 리액트 개념 공부 포트폴리오/이력서 수정 🧐 알게 된 것 리액트 라이프사이클 메서드 리액트 16.8 hook . env PostCSS news API Weather API ❗️ 느낀 점 저번 주에 자바스크립트를 한 번 더 정리하고 리액트 공부에 다시 들어가는 한 주였다면, 이번 주는 리액트 공부중 애매하게 알거나 헷갈리는 내용에 대한 정리와 프로젝트를 하는 시간을 보냈다. 다시 완성하려는 프로젝트가 비즈니스 카드 메이커, 일정관리 웹 애플리케이션, 뉴스 뷰어, 유튜브 총 4가지의 프로젝트였는데 처음에 제일 어려운 비즈니스 카드 메이커 하다가 다시 제일 쉬운 프로젝트 부터하고있다. 리액트에 대..

👩‍💻 script 사용시 어떤 순서대로 사용자에게 페이지가 보여지게 될까? 1. script가 header에 있을 경우 브라우저가 html을 한줄씩 읽는다. script를 만나면 html 파싱을 멈추고 자바스크립트를 읽는다. [ feching.js | executing.js ] > 자바스크립트를 다 읽고나면 다시 html을 파싱한다. > 페이지는 준비 완료된다. ❗️ 단점: js파일이 크다면 사용자가 화면을 보기까지의 시간이 많이 소요된다. 2. script가 body의 끝에 있을 경우 ... 브라우저가 html을 전부 parsing한다. 이후 페이지는 준비 완료된다. 이후 script를 읽는다.[feching.js|executing.js] 페이지가 준비가 다 된 다음에 스크립트를 만나서 서버에서 받아..

리액트를 공부하면서 제일 와닿지 않았던 것은 각종 hooks들이었다. useState, useEffect, useMemo, useCallback 등 용어가 나한테 직관적으로 의미가 다가오지 않았고, 클래스형 라이프사이클 메서드와 개념이 섞여버렸다. 내가 알기 위해 다시 정리하는 hooks이다. 1. useState 컴포넌트에서도 상태관리를 할 수 있는 것이다. 랜더링 직후 작업을 설정한다. const [value, setValue] = useState(); 기본형은 위와 같다. 뜯어보면 value는 상태 값 setValue은 상태를 설정하는 함수 useState안에 들어가는 것은 상태의 기본값이다. 예를 들면 import React, {useState} from 'react'; const App = ()..

📝 한 일 하루에 코테 2개씩 풀기 코어 자바스크립트 1회독 끝내기 자바스크립트 기초강의 수강하기 자바스크립트 보충수업 수강하기 비지니스 카드 메이커 공부하기 비지니스 카드 메이커 다시 구현하기 리액트 개념 공부하기 SK ICT 코테보기 🧐 알게 된 것 코테를 풀면서 재귀함수, 메모이제이션을 사용해 푸는 접근법에 대해서도 알게되었다. 자바스크립트 기초강의를 다시 들으면서 브라우저의 랜더링과정에서 defer, async 옵션을 사용했을때 브라우저는 어떻게 동작이되는지 깔끔하게 정리 되었다. Class, Methods, Variables, Encapsulation Encapsulation : 커피 자판기에 들어가는 동전을 다른 사람들이 조작할수 없게 동전을 private하게 하는것 Class 커피자판기 Me..

별점 : ⭐️⭐️⭐️⭐️⭐️ 총평 : 자바스크립트에 개념에 대해 좀 더 깊게 공부하고 싶거나, 기술면접 대비가 필요할 때 읽어보면 아주 자세하게 쓰여있는 책이다. 기술면접을 대비하면서 자바스크립트에 관해 자주 묻는 질문을 모았다. Q. JavaScript Event Loop Q. Hoisting Q. var, let, const의 차이에 대해 설명해주세요. Q.. Closure Q.. this (Call, Apply, Bind) / this에 대해 설명해주세요. Q. Arrow Function Q.. 함수 선언식과 함수 표현식 Q.. 얕은 복사와 깊은 복사 Q. 콜백 지옥을 해결하는 방법은 무엇인가요? Q. Promise와 Callback의 차이를 설명해주세요. /5. Promise Q. Promise를..