Skill Collection [Function]

메인페이지에 있는 검색창 만들기클릭시 검색창에 search 텍스트 없애기검색후 필터링된 페이지로 이동\*color: transparent -> 부모와 같은 색으로 따라가기

url이 반복돼서 구조분해할당 하기반복되지 않은 다른 url 조건문 선언perfumebest sellershop all

마우스 오버로 해당 오버 별 순번까지 드래그 해당 별 평점 나타내기해당 별 클릭시 색깔 유지 클릭한 해당 별 인덱스 저장 후 백엔드로 데이터 보냄

Mock Data로 json 파일 만들어서 데이터 뿌려주기부모에서 안가져와짐. 해당 파일에 fetch 함수를 똑같이 다시 쓰기 useEffect(() => { fetch('/data/DetailData.json') .then(res => res.json

작가 알림/소식 버튼을 클릭하면 해당 작가명의 소식을 알려준다는 알림창이 뜸백엔드로 구독신청 했다는 알림을 보내줌구독하면 소식받는 중 버튼으로 변경됨소식받는 중 버튼을 한번 더 클릭하면 알림에서 삭제되었다는 알림과 함께 구독이 취소 됨 소식 버튼을 누르면 onClick

백엔드에서 별점 평균을 내서 넘겨주면 그 데이터로 해당 별 색깔을 채운다.백엔드 별점 평균 데이터 { rating : 3 }

백엔드에서 patch라는 변수명으로 0을 넘겨주면 정가를, 1을 넘겨주면 할인을, 2를 넘겨주면 대여금액을 보여준다삼항연산자 사용

3개의 라디오 버튼이 있다. 비활성화, 활성화된 버튼 모두 이미지로 되어 있다.하나만 클릭했을때 나머지 두개는 비활성화 되어 있다.처음엔 input radio 타입의 버튼으로 코드를 짰다.backgroun-color가 바뀌는 방법으로 로직을 짜니까 클릭시 흰배경 없이

파일찾기 버튼 클릭시 파일을 찾는 박스가 실행됨이미지를 선택후 열기를 클릭하면 해당 파일 이름이 라벨에 나타남input type='file'의 default 값은 input 옆에 박스가 생기던가 파일없음 이라는 글이 생기는 것이다.이 기본값을 display: none으

전체선택 클릭시 게시판 체크박스가 모두 선택되고 다시 클릭시 전체해제됨

결과 내용 정해져 있는 제목을 버튼을 누르면 입력받은 내용으로 변경하기 import "./styles.css"; import {useState} from 'react'; export default function App() { const [title, setTi

디바이스의 너비가 610px 미만인 경우 너비는 85vw, 화면 세로 중앙 정렬.디바이스의 너비가 610px 초과인 경우 너비는 300px, 가로정렬.삭제버튼 클릭시 이미지 삭제.

ID: 5글자 이상, '@'이가 포함되어야 한다PW: 5글자 이상두개의 조건이 포함되면 버튼이 활성화됨

알리고자 하는 위치를 카카오맵 API를 통해 지도로 나타내기

자식 컴포넌트에 있는 nav의 메뉴 클릭시 부모 컴포넌트에 있는 특정 DOM 요소로 scroll 이동

핸드폰 번호를 입력했을때 자동으로 하이픈 생성하기setState(state) 계속 이렇게 변경하려고 시도했다가 안돼서 이것 저것 코드를 많이 봤다 그러던 도중 처음부터 다시 돌아가서 다시 천천히 생각해봤고 여러개의 state니까 setState({state1: ...}

name 조건: 값의 길이가 1이거나, 4보다 많거나, 값이 없을때 phone number 조건: 값의 길이가 13보다 작거나content 조건: 값의 길이가 3보다 작거나, type이 string일때 조건부 렌더링을 통해 에러 메세지를 보여줌값이 모두 만족하면 '전송

총 두개의 게시판하나의 게시판에 3개의 작성글

버튼을 클릭하면 기본 파일 탐색기 호출해당 파일이 업로드 되면 게시판을 보여준다해당 파일이 아니면 알림창을 띄운다

export 버튼을 클릭했을때 화면에 있는 게시물을 json 파일로 다운로드 받기참고한 레퍼런스https://theroadtoenterprise.com/blog/how-to-download-csv-and-json-files-in-reacthttps:/

Add service 버튼을 클릭하고 name을 입력하면, sercice name에 입력값으로 추가됨date는 현재시간

sweetalert 라이브러리를 사용해서 alert창 나타내기Add service 클릭시 알림창을 나타냄Service name 에 소문자, 숫자 값으로 값 입력 가능통과하지 못 하면 "only lowercase letters and numbers allowed." 문구

Import 버큰클릭시 브라우저 기본 파일 탐색기 호출지정한 "chart.json" 파일 첨부json 파일 파싱, 그래프 생성

원하는 키워드로 검색할 수 있다.입력값이 없으면 알림창을 나타냄

글쓰기폼에 내용을 입력하고 게시버튼을 클릭하면 로컬스토리지로 해당 내용이 저장된다

그동안 조금 부족한듯한 state 관리를 중점으로 기능을 만들어 보았다.name과 email을 추가name과 email을 수정name과 email을 삭제name을 클릭하면 색깔 변경

API = isLogin, login, logoutPage = admin, Loginadmin: isLogin에서 cookie 확인 후 응답이 없으면(로그인이 되지 않은 상태) Login 페이지로 이동, 응답을 받으면(로그인 상태) admin 페이지로 이동Login:

발급하기 조회하기

채팅방에 입장하면 이전 메세지를 불러와서 messages에 담는다messages에서 내가 아닌 다른 유저가 보냈던 메세지들을 getMessages에 담는다messages에서 내가 보냈던 메세지들을 nowMessages에 담는다getMessages는 왼쪽으로 채팅창을 정

상대방이 입력할때 ㅇㅇ님이 입력중입니다 표시입력하다 지웠을때, 입력 후 엔터 쳤을때 문구 미표시입력하고 있는 유저 외에 채팅방에 있는 모든사람에게 표시

채팅방에 유저가 들어오면 ㅇㅇ님이 들어오셨습니다. & 나갔습니다. 표시본인이 들어오고 나갈때는 표시하지 않음user.nick이 제대로 표시되다가도 나갔다 들어오면 undefinde가 표시됨위의 내용 + 한 유저에서 두번씩 표시됨 \-> render가 두번씩 발생한다고

채팅방에 유저가 들어오면 join userMember에 숫자가 뜨고, 유저 닉네임이 표시채팅방을 나가면 join userMember에서 제거

왼쪽의 플러스 버튼 클릭시 모달창이 뜨고, 귓속말 select에서 유저를 선택할 수 있다내용 입력 후 보내면 내가 보낸 창은 오른쪽에, 받는 채팅은 왼쪽에 출력{보내는사람}님에게 귓속말을 보냈습니다. {받는사람}님이 귓속말을 보냈습니다.

이미지 파일을 readAsDataURL로 읽어서(base64로 인코딩한 string 데이터) img 태그에 src에 넣어서 클라이언트에게 미리 보여줄 이미지의 경로readAsDataURL은 비동기로 실행된다file을 비동기로 읽기 위한 FileReader 객체를 생성하

참고블로그

첫 화면은 리스트이고해당 컬럼을 클릭하면 해당 컬럼에 해당하는 내용이 펼쳐진다

여기서 중요한점은 백으로 보낼때 responseType: 'blob'이어야 한다해당 타입은 params || data에 들어가지 않고 독단적으로 보냄

statefunctionreturnstyle

css draggable 사용react-beautiful-dnd 사용

스크롤이 일어날 때 마다 핸들러를 동작시키는것은 자바스크립트의 메인엔진에서 실행 되어야하므로 많은 부하가 걸리는데, 이를 해결해 줄 수 있는게 IntersectionObserver 이다흐름IntersectionObserver는 무한스크롤에만 사용되는건 아니다크게 관찰자

모달이 너무 많아서 최대한 효율적으로 사용해보려고 나눠보긴 했는데 여전히 비효율적이고 의존성이 있는것 같다조금 더 고민해 보기로!여기서 모두 사용되는 isOpen, setIsOpen은. setIsOpen을 호출하면 원래있던 값에서 반대로 바꿔주는 useHook이다{is

모달이 너무 많아서 최대한 효율적으로 사용해보려고 나눠보긴 했는데 여전히 비효율적이고 의존성이 있는것 같다 조금 더 고민해 보기로! >여기서 모두 사용되는 isOpen, setIsOpen은. setIsOpen을 호출하면 원래있던 값에서 반대로 바꿔주는 useHook

countUp.tsxobserver.ts

한 테이블 구성으로는 큰 타이틀, 작은 타이틀과 데이터(a), 작은 타이틀과 데이터(b), 작은 타이틀과 데이터(c)a , b, c각각 api연결을 따로 해줘야 함해당 컴포넌트를 큰타이틀이 다른 컴포넌트로 다수로 사용됨각각의 길이만큼 map 돌리기map 안에서 hand

엑셀 업로드해서 첫번째 시트의 A열 데이터 추출뿌려준 데이터로 엑셀 다운로드