🔖 자바스크립트 정리(2) (22.12.25 수정) 파싱(parsing) 파싱(구문 분석)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리(parse/syntax tree)를 생성하는 일련...

🔖 히든 클래스 📌 배운 내용 및 기억하고 싶은 내용 우리가 자주 사용하는 크롬에서 자바스크립트 엔진을 동작시킬 때 C++로 작성된 V8 엔진을 사용한다. V8 작동 방식 소스코드를 파싱한후 추상구문트리로 만들면 인터프리터가 바이트코드를 생성한다. 컴파일러가 바이트코드를 가지고 데이터 캐싱 및 프로파일링을 고려하여 최적화된 기계어를 생성한...

🔖 자바스크립트 정리(1)(22.12.23 수정) 자바스크립트 탄생 1995년, 넷스케이프 커뮤니케이션즈에서 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량형 프로그래밍 언어를 도입하기로 결정하였는데 이것이 브래던 아이크가 개발한 자바스크립트이다. 크로스 브라우징 이슈 넷스케이프 커뮤니케이션즈와 마이크로...

🖥️ 모달 화면 구현 ✏️ 이런 저런 이야기 로그인 화면에서 아이디와 비밀번호를 검증하고 올바른 형식인지 알기위한 창을 구현하기 위해 모달을 생각하였다. 모달은 기존 브라우저에 새로운 레이어를 띄우는 것을 의미한다. 모달창 말고 팝업창도 있는데 팝업창은 열려있는 브라우저창이 아닌 새로운 브라우저창 띄우는 것이다. 컴포넌트 구성 기존 배경도 ...

🖥️ wanted TodoList 구현 사전 과제 후기 ✏️ 이런 저런 이야기 취업 준비를 하다가 원티드 프리온보딩 프론트엔드 인턴십 프로그램에 대해 알게 되어 지원을 하고자 사전과제를 만들기 시작하였다. 12월 12일날 알게되었는데 알고보니 신청 마감날짜가 15일 목요일이였다. 시간이 얼마 남지 않았다고 생각했던 나는 컴포넌트를 나눌 생각도 없이...

🔖 조건부렌더링 true 생략하기 📌 배운 내용 및 기억하고 싶은 내용 컴포넌트의 props 값을 설정하게 될 때 props 이름만 작성하고 값 설정을 생략한다면 true 로 설정한 것으로 간주함 // Hi.js import React from 'react'; function Hi({ color, name, isEnglish }) { ...

🔖 여러 개의 input 상태 관리하기 📌 배운 내용 및 기억하고 싶은 내용 import React, { useState } from 'react'; function InputSample() { // 객체형태의 상태관리 const [inputs, setInputs] = useState({ name: '', nickname: ...

🔖 배열 렌더링 key의 중요성 📌 배운 내용 및 기억하고 싶은 내용 배열 렌더링은 map을 사용하여 한다. key는 고유의 값을 할당한다. 고유의 값이 없다면 map()의 인자 index도 가능하다. key를 사용하지 않으면 리렌더링할때 순서가 보장되지 않아 비효율적으로 업데이트한다. key를 사용하면 수정되지 않는 기존의 값은 ...

🔖 useRef로 특정 DOM 선택하기 📌 배운 내용 및 기억하고 싶은 내용 React의 함수형 컴포넌트에서 특정 DOM을 선택할 때는 useRef();를 사용한다. 클래스 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용한다. import React, { useState, useRef } from '...

🔖 useRef 로 컴포넌트 안의 변수 만들기 📌 배운 내용 및 기억하고 싶은 내용 useRef();는 특정 DOM을 선택할 뿐만이 아니라, 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리도 할 수 있다. useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다 리액트 컴포넌트에서의 상...