무작정 따라하기

오랜만의 운동으로 그만 뻗어버린 나... 기절(?)해 있었는데 메가바이트 스쿨에서 같이 듣는 조원 분의 카톡으로 겨우 일어날 수 있었다.조원 분께서 연락하신 이유는 위와 같은 애니메이션을 CSS로 나타내는 방법을 물어보기 위함이었다. 당시 질문받은 내 표정'CSS보다

바닐라JS와 ReactJS 기초 문법을 비교하며 ReactJS의 장점을 알아보자. 그리고 ReactJS 기초 문법을 이해하고, 이를 바탕으로 더 쉬운 방법으로 React를 다뤄보자.(이건 다음 글에서 정리)먼저 Javascript만으로 카운트업 화면을 만들어 보자.위와

JSX(Javascript XML)은 함수 호출과 객체 생성에서 문법적 편의를 제공하는 Javascript의 확장된 구문이다 . JSX는 React.createElement()를 반복적으로 호출해야하는 불편을 해소할 수 있으며, Javascript의 모든 기능을 쓸 수

평화로운 React 공부시간. React 앱을 환경에서 분명 아래와 같이 console.log()를 한 번 작성했는데 개발서버 화면에서는 두 번 출력되고 있었다. 이런 현상은 StrictMode 때문인데, React 환경에서 작성한 코드를 출력하기 위해 만든 ind

ReactJS로 To Do List 만들기input 입력 값 15자로 제한하기To Do List 삭제하기To Do List 10개로 제한하기input창에서 onChange를 사용해 입력된 값을 toDo와 setToDo를 이용해 받는다. form 태그에 쌓여진 butto

React 16.8버전부터 새롭게 추가된 Hook은 기존 class를 사용하지 않고, React state와 lifecycle features를 연동할 수 있게 해주는 함수다.기존 class를 사용한 React는 코드의 재사용성이 낮고, 작성하기 까다로우며, reloa

리덕스는 상태 관리 라이브러리 중 하나로, 현재까지 가장 많이 쓰이고 있다. 상태 관리란 UI와 UX에 맞게 데이터를 관리하거나, 서버와 주고 받는 데이터를 관리하는 것을 말한다.간단한 프로젝트라면 괜찮겠지만, 복잡하고 크기가 큰 대형 프로젝트라면 상태 관리의 난도는

어때요? 참 쉽죠?

이전 글에 이어서 작업물 리셋&저장 기능을 구현해보자. 해당 기능은 매우 간단한 코드 작성으로 구현 가능하다. 노마드 코더 바닐라JS로 그림 앱 만들기 강의와 딱히 다를 것 없을지도? 그림을 그릴 수 있는 기능은 App.jsx에, 다른 기능들은 MenuBar.jsx에