Dev Diary 💻

이 글은 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 를 넣어줘야 한다. 만약 ()를 함께 명..

이 글은 드림코딩 엘리님의 "HTML 태그들, 헷갈리는거 정리해 보았다 🥳" 영상을 바탕으로 정리한 내용입니다. Intro Html은 다른 프로그래밍 언어에 비해서 진입장벽이 훨씬 낮은 마크업 언어이지만, 만만하게 공부하면 어디에서 어떤 태그를 사용해야 하는지 매우 헷갈립니다. 필수로 알아야 하는 시멘트 태그들과 헷갈리는 태그들에 대해 알아보도록 합시다. Semantic Tags (Semantic Markup)? semantic이란 "의미의, 의미가 있는"을 뜻합니다. html에서 div 태그만 이용해서 모든 웹사이트를 만들 수도 있지만, 브라우저도 개발자도 의미있게 이애할 수 있기 위해서는 semantic tags 를 적절하게 잘 사용하는 게 중요합니다. Top level heading Top leve..

Intro JavaScript 의 JSON.parse() 함수에 대해 알아보도록 합시다. JSON.parse() JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성합니다. 선택적으로, reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다. Syntax JSON.parse(text[, reviver]) Parmaters text : JSON으로 변환할 문자열 reviver (optional) : 함수라면, 변환 결과를 반환하기 전에 이 인수에 전달해 변형함. return value : 주어진 JSON 문자열에 대응하는 Object expectiln : 변환할 문자열이 유효한 JSON이 아닐 경우 Syntax..

이 글은 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 JSON.stringify() 에 대해 알아보도록 합시다. Json Jon(JavaScript Object Notation)은 데이터를 객체로 표현하는 형식으로 JavaScript의 객체 형식을 모방합니다. 처음에는 JS 전용으로 만들어졌지만, 현재는 Java, Python, Go, C# 과 같은 다른 프로그래밍 언어에서도 Json 형식을 사용하여 클라이언트-서버 간 데이터를 공유하는데 사용되고 있습니다. JSON.stringify() JSON.stringify() 메서드는 JavaScript 값이나 객체를 JSON 문자열로 변환합니다. 선택적으로, replacer를 함수로 전달할 경우 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다. console.log(..