나디아 성장 일기

📌 align-content : 요소를 여러 줄로 정렬할 때, 요소의 라인 설정 요소 라인의 위치를 변경할 때 사용 다중 라인일 때만 동작 O 항목 이동 X, 라인을 움직임 O center space-between space-around space-evenly 🔶 row-gap : 요소가 여러 줄 일때, 행(가로) 간격 🔶 column-gap : 열(세로) 간격 출처 노마드코더 CSS Layout 마스터클래스

기본적으로 flexbox는 flex container 안의 요소들을 한 줄로 표시하려고 한다. 👉 그래서 요소의 너비(width)를 무시할 때도 있음 👉 flex-wrap를 사용하면 해결 ⭕ 📌 flex-wrap 부모 요소에 적용 요소 한 줄 / 여러 줄 배치를 제어 nowrap: 줄 바꿈 없이 한 줄 배치 - 기본값 - 요소의 너비(width) 무시 / 압축 warp: 요소의 너비(width) 보존 + 줄 바꿈해서 배치 wrap-reverse: 왼쪽 아래부터 오른쪽으로 시작 - 잘 안씀 📌 flex-flow 단축 속성: flex-direction + flex-wrap body { flex-flow: row wrap; = /* flex-direction: row; flex-wrap: wrap; */ } ..

📌 flex직속 부모 요소에 설정 👉 flex container로 바꿔줌 (자식 요소에 설정 X) 자식 요소도 flex container가 될 수 있음 (내부 글자 이동) display: flex; 요소 가로 배치 inline 요소로 변경됨 (크기가 자기 컨텐츠만큼만 설정)   📍 gap: 요소 간 간격 조정직속 부모 요소에 설정 row-gap: 요소가 여러 줄 일때, 행(가로) 간격 column-gap: 열(세로) 간격  📌 flex-direction: 요소들이 움직이는 방향 row: 가로 배치 - 기본값 (굳이 적지 않아도 됨)row-reverse: 가로 + 주축 (오른쪽 👉 왼쪽) column: 세로 배치 column-reverse: 세로 + 주축 (아래 👉 위)  📌 Main and ..

React 개발자 도구 React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 47cf347e4 on 3/8/2024. chromewebstore.google.com 📌 설치 Chrome에 추가 크롬 점 3개 ➡ 확장 프로그램 ➡ 확장 프로그램 관리 React Developer Tools 세부정보 두 개 다 허용 on 오른쪽 상단의 퍼즐 모양 ➡ 확장 프로그램 등록 & 고정 >> 화살표 클릭 ➡ Components 확인 📌 기능 컴포넌트 확인 update 시 노란색으로 변경됨 출처 한입 크기로 잘라먹는 리액트

📌 useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 컴포넌트의 사이드 이펙트(Side Effect)를 제어하는 React Hook 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것 ✨ 사이트 이펙트 (Side Effect) : 부수적인 효과, 파생되는 효과 (= 어떠한 동작에 따라 발생하는 효과) 📌 useEffect 구조 useEffect ( function, [deps] ) function: 실행하고자 하는 콜백 함수 deps: 의존성 배열 (검사하고자 하는 특정 값 배열) 👉 두 번째 인수로 전달한 배열[ ]의 값이 변경되면, SideEffect가 발생하여 첫 번째 인수로 전달한 콜백 함수를 실행시킨다..

라이프 사이클 (LifeCycle) : 프로그램의 실행부터 종료까지 시간의 흐름에 따른 단계적인 과정 Mount (탄생) : 컴포넌트가 탄생하는 순간 화면에 처음 렌더링 되는 순간 Update (변화) : 컴포넌트가 리 렌더링(Re-rendering) 되는 순간 UnMount (죽음) : 컴포넌트가 화면에서 사라지는 순간 렌더링에서 제외 되는 순간 📌 라이프 사이클 제어 : 라이프 사이클 단계 별로 컴포넌트들이 각각 다른 작업을 수행하도록 하는 것 useEffect를 이용하여 구현할 수 있음 출처 한입 크기로 잘라먹는 리액트

카운터(Counter) 만들기 📌 하나의 state를 여러 컴포넌트에서 사용할 경우, 공통 부모의 컴포넌트에 선언해야 한다. 형제 컴포넌트끼리는 state 공유 불가능 ❌ 📌 State Lifting (state 끌어올리기) : state를 계층 구조 위로 끌어올려서 아래에 있는 컴포넌트들이 모두 사용할 수 있도록 하는 방법 📌 데이터는 props를 이용하여 부모 컴포넌트 👉 자식으로 전달하여 사용 📌 카운터(Counter) 만들기 App.jsx (부모 컴포넌트) 현재 카운트 state 선언하기 count 버튼 기능 함수 생성하기 - 버튼을 누르면 현재 숫자인 count에 해당 버튼의 숫자인 value를 연산 Viewer.jsx App 컴포넌트에서 count state를 props로 가져오기 Contro..

지금 이 페이지가 작동하지 않습니다. 127.0.0.1은 데이터를 보내지 않았습니다. ERR_EMPTY_RESPONSE 📌 현상 html 파일을 live server로 열었을 때 페이지가 작동하지 않았다. 👉 해결 EXTENSIONS: MARKETPLACE → Live Server → Extension Settings → Use Local Ip 체크하기 참고 [VS CODE] 페이지가 작동하지 않습니다.127.0.0.1에서 전송한 데이터가 없습니다. 오류 해결 방법 □ 에디터: vs code □ open with live server가 실행되지 않을 때 □ 에러 메세지: 페이지가 작동하지 않습니다. 127.0.0.1에서 전송한 데이터가 없습니다. ERR_EMPTY_RESPONSE □ 해결방법: 마켓 플레..

[SyntaxError: Unexpected token o in JSON at position 1] SyntaxError : 문법적으로 잘못된 코드를 해석하려고 시도할 때 발생하는 오류 📌 현상 객체를 JSON 형태의 문자열로 바꾼 다음 이걸 다시 객체로 바꾼 후 변수에 저장하는 과제 중 발생한 오류이다. (객체 → JSON → 객체) 📌 원인 이미 객체인 데이터를 다시 한번 객체(JSON.parse())로 바꿀 때 발생하는 오류 - JSON.parse( ): JSON 문자열 → 객체 👉 해결 JSON.stringify()와 JSON.parse()를 한 번에 진행하는 식으로 바꾸었다. 👍 배운점 JSON 형태에서 이미 객체가 된 데이터에 JSON.parse()를 실행할 경우 에러가 발생한다는 것을 알게 ..

React Hooks Hooks : class 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드 (ex. useState, useRef...) Hooks는 이름 앞에 접두사 use가 붙는다. 각각의 메서드는 Hook(훅)이라고 부른다. 📌 Hook의 특징 1. 함수 컴포넌트, 커스텀 훅(Custom Hook) 내부에서만 호출 가능 ⭕ 2. 조건부(조건문, 반복문)로 호출 불가능 ❌ 3. 나만의 훅(Custom Hook)을 직접 생성 가능 ⭕ 📌 Custom Hook 만들기 함수명 앞에 use 붙이기 (useXXX) 컴포넌트마다 반복되는 로직 + Hook을 이용하는 로직 👉 커스텀 훅으로 분리하여 사용하면 좋음 + hooks 파일에 별도의 이름으로 보관하는게 일반적이다. 출처 한입 크..