본문 바로가기

Frontend43

브라우저의 동작 원리 (렌더링 과정) 요약 1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.) 2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.) 3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정) 4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.) 5. 개별 노드를 화면에 페인트한다. 자세한 내용은 밑에 개인 노션에 정리한 것을 확인해주세요 https://sanghoon98.notion.site/4f0c03b5de584f1792310f8ba40d97c7 브라우저 렌더링 과정 v8 JS엔진으로 빌드된 JS런타임 환경인 Node.js의 등장으로 JS는 웹브라.. 2022. 6. 17.
[JS] 호이스팅 : Hoisting var, let, const 전부다 호이스팅은 되지만 let과 const는 호이스팅이 안되는 것처럼 동작한다. 호이스팅 요약 변수를 선언하고 할당했을 때 선언부분이 최상단으로 끌어올려지는 현상 ⭐ 많이 헷갈리는 부분이 선언과 동시에 초기화해도 선언부분만 분리하여 최상위로 끌어올린다. ex) let a = 10;일때 let a;만 최상위로 올라감 👍🏻 출석체크 먼저 할게~ 역할(값 할당)은 이따가 정해줄게~! 즉, JS엔진은 선언문이 어디에 위치하든 다른코드보다 먼저 실행한다. 따라서, 변수선언이 어디에 위치하든지 상관없이 어디서든 변수를 참조할수있다. 메모리 공간을 먼저 확보한다는 것이다! 변수 생성 3단계 선언 단계 : 변수를 실행컨텍스트의 변수 객체에 등록함 초기화 단계 : 실행 컨텍스트에 등록된 변.. 2022. 6. 8.
개발자 단계 프로그래밍 실력만이 주니어, 시니어 개발자를 나누는 절대조건이 아니다. 필요한 것 + 디자인 패턴, 아키텍쳐, 테스팅, 빌드, 성능, 보안, 최적화 등등 + 프로그래밍 실력 코딩은 컴퓨터를 이해시키기 위함 이지만 그것을 작성하고 테스트 하는 것은 개발자인 사람이 하는 것이기 때문에 다른 사람들도 이해할 수 있게 코드를 가독성있고 효율있게 짜야한다. + 소통능력 혼자서만 잘하는 개발자는 외롭고 힘들다 하지만, 협업을 하는 개발자는 힘들지 않다 그러기 위해서는 소통능력이 중요하다, 이또한 인간관계이기에 처세술이나 배려가 필요하다 주니어 개발자 비교적 개발 경험이 적은 개발자 동작만 하는 코드를 작성하는 개발자 협업에 능숙하지 않다. 시니어 개발자 직관적이고 바보같은 코드를 작성한다. KISS 원칙 : Kee.. 2022. 5. 8.
redux 총정리 https://sanghoon98.notion.site/496f82cc6df74609938e8a424c812c1c 리덕스 총정리 파일이름을 index.js로 하면 그 디렉토리만 불러오면 자동으로 index.js를 불러온다. sanghoon98.notion.site 개인 노션에서 정리한 것입니다 2022. 4. 29.
jsconfig.json : 경로 설정 IDE에서 도움을 받도록 설정하는 기본적인 설정파일 프로젝트의 최상위 경로(package.json이 있는 경로)에 jsconfig.json 파일을 생성한다. import를 위한 절대경로 Path설정 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } // 이렇게 절대경로로 접근이 가능하다 import App from 'src/components/App' // 그전에는 // 이런식으로 상대경로로 접근했다 import App from '../../src/components/App' 2022. 4. 29.
불변성 불변성은 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것입니다. 필요한 값을 변형해서 사용하고 싶다면 어떤 값의 사본을 만들어서 사용해야 합니다. 편하게 상태를 관리하기 위해 객체 타입을 사용하는데 이는 참조 타입이라 불변성을 유지할 수 없습니다. 그래서 기존의 주소 값과 다른 새로운 객체를 생성하여 복사한 뒤 해당 프로퍼티를 바꾸는 작업이 필요합니다. 이렇게 객체의 불변성을 유지함으로써 side-effect가 줄어들고 컴포넌트 최적화가 가능합니다. 2022. 4. 29.

티스토리툴바