JudithHopps JudithHopps

와 은 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..

과제 테스트 준비 input 태그와 관련되어서 좀 더 심도있게 준비를 하게 되었다. 🐇 포커스 이벤트 유저가 input 태그를 클릭하면 아래 키패드가 떠야 한다. 1. 키패드 가시성 여부를 state로 관리한다. const [IsOpenPasswordKeypad, setIsOpenPasswordKeypad] = useState(false); 2. 두 개의 같은 동작을 이용할 예정으로 키패드는 컴포넌트로 생성한다. const displayKeypad = (type: InputType) => { return ( {Array.from({ length: 10 }, (_, i) => ( handlePasswordChange(type, i)} > {i} ))} 9 * ); }; 3. div 클릭 / focus일때 ..

프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇 스크롤 페이징 구현 유저가 스크롤바 끝가지 이동 시 다음페이지 로딩하도록 만들어야 한다 1. api 호출시 page 추가 export const getSearchCatData = async (keyword, pages) => { return fetchData( `${API_..

프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇이미지 상세보기 모달 🥕 max-size가 768px 이하인경우 모달의 가로길이를 디바이스 가로길이만큼 늘림 1. modal 창 구현 e.stopPropagation()} isOpen={isOpen}> {isLoading ? ( 로딩중 ) : ( x {catDetail && ..

프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇 검색 페이지 🥕 페이지 진입 시 검색창(input)에 focus처리 ※ autofocus autoFocus속성은 일반 HTML에서와 같은 방식으로 작동합니다. css에는 input autofocus가 있다. 하지만, 입력이 여러 개인 경우autoFocus한 페이지에autoF..