Front-end
-
tc39 92nd, 93nd meetingFront-end/Javascript 2022. 9. 27. 11:11
https://dev.to/hemanth/updates-from-the-92nd-tc39-meeting-5fi6 Updates from the 92nd TC39 meeting There were several items on the agenda, this post focuses on feature proposals and their progress... dev.to https://www.ecma-international.org/technical-committees/tc39/?tab=activities
-
[Hooks] 훅스의 규칙Front-end/React 2022. 9. 17. 22:06
훅스는 컴포넌트의 영역 안에서만 작동한다 ( Only Call Hooks from React Functions) 리액트 컴포넌트 내부에서만 훅스를 호출해야 합니다. 마찬가지로 커스텀 훅도 결국에는 컴포넌트에 추가되야합니다. 기능을 여러 훅으로 나누기 훅스는 순서대로 호출되기 때문에 각 훅을 작게 유지하면 좋습니다. 최상위 수준에서만 훅을 호출해야한다. ( Only Call Hooks at the Top Level) 조건문이나 루프 또는 중첩된 함수에서 훅을 사용해서는 안됩니다. 비동기 작업도 훅 안에서 실행시켜야 합니다. cra를 사용한다면 eslint-plugin-react-hooks라는 플러그인을 사용하면 에러를 잡을수 있습니다. Hooks can call other Hooks Never call a..
-
[웹팩] 빌드하기Front-end 2022. 9. 12. 17:58
cra을 사용하지않고 react 프로젝트를 만들었다고 가정하고, 웹팩을 빌드해 봅시다. 웹팩으로 정적인 빌드 프로세스를 만들려면 필요한 모듈을 설치해야 합니다. npm install --save-dev webpack webpack-cli 웹팩이 번들을 빌드할때, JSX를 순수 리액트 코드로 변환하라고 지정할 필요가 있습니다. webpack.config.js파일에 시작파일과 번들을 출력할 파일을 지정합니다. 웹팩은 이 위치에 패키징한 자바스크립트 팡리을 넣어줍니다. 다음으로 필요한 바벨 의존관계를 설치합니다. npm install babel-loader @babel/core --save-dev 웹팩 설정 파일에서 module이라는 필드에 웹팩에서 사용할 여러 로더들에 대한 정보를 추가합니다. module:..
-
[웹팩]Front-end 2022. 9. 12. 13:13
웹팩 프로덕션 레벨에서 자바스크립트 프레임워크나 라이브러리를 사용하려면 고려해야 할 사항이 많습니다. 이때 사용할수 있는 도구가 웹팩 입니다. modularity, network performance 웹팩은 모듈 번들러입니다. 모듈 번들러는 여러 파일들을 한 파일로 묶어줍니다. 의존관계가 있는 여러 파일들을 묶은 번들은 브라우저가 한번만 읽기 때문에 네트워크 성능이 좋아집니다. - 모든 의존 관계를 한 파일에 넣으면 모든 파일을 단 한번의 http 요청으로 가져올 수 있으므로 추가 시간 지연을 방지할 수 있다. 컴파일 외 기능들 * 코드 분리 : 코드를 여러 덩어리로 나눠서 필요할때 각각 로딩할 수 있습니다. 다른 페이지나 디바이스에서 필요한 자원을 따로 나눠서 더 효율적으로 처리하기 위함입니다. * 코..
-
Lexical 🤪Front-end/Javascript 2022. 9. 7. 12:53
우리가 흔히 자바스크립트에서 말하는 렉시컬환경 (Lexical Environment)의 렉시컬이 무슨 뜻인지 궁금해서 찾아봤다. lexical [1] (adj) of or relating to words [2] (adj) of or relating to dictionaries 단어나 사전과 연관된 뜻인걸 알 수 있다. 이어서 lexical environment에 대해 알아보면 Lexical Environment ECMAScript 명세서 262 (8.1)에 따르면, 렉시컬 환경이란 A Lexical Environment is a specification type used to define the association of Identifiers to specific variables and function..
-
웹 접근성 - 새탭 새창Front-end 2022. 9. 4. 00:04
The Web Access team doesn't recommend opening links in new tabs. For one thing, the World Wide Web Consortium (W3C) does not recommend this practice, as it takes the control out of the user's hands (opening a new tab without the user's consent). But what if I really, really want my links to automatically open in a new tab? Overall, we believe that not configuring links to automatically open in a..
-
-
HTML 파싱과 렌더링Front-end 2022. 7. 3. 20:13
Parse 파싱이란 프로그램이 런타임 환경에서 실제로 실행될 수 있는 포맷으로 분석하고 변환하는 것입니다. 브라우저 내부의 자바스크립트 엔진이 이에 해당합니다. 브라우저는 HTML을 DOM tree로 파싱합니다. HTML 파싱은 tokenization과 트리 구조를 포함합니다. HTML 토큰은 names, values와 같은 태그들을 포함합니다. HTML parser가 이미지 같은 non-blocking 요소들을 발견하게 되면 브라우저는 이 자원들을 요청하고 파싱을 멈추지 않고 진행합니다. CSS파일을 만나도 멈추지않고 파싱이 계속되지만, 태그를 만나게 되면 렌더링이 멈추고 HTML 파싱이 중단됩니다. 스크립트가 다운로드 되고 실행되기 전까지 HTML 파싱이 중단되는 이유는 DOM 을 조작하는 API 를..