분류 전체보기154

• 

  [NextJS] React-Query useMutation()사용하기 1. 무엇을 하려하는가? 블로그를 열심히 만들어가던 와중 한 가지 개선하고 싶은 상황이 생겼다. 댓글을 작성하거나 삭제하고 난 후 나는 nextjs의 router를 이용해서 router.reload()를 이용해서 페이지를 새로고침해서 작성된 댓글이 다시 화면에 보이게 하거나 댓글이 삭제된 것을 화면에 다시 보여주고 싶었다. 하지만 매번 댓글을 작성하거나 삭제 할 때마다 페이지를 새로고침하는 것은 사용자 경험적인 측면에서 매우 안좋을 것 같았다. 따라서 찾은 것이 react-query의 useMutation() 훅이다. 2. React-query hook의 종류 useQuery -> 단순히 데이터를 가져오는 역할을 한다. 물론 query key가 제공되므로 queryClient를 만들어 캐시를 저장하거나 .. front-end/Nextjs 2022. 8. 1.

• 

  [NextJs] React-Query로 ServrSide Rendering 구현하기 1. 무엇을 하려하는가? NextJS가 강력한 이유 중 하나는 SSR(server-side-Rendering)을 제공하기 때문이다. 서버 단에서 미리 데이터를 포함한 html파일을 렌더링한 후 프론트 쪽으로 보내주기 때문에 한 번 사이트가 로딩 된 후에는 거의 로딩시간이 걸리지 않는다는 장점이 있고 검색엔진이 사이트들을 방문할 때 많은 데이터가 이미 렌더링 된 html에 포함되어 있으므로 검색 엔진 최적화에도 유리하다는 장점이 있다. 나는 이 ServerSide Rendering을 React-Query라이브러리를 사용하여 구현해보고자 한다. 2. 구현 1. _app.tsx import Footer from "components/Layout/Footer"; import Header from "compone.. front-end/Nextjs 2022. 7. 30.

• 

  [AWS] Express + AWS3 express통해 이미지 S3에 업로드하기 1. 무엇을 하려하는가? Next JS와 Express를 통해서 블로그를 만들고 있던 중 이미지는 multipart를 처리하는 미들웨어인 multer를 통해 저장하기로 하였다. 하지만 multer의 local storage를 사용하면 이미지를 저장할 때 express서버가 열려있는 나의 컴퓨터에 저장이 되어 메모리 상 문제가 생길 거 같았다. 그래서 외부 스토리지를 찾던 중 가장 좋을 거 같다고 생각한 곳이 바로 AWS의 S3이다. S3에 이미지를 업로드하고 그 주소만을 반환하면 S3에서 이미지를 반환하여 로컬 서버에 무리를 주지 않고도 이미지를 불러올 수 있을 것이다. 2. 무엇이 필요한가? front-end에서는 딱히 필요한 것은 없다. 그저 backend가 제공하는 api를 호출해주면 된다. bac.. deployment/AWS 2022. 7. 17.

• 

  [NextJS + Express] Passport-LocalStarategy를 통한 로그인 1. 무엇을 하려는가? 나는 로그인 기능을 만들고자 했다. 로그인에서 중요한 점은 인증이다. 현재에는 session 기반 인증 JWT, OAUTH 등 많은 인증 방법이 있지만 나는 node로 백엔드를 개발 중이어서 passport의 localStartegy를 이용하여 session과 cookie기반 인증을 하려고 했다. 인증이란 사용자가 어떠한 작업을 할 때 이 사용자가 이 작업을 할 자격이 있는지에 대한 확인이라고 생각했다. 만약 포스트를 업로드하는 기능을 이용하려면 우리는 이 사용자가 우리의 사이트의 회원인지 검사해야하고 현재 로그인 중인지 검사해야한다. 이 때 인증을 하는 방법은 로그인 시 서버가 브라우저에게 쿠키를 발급해주고 요청 때마다 이 발급받은 쿠키를 요청과 함께 보내 서버가 자신이 발급한 .. back-end/express.js 2022. 7. 15.

• 

  [Express+Sequelize] MySQL과 Express연결 (ES6) 1. 문제 대부분의 sequelize설명들이 구글링을 한 결과 CommonJS의 require문을 통해 구현이 되어있거나 ES6의 Class를 extends한 뒤 구현을 하는 형태로 이루여저 있었다. 하지만 나는 Sequelize의 모델을 define함수 내에서 정의해주고 싶었고 내가 현재 개발하고 있는 Express서버는 ES6를 사용하고 있었으므로 구글링을 통해 찾은 require문은 사용할 수 없었다. 따라서 ES6의 모듈 import와 export를 사용해서 코드를 바꿔보자는 생각을 가지고 이슈를 해결하였다. 2. Sequelize+Express의 연결 sequelize는 백엔드 서버에서 mysql을 간단히 조작할 수 있도록 도와주는 라이브러리이다. 나는 mysql을 database수업 시간에 다.. back-end/express.js 2022. 7. 10.

• 

  [NextJS] 동적 라우팅 (with React-Query) 1. 무엇을 하려고 하는가? 나는 개인 블로그를 만들고 있다. 이 중에 블로그 글을 작성하여 업로드를 하면 /Album페이지에 작성된 블로그 글을 React-Slick을 이용해 carousel형태로 보여주고 이 Carousel에 들어있는 이미지를 누르게 되면 해당하는 블로그 글 상세 페이지로 이동하는 기능을 구현하려고 한다. 이 기능을 NextJS에서는 dynamic Routing 즉, 동적 라우팅이라는 기능으로 제공하고 있는데 거의 프론트 엔드 업무를 진행할 때는 필수적인 기능이라 기록해두고자 한다. React에서는 useParams훅을 이용해 query의 파라미터를 받아오고 이를 통해 다른 데이터 페칭 요청을 보냈다. (axios등 이용) NextJS에서는 pages폴더 안에 [변수명].tsx , [.. front-end/Nextjs 2022. 7. 6.

• 

  [NextJS + Express] Express에 저장된 이미지 불러오기 (외부 이미지 불러오기) CORB문제 1. 나의 상황 나는 현재 localhost3001번 포트에서 next js를 이용한 프론트 엔드 서버를 localhost:5000번에서는 express를 이용한 백엔드 서버를 구현하였다. 또한 express에서는 mongoDB와 연동을 통해 백엔드 서버를 구축하였다. 2. 문제 상황 localhost:3001번 포트와 localhost:5000번 포트는 서로 포트 번호가 다르다. 따라서 Cross-Origin-Resource Sharing(CORS)정책을 만족하지 못했다. 따라서 앞선 포스팅에서 proxy설정을 해주어 이 api문제를 해결해주었다. 하지만 여전히 이미지 파일은 불러오지 못하는 문제가 존재했다. 3. 이미지 불러온 방법 nextJS - localhost:3001 axios g.. back-end/express.js 2022. 7. 5.

• 

  [NextJS] NextJS에서의 proxy설정 1. React와는 다른 설정 CRA+Typescript조합에서의 proxy설정은 매우 간단했다. 앞선 포스팅에도 언급했듯이 그저 package.json파일에 "proxy": "http://localhost:5000/" 다음과 같은 한 줄만 추가하면 되었다. 저기서 주소는 내가 설정한 백엔드 서버의 주소로 port번호가 5000이 아니어도 괜찮다. 나는 express서버를 5000번 포트에서 열기로 했으므로 다음과 같이 설정해주었다. 하지만 nextjs에서는 proxy설정이 조금 달라진다. 2. next.config.js의 수정 nextjs에서 proxy설정을 해주려면 다음과 같은 코드만 작성해주면 간단히 끝난다. 1. next.config.js module.exports = { async rewrite.. front-end/Nextjs 2022. 7. 1.

• 

  [NextJS] NextJS에서 Styled-components사용할 때 오류 해결 1. Styled-Components라이브러리 styled-components를 nextjs에 적용하던 중 문제가 발생했다. 화면이 정말 미친듯이 깜빡이기 시작한 것이다. 먼저 styled-components를 사용하던 분이 nextjs에서 styled-components가 문제가 발생할 수 있다고 귀띔해준 것이 기억나서 이것이 그 문제인가보다 하고 바로 구글링에 들어갔다. 2. 왜 화면이 깜빡거리는가? NextJS는 서버에서 미리 Meta태그 등이 포함되어 있는 HTML을 먼저 만들어 놓은 후 보여주는 ServerSide Rendering 을 제공하기 때문에 HTML에는 손을 댈 수가 없다. 따라서 그 후에 JavaScript를 추가해주어야하는데 Styled-components라이브러리는 css-in-.. front-end/Nextjs 2022. 6. 30.

• 

  [NextJS] CRA+TypeScript 에서 Nextjs이사 - 폴더 구조 비교 1. 폴더 구조의 비교 1.React 프로젝트 - CRA+TypeScript 우선 가장 큰 특징은 리액트 프로젝트에선 다음과 같이 src폴더가 존재하고 그 안에 component apis assets feature hook pages shared stores types utils 와 같은 큰 카테고리의 폴더들이 존재한다. 각 폴더 안에는 또 component단위 혹은 기능 단위로 쪼개어 파일이 배치되어 있다. 위 폴더 구조를 보면 component폴더 안에 card컴포넌트를 구현할 폴더를 하나 만들고 그에 해당하는 index.tsx파일과 styeld.ts파일이 존재하는 것을 확인할 수 있다. 또한 리액트 프로젝트에서는 src폴더 안에 assets폴더를 만들어 사용할 아이콘, 폰트, 이미지들을 모아둘 수 .. front-end/Nextjs 2022. 6. 29.

• 

  [NextJs] CRA+TypeScript에서 NextJS로 이사 1. Create Next-app 추가 1. create next-app --typescript npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 다음과 같은 코드로 typescript템플릿의 nextjs를 설치해준다. 2. yarn add next react react-dom npm install next react react-dom # or yarn add next react react-dom # or pnpm add next react react-dom 3. Package.json script 수정 "scripts": { "dev": "ne.. front-end/Nextjs 2022. 6. 29.

• [React] React18 : Type{} is not assignable to type 'ReactNode' 해결 1. 문제 React-slick을 사용하다가 발견한 문제이다. React 17때만 해도 잘 돌아가던 코드가 18로 업그레이드 되자 타입 인식을 잘 하지 못하는 문제가 발생했다. 다음은 stack-overflow와 인터넷을 뒤지다가 찾은 해결책이다. 2. 해결책 이 문제는 npm을 사용하는지와 yarn 을 패키지 매니저로 사용하는 것에 따라 해결 방법이 다르다. 하지만 아주 조금 다르다. Yarn 사용시 package.json에 다음과 같은 내용을 추가해준다. "resolutions": { "@types/react": "^17.0.38" } Npm사용시 package.json에 다음과 같은 내용을 추가해준다. "overrides": { "@types/react": "^17.0.38" } 3. 그 다음은? .. 에러관련 2022. 6. 29.