나디아 성장 일기

☑ 체크박스 기능 체크박스가 클릭된 요소의 아이디(targetId)를 받아와서 todos state 값들 중 targetId와 일치하는 id의 todo를 찾아서 isDone 값을 변경 🔺App.jsx 체크박스 업데이트 함수 생성 체크박스가 클릭된 요소의 id(targetId)를 인수로 받아오기 todos state 배열에서 targetId(체크박스가 클릭된 요소의 id) === id가 일치하는 todo의 isDone 값을 바꾼 배열을 생성하는 함수 생성 state를 isDone을 바꾼 todo로 변경하기 위한 변경 함수 사용 일치하면 todo를 spread 연산자(...)로 풀어헤쳐서 isDone의 상태를 현재의 반대값으로 만든다. const onUpdate = (targetId) => { // 체크박스..

To-do List: 일정 추가하기 / 검색하기 📌 전체 컴포넌트 구조 🔺 App - 전체 🔺 Header - 제목, 날짜 표시 🔺 Editor - Todo 입력칸 🔺 List - 전체 Todo (TodoItem의 모음) 🔺 TodoItem - 개별 Todo 일정 추가, 수정, 삭제가 일어나는 컴포넌트 props를 바꿔가며 반복적으로 렌더링 📌 일정 추가하기 (+ 렌더링) 내용을 입력하고 추가 버튼을 누르면 todos state값을 변경해줘야 한다. 🔺 App.jsx 임시 데이터로 데이터 모델링 데이터가 어떤 형태로 있어야 하는지 설정 임시 데이터는 계속 렌더링할 필요 없으니 App 컴포넌트 밖에 선언 // 임시 데이터 (기본 데이터) - 계속 렌더링할 필요 없으니 App 컴포넌트 밖에 선언 const ..

📌 ref : 리액트에서는 DOM을 선택해 직접 접근하기 위해 사용 HTML 태그에 class나 id를 부여해서 사용하는 것처럼(), 리액트에서는 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. (ex. 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기 등) 🔺사용하기 useRef(React Hook)를 사용하여 ref 활용 useRef 선언하기 HTML 태그에 선언한 useRef 변수로 ref 부여하기 useRef 변수 사용하기 const Editor = ({onCreate}) => { // 1. useRef 선언하기 const contentRef = useRef(); const onSubmit = () => { // 입력칸이 공백인데 '추가' 버튼을 누르면..

📌 @mixin일종의 function@include와 함께 사용한다.값을 인자(argument)로 전달하여 태그마다 값을 다르게 지정할 수 있음 🔺 선언하기 @mixin 변수명($인자) { 공통 코드 }인자는 여러 개 전달 가능 O 🔺 사용하기selector { @include 변수명(인자값); }@include를 사용하여 인자(argument)를 보내고 function을 불러온다.인자는 다르게 부여할 수 있음@mixin alert($bgColor, $borderColor) { background-color: $bgColor; margin: 10px; padding: 10px 20px; border-radius: 10px; border: 1px dashed $borderColor; } .success {..

@extend : 하나의 componenet를 만들고 여러 곳에서 공유할 수 있다. 공통적인 디자인을 부여할 때 유용함 📌 선언하기 %변수명 { 공통 코드 } 📌 사용하기 selector { @extend %변수명; } %alert { margin: 10px; padding: 10px 20px; border-radius: 10px; border: 1px dashed black; } .success { @extend %alert; background-color: green; } .error { @extend %alert; background-color: tomato } .warning { @extend %alert; background-color: yellow; } 출처 노마드코더 CSS Layout 마스..

📌 Nesting (중첩): CSS를 중첩해서 사용할 수 있다. body 태그에는 사용하지 않는게 좋다.참조 중인 태그의 개체를 가리킬 수 있다. 👉 & 사용 출처노마드코더 CSS Layout 마스터클래스

SCSS : CSS를 확장시킨 도구 브라우저는 SCSS를 이해하지 못함 👉 SASS로 SCSS 코드를 처리해서 CSS로 만듦 📌 SCSS & SASS 설치 npm add -D sass CSS 파일 확장자 .SCSS로 변경 html의 CSS 파일 주소 변경 📌 Vite의 Auto reload 기능 프로젝트 배포 시 해야할 일 변경 사항이 있으면 reload 콘솔에서 작업 중지: Ctrl + C npm run build - 배포를 위한 dist 폴더가 생성됨 - dist 폴더의 index.html에 SCSS를 변환한 CSS로 코드가 있음 출처 노마드코더 CSS Layout 마스터클래스

📌 반응형 grid 레이아웃 📌 페이지의 크기에 따라 열의 갯수를 동적으로 만들기auto-fill / auto-fit페이지 크기에 따라 grid 배치가 자동으로 변경된다. 지정한 최솟값에 도달하면 배열이 바뀐다!!!.father { display: grid; gap: 10px; height: 100vh; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } 📌 auto-fill: 지정한 크기에 맞는 최대한 많은 아이템을 배치하고, 남은 공간은 빈 공간으로 둔다. grid-template-columns: repeat(auto-fill, minmax());과 함께 사용지정한 크기의 열을 최대한 많이 만든다. 👉 그 열이 비어있어도 📌 auto-fit..

📌 max-content : 콘텐츠 크기만큼 열(세로)의 크기를 조절한다. 보통 grid-template-columns와 함께 쓰임 텍스트가 한 줄에 표시될 수 있을만한 너비(width) .father { grid-template-columns: 1fr max-content 1fr; } 📌 min-content : 콘텐츠의 최소 크기만큼 열(세로)의 크기를 조절한다. 열의 최소 길이 = 가장 긴 단어의 길이에 따라 정해짐 .father { grid-template-columns: 1fr min-content 1fr; } 📌 minmax(최솟값, 최댓값) : 행이나 열의 최소 크기를 설정하는 함수 최솟값과 최댓값이 있는 열과 행을 만들 수 있다. 페이지 크기를 줄일 때, 가운데 열이 400px 미만으로 줄..

📌 justify-content : 셀을 그룹으로 묶어서 가로 방향으로 정렬 grid container에 여분의 공간이 있는 경우에만 작용 ✨ 부모 요소에 적용 start - 기본값 end center space-around space-evenly space-between grid container에 여분의 공간이 있는 경우에만 작용 ✨ - grid-template-columns를 1fr로 설정하면 셀이 화면에 가득차서 여분의 공간이 없으므로 작동하지 않는다. .father { display: grid; gap: 10px; height: 100vh; height: 100vh; grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(2, 1..