#01 노트 앱 만들기 https://yeongseungjeong.tistory.com/80 [React] 리액트를 사용하여 간단한 노트 앱 만들기 #01 리액트 강의만 들으면서 따라친지 어언 12398744일.. 리액트랑 친한듯 안 친한듯 지내고 있다가 간단하게 뭐라도 쳐보자! 해서 만들게 된 노트앱 투두리스트도 고민 했었지만 페이지 이동이 있게 yeongseungjeong.tistory.com 이전에 노트 앱을 만들 때 CSS Modules 방법으로 스타일 적용을 했었다 className의 고유성과 유지보수에 용이하다는 장점이 있지만 리액트 개발자들이 많이 사용하는 styled-components도 직접 써보고 편리한 방법으로 사용해 보고 싶어서 기존 css-modules 방식으로 작성된 스타일들을 ..
리액트 강의만 들으면서 따라친지 어언 12398744일.. 리액트랑 친한듯 안 친한듯 지내고 있다가 간단하게 뭐라도 쳐보자! 해서 만들게 된 노트앱 투두리스트도 고민 했었지만 페이지 이동이 있게 만들고 싶었다 디자인은 최대한 심플하게. 기능 구현을 먼저 해보는 방향으로 하고 천천히 보완할 예정이다 CRUD만 하면 다 한거라 그랬어.. 1. Folder Structure 📦 public └──📜 index.html 📦 src ├──📂 components │ ├──📜 Filter.js │ ├──📜 Filter.module.css │ ├──📜 Title.js │ └──📜 Title.module.css.js ├──📂 routes │ ├──📜 Detail.js │ ├──📜 Detail.module.css │ ├─..
JSX란? const el = Hello, JSX; 위의 태그 문법은 문자열도, HTML도 아닌 JSX(Javascript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다. JSX는 React element를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다. React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메세지를 표시할 수 있게 해준다. JSX 사용 JSX는 공식적인 JS문법이 아니기 때문에 브라우저가 이해할 수 있는 평범한 JS로 변환시킬 방법이 필요하다. * 어떤 프레임워크를 사용해 웹앱을 만들때 가장 중..
