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

Today I Learend 노마드코더 Next.js 강의 수강 Programmers 문제 풀기 Next.js 강의 수강 내용 Redirects // next.config.js module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, { source: '/old-blog/:path*', destination: '/blog/:path*', permanent: false } ] }, } request 경로를 다른 destination 경로로 Redirect할 수 있다. redirects은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열..

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

[TIL] 내일배움캠프 React 과정 2023.02.03_Next.js

Today I Learned 스파르타 Next.js 강의 수강 노마드코더 Next.js 강의 수강 Programmers 문제 풀기 스파르타 Next.js 강의 내용 정리 _app.js 와 _document.js _app.js Next.js의 root component에 해당하는 파일. 사용 예시 글로벌 CSS적용 초기값 설정 _document.js HTML 구조를 커스텀할 때 사용. 오직 Server Side에서만 렌더링 됨 CSS와 같은 스타일이 초기 HTML 렌더링 시에 적절하게 적용될 수 있도록 도움 예시) styled-components 사용 시 document.js가 없으면 초기에 깜빡거림. ServerStyleSheet을 사용하는 것으로, styled components로부터 만들어진 styl..

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

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

Today I Learned Programmers 문제 풀기 최종프로젝트 준비하기 Programmers 문제 풀기 가장 큰 수 찾기 나의 풀이 function solution(array) { let max_num = array[0]; let answer = []; for (const i in array) { if (array[i] > max_num) { max_num = array[i]; answer = [max_num, +i]; } } return answer; }; 다른 사람의 풀이 01 function solution(array) { let max = Math.max(...array); return [max, array.indexOf(max)]; } 최댓값 찾아주는 메서드가 있었구나... 그렇구나...

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

[TIL] 내일배움캠프 React 과정 2023.02.01_Next.js

Today I Learned Next.js 기초 강의 수강 CSR vs SSR vs SSG vs ISR Client-Side Rendering 브라우저에서 HTML file을 로드하면, Javascript를 이용하여 rendering 하는 방식이다. Server-Side Rendering 브라우저에서 해당하는 페이지를 접속하면, 그 순간 서버에서 html을 렌더링 해서 전달해 주는 방식이다. 페이지를 요청할 때마다 렌더링 하기 때문에 오래 걸린다. Static-Site Generation SSR의 경우 페이지를 요청할 때마다 서버에서 렌더링하는 것에 반해, SSG의 경우에 정적인 페이지를 제공할 때는 빌드할 때 렌더링하고, 페이지를 요청할 때 이미 렌더링 된 페이지를 반환한다. Incremental St..

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

[TIL] 내일배움캠프 React 과정 2023.01.31_Throttling and Debouncing

Throttling 이란? 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 주로 사용되는 예: 무한스크롤 Throttling 코드 예시 // Leading Edge Throttling const throttle: ControllDelay = (delay) => { // timerId가 있으면 바로 함수 종료 if (timerId) { return; } console.log(`API요청 실행! ${delay}ms 동안 추가 요청 안 받음`); // n초 후에 timerId에 null을 할당함 timerId = setTimeout(() => { console.log(`${delay}ms 지남 추가요청 받음`); tim..

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

[TIL] 내일배움캠프 React 과정 2023.01.31_Next.js

Today I Learned Next.js 기초 강의 수강 Throttling and Debouncing 강의 수강 Next.js Next.js란? Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해 주는 리액트 프레임워크 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "sta..

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

[TIL] 내일배움캠프 React 과정 2023.01.30_KPT 회고

Today I Learend 프로젝트 발표회와 함께 마무리 배포 링크: https://jasminebook.vercel.app/ 노션 링크: https://react99.notion.site/B-9-a8a272d006344d5dbf5b0d44e8536bc2 쟈-스민 프로젝트 KPT 회고 ❤️‍🔥 Keep PR 컨벤션으로 작업 내용을 간략히 공유할 수 있어 협업에 도움이 되었다. 팀 슬랙에 github 앱을 연동해 PR 및 Merge 상태를 알림 메시지로 받을 수 있어 피드백이 빨랐다. 전역 상태 관리를 위해 리덕스와 리코일 중에서 고민을 한 부분. 어떤 기술을 선택할지 고민한 것 그리고 더 나은 기술을 쓰는 데 거리낌 없었다는 점이 앞으로도 적용할 만한 부분이다. 사용할 로직, 라이브러리를 고민하는 과정..

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

[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