5/29 TIL (React Account Book 과제 제출)

Hwi·2024년 5월 29일

TIL

목록 보기
36/96

📚 오늘 한 것 📚

  • 알고리즘 탐험반 문제
  • React 베이직반 과제
  • React 개인과제 제출

문제 설명

주어진 문자열에서 각 단어를 반전시키시오. 단어의 순서는 그대로 유지되어야 합니다.

예시:

입력: "the sky is blue"
출력: "eht yks si eulb"

입력: "hello world"
출력: "olleh dlrow"

나의 풀이

문자를 공백 기준으로 단어 단위로 나눠줌
map() 메서드를 사용할 변수 선언
각 단어를 문자 단위로 다시 나눈 뒤 반전시키고, 다시 하나의 단어 단위 문자열로 만듬
반전된 문자들을 하나의 문자열로 다시 만듬

    function reverseEachWord(s) {
        let words = s.split(" ");

        let reverseWords = words.map((word) => {
            return word.split("").reverse().join("");
        })
        return reverseWords.join(" ");
    };

알고리즘 문제를 풀고나서 오후 2시가 되기 전에 context로라도 전역 상태 관리를 해보려 했는데 아무래도 처음 써보는 거라서 그런지 어떻게 써야할지 감이 안 잡혀서 이러쿵 저러쿵 막 만지고 있었는데..

이렇게 하는 거 맞나? 라는 의구심이 계속 들어서 결국 과제 해설 영상이
업로드 올라오면 보면서 다시 해볼 생각.. 그래서 일단 props drilling으로만 구성한 결과물만 제출했다.

React 베이직반 과제

과제는 이번 Account Book 개인과제 전에 진행했던 To Do List의 완전 간략한 버전이라 크게 어렵진 않았던 거 같다.

요구사항

  • 인풋에 입력한 값을 등록하면 아래 리스트에 추가

  • 인풋창을 비우고 등록을 시도할 시 등록이 안되게끔 유효성 검사

  • 완료 버튼 클릭 시 취소, 취소 버튼 클릭 시 완료 로 바뀌게 해야 함
    (+ 조건부 스타일링을 통해 완료한 일정, 진행중인 일정 구분)

  • 삭제 버튼 클릭 시 리스트에서 삭제

전체 코드

베이직 과제에선 styled-components, uuidv4를 안 쓰고 하는 게 목적인 거 같아서 id 같은 건 Date.now()로 대체하고 스타일도 그냥 태그 옆에 style={{}} 달아서 했는데 확실히 스타일 컴포넌트 쓰다가 안 쓰니깐 되게 불편한 거 같다..

여튼 오늘 과제 제출도 끝마쳤겠다 내일은 과제 해설 영상 보면서 전역 상태 관리를 이해하고 익혀보도록 ... 할 수 있겠지?
내일 당장 아침에 일어나자마자 공부할 자료를 제공 받았으니 완전 럭키비키잖아~

profile
개발자가 되고 싶어~~~

0개의 댓글