map 함수의 작동 순서 1. array의 자료 갯수만큼 함수안의 코드를 실행해줌. > > * 이러면 console에 1이 3번찍힘 2. 함수의 파라미터는 array안에 있던 자료임. > > * 이러면 console에 1,2,3이 차례대로 표시됨 3. ret

리액트 - 공식문서로 디테일 잡기 (고급) 목차 > 1️⃣ Hooks 2️⃣ Composition 3️⃣ HOC 4️⃣ Memoization 5️⃣ Context 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🧑🏻‍💻 오늘의 회고 1️⃣ Hooks Hook 이란? 공식

리액트 - 공식문서로 디테일 잡기 목차 > 1️⃣ 공식문서를 보는 이유 2️⃣ 개발 환경 설정 3️⃣ JSX 4️⃣ Props 5️⃣ State 6️⃣ 컴포넌트 생명주기 7️⃣ 이벤트 8️⃣ 9️⃣ 🔟 1️⃣ 공식 문서를 보는 이유 > 라이브러리도 결국 사람이

1️⃣ Key와 리랜더링 알아보기2️⃣ 상태 끌어올리기3️⃣ 데이터 Fetch 해보기Key는 Value를 특정하는 이름완료 버튼 클릭시 해당 항목이 사라지고, 복구 버튼을 누르면 사라진 항목이 표시됨.코드공식 문서(https://developer.mozilla

1️⃣ 리액트 Element에 스타일 입히기2️⃣ Ref로 DOM 다루기3️⃣ Form 다루기4️⃣ Error 다루기이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!잔여 연산자➡️ 입력받는 값들을 모두 태그 안에 설정해줌특정 DOM을

1️⃣ 컴포넌트 상태 다루기2️⃣ 컴포넌트 사이드이펙트 다루기3️⃣ 커스텀 훅 만들기4️⃣ Hook Flow 이해하기공식문서useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예제: useSt

리액트 맛보기 2 리액트의 리렌더링 알아보기 >1️⃣ React는 변경된 곳만 렌더링한다. > >➡️ 굉장히 효율적이다! > >2️⃣ React는 불변객체(immutable)이다. >

😋 리액트 맛보기 🤨 리액트를 시작하기에 앞서... 리액트는 라이브러리의 구조를 가지고 있다. > 라이브러리 vs 프레임워크 > 라이브러리는 개발 편의를 위한 도구의 모음 프레임워크는 기반 구조까지 잡혀있음 > -> 라이브러리는 공구 -> 프레임워크는 공장

Bundler > 여러개의 파일을 하나의 파일로 묶어주는 역할을 함. > 참고 블로그 > Webpack vs Rollup vs Parcel > 위 세가지가 가장 많이 쓰이는 번들러임. > * Webpack ➡️ 다양하고 복잡한 프로젝트에 추천 (대부분이 선호)

TypeScript TypeScript 시작하기 TypeScript 란 무엇인가? > VS Code 설치 및 설정 > >1. "test.ts" 파일 생성 터미널에 npm init -y 입력 (현재 폴더를 npm project로 만듬) 터미널에 npm i ty

JS 데이터 실습 가져오기, 내보내기 자바스크립트에서 데이터를 내보낼때, 기본 통로와 이름을 지정하는 통로 두가지가 있음. > 기본 통로의 경우 (default) > > 기본 통로 예시 > > > 이름을 지정하는 통로 > 사용 예시 > > >📌 기본

JS 데이터 목차 >1. 문자 숫자와 수학 배열 객체 구조 분해 할당 전개 연산자 불변성 얕은 복사와 깊은 복사 문자 (string) >String 전역 객체는, 문자열(문자의 나열)의 생성자이다. 종류 String.length 문자열의 길이 반환 Strin

JS 클래스 ❗️ 생성자 함수(prototype) 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 있다. 이때, new연산자와 생성자 함수를 사용하면, 유사한 객체 여러개를 쉽게 만들 수 있다. > > 생성자 함수 만드는 법 함수 이름의 첫글자는 대문자로 시

JS 함수 함수 복습 > 함수의 결과가 반복적으로 사용될 때 -> 변수에 담아서 쓰는 것이 좋음 단일로만 사용될 때 -> 함수의 결과가 사용되는곳에서 호출하는게 좋음 >❗️ 함수 표현과 함수 선언의 차이 >함수 선언은 그 함수를 반환하는 변수를 만들고 >함수 표현

JS 시작하기 개요(ECMAScript) 및 프로젝트 초기화 ECMA 스크립트란? >ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

JS 선행 스타벅스 클론 코딩을 본격적으로 들어가기에 앞서 필요한 개념들을 정리해보겠다! 목차 >1. 표기법 데이터 종류 변수, 예약어 함수 조건문 DOM API 메소드 체이닝 질의응답 표기법 >* dash-case(kebaba-case) HTML, CSS

이 날만을 기다렸다..드디어 열심히 수업한 html과 css를 바탕으로 클론코딩을 하기로 했다.일단 리액트나 자바스크립트 등등 배워서 코딩을 하려면 멀었으니깐,"지금까지 배운것을 활용해보는 측면에서 만들어보자" 가 주된 목적이다.(복습을 위해서 하는거라, 끝까지 할지는

CSS 속성 CSS속성의 역할 화면에 예쁘게 나오도록 만드는 역할을 한다. > CSS 속성의 종류 > * 박스모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 박스모델 너비 (width,height) > ` 인라인 요소`

CSS 개요 기본 문법, 주석 CSS의 기본 문법 알아보기 편하게 그림을 바탕으로 각 요소들을 설명하겠다 >선택자 스타일 (CSS)을 적용할 대상 (Selector) > 속성 스타일 (CSS)의 종류 (Property) > 값 스타일 (CSS)의 값 (Value)

글자를 앉히기 위해 만들어진 상자💡 팁line-height에 따라 height가 계산됨. 근데 줄이 n개가 되면 height \* n 이 됨.img 태그vertical-align원래는 baseline을 기준으로 정렬되나,middle 값을 넣으면 height를 기준으로