내일배움캠프149 [TIL] 내일배움캠프 React 과정 2023.02.06 Today I Learned 최종 프로젝트 시작! [2월 6일] 프로젝트 컨셉 회의록 노션 링크 https://slime-egret-f03.notion.site/2-6-bd0afccb92224f41b5753b37937513c8 회고 오전에는 팀원들과 아이스 브레이킹하는 시간을 가지고 오후에는 내내 컨셉 회의를 했다. 후보를 두 개 정도로 좁히고 최종적으로 결정된 컨셉을 구체화하는 시간을 가졌다. 하루종일 몰아치는 회의에 힘들기도 했지만 팀원들과 정말 멋진 결과물을 만들어 내고 싶다는 욕심도 생겼다. 2023. 2. 7. [TIL] 내일배움캠프 React 과정 2023.02.05 Today I Learned Next.js 강의 수강 Programmers 문제 풀기 최종프로젝트 팀 노션 준비하기 Next.js 강의 수강 내용 router.push(url, as, options) router.push( { pathname: `/movies/${id}`, query: { title } }, `/movies/${id}` ) 클라이언트 측 전환을 처리한다. 이 방법은 next/link가 충분하지 않은 경우에 유용하다. url: UrlObject | String: 탐색할 URL as: UrlObject | String: 브라우저 URL 표시줄에 표시될 경로에 대한 선택적 데코레이터이다. getServerSideProps export default function Detail({ params.. 2023. 2. 5. [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 속성이 있는 객체를 포함하는 배열.. 2023. 2. 5. [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.. 2023. 2. 4. [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)]; } 최댓값 찾아주는 메서드가 있었구나... 그렇구나... 2023. 2. 2. [WIL] 내일배움캠프 열세 번째 주_React 아웃소싱 프로젝트 결과물 정리 프로젝트 소개 프로젝트명: 쟈-스민 프로젝트 목적: 지도 API를 이용해 독립 서점의 운영 정보를 제공한다. GITHUB https://github.com/heereal/Jasmine 노션 링크: https://react99.notion.site/B-9-a8a272d006344d5dbf5b0d44e8536bc2 배포 링크: https://jasminebook.vercel.app/ 쟈-스민 책의 향기를 따라... 쟈-스민 🌺 jasminebook.vercel.app 튜터님 피드백 프로젝트 피드백 - 작성자: 김기철 튜터 · Issue #36 · heereal/Jasmine usehook사용, 컴포넌트 분리 , 상태관리등을 아주 잘 하셨습니다. useSearch같은 경우 아래 이미지에 보이는 상태가 4개를 .. 2023. 2. 2. [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.. 2023. 2. 1. [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.. 2023. 2. 1. [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.. 2023. 1. 31. [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 상태를 알림 메시지로 받을 수 있어 피드백이 빨랐다. 전역 상태 관리를 위해 리덕스와 리코일 중에서 고민을 한 부분. 어떤 기술을 선택할지 고민한 것 그리고 더 나은 기술을 쓰는 데 거리낌 없었다는 점이 앞으로도 적용할 만한 부분이다. 사용할 로직, 라이브러리를 고민하는 과정.. 2023. 1. 30. 이전 1 2 3 4 5 6 7 ··· 15 다음
