본문 바로가기

전체 글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.
[프로그래머스] 배열에서 문자 대소문자로 반환하기 (toUpperCase(), toLowerCase(), map()) [level 0] 배열에서 문자열 대소문자 변환하기 - 181875문제 링크 성능 요약메모리: 33.4 MB, 시간: 0.06 ms구분코딩테스트 연습 > 코딩 기초 트레이닝채점결과정확성: 100.0합계: 100.0 / 100.0제출 일자2024년 05월 22일 19:37:01문제 설명문자열 배열 strArr가 주어집니다. 모든 원소가 알파벳으로만 이루어져 있을 때, 배열에서 홀수번째 인덱스의 문자열은 모든 문자를 대문자로, 짝수번째 인덱스의 문자열은 모든 문자를 소문자로 바꿔서 반환하는 solution 함수를 완성해 주세요.제한사항1 ≤ strArr ≤ 201 ≤ strArr의 원소의 길이 ≤ 20strArr의 원소는 알파벳으로 이루어진 문자열 입니다.입출력 예 strArrresult .. Programing/CodeKata 2024. 5. 24.
[프로그래머스] 문자열이 몇 번 등장하는지 세기 (indexOf, while) [level 0] 문자열이 몇 번 등장하는지 세기 - 181871문제 링크 성능 요약메모리: 33.5 MB, 시간: 0.04 ms구분코딩테스트 연습 > 코딩 기초 트레이닝채점결과정확성: 100.0합계: 100.0 / 100.0제출 일자2024년 05월 21일 18:24:39문제 설명문자열 myString과 pat이 주어집니다. myString에서 pat이 등장하는 횟수를 return 하는 solution 함수를 완성해 주세요.제한사항1 ≤ myString ≤ 10001 ≤ pat ≤ 10입출력 예 myStringpatresult "banana""ana"2"aaaa""aa"3 입출력 예 설명입출력 예 #1"banana"에서 1 ~ 3번 인덱스에서 한 번, 3 ~ 5번 인덱.. Programing/CodeKata 2024. 5. 24.
[프로그래머스] 특정 문자 제거하기 (replaceAll) [level 0] 특정 문자 제거하기 - 120826문제 링크 성능 요약메모리: 33.6 MB, 시간: 0.04 ms구분코딩테스트 연습 > 코딩테스트 입문채점결과정확성: 100.0합계: 100.0 / 100.0제출 일자2024년 05월 21일 19:08:10문제 설명문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요.제한사항1 ≤ my_string의 길이 ≤ 100letter은 길이가 1인 영문자입니다.my_string과 letter은 알파벳 대소문자로 이루어져 있습니다.대문자와 소문자를 구분합니다.입출력 예 my_stringletterresult "abcd.. Programing/CodeKata 2024. 5. 24.
[프로그래머스] 나이 출력 (뺄셈 연산자) [level 0] 나이 출력 - 120820문제 링크 성능 요약메모리: 33.6 MB, 시간: 0.02 ms구분코딩테스트 연습 > 코딩테스트 입문채점결과정확성: 100.0합계: 100.0 / 100.0제출 일자2024년 05월 20일 17:15:26문제 설명머쓱이는 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 2022년 기준 선생님의 나이 age가 주어질 때, 선생님의 출생 연도를 return 하는 solution 함수를 완성해주세요제한사항0 나이는 태어난 연도에 1살이며 매년 1월 1일마다 1살씩 증가합니다. 입출력 예 ageresult 401983232000 입출력 예 설명입출력 예 #12022년 기준 40살이므로 1983년생입니다.입출력 예 #22022년 기준 2.. Programing/CodeKata 2024. 5. 24.
[프로그래머스] 몫 구하기 (나눗셈 연산자, parseInt) [level 0] 몫 구하기 - 120805문제 링크 성능 요약메모리: 33.4 MB, 시간: 0.02 ms구분코딩테스트 연습 > 코딩테스트 입문채점결과정확성: 100.0합계: 100.0 / 100.0제출 일자2024년 04월 26일 11:08:28문제 설명정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요.제한사항0 num1 ≤ 1000 num2 ≤ 100입출력 예 num1num2result 1052723 입출력 예 설명입출력 예 #1num1이 10, num2가 5이므로 10을 5로 나눈 몫 2를 return 합니다.입출력 예 #2num1이 7, num2가 2이므로 7을 2로 나눈 몫.. Programing/CodeKata 2024. 5. 24.

티스토리툴바