Day16

svg 대체 메세지

svg 파일을 이용하면서 img 태그의 alt같은 속성은 넣을 수 없는걸까? 하는 생각이 들었다.
작업을 하면서 이미지가 뜨는지 뜨지 않는건지 UI적으로 알게 해주는 중요한 요소라고 생각을 하게 됐기 때문이다.

<Logo height="25" role="img" aria-labelledby="title">
	<title id="title">naru</title>
</Logo>

여러 포스팅을 읽으면서 썼는데 이렇게 하는 게 맞나..?

No routes matched location "/"

내가 두개의 Routes를 사용하고있고, 두 개의 하나 중 내부에 올바른 경로가 없기 때문에 나타나는 오류라고 한다.
같은 경로에 두개의 컴포넌트를 나타내야하면 어떻게 해야할까..

후에 꼭 수정하기!

Input, Button 컴포넌트

재사용의 편리함을 위해 Input과 Button 공통 컴포넌트를 제작했다.
그런데 이 컴포넌트를 <Link>로 감싸니 상위 태그의 스타일을 가져올 수 없다고 인지하는지, width 값이 죽어버린다.
그래서 어쩔 수 없이 width의 값을 % 말고 rem으로 지정해주었다.

git log 탈출법

q 누르기

로그인, 회원가입 페이지

완성된 Input, Button 컴포넌트를 활용해 로그인, 회원가입 페이지를 만들어주었다.

React - Node.js 연결

server side rendering은 서버가 html을 만들어 보내주는 것,
client side rendering은 html을 리액트가 브라우저 안에서 만들어주는 것.
리액트는 보통 csr을 사용하며 통신은 ajax로 이루어진다.
ajax는 서버에 새로고침 없이 요청을 할 수 있게 도와준다.
리액트에서는 fetch와 axios 방식을 주로 사용하는데 axios 방식을 사용하면 편리하다.

axios 공부를 해야겠다...

---

참고 사이트

SVG 접근성
ARIA를 사용하여 SVG 접근성 향상
No routes matched location "/"
[React] React-router 'Outlet' 사용하여 레이아웃 구성하기
React와 Express연동하기 1
React에서 Axios를 이용해 API 호출하기 (feat. fetch, ajax)
Node+Express 서버와 React 연동하려면
[React axios] React의 axios 기본 :: axios로 GET, POST, PUT, DELETE 요청 보내기
Data fetching with Axios in React made simple