Dev Diary 💻

4. 빅오 (BIG O) 소개 Objectives Big O 표기법의 필요성 Big O 가 무엇인지 Big O 간단하게 표현하는 법 시간 복잡성과 공간 복잡성 정의 Big O 표기법을 사용하여 여러 알고리즘 평가하기 로그 (logarithm)이 무엇인지 What's the idea here? "Write a function that accepts a string input and returns a reversed copy" 제대로 작동하기만 한다면 그것 만으로도 충분하지 않은가? Who Cares? 코드의 성능을 얘기할 때 정확한 전문 용어를 사용하는 것이 중요합니다. 여러 접근법의 장단점을 얘기할때도 유용합니다. 가장 좋은 해결책을 찾는 것이 그렇게 뻔하지는 않습니다. 한 해결책에 정말 좋고 또 하나는..

1. 커리큘럼 소개 2. 어떤 순서로 수강해야 할까? 꼭 순서대로 진행할 필요는 없습니다. 2주 반, 또는 3주 대면 과정에서 가르치는 집중 과정입니다. 각 섹션마다 도입부에 선행 조건, 텍스트 강의가 있습니다. 3. 코드를 어떻게 실행할까? https://www.udemy.com/course/best-javascript-data-structures/

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 124. 모듈 요약 getStaticProps 함수도 실행해보고 유효성 재검사 옵션을 통해 해당 컴포넌트가 배치되고 주기적으로 재생성하게 설정해봤습니다. 또한 getStaticPaths 함수를 결합하여 동적 페이지를 생성했고 폴백 옵션을 추가함으로써 예상되는 모든 경우의 인스턴스에 알아서 대응할 수 있도록 했습니다. getServerSideProps 함수도 실행하는 걸 확인했습니다. 하지만 클라이언트 사이드 데이터 페칭으로 전환했습니다. 그 함수는 다음에 실습할 수 있습니다. 이제 여러분은 Next.js에서 쓸 수 있는 데이터 페칭의 핵심 구조를 배웠습니다. 그중 일..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 86. 모듈 개요 Next.js를 이용하면 풀스택 React 앱을 구축할 수 있습니다. Next.js는 서버 사이드에서 페이지를 사전 렌더링 해줍니다. Next.js는 코드 실행에 있어서 클라이언트 사이드 뿐만 아니라 React 앱이 실행되는 사용자의 브라우저 뿐만 아니라 서버 사이드에서 코드를 실행할 때도 도움을 줍니다. 페이지에 표시되어야 하는 데이터를 준비하거나 로딩하는 작업을 돕는다는 의미입니다. 데이터 fetching이 무엇인가 Static VS Server-side Page 어떻게 데이터 fetch 하는가 이 의미에 대해 자세히 살펴보도록 합시다. 87. ..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 69. 모듈 개요 이번 섹션에서는 이벤트 앱을 간단하게 만들어보도록 하겠습니다. 이벤트 목록을 확인하고, 그 중에서 한 이벤트를 선택할 수도 있습니다. Creat a Complete NextJS Project From Scratch Add Static & Dynamic Routes Add Regular Components & Connect Everything! 70. 프로젝트 계획 / : Startign PAge (show featured Events) /events: Events Page (show all Events) /events/event> event-item..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 52. 모듈 개요 파일 기반의 routing, 정적 및 동적 routes, 페이지간의 네비게이팅에 대해 배울 예정입니다. 53. 시작 설정 Setup 사이트 소스 코드 참고 54. 파일 기반 라우팅이란 무엇일까? React.js는 react-router-dom을 사용하여, 라우트를 진행합니다. 하지만 Next.js는 라우터를 설치하지 않고, 라우트와 페이지 구조를 정의하는 데 JSX와 JS 코드를 사용하지 않습니다. Next.js에서는 React 컴포넌트 파일을 생성합니다. 특별한 폴더에 일반적인 React 컴포넌트 파일을 생성합니다. 이후 Next.js가 설정된 폴..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 1. Welcome to the Coursel 시작하도록 하겠습니다. 꾸준히 화이팅 🤟🤟 2. Next.js란 무엇인가? Next.js를 왜 사용하는 걸까? NextJS는 프로덕션용 React 프레임 워크 입니다. 큰 규모의 프로덕션용 React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있습니다. ReactJS는 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. 즉 Third Party 패키지로 프론트 엔드 프로젝트에 추가되는 라이브러리 입니다. 결국 클라이언트 측 JavaScript 코드라는 이야기 입니다. 주로 사용자 인터페이스 부분인 컴포넌트,..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 139. 모듈 소개 지난 섹션에서 중요한 리액트 개념들을 살펴보았습니다. useEffect, useContext, useReducer 등등 / 위 개념을 복습하면서 다시 살펴보도록 합시다. 140. 설정 시작하기 Layout folder : ex. Header UI folder: ex. Input 141. "헤더" 컴포넌트 추가하기 header 컴포넌트 추가 142. Adding the "Cart" Button Component Cart Button 컴포넌트 추가 143. Adding a "Meals" Component Meals 컴포넌트 추가 144. Adding I..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 117. 모듈 소개 Effects, ReducersContext Working with (Side) Effects MAnaging more Complex State with Reducers Managing App - Wide or Component - Wide State with Context 118. "Side Effects"이란 무엇이며 useEffect를 소개합니다. Main Job : Render UI & React to User Input Evaluate & Render JSX Manage State & Props React to (User) Events & ..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 67. 모듈 소개 Outputting Dynamic Lists Of Content Rendering Contend Under Certain Conditions 68. 데이터와 렌더링 목록 JSX 코드에서 map 함수를 사용하여 동적인 구문을 실행해보도록 하자. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map return ( {props.items.map((expense) => ( ))} {/* */} ); 69. State 저장 목록 사용 초기 expenses ..