프레임워크/React(NextJs)
-
[React] React 특정 Element영역 내의 마우스 위치 값 구하기프레임워크/React(NextJs) 2024. 8. 7. 10:22
프로젝트 내에서 Custom Context Menu 를 사용할 일이 있었는데,특정 Element에서만 동작해야 했다. 아래 코드는 마우스 이벤트 객체와 Ref Element 객체로 좌표를 구하는 함수이다.export const getAbsoluteAnchorPoint = ( e: React.MouseEvent, ref: React.RefObject,) => { const refRect = ref.current?.getBoundingClientRect(); const wrapperScrollY = ref.current?.scrollTop ?? 0; const rectTop = refRect?.top ?? 0; const wrapperScrollX = ref.current?.scrollLeft ?..
-
HTML form 태그 안에 submit 버튼을 여러 개 사용하여 동작을 다르게 하기 (with. React Hook Form)프레임워크/React(NextJs) 2024. 7. 24. 17:55
여러 화면에서 값을 입력하고, 한 번에 서버로 데이터를 요청해야 하는 상황이 발생했다.그래서 이전 버튼을 클릭했을 때와 저장 버튼을 클릭했을 때, 입력한 값을 가지고 페이지 이동 또는 서버 요청이 필요했다. 그래서 나는 페이지 이동 시마다 Form Data를 가져와 전역 상태에 넣어 관리해 주는 방식을 생각했고,이 때 프로젝트에서 사용하고 있는 React Hook Form의 onSubmit을 통해 데이터를 가져오는 방식이 베스트 였다. 그러나 이렇게 되면 하나의 form태그에 submit 버튼 두개가 되어 이를 구분해서 처리하는 방법이 필요했다.이후, submit도 이벤트라는 것에 초점을 맞추어 찾아보니, 해답을 찾을 수 있었다. 그 해답은,form태그에서 Submit 이벤트가 발생했을 때 submit..
-
[NextJs] Vercel로 SSG 프로젝트 배포하기프레임워크/React(NextJs) 2022. 10. 14. 21:33
Vercel로 프로젝트 배포하기 일정 조건 이내에서 무료로 프로젝트를 배포할 수 있는 Vercel로 이번에 만든 SSG 블로그 프로젝트를 배포해보기로 했다. Vercle 배포 사이트 Develop. Preview. Ship. For the best frontend teams – Vercel Deploy web projects with the best frontend developer experience and highest end-user performance. vercel.com 우선은 vercel을 사용하기 위해 github 계정을 연결해서 회원가입을 했다. Project 만들기 1. Add New에서 Project를 선택 2. GitHub 프로젝트를 연결해서 가져오기 3. 프로젝트의 이름을 변경하고..
-
[NextJs] Markdown 포스팅을 정적 페이지(SSG)로 배포하기프레임워크/React(NextJs) 2022. 10. 8. 20:36
원티드 프리온보딩 챌린지 10월 2일차 과제 이번 과제는 마크다운으로 작성한 파일을 Nextjs를 통해 정적 페이지로 배포하는 것이다. 과제 주요 내용 ✏️ 사용자는 root 경로의 `/__posts` 폴더에 작성된 마크다운 파일(.md)를 작성할 수 있어야 한다. ✏️ 해당 파일은 마크다운 본문과 게시물에 대한 meta data를 담을 수 있어야 한다. ✏️ 블로그에 작성된 게시물을 렌더링하는 `목록 페이지`와 개별 게시물을 렌더링하는 `상세 페이지`로 나누어 작성한다. : `/` - 목록 페이지 : `/[id]` - 상세 페이지 진행 과정 이번에는 과제를 하는 과정을 적어보려고 한다. 해결해 나가는 과정의 프로세스가 중요하다고 하심 우선 과제를 받았을 때 가장 먼저 떠올랐던 것은 root 경로에 있는..
-
CSR/SSR (with Next.js)프레임워크/React(NextJs) 2022. 10. 8. 01:54
원티드 프리온보딩 챌린지 10월 과제 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3.Next.js 프로젝트를 세팅한 뒤 yarn start 스크립트를 실행했을 때 실행되는 코드를 nextjs github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. - https://nextjs.org/docs/getting-started (Next.js 세팅 가이드) - https://github.com/vercel/next.js/ (Next.js Github 레포지토리)..
-
[React] typescript + webpack 에서 tsconfig.json - paths 속성 사용하기 (별칭 경로)프레임워크/React(NextJs) 2022. 9. 10. 18:44
React를 webpack으로 직접 빌드하는 프로젝트와 typescript로 만든 경우 tsconfig.json에서 paths를 사용하기 위해서는 webpack에서 제공하는 플러그인 설정이 필요합니다. 경로를 잘못 설정하면 아래와 같은 에러가 발생하고, Cannot find module '@pages/Main' or its corresponding type declarations. 플러그인을 설치하지 않으면, devServer모드나 build시 아래와 같은 에러가 발생합니다. Module not found: Error: Can't resolve '@pages/Main' in 'C:/git/...' 설정 방법 프로젝트 구조 /src // ... /pages // ... App.tsx index.tsx ts..
-
[React] react-hook-form(feat. typescript)으로 Input 컴포넌트 만들어보기프레임워크/React(NextJs) 2022. 9. 6. 21:41
이 글은 프로젝트의 파일 구조와 디자인패턴을 고민하면서 시도했던 방법을 작성해두기 위한 글입니다. 해당 코드는 현재 사용하는 방식일 수도, 아닐 수도 있습니다. 이런식으로 코드를 짜봤구나. 정도의 예시로 봐주시면 감사하겠습니다. 사용한 라이브러리 : react-hook-form ./src/components/forms/Form.tsx import * as React from 'react'; interface onSubmitProps { onSubmit: React.FormEventHandler; children: React.ReactNode; } const Form = ({ onSubmit, children }: onSubmitProps) => { return {children}; }; export de..
-
[React] webpack 설정 (실시간 개발 모드 관련)프레임워크/React(NextJs) 2022. 9. 3. 23:47
react를 webpack 설정해서 코드를 작성하고 build를 해서 확인하는 것까지는 좋았으나, 수정이 있을 때마다 빌드하고, 확인하는 것이 번거롭던 와중에.. next.js에서 develop 모드 실행시 실시간으로 반영되던 것이 생각나 방법을 찾아보았고, webpack에서 설정할 수 있다는 사실을 알게되어, 시행착오 끝에 설정 완료한 내용을 기록 및 공유! 프로젝트 구조와 그에 따른 webpack 설정 3개의 npm 모듈을 설치 $ npm i --save-dev clean-webpack-plugin html-webpack-plugin $ npm i webpack-dev-server .env 설정과 관련된 글은 아래 포스팅을 확인해주세요. [React] .env (환경변수파일) - 'create-rea..