JudithHopps JudithHopps

📅 프로젝트 기간 2023.3.26 ~ 2023.8.25 🌟 결과물 2023.8.29 기준 39명의 유저 확보 및 사용자 피드백 수렴 🧑🏻‍💻 역할 - 프론트엔드 기능 개발 및 방향 설정, 프론트엔드 회의 주도, 프로젝트 기획 및 세부 기능 설정 - MVP 버전 마이페이지,프로필, 로딩 컴포넌트 UI 화면 구상 및 공통 컴포넌트 제작 - 계정 관련 정보 호출 및 계정 정보 Edit 기능 구현 1. 닉네임 및 사진 수정 - 닉네임 중복 및 사진 파일 크기 확인 - useMutation은 서버에 데이터를 수정하거나 업데이트하는 작업을 처리 2. 관심사 및 언어 선택 [언어] - 버튼 클릭시 저장된 언어 정보가 리셋 - 선순위가 선택되어야 후 순위 선택 가능 [관심사] - 중복 클릭시 선택 해제, 클릭시 선택..

코드 수정하다 발견한 새로운 에러..! 뭘 잘못 건들였을까... 에러 명: Warning: validateDOMNesting(...): cannot appear as a descendant of . 처음 보는 에러였지만, 역시나 친절한 개발자 도구! 에러 워인은 태그 안에 태크를 추가했기 때문이다. => 태그 끼리 구별하면 해결!!

2588번 문제 각 자리를 구해야 하는 문제이다. 추후에 각 자리 수를 구하는 공식을 작성해봤다. Math.floor( (number % 원하는자리수 * 10)/ 원하는 자리수) 위 공식을 이용하여 반복문 처리를 했다. const input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n').map(Number) const answer = [] for (let i = 1 ; i

10171번 문제가 고양이 그림을 출력하는 문제이며 10172번은 개 그림을 출력하는 문제다. 10171번 문제 고양이 그림을 출력하는 문제를 먼저 살펴보자. 위 그림을 출력해야하는 문제다. 처음 접근은 우선 여러 줄을 한꺼번에 출력하게 만들었다. console.log(``) 백틱을 사용하면 여러 줄을 한 번에 출력할 수 있다. 백틱을 사용하여 출력 부분만 복사를 하여 넣었는데 에러가 뜨며 원하는 결과대로 출력되지 않았다. 백 슬래시(\)를 사용할 때는 두 번 입력해줘야 제대로 출력이 된다. 이 부분을 간과하고 바로 출력하여 에러가 발생하던 것이였다. 백 슬래시를 두 번 입력하니 원하는 대로 출력이 되었다. console.log(`\\ /\\ ) ( ') ( / ) \\(__)|`) 10172번 문제 그..

와 은 HTML에서 사용되는 두 가지 중요한 태그입니다. 이들의 주요 차이점과 언제 어떻게 사용해야 하는지에 대해 설명하겠습니다. 태그: 는 "division"의 줄임말로, 웹 페이지 내에서 구획을 나누는 역할을 합니다. 태그는 블록 레벨 요소로, 즉 한 줄 전체의 너비를 차지하며 다음 줄로 넘어가는 특성을 가지고 있습니다. 주로 아래와 같은 상황에서 사용됩니다: 레이아웃 구성: 웹 페이지의 다양한 영역을 나누고 배치하는 데 사용됩니다. 예를 들어, 헤더, 사이드바, 본문, 푸터 등의 섹션을 나눌 때 를 활용할 수 있습니다. 스타일링과 디자인: CSS 스타일링을 적용하고 레이아웃을 조정하기 위해 를 사용합니다. 는 CSS 클래스나 ID와 함께 사용되어 스타일을 적용하는 용도로 활용됩다. Header Si..

🐇 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..