Dev Diary 💻

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

이 글은 드림코딩님의 '자바스크립트의 역사와 현재 그리고 미래 (JavaScript, ECMAScript, JQuery, Babel, Node.js)' 를 바탕으로 정리한 내용입니다. History 1993년 UI 요소가 가미된 첫번째 웹 브라우저가 탄생하게 됨 Mosaic Web Browser 1994 Netscape Navigator 탄생 Mosaic Web Browser 를 이끌던 Mac Andressen은 Netscape을 설립함 Netscape Navigator - Wikipedia 초기 인터넷 사용자들의 폭발적 반응을 얻어 약 90%의 시장점유율을 차지했다. 정적 사이트 어떻게 하면 동적인 웹사이트를 만들 수 있는지 고심 → scripting 언어를 추가해보자! Java → 너무 무거워! Sc..

Intro AWS 의 CloudWatch 로그(Logs) 사용법에 정리해보고자 합니다. CloudWatch? AWS 리소스를 효과적으로 모니터링 할 수 있는 서비스로 통합 view를 확보하는데 필요한 데이터를 제공한다. 뿐만 아니라 이벤트 및 리소스를 이용해 경보를 생성할 수도 있습니다. 로그 (Logs) CloudWatch Logs는 운영 중인 애플리케이션 리소스를 기록하고 액세스할 수 있으며, 관련된 로그 데이터를 검색할 수 있습니다. 로그 스트림 리스트 확인 Logs Insights 로그 메시지에 조건을 추가하여 필터링이 가능합니다. 오른쪽 쿼리 탭을 사용하여 query 예시들을 확인해볼 수 있습니다.