Dev Diary 💻

이 글은 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 강좌를 바탕으로 정리한 내용입니다. 108. 모듈 소개 JSX Limitations & Fragments Getting a Cleaner DOM with Portals Working with Refs 109. JSX 제한 사항 및 해결 방법 반환하거나 상수에 저장하는 값은 하나여야 한다. 1. div tag 사용하기 return ( {error && ( )} Username Age (Years) Add User 2. 네이티브 JS array 사용하기 return [ error && ( ), Username Age (Years) Add User , ]; → 배열을 반환할 수 있는 이유는 리액트 JSX 요..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 97. 모듈 소개 연습 프로젝트 시작 98. "사용자" 컴포넌트 추가하기 Technically, the React import is not required in all React projects as you learned. But you're never wrong with adding it. import React from "react"; 99. 재사용 가능한 "카드" 컴포넌트 추가하기 두 개의 css 클래스를 적용하는 방법 import React from "react"; import classes from "./Card.module.css"; const Card = ..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 91. 모듈 소개 Debugging React Apps Finding & Fixing Errors Understanding Error Messages Debugging & Analyzing React Apps Using the React DevTools 92. 리액트 오류 메시지 이해하기 스스로 오류를 이해하고 해결해야 한다. 문제가 있는 소스코드를 살펴보고, 어디서 문제가 발생했는지 그 줄이나 파일을 살펴봐라. 그러면 대부분의 오류들은 해결할 수 있다! Failed to compile. ./src/App.js SyntaxError: /Users/yuri/workpla..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 82. 모듈 소개 Conditional & Dynamic Styles Styled Components CSS Modules error error:03000086:digital envelope routines::initialization error 소스코드를 다운받아 실행하자 다음의 에러가 발생했다. 노드 17관련 에러로 nvm 을 사용하여 node 버전을 낮춰 다시 실행하니 정상 작동되었다. 83. 동적 인라인 스타일 설정하기 input 창에 입력 없이 Add Goal을 눌렀을 때 color를 동적으로 바꿔주도록 한다. Course Goal 하지만 inline 스타일은..

이 글은 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 ..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 48. 모듈 소개 User Interaction & State, Making Apps Interactive & Reactive Handking Events Updating the UI & Working with "State" A Closer Look At Components & State 49. 이벤트 리스닝 및 이벤트 핸들러 수행하기 how to add an event listner to a React element {console.log("Clicked!!")}}>Change Title ()를 제외하고 clickHandler 를 넣어줘야 한다. 만약 ()를 함께 명..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 24. Module Content React Core Syntax & JSX Working with Components Working with Data 25. 컴포넌트란 무엇인가? 왜 리액트는 컴포넌트의 전부라고 하는가? you will be able to focus on your core business logic that makes up your application instead of having to focus on the actual steps of updating the page when something happens somewhere. React is a..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 11. 모듈 소개 If you already know, you can move on to the next section. (for me I have to watch :-( ... ) 12. let & const let : 값을 수정할 수 있는 변수를 선언할 때 사용 const : const는 한번 지정하면 절대 변하지 않는 값인 상수를 선언할 때 사용 13. Arrow Functions function function printMyname(name) { console.log(name); } printMyname('Max') // "Max" function 의 기본 구조..