본문 바로가기

분류 전체보기402

2024-05-28 스탠다드 과제 - props-drilling을 context API 활용 리팩토링 하기 context API로 texts state 리펙토링 하기원본import React, { useState, useEffect} from "react";import TextInput from "./components/TextInput";import TextList from "./components/TextList";function App() { // TODO: texts 를 context api 로 리팩터링 하세요. const [texts, setTexts] = useState(() => localStorage.getItem("texts") ? JSON.parse(localStorage.getItem("texts")) : [], ); useEffect(() => { lo.. Programing/TIL 2024. 5. 28.
2024-05-27 리액트 숙련과제 (2) 버튼 눌러 필터링 된 data 정보를 로컬스토리지에 담고 꺼내어 활용하기지금까지 했던 작업은 버튼을 누른 것이 재접속을 하거나 새로고침을 하면 풀려버린다. 그런데 이를 로컬 스토리지에 저장하고 이를 불러와서 렌더링한다면 사용자가 버튼을 눌러 놓은 상태를 기억하고 재접속하거나 새로고침해도 풀리지 않는다. 페이지에 처음 접속했을 때는 아무 버튼도 누르지 않았으니 전체 data를 렌더링하고, 버튼을 누를 때 로컬스토리지에 해당 월의 배열을 저장하고, 이를 불러와서 렌더링 하는 방식으로 리팩토링하고자 한다.처음부터 이렇게 작업했다면 수월했겠지만 과제 수행 순서를 맞추다보니 대공사를 해야 하는 소요가 발생했다. 뿐만 아니라 clickedMonthBtn 상태를 App 컴포넌트에서 정의하고 props-drilling.. Programing/TIL 2024. 5. 28.
2024-05-24 리액트 숙련 과제 (1) 리액트 숙련과제 의사코드#공부/코딩과제 요구사항 체크필수 구현사항 체크하기지출 CRUD 구현 (작성, 조회, 수정, 삭제)월별 지출 조회 기능 구현 (Home - Read)월별 지출 항목 등록 구현 (Home - Create)지출 상세 화면 구현 (Detail - Read)상세화면에서 지출 항목 수정 구현 (Detail - Update)상세화면에서 지출 항목 삭제 구현 (Detail - Delete)필수 요구사항 체크하기styled-components 를 이용하여 스타일링인라인 스타일링이나 일반 css 파일을 이용한 스타일링 방식 지양 (이번 과제 한정)모든 태그를 styled-components 화 할 필요는 없으나 스타일링이 들어가는 경우는 styled-components 화 할 것styled-com.. Programing/TIL 2024. 5. 27.
우리의 숙제 Hobby/Guitar 2024. 5. 26.
margin 속성 개수에 따른 의미와 예제 margin 속성은 요소의 외부 여백을 설정하는 속성이다.margin 다음에 오는 값의 개수에 따라 설정되는 방향이 달라진다.한 개의 값 (margin: value;): 모든 방향(위, 오른쪽, 아래, 왼쪽)에 동일한 여백 적용.두 개의 값 (margin: value1 value2;):첫 번째 값(value1): 위와 아래 여백두 번째 값(value2): 왼쪽과 오른쪽 여백세 개의 값 (margin: value1 value2 value3;):첫 번째 값(value1): 위 여백두 번째 값(value2): 왼쪽과 오른쪽 여백세 번째 값(value3): 아래 여백네 개의 값 (margin: value1 value2 value3 value4;):첫 번째 값(value1): 위 여백두 번째 값(value2): .. Programing/CSS 2024. 5. 25.

티스토리툴바