⌚️ 시간관리
☀️ 기상시간 - 8:00
🌕 마감시간 - 23:00
💻 오늘 배운 것
◉ 1차 프로젝트관련 - Button
- 오늘 저녁 회의시간에, 어제 만든 Button Component에 대한 피드백을 받았다. 어제 혼자 힘으로 만들어보면서 '아 이런 구성이면 안될 것 같은데..'라는 생각이 들었지만 시간에 쫒겨서 그냥 닥치는대로 만들기는 했다..
- material-ui를 참고해서 만들기. 각각의 형태별로 button이름을 따로 지정해서 스타일을 주는 것이 아니라, button컴포넌트는 1개만 만들되, props를 받아 buttonBoard에서 mode를 각각 지정해주는 방법으로.
- 첫 구성과 달리, ethen이 Router를 적용해서 구성을 수정했다. 그래서 이후에 추가적으로 만들어지는 component들은 이전것을 참고해서 Route를 추가하면 된다.
- props를 적용시킬 때, 적당한 단어(?)를 찾아내기 어려울 때 material-ui에 있는
component API를 참고하기로 했다. - 모든 component들은 사용자의 입장에서 가져다 쓸 때 이해하기 쉽고 편리하게 사용할 수 있게 만드는 것이 목표..!
- 수정할 때 'disabled'의 버튼도 만들어보아야겠다.
- 아무래도 기본적인 스타일 같은걸 통일시키기 위해 소통을 해야할 것 같다. moon과 기본적인 component의 스타일을 맞추고 코드를 작성하는게 나을 것 같다는 생각이 들었다.
- google에 'react component'만들기를 검색할 생각은 왜 못했는지 모르겠다. 내일은 여러 자료를 참고하면서 만들어보아야겠다.
◉ React Router DOM
참고자료
- SPA(Single Page Application)
페이지가 1개인 어플리케이션.
전통적인 웹 어플리케이션의 구조는 여러 페이지로 구성되있으며 유저가 요청할 때마다 페이지의 새로고침이 일어나고, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 했다.
-->> 문제점- 특정 페이지에 대한 즐겨찾기 등록이 불가능. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문!
- 뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동됨.
- 새로 고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동.
그렇기에 이제는 React 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 출력한다.
Routing란 다른 주소에 따라 다른 뷰를 보여주는 것(사용자가 어떤 주소로 들어갔을 때 그 주소에 해당하는 적당한 페이지를 사용자에게 보여주는 것)을 말하며, 리액트 자체에는 이 기능이 내장되어있지 않기 때문에 직접 브라우저의 API 를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다.
react-router 는, 써드파티 라이브러리로, 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다. 또한 서버 사이드 렌더링도 도와주는 도구들이 함께 딸려온다.
< Component 종류 >
1. BrowserRouter :
`react-router-dom`을 적용하고 싶은 컴포넌트의 최상위 컴포넌트를 감싸주는 wrapper Component. --> <BrowserRouter><App /></BrowserRouter>
--> App component에서 BrowserRouter를 사용할 수 있게됨
--> 웹서버 설정을 바꿔서 어떤 경로로 들어오든지, root페이지에 있는 html파일을 서비스 할 수 있을 경우 사용
- path
<Route path="/"><Home /></Route>
Route에 각 컴포넌트마다 적용될 url의 경로를 path를 통해 페이지명을 지정해주는 것 - exact
주어진 경로와 정확히 맞아 떨어질 때, 설정한 컴포넌트를 보여주는 것 exact 를 하지 않으면, 예를들어 "/"가 들어간 컴포넌트 모두를 보여줌
===> 동적라우팅
2. Switch
Switch로 Route를 감싸게 되면, exact가 지정되있지 않을 경우, path의 값과 일치하는 첫번째 컴포넌트가 발견되면 나머지 컴포넌트는 무시됨.
( exact를 쓰지 않고 같은 결과를 낼 수 있음 )
3. Link
페이지 리로딩을 자동으로 해주는 것
--> a태그 대신에 Link사용 | href대신에 to사용
=====> 페이지는 바뀌지 않고 데이터들의 변경만 일어남
4. HashRouter
주소창의 현재 페이지 경로 뒤에 #식별자를 입력하면 브라우저는 서버요청을 보내지 않고, 현재 페이지에서 식별자에 해당하는 id어트리뷰트가 있는 엘리먼트를 찾아 그 위치를 화면에 출력한다.
--> HashRouter를 사용하면 모든 경로 앞에 #를 붙혀야 한다. 이는 백엔드가 필요 없는 작은 클라이언트를 만들 때 유용한 도구이다.
5. NavLink
만약에 설정한 URL이 활성화가 되면, 특정 스타일 혹은 클래스를 지정 가능
(class = "active"가 생김)
--> Route 를 지정 할 때 처럼, 중첩될수도 있는 라우트들은 exact 로 설정해 주어야 함
◉ git pull upstream master
어제 작성한 button component코드를 올렸고, 오늘 ethen이 merge를 했다. 그래서 회의 시작 전에 내 로컬로 수정된 사항(moon의 코드 포함)을 받아오기 위해 터미널에 명령어를 쳤다.
git pull upstream master
그런데 자꾸 에러가 난다?
❌ 터미널에 뜨는 에러 메세지를 확인해봤더니, 내가 어제 올린 파일과 머지된 파일의 내용이 달라서 그런 것 같았다. 생각해보니 버튼 그룹형을 만들겠다고 어제 올린 파일에 덧붙혀서 코드를 작성했는데 그게 문제가 된 것 같았다.
--> 그래서 Fork를 확인하면서 수정사항들을 다시 돌려놨다ㅠㅠ 그랬더니 머지된 내용들을 받아볼 수 있었다.
❓오늘의 나는
- 오늘은 꽤 부지런히 공부했다. 초반에 오늘의 할 일이 정리되지 않아서 조금 방황했지만, Router를 공부하라는 ethen의 지도(?) 덕분에 집중할 수 있었다. 오늘 느낀거지만, 공부할수록 react로 편리해지는 코드들이 많은 것 같아서 신기할 따름이다.
- 5월 말부터 취업시장에 뛰어 들 준비를 하고 있기 때문에, 4월로 접어든 오늘 참 감회가 새로웠다. 벌써 4월이라니... 라는 생각도 드는 반면 그래도 한달? 정도 만에 이정도나 습득한 내가 신기하다. 완전 컴맹이던 내가 조금씩 알아가는 것에 신기할따름이다 😗
- 층간소음이 너무 심각하다ㅠㅠ 초딩들 제발 빨리 개학했으면 하는 바람이 생기는 이유.... 아파트에 살면서 왜그렇게 소리를 지르고 노래를 부르는거니...
- 오늘 첫번째 프로젝트에 대한 결과물이 나와서 다시 수정을 하거나 복원을 할 줄 알았는데 작업이 늦어진 것 같다. 혼자서 버튼 그룹에 대해 만들어보려고 했으나 또 실패했다ㅠㅠ 어렵다...
- 오늘의 운동도 성공! 후리스까지 입고 했는데도 땀이 엄청 나진 않았다. 하지만 더 파워풀하게 움직일 힘은 없다... 매일 앉아만 있으니 체력이 떨어져서 바로 파워풀한 운동을 풀파워로 할 수가 없다ㅠㅠ 그래도 했다는데에 의미를 둔다!
- Router에 대해 리서치를 하다가 영어공부에 대한 게시글을 접하게 되었다. 또다시 영어공부에 대한 마음이 스믈스믈 올라오게 되었다. 영어랑 중국어 다 공부하고싶다ㅠㅠ
- 그냥 잘 수 있겠지만 오늘 배운 내용들을 정리하면서 블로그 작성을 마쳤다 😁
❗️내일의 나는
- 오늘 피드백 받은 프로젝트의 Button Component의 수정사항들을 수정해보아야겠다. 생각보다 오래 걸릴 것 같은 작업이다. 집중해서 여러 자료 참고해서 완료해보아야지..!
- 벌써 목요일이라니.. 내일은 아침에도 약간의 운동이나 스트레칭을 시작해보아야겠다. 하루의 시작을 좀 상쾌하게 하면 더 집중해서 공부를 할 수 있지 않을까 싶다.
- 오늘 공부한 Router에 대해 조금 더 정리 해아 할 내용들이 있다. 더 많은 자료들을 참고하며 정리해두어야겠다.
- 다시 수정할 component를 위해 moon과 스타일 규격?을 맞춰야 될 것 같다.
