JudithHopps JudithHopps

아쉬운 점 1. 아팠다. 휴먼 스케이프 코딩 테스트 합격 및 과제 전형 안내 메일을 받은 건 11월 21일 (화) 오후 4:04시, 하지만, 11월 24일 화요일부터 금요일까지 일정이 풀로 차있었다. 주말과 월화 4일이면 충분하다고 생각했다... But.... 주말 내내 고열과 기침으로 시달렸다... 월요일에 조금 나아진 듯 했지만 독감의 여운이 남았고, 마감기간인 화요일까지 기운이 좋지 않았다... 2. 리액트 네이티브 세팅이 오래 걸렸다. 주말에 리액트 네이티브 설치라도 끝냈으면 좋았을 터지만... 월요일 2시쯤 세팅을 마칠 수 있었다. 3. delete 작동시 데이터 업데이트가 되지 않는 문제 해결법이 뒤늦게 생각났다. 마감 기간 1시간 후에야 원인과 해결법을 찾을 수 있었다.... 너무나 아쉽다...

문제점 delete 작동시 데이터 업데이트가 되지 않는 문제가 발생했다. 현재 계획한 기능은 다음과 같다. Minus 버튼을 클릭할 시 updatedSelectData가 변경된다. Done 버튼을 클릭하면 updateSelectedData가 ChecklistData에 반영된다. But... 아래처럼.. updatedSelectedData가 ChecklistData에 반영이 제대로 되지 않는다.. Why... 이런일이.....🤣 투장부릴 시간 없다. 천천히 코드를 살펴보자. 원인 isEditing의 상태 변화로 인해 updatedData가 변경되고 있다. const handleDelete = () => { if (updatedSelectedData) { const updatedData = [ ...chec..

맥북을 새로 사고 리액트 네이티브 설치과정에서 겪은 문제점을 정리했다. https://reactnative.dev/docs/performance https://7stocks.tistory.com/173 Performance Overview · React Native A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your ..

체크 리스트의 상태 관리는 다음과 같다. App.tsx 아래의 state를 관리한다. const [selectedWeek, setSelectedWeek] = useState(15); const [addlist, setAddlist] = useState(''); const [isVisibleAddBtn, setIsVisibleAddBtn] = useState(true); const [isVisibleInput, setIsVisibleInput] = useState(false); const [isVisibleEditBtn, setIsVisibleEditBtn] = useState(false); const [isEditing, setIsEditing] = useState(false); ChecklistTitl..

체크리스트 프로젝트의 모듈화는 다음과 같다. 프로젝트를 시작하기 전 컴포넌트를 어떻게 구상할 것인지 먼저 생각하는 것이 좋다. 즉 뼈대를 잡고 프로젝트를 시작해야 한다. 허접하지만 이미지로 그리면 코드 짤 때 도움이 된다. 프로젝트 진행하면서 수정할 수도 있지만, 틀을 짜고 시작하는 것과 그냥 시작 하는 것은 큰 차이가 있다!! 이것도 회사 다니기 전엔 몰랐던 사실... 역시 주니어..

🐇 input - map으로 반복 및 에러 창 이름, 이메일, 닉네임을 각각 input 태그로 입력받고 나열하여 보여준다. 이름, 이메일, 닉네임에 대해서는 유효성 확인이 필요합니다. 1. 배열 나열 - key {["name", "email", "nickname"].map((v) => ( changeValue(event, v as keyof typeof typeToKorean) } type={v as keyof typeof typeToKorean} /> ))} 2. 입력값이 잘못 되었을 경우 input 아래 유효성 확인한다. 🥕 유효성 검사 ※ 객체 키값 타입 - keyof typeof {} typeof : 객체 데이터를 객체 타입으로 변환해주는 연산자 type Fruit = { red: string; ..

과제 테스트 준비 애니메이션과 로컬스토리지, 무한 스크롤 기능을 작성해봤다. 🐇 url 절대경로 모든 경로 앞에 /web/을 절대경로로 붙여주어야 합니다 1. import Router import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 2. App.tsx 파일 수정 // 모든 페이지에 보임 🐇 url 전환 header의 menu를 누르면 url 바뀌어야 한다. 1. header 작성 2. react-router-dom 설치 3. Link to로 전환 // import styles from "./style/app.module.css" import styles from "../style/app.module.css"; impor..

과제 테스트 준비 input 태그와 관련되어서 좀 더 심도있게 준비를 하게 되었다. 🐇 readonly 유저가 input에 직접 값을 입력할 수 없다. readonly를 사용하면 된다. readonly를 사용하지 않을 때는 onChange 함수를 기입해야 한다. 🐇 backspace 백스페이스 기능 입력된 값을 백스페이스로 지울 수 있다 1. input의 onKeyDown 메소드를 이용 handleKeyDown(event, 'password')} /> 이때, 매개변수가 1개라면 event를 생략할 수 있다. ex) onKeyDown={handleKeyDown} 2. backspace 확인 및 기능 동작하는 함수 작성 const handleKeyDown = (event: React.KeyboardEvent..