본문 바로가기

전체 글77

[솔로프로젝트] My small trip(4) - 리액트로 환율계산기 만들기 (환율 API) 해외 여행을 하다보면 매일 앱에서 확인했던 것은 그날의 환율과 날씨였다. 오늘은 여행 준비 혹은 여행중에 쓸 수 있는 환율 계산기를 만들어보기로 했다. 환율API 구글링을 통해 매일 새로운 정보로 업데이트 되는 환율 API를 받을 수 있었다. 아래의 주소에서 매일 달라지는 정보가 업데이트 되는 것을 확인 할 수 있다. 바꾸고싶은 나라의 화폐를 입력하면 해당하는 값을 받을 수 있다. 코인을 비롯한 여러가지 화폐들을 계산할 수 있는데, 아무래도 너무 옵션이 많으면 더 헷갈릴것 같아서 나는 사람들이 많이 쓸법한 화폐들을 남겨 놓고 나머지는 옵션에서 지워줬다. 환율 옵션 만들기 추려준 옵션들을 통해 유저들이 자신이 가진 화폐(from)에서 바꾸고 싶은 화폐(to)를 선택할 수 있는 옵션 창을 만들었다. 그리고 .. 2024. 1. 18.
[솔로프로젝트] My small trip(3) - Next.js의 렌더링(SSR, SSG, ISR) React는 기본적으로 CSR(client side rendering)기반으로 동작한다. 유저가 요청을 보내면 CSR방식은 일단 HTML과 Javascript파일을 받아와 렌더링 하는데, 이 후 필요한 파일들을 한번에 받아오기 때문에 이 후 요청을 비교적 빠르게 실행시켜줄 수 있다는 장점이 있다. 하지만 처음에 렌더링을 하는 시간이 오래 걸릴 수 있으므로, 유저가 요청을 보낸 후 렌더링이 완료 될 때까지 빈 화면을 보는 시간이 길어 질 수 있다. 이와 대비대는 개념은 SSR(server side rendering)방식인데, 서버에서 완성된 HTML을 보내주어 바로 렌더링 할 수 있도록 한다. 이 방식은 CSR에 비해 첫 화면 렌더링이 빠르나, 유저의 요청마다 서버에서 완성된 HTML을 보내주어야 하므로 .. 2024. 1. 4.
[솔로프로젝트] My small trip(2) - 라우팅과 환율 api 라우팅 라우팅이랑 간단히 말해 네트워크에서 경로를 설정하는 작업이다. 위 주소창을 보면 마지막에 #starred, #inbox로 끝나는 것을 볼수 있는데 이처럼 다른 경로를 설정해 유저에게 보여질 요소를 정하는 것을 라우팅이라고 생각하면 된다. 라우터는 이 작업을 위한 장치라고 생각하면 된다. React를 사용하여 프로젝트를 만들면 라우팅을 위해 react-router-dom을 설치하고 태그로 컴포넌트와 경로를 설정해주어야 한다. 리액트 버전에 따라 조금씩 차이가 있을수 있지만 이렇게 경로 설정하는게 리액트에서의 라우팅 작업이다. 위 코드에서 보면 path와 component를 이용해 경로와 해당 경로에서 보여질 컴포넌트를 설정해 준 것을 확인 할 수 있다. NEXT.JS에서의 라우팅 next.js를 이.. 2023. 12. 7.
[솔로프로젝트] My small trip(1) - parallax scroll [솔로프로젝트를 react, next.js, recoil, tailwind를 사용해 개발] 솔로프로젝트를 구현해 본적이 없기때문에 이번에는 내가 그동안 써봤지만 익숙하지 않은, 또는 써보고 싶은 스킬들을 모아모아 세팅 > 구현 > 배포까지 해보기로 했다. 1. window에 VScode, node.js를 설치 2. create-next.js-app으로 next.js기반의 react환경을 만들어줬다. chocolatey를 설치하는데 실패했는데, 그래도 npm, node.js설치에는 문제가 없어서 진행했다. local에서 잘 확인이 되는지 구동 시켜보니 제대로 설치된 것인지 잘 보였다. 3. 랜딩페이지를 위한 parallax scroll 랜딩 페이지에는 parallax scroll을 이용해 해당 여행지의 이.. 2023. 11. 23.

티스토리툴바