우당탕탕 아장아장

1장 자바스크립트에서 타입스크립트로 타입스크립트의 시발점인 자바스크립트에 대하여 1.1 자바스크립트의 역사 - 1995년 넷스케이프의 브레던 아이크가 10일 만에 설계함 - 2015년부터 매년 새로운 버전을 출시하며 임베디드 애플리케이션 그리고 서버 런타임을 포함한 다양한 환경에서 새로운 버전과 이전 버전과의 호환성을 수십 년 동안 유지 1.2 바닐라 자바스크립트의 함정 - 중요한 언어 확장이나 프레임워크 없이 자바스크립트를 사용하는 것을 '바닐라'라고 부름. 즉 순수한 자바스크립트를 의미 1.2.1 값 비싼 자유 - 가장 큰 불만은 핵심 기능 - 코드의 자유는 자바스크립트를 재밌게 만들기도 하지만, 코드를 안전하게 실행하려고 할 때는 상당한 고통을 동반 1.2.2 부족한 문서 - 언어 사양에는 함수의 ..

2.1 타입의 종류 - '타입'은 자바스크립트에서 다루는 값의 형태에 대한 설명 - '형태'란 값에 존재하는 속성과 메서드 그리고 내장되어 있는 typeof 연산가자 설명하는 것을 의미 - 타입스크립트의 가장 기본적인 타입 : ➡ 일곱 가지 원시 타입 null, undefined, boolean, string, number, bigint, symbl 변수의 원시 타입을 잊어버렸다면 타입스크립트 플레이그라운드 혹은 IDE에서 원싯값을 갖는 let 변수를 입력하고 변수 이름 위에 마우스 가져가면 확인 가능 2.1.1 타입 시스템 - 프로그래밍 언어가 프로그램에서 가질 수 있는 타입을 이해하는 방법에 대한 규칙 집함 ➡ 기본적인 작동 1. 코드를 읽고 존재하는 모든 타입과 값을 이해 2. 각 값이 초기 선언에..

파일이 들어왔는지 확인하기 우클릭해서 속성들어가기 인풋박스 클릭해서 속성에 파일이 있는지 확인!

1. 디스플레이 속성 section태그는 섹션(부분, 구역, 영역)들을 그룹화 해서 분리하는 역할 ➡️ section은 주제별로 구분한 그룹이다. 논리적으로 관계 있는 요소 또는 문서를 분리할 때 사용 article 태그는 문서내에서 그룹화해서 분리하는 역할 ➡️ article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용, 좀 더 구체적으로 사용 2. flex item의 팽창과 수축 flex-grow, flex-shrink 플렉스박스의 유연한 레이아웃을 가능하게 하는 속성 2가지 : flex-grow, flex-shrink 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink) 해서 행 안에 적절한 너비로 배..

JS 탭 메뉴 구현하기 HTML 전체 미답변 답변완료 진행확정 아직 받은 요청서가 없습니다. 미답변이 없습니다. 답변완료가 없습니다. 진행 확정이 없습니다. 결과 화면 JavaScript 어쩌다 제이쿼리로,, 원래 하려고 했던 순서였지만, 못했던 과정 1. CSS에서 처음에는 모든 empty가 보이지 않도록 지정 2. 특정 class가 부여되면, 보이게 지정 3. 모든 요소를 불러줌 4. 요소마다 클릭이벤트를 지정 5. 클릭한 요소에 매칭되는 empty를 찾음 6. 매칭되는 empty에 클래스를 부여

React 개념 정리 useRef 사용방법 const ref = useRef(value) 유용한 상황 1️⃣ 불필요한 렌더링 방지 (저장 공간) - State의 변화 ➡ 렌더링 ➡ 컴포넌트 변수들 초기화 - Ref의 변화 ➡ NO 렌더링 ➡ 변수들의 값이 유지됨 2️⃣ 손 쉽게 DOM 요소에 접근 - Doucument.querySelector() 와 비슷한 역할 ➡ 변화는 감지해야하지만, 그 변화가 랜더링을 발생시키면 안될 때! (로그인 버튼 등) useMemo - 컴포넌트 최적화를 위해 사용되는 Hook - 메모이제이션(Memoization) : 동일한 값을 리턴하는 함수를 반복적으로 호출해야 할 때, 맨 처음의 값을 메모리에 저장 후 필요할 때 마다 사용 ➡ 프로그램 실행 속도를 빠르게 하는 기술 함..

CSS 중앙 정렬하는 방법 자기 자신이 중앙으로 갈 경우 ➡️ position, margin: auto 부모 요소가 자식 요소를 중앙으로 보낼 경우 ➡️ flex, grid, place-items 수직 수평을 개별적으로 할 경우 /* Flex */ display: flex; justify-content: center; align-items: center; /* Grid */ display: grid; justify-content: center; align-items: center; 전체 가운데 정렬을 할 경우 /* place-item */ display: grid; place-items: center; 수평 중앙 정렬할 때 블록요소 vs 인라인(인라인블록) ➡️ 블록 요소는 자기 자신에게 margin: ..

디스플레이 속성 4가지 특징 1️⃣ 기본 너비 값 2️⃣ 한 줄에 하나 or 여러 개 3️⃣ 크기 값 (너비, 높이) 4️⃣ 상하 마진 인라인 요소 (Inline Elements) ➡️ 글자를 개별적으로 꾸미는 서식에 관련된 태그들 span, a, b, strong, mark, map 등 ➡️ 기본 너비 값 : 컨텐츠 너비 값 / 한 줄에 여러개 / 크기 값 ❌ / 상하 마진 ❌ 블록 요소 (Block Elements) ➡️ 레이아웃에 관련된 태그, 목록, 제목, 테이블, 시멘틱태그(헤더, 푸터, 메인, 섹션 등) div, p, table, ul, ol 등 ➡️ 기본 너비 값 : 100% / 한 줄에 하나만 배치 / 너비 값, 높이 값 ⭕ / 상하좌우 마진 ⭕ 인라인 블록 요소 (Inline Block ..

React 개념 정리 Context란? - 어플리케이션에서 전반적으로 사용할 값을 관리 (사용자 언어, 로그인 상태, UI 테마 등 환경 설정) - Context와 컴포넌트가 연동되면 재사용이 어려움⭐ - 한마디로 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다! useContext const value = useContext(MyContext); - 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할 useContext() 사용 방법 Context 객체 생성 import { createContext } from 'react'; // MyContext 객체 생성 const MyContext = createContext(); C..

State란? - 컴포넌트가 가질 수 있는 상태 (동적인 값의 상태) State의 종류 - 클래스형 컴포넌트의 state 속성 (React Hooks가 나오기 이전에 사용) - 함수형 컴포넌트의 useState 함수 (16.8버전 이후) Hooks란? - 16.8버전 이후 새로 도입된 기능 - 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능을 제공 기능 : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 특징 : state와 lifecycle과 같은 기능을 사용 가능하게 해줌 종류 : useState, useEffect, useReducer, useMemo, useCallback, useRef 규칙 : 최상위에서만 호출, 오직 React 함수 내에서만 호출 useState()..