JudithHopps JudithHopps

과제 테스트 준비 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..

프로그래머스 과제 테스트 준비 프로그래머스는 html,css, javaScript이기 때문에 실질적으로 도움이 될 만한 React로 준비했다. 테스팅에 목적이 아닌 학습을 위한 구현자료로써, 디자인은 하지 않았고 기능에 초점을 두었다. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 🐇 HTML, CSS 🥕시맨틱 마크업 적용 코드가 전체적으로 div로만 이루어져 있습니다. 시멘틱한 방법으로 마크업을 변경하세요. 시맨틱한 코드 시맨틱(symantic)한 코드란 무엇인가? 시맨틱은 '의미의'라는 뜻을 가지고 있는 단어다. 코드에 적용하게 되면 말 그대로 Div..