React로 간단한 메모장 만들기

React 관련 예제들을 찾아보다가

메모장을 만드는 사이트를 찾아서 따라해보았다.

 

따라만 하면 아래와 같은 메모장 사이트를 만들 수 있다.

노트 작성부터 검색까지 가능하다.

오늘은 해당 사이트?를 만드는 과정에서 궁금했던 것들에 대해

정리를 해보고 해당 부분에 대해서

더 깊게 알아보는 글들을 이어서 작성해보려 한다.

---

1. styled components

예제에서는 styled components를 이용해서 인터페이스를 구성했는데, 

안에 내용은 CSS를 활용하는 것 같았다.

여기서 똑같이 따라했음에도 UI상 오류가 생기는 부분이 있었는데,

이런식으로 노트 작성과 메모 검색이 틀어지는 현상이 있었다.

그래서 열심히 찾아본 결과,

css에 display옵션에 flex를 inline으로 고치니 해결되긴 했다.

그래서 display 옵션에 따른 UI가 어떻게 변하는지에 대한 호기심이 생겼고,

아마 다음 글에 정리를 해볼 생각이다.

 

 

어..추가 적인 부분을 더 찾아보려했는데,

이번 예제에서는 해당 부분 말고는 딱히 문제됐던 부분이 없었다.

 

이상....