| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- never타입
- nestjs
- 빅오
- Algorithm
- 큐
- cookie
- 투포인터
- nextjs
- react
- tailwindcss
- typscript
- textarea autosize
- isNaN
- js알고리즘
- styled-components
- 버블정렬
- 블로그만들기
- aws lightsail
- NextAuth
- 슬라이딩윈도우
- 해쉬
- TypeScript
- 라이프사이클
- next.js
- JavaScript
- react-query
- 스택
- 정렬
- 알고리즘
- 그리디
- Today
- Total
목록React/Blog만들기 (2)
far
[React blog] 5. 메인화면 만들기
이제 블로그의 메인화면을 만들어야 하는데, 그 전에 저번에 만든 Signup과 Login의 디자인을 AppLayout으로 감싸줘야 /login, /signup으로 들어갈 때 네비바가 상단에 보인다. return ( Sign-Up ) Footer도 필요하기 때문에 만들어 준다. // components/footer/footer.styles.tsx import styled from "styled-components"; export const FooterContainer = styled.footer` position: absolute; bottom: 0; left: 0; width: 100%; background-color: #f2f2f2; padding: 1rem; display: flex; justify-..
[React blog] 4. 백엔드와 연결하기
백엔드와 React를 연결하기 위해 데이터를 fetch 시켜야 한다. 만약 백엔드 작업이 되어 있지 않다면 axios는 건너뛰고 더미 데이터 넣어주면 된다. npm i axios npm i react-query react-query를 선택한 이유는 redux가 redux-toolkit으로 오면서 보일러플레이트가 많이 줄었다고는 하나, 전역 상태를 관리하기 때문에 여전히 코드량이 많았다. 그래서 서버 스테이트를 관리하는 react-query를 사용해보고 싶었다. 아직 조금밖에 사용해보지 않았기에 장단점은 잘 모르겠으나, 확실히 코드는 많이 간결해졌다. // configs/config.ts export const backUrl = 'http://localhost:3065'; configs폴더를 만들고 안에 ..