Dev Diary 💻

이 글은 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 강좌를 바탕으로 정리한 내용입니다. 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 의 기본 구조..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 2.react.js란? react? 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용된다. 전통적인 웹 사이트 링크나 버튼을 클릭하면 그 요청이 서버에 전송되고 새로운 html 페이지가 브라우저로 보내져 화면에 보여진다. 무겁고 불편하게 느껴진다. javascript DOM이라고 불리는 것을 조작할 수 있고, 이를 통해 html의 요소들이 화면에 렌더링 된다. DOM을 JavaScript 를 통해 조작할 수 있고, 새로운 Html 페이지를 불러오지 않고도 사용자들이 보는 것들을 변경할 수 있다. 3.왜 "JavaScript" 대신 리액트 일까요? A clie..

벌써 현 회사에 온지 약 10개월이 지났네요. 새삼 시간이 빠르다는 게 몸소 느껴집니다. 현 회사에 오게 된 이유는 전 회사에서 프론트엔드 개발 관련된 라이브러리를 사용하지 않았고, 리액트나 타입스크립트 등의 기술을 실제로 써보고 싶다는 생각이 컸기 때문이였습니다. 그렇게 프론트엔드 개발 일을 하고 싶어서 들어왔지만, 회사에 인원도 부족하고 회사 내부 인력이 충분하지 않아 백엔드 개발도 조금씩 하고 있네요. 그래서 그런지 몰라도, 사실 요즘 이도저도 아닌 듯한 느낌이 들곤 합니다. 프론트 엔드에 대한 깊은 지식이 있지도 않고, 애매한 상태라고 할까요... 현재 회사에서 리덕스나 상태관리하는 기술들을 사용하지 않기도 하고, 같이 으쌰으쌰 할 또래 동료 친구들도 없어서 정체되어 있는 것 같습니다. 그래서! ..

Intro 리액트에서 Modal 팝업시 뒷배경이 스크롤 되지 않게 하는 방법에 대해 소개하고자 합니다. How to do import React, { useEffect } from 'react'; export const Modal = (props) => { // 모달 오버레이에서 스크롤 방지 useEffect(() => { document.body.style.cssText = ` position: fixed; top: -${window.scrollY}px; overflow-y: scroll; width: 100%;`; return () => { const scrollY = document.body.style.top; document.body.style.cssText = ''; window.scrollTo..