[TIL] 내일배움캠프 React 과정 2023.01.29

Today I Learned 소식지 구독에 유효성 검사 추가하기 발표 자료 정리 소식지 구독 시 유효성 검사 const handleSubmit = async (e: React.FormEvent) => { const emailRegex = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g; if (subscriberEmail.match(emailRegex) === null) { e.preventDefault(); alert('이메일을 형식에 맞게 입력해주세요.'); } else { ... } } setSubmitTime(new Date().toLocaleString())} > 이메일 형식만 alert으로 띄우고 input 자체 유효성 검사는 버튼 태그에 disabled 요소를 추가했다. 회고 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 29.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.28

Today I Learned 사용자 편의성 생각하며 팀 프로젝트 개선하기 피드백 사항들 정리하기 소식지 구독 인풋, 체크박스 등 유효성 검사 (+자세히 보기 페이지 ) 메일 보낼 때 ‘oo님 소식지를 구독해주셔서 감사합니다’ 이름 넣는 거 어떤가요? 모바일에서 지도에 마커 클릭했을 때 최상단으로 이동하는 현상(라우터 변경 혹은 인풋에 포커스가 가는 것이 이유인 거 같음) 초기화 버튼의 위치가 검색 버튼 바로 옆이라 검색하려다가 잘못 누를 수 있고 x버튼이 초기화 버튼이라는 것을 유저들이 바로 인식하지 못하는 거 같음 초기화 버튼 눌렀을 때 현재 위치까지 초기화하는 거 어떤가요? 마커에 오버레이 있는 상태에서 클릭하면 오버레이가 닫히는 기능까지 있으면 더 좋을 거 같아요! 카테고리 항목에 '카테고리 전체'..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 29.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.27

Today I Learned vercel로 프로젝트 배포하기 custom hook 공부하기 isOpen 데이터를 전역적으로 사용하기 // 현재 시간, 요일에 따라 영업 중, 영업 종료 구분 const handleIsOpen = () => { // 현재 시간, 현재 요일 const { currentTime, day } = getCurrentTime(); // 주말인 경우 if (day === 0 || day === 7) { return currentTime >= weekendOpenTime && currentTime = weekdayOpenTime && currentTime ({ ...item, isOpen: handleIsOpen(), })), }); 내 고민을 얘기했더니 다른 팀원분이 isOpen을 아..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 28.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.26

Today I Learned 현재 시간에 따라 서점 영업 중/영업 종료 표시하기 현재 시간에 따라 영업중/영업종료 표시하기 // 현재 시간, 요일 가져오기 export const getCurrentTime = () => { const date = new Date(); const hours = ('0' + date.getHours()).slice(-2); const minutes = ('0' + date.getMinutes()).slice(-2); const currentTime = parseInt(hours + minutes); // 1500(오후 3시) const day = date.getDay(); // 4(목요일) return { currentTime, day } }; // 현재 시간, 현재 요일 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 26.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.25

Today I Learned Recoil 공부하기 리스트 클릭 시 지도에서 해당 위치로 이동하도록 구현하기 Recoil 공부하기 const todoListState = atom({ key: 'todoListState', // unique ID default: [], // initial value }); const [todoList, setTodoList] = useRecoilState(todoListState); 코드 몇 줄로 전역 상태 관리 끝... 공식 문서 https://recoiljs.org/ko/docs/introduction/getting-started/ https://recoiljs.org/ko/docs/basic-tutorial/atoms https://recoiljs.org/ko/docs..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 26.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.24

Today I Learned GOLLA 프로젝트 게이지바 구현 Typescript 강의 수강 Programmers 문제 풀기 A, B 선택지 투표 결과에 따른 % 나타내기 const GageBar = ({comments}: any) => { let countA = 0; let countB = 0; comments.forEach((comment: CommentItem) => { comment.isA === true ? countA += 1 : countB += 1 }); let ratioA = Math.round(100 - (countB / (countA + countB)) * 100); let ratioB = Math.round(100 - (countA / (countA + countB)) * 100);..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 25.
• textsms

[WIL] 내일배움캠프 열두 번째 주_Typescript

드디어 이번 주에 타입스크립트를 배웠다. 스파르타에서 제공되는 강의는 너무 개념적인 내용들이라 처음에는 이해하는 데 어려움이 있었지만 예전에 redux로 만들었던 투두리스트를 타입스크립트를 이용해서 리팩토링하는 과정을 거치면서 타입스크립트를 좀 더 이해하게 된 거 같다. 근데 사실 아직 타입스크립트의 큰 장점은 느끼지 못했고 가끔 발생하는 타입 에러 때문에 번거롭기만 한 기분이다. 아직 규모가 작은 프로젝트만 경험해봐서 그런 걸까? 무튼 컴파일 타임에 에러를 잡아준다는 건 확실히 좋은 거 같다. 앞으로 계속 프로젝트를 경험하다 보면 타입스크립트를 유용하게 쓰게 될 날이 오겠지! Typescript로 리팩토링한 github 링크 https://github.com/heereal/TO-DO-LIST-Types..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 24.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.23

Today I Learned Typescript, Firebase, React Query로 댓글 CRUD 구현 radio input 선택 값에 boolean 넣기 일단 A, B 중에 어떤 input을 선택했는지 값을 가져오기 위해서는 e.target.value를 사용하면 된다. 그리고 input에 value는 string만 넣을 수 있는 거 같은데 나는 radio 선택에 따라 boolean 값을 출력하고 싶었다. // A, B 선택에 따라 boolean 출력 const selectAB = (e: any) => { if ( e.target.value === "true" ) { setIsA(true); } else { setIsA(false); } }; 그래서 if문으로 setState에 boolean 값을..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 23.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.22

Today I Learned GOLLA 팀 프로젝트 회의 카카오 API로 마커 클릭 이벤트 구현하기 Typescript 에러 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 처음부터 타입스크립트로 프로젝트를 생성한 게 아니라 CRA로 프로젝트를 생성한 다음에 typescript를 따로 설치했더니 다음과 같은 에러가 떴다. 이때 해결 방법은 에러가 발생하는 컴포넌트에 import React from 'react' 해주기! typescript .d.ts 파일이란? .d.ts 파일 (선언 코드만 담긴 파일) 구현부가 아닌 선언부만을 작성하는 용도의 파일을 의미한다. JS 코드로 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 22.
• textsms

[TIL] 내일배움캠프 React 과정 2023.01.21

Today I Learned 팀 프로젝트 진행-카카오 지도 API 이용하기 React javascript로 카카오 지도 API 이용하기 공식 문서나 대부분의 검색 결과에서 제공하는 카카오 지도 API 이용하는 방법은 HTML 코드인데 나는 javascript 파일로 코드를 작성하고 싶었기 때문에 방법을 찾는데 시간이 좀 걸렸다. 검색할 때 '리액트'라는 키워드를 붙이고 난 이후에 javascript 관련 검색 결과를 많이 볼 수 있었다. 카카오 지도 API로 지도 생성하기 일단 index.html의 부분에 API를 불러오기 위한 코드를 한 줄 추가한다. 공식 문서 https://apis.map.kakao.com/web/guide/ declare global { interface Window { kakao..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 1. 22.
• textsms