컴/폰
React word book app
양재문
2023-02-06 15:00
조회수 : 13
리엑트를 공부해보다 직접 앱을 하나 만들어보며 배우면 기억에 더 남겠다는 생각이 들었다.
사용할 핵심 기술은 useState, useEffect, useRef, scss, rest api 등 이다.
Extension 은 prettier 와 es-lint 를 사용했다
구조는
- src
- components
- CreateDays.js
- CreateWords.js
- DayList.js
- Days.js
- Header.js
- Word.js
- LinkError.js
- data
- hooks
- img
- App.js
- App.scss
- index.js
- ...
로 간단하게 구성했다. styled components 를 사용해 볼까 했지만 scss 문법을 연습중이기에 css는 App.scss 파일하나로 작업을 진행했다.
App.js 코드다. 배포까지 마친 후의 코드라서 path 경로에 /react 가 붙어있다.
리엑트 18.2.0 버전을 사용해 Switch 문법이 Routes 으로 바뀐걸 볼 수 있다.
Route 안의 컴포넌트를 element 속성에 직접 입력해 코드가 간결해져서 보기가 좋다.
컴포넌트 부분은 위에서부터
메인 로고와 router 의 Link 를 담당할 header component
저장한 단어들을 날짜별(day)로 확인할 수 있는 DayList component
json-server 를 이용한 가상 Rest api 에 POST 할 기능을 가진 CreateWord, CreateDay component ( 이부분에서 애를 좀 먹었다 )
단어들을 각각의 day 에 출력할 Days components
실제 저장한 단어들과 jsx 를 포함하고있는 Words components 로 구성되어있다
hooks 디렉토리에는 reset api 를 자주 호출하게 될 예정이라 불러오기 쉽게 custom hook 을 제작해두었다.
DayList component
custom hook 으로 rest api 를 호출하고 jsx 문법으로 data의 day 길이만금 리스트를 출력했다.
Dayscomponent
Days 의 경우 각각의 주소를 가지고 있어야해서 router-dom 에서 제공하는 useParams 를 사용해 url 의 값을 가져왔다
App.js 의 Routes 의 일부분이다.
path 경로를 확인해보면 :day 부분이 있는데 이렇게되면 /react/day/ 경로 뒤에오는 값을 day 변수에 저장하게 된다.
다시 Days 로 돌아가 useParams 를 사용해 url의 day 변수를 가져온 뒤
custom hook 을 이용해 day값이 일치하는 데이터들을 word 에 담아 map 함수를 이용해 데이터를 출력했다.
다음은 문제의 Word 컴포넌트
이부분에서 문제가 생겼다.
해당코드를 json-server 를 사용해 localhost 의 가상 rest api 로만 작동할 생각이었다면 문제가 생기지 않지만.
https://my-json-server.typicode.com/
My JSON Server - Fake online REST server for teams
my-json-server.typicode.com/user/repo/posts/1 { "id": 1, "title": "hello" }
모름지기 모든 프로젝트는 서버에 올린 후에도 남들도 정상적으로 사용 할 수있어야 하지 않겠는가.
만약 json-server 만 사용해서 build 를 하게되면 다른 pc에서는 내 pc 의 localhost에 접속할 수 있는 방법이 없으니 데이터를 받아올 수 있는 방법이 없었다.
이에대한 해결책으로 구글링 끝에 json-server 를 사용한 데이터를 빌드 배포후에도 잘 사용되도록 해주는 Heroku 라는 서비스를 찾아냈지만 그마저도 유료화에 들어가서 사용이 불가능했다.
Cloud Application Platform | Heroku
서버를 직접 구축할 방법이야 다양하지만 필자가 사용할줄 아는 유일한 서버는 MySQL 이 전부.. 코드를 전부 갈아 엎어야하는 지경이다.
이부분은 좀더 공부를 해보며 수정해나갈 예정이다.
다음으로 CreateWord 와 CreateDay 컴포넌트
마찬가지로 rest api 를 사용해 CRUD 로 data를 다루기에 localhost 에서만 정상 작동하는 중이다..
custom hook 으로 데이터를 불러오고 연습중인 날짜를 length 로 표현해주었다.
날짜 추가를 위해 fetch api 의 POST method 를 사용했고 데이터는 날짜만 다룰것이기에 day 에 day.length +1 로 추가할때마다 날짜가 늘어나도록 설정해주었다.
다음은 CreateWords 컴포넌트
CRUD 부분은 Days 컴포넌트와 같지만 사용자에게 직접 입력받은 값을 컨트롤 해야해서 useRef 를 사용해서 DOM 에 접근후
current 속성을 가진 객체로 value 를 rest api 에 POST 해주었다.
실제화면
SCSS 코드는 따로 다룰 예정이기에 포스팅은 여기서 마친다.
내가만든 data.json 파일을 어떤식으로 서버에 올려서 컨트롤해야 다른 사람의 pc에서도 잘 다룰수 있는지 공부해온 뒤 다시 포스팅 해야겠다..