사랑하면 알게되고, 알게되면 보이나니.나의 문화유산 답사기에서 보았던 글귀입니다. 무언가를 좋아하게 되면 좀 더 알게되고, 알게 되니까 그 전에는 보이지 않았던 것들이 보이게 된다라니. 얼마나 매력적인 말인가요? 전혀 프로그래밍과 관련이 없는 사람 중에 하나였지만 어느덧 배운 지 1년 9개월 정도 되었습니다. 조금씩 보일듯 말듯한 컴퓨터란 존재에 애가 타는 마음으로 글을 써야겠다고 생각했습니다. 좋아 하지만 아직 아는 것이 너무나 부족해서 조금씩 깊게 알게 되는 과정을 보여드리는 카테고리가 될 것 같습니다. 우리 앞에 있는 컴퓨터는 예전에는 전산원(계산하는 사람)을 가르켰다고 합니다. 히든 피겨스에 나오는 주인공들 처럼요. 이제는 인간의 속도로는 계산 및 기능을 따라잡을 수 없기 때문에 인간이 하던 일을..
Route에 path 속성에 아무것도 전달하지 않으면 어떻게 될까요?switch를 알아보기 우선은 Route에 path 속성 값을 전달하지 않으면 어떻게 되는지 부터 알아봅시다. 해당 예시에는 3개의 라우트가 있고, 맨 마지막 라우트에는 path 속성을 전달하지 않았습니다. 결과는 "localhost:3000/"에 접속하니 path 값이 "/"인 Home 컴포넌트와 path 값이 없는 NotFound 컴포넌트가 둘 다 보이는 군요. 즉 path를 전달하지 않으면 어떤 요청에도 항상 나타나게 됩니다. "localhost:3000/about"에 접속하면 우리가 설정한 세 개의 컴포넌트가 다 보이게 됩니다. 이럴 때 스위치를 사용하시면 됩니다.switch 사용해보기스위치는 라우터들을 묶은 다음, 가장 먼저 p..
match와 location을 알아보도록 하겠습니다.BrowserRouter와 우리의 App을 연결하면 어떻게 된다고 했었나요? 라우터가 history api에 접근할 수 있고, Route에 연결된 컴포넌트에 match와 location, history props를 전달합니다. 이번 포스팅에서는 match와 location에 대해서 알아보고 path와 querystring을 받아오도록 하겠습니다. 이전 예시에 위의 코드를 복사해서 붙여넣어주세요. 라우트가 하나이고, "/"에 연결되어 있기 때문에 앱을 실행하면 크게 Home이라는 글자가 적힌 것을 볼 수 있습니다. 페이지가 에러없이 작동되면 F12를 눌러 구글 개발자 모드를 실행하고 콘솔 창을 확인해주세요. 우선은 나온 값들을 하나하나씩 알아보도록 하겠습..
리액트 라우터를 배워봅시다.라우팅이란 무엇일까요? 간단히 설명하자면 우리의 요청(url)에 맞게 연결해주는 것이라고 생각해주시면 됩니다. 우리는 url을 통해서 어떤 요청을 할까요? 우선 url이 어떤 형태인 지를 보겠습니다. 구글에 리액트 라우터라고 검색했을 때 url의 형태입니다. 파란부분(https)는 프로토콜입니다. 그리고 주황색 부분(www.google.co.kr)은 호스트 네임이라고 합니다. 중요한 건 호스트 네임 뒷부분에 있는 것들입니다. 초록색 부분(search)는 path name이라고 하고 "?"뒤에 있는 부분은 쿼리스트링(querystring)이라고 합니다. 또 페이지 내에서 위치를 표시할 때는 # 형태로 url이 좀 더 추가되기도 하는데 이 부분은 hash라고 표현합니다. 이렇게 용..