리액트(3)
-
[React] 리액트 데이터흐름의 중요성
내가 마주한 문제는 진행중인 사이드 프로젝트의 캘린더를 체크박스로 묶어서 여러항목을 한번에 삭제하는 기능을 구현하다가 마주한 문제입니다. 기능구현에 앞서, 로직을 구성할 때 나의 머릿속에서 수도코드를 작성해봤다. 로직 수도코드 체크박스의 상태와 선택된 항목을 담을 상태를 만든다. 체크박스가 체크되면 체크박스핸들러라는 함수가 실행되고, 해당 함수에서는 체크박스의 상태를 true로 변경하고 선택된 항목을 배열 타입의 state에 추가한다. 조건문을 통해 체크박스가 비활성화된다면 배열에서 해당항목을 필터해서 삭제해준다. 삭제버튼을 누르면 해당 배열에 들어간 항목들을 순차적으로 순회하면서 DELETE요청을 서버로 요청한다. 위의 로직으로 구현을 했고, 체크박스를 클릭했을 때 내 예상과는 다른 결과가 나왔다. 내..
2023.10.18 -
토이프로젝트[ANI SCHO] 배포 및 서비스
ANICON PICKER => ANI SCHOOL 기존 프로젝트 이름이였던 ANICON PICKER를 ANI SCHOOL로 변경되었다. 물론 이름만 바꾼건 아니고, 프로젝트의 컨셉과 구조를 조금 변경하였다. 배포하기전에 좀 더 확실한 컨셉을 잡아놓고 싶었기에 배포예정일이 얼마 남지 않았지만 급히 수정했다. 기존에는 아래와 같이 별다른 컨셉이 없었다. 컨셉을 출석부로 잡고 동물 학교의 학생들을 직접 커스터마이징 하여 생성하는 컨셉으로 잡았다. 컨셉이 바뀌면서 구조변경과 그에따른 코드 리팩토링이 이루어졌다. 리팩토링이 끝난 모습은 아래와 같다. 배포 전 컴포넌트 구조변화 및 기능추가 컨셉이 출석부로 바뀌게 되면서 컴포넌트를 하나 더 만들어야 했다. 기존에 SelectButton컴포넌트가 App컴포넌의 자식요..
2023.03.05 -
첫 토이프로젝트[ANICON PICKER]
토이프로젝트를 생각하게 된 계기 얼마 전 CRUD를 구현해낸 나는 뭔가 자신감이 흘러넘쳤고, 뭐라도 하지않으면 지금의 이 자신감이 휘발될것만 같았다. 같이 CRUD를 구현하던 동기분과 함께 이 흐름을 이어가기 위해 뭘 해보면 좋을까에 대해 상의하다가 토이 프로젝트에 대한 이야기가 나왔다. 구글링을 해보니, 보통 프론트엔드의 첫 토이프로젝트로는 TO-DO List 나 클론코딩 / 간단한 게임만들기 등을 추천했었다. 하지만 내가 생각하기에는 저러한 프로젝트들은 경험적인 측면에서는 좋겠지만 프로젝트를 완성하고나서의 보람은 별로 못 느낄 것 같았다. 그 이유는 이러했다. 타겟하는 사용자들이 없다. 굳이 내가만든 TO-DO List, 간단한게임을 이용해야 할 필요성이 없다.(메리트도 없다) 이미 시장에는 가장 최..
2023.02.27