Code Playground

< h1 > Code Playground </ h1 >

import { ExampleComponent } from './example'; // ... 회사에서 react-router를 쓰면서 주로 위와 같은 방식으로 routing을 하다가 router v5 버전부터 아래와 같이 Route 컴포넌트 안에 child 컴포넌트를 합성하는 방식이 더 권장되는 것을 발견하고 바꾸었다. import { ExampleComponent } from './example'; // ... 근데 이걸로 바꾸는 순간 한 가지 이슈가 발생했는데... 😨 바로 이 이슈였다. 탭을 이동할 때마다 주소 뒤에 query parameter가 바뀌고, 이 query parameter가 바뀔 때마다 UI가 바뀌는 화면이 있었는데, Routing 방식을 바꾸니까 갑자기 탭을 아무리 클릭해도 화면이..

바닐라코딩 2차 테스트가 끝났다! 예에~! 그동안 배웠던 내용, 특히 어려웠던 리액트 리덕스(Redux)를 중점적으로 공부하려고 간단한 메모 앱을 구현해보았다. 시험 하루 전날이랑 오늘이랑 해서 만드는데 2일 정도 걸렸던거 같다. 공부한거 복습용으로 급하게 만든거라 기능은 별로 없다. [기능] 페이지를 로딩하면 첫 화면에 메모 작성 버튼과 메모 리스트가 있다. 메모 작성 버튼을 클릭하면 메모를 작성할 수 있는 form이 나온다. 메모 작성 후 제출 버튼을 누르면 메모가 바로 저장된다. 첫 화면의 메모 리스트는 메모 제목과 내용, 메모를 저장한 날짜/시간이 표시된다. 메모는 삭제할 수 있어야 한다. 메모를 클릭하면 상세 페이지로 이동한다. 상세 페이지에서 다시 앱 로고를 클릭하면 리스트 화면으로 돌아온다...