'react' 태그의 글 목록

다국어 기능 구현하기 (Feat. Next, App Router, TS, next-intl)

개발 환경- Windows- VSCode- Next.js 15 (App Router)- Typescript- next-intl ^3.26.3 목표다국어 (영어, 한국어)를 지원하는 웹 페이지 제작 다국어 및 i18n 소개최근 Next.js에서 다국어 기능을 지원하는 서비스를 개발하고 있습니다. https://developer.mozilla.org/ko/docs/Glossary/Internationalization 국제화 (internationalization, I18N) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN국제화 (i18n ("internationalization" 부터 유래, 20자로 이루어진 단어))는 제품이나 서비스를 모든 대상 문화에 쉽게 적용할 수 있도록 하는 ..

Web/React.js 2024. 12. 28. 13:40

[Next.js] Meta Data 및 Open Graph 적용하기 (Feat. Next 14)

Next.js에 메타 데이터 및 오픈 그래프를 적용하는 방법에 대해서 알려드리겠습니다.https://angelplayer.tistory.com/589 1. Meta Data 및 Open Graph 작성하기// layout.tsxexport const metadata: Metadata = { // MetaData title: 'AngelPlayer', description: 'AngelPlayer의 사이트입니다.', // OpenGraph openGraph: { title: 'AngelPlayer', description: 'AngelPlayer의 사이트입니다.', images: 'IMAGE URL', },}; React나 ..

Web/React.js 2024. 8. 2. 09:11

[Chit Chat] 메타데이터 적용 실험하기 (Feat. Next 14)

Next.js로 제작한 서비스를 공유할 때 대표 이미지와 문구가 출력되도록 하는 방법을 테스트하였다. 1. layout.tsx에 head 추가하기가장 먼저 시도한 것은 layout.tsx에 head 태그를 추가하고 메타 데이터와 오픈 그래프 정보를 입력하는 것이었다. 개발자 도구를 통해서는 제대로 들어가는 것처럼 보였으나, 막상 title이 제대로 출력되지 않는 것으로 보아 실패한 것처럼 보인다. 2. layout.tsx Metadata 사용하기사실 next 13부터는 프로젝트를 생성하면 layout.tsx에 자동적으로 metadata라는 것이 생긴다. 원래는 이걸 사용하려고 했지만, next 공식 홈페이지에는 meta 태그를 사용해서 작성하는 법을 가르쳐준다. 그리고 무엇보다 Met..

일상/Chit Chat 2024. 7. 31. 09:36

[Next] Next.js에서 폰트(글꼴) 변경하기 (Feat. Google, Local)

오늘은 Next.js에서 Font(글꼴)을 변경하는 방법을 알려드리겠습니다. 내용은 크게Google Font 적용 방법여러 개의 Google Font 적용 방법Local Font 적용 방법입니다. Google Font 적용하기과거 HTML이나 React를 사용할 때는 cdn을 통해서 Google Font를 사용한다고 알려주거나,폰트를 직접 다운로드 받아서 연결하는 작업이 필요했습니다. https://angelplayer.tistory.com/510 [HTML/CSS] 외부 Font(TTF/OTF) 웹 페이지에 적용하기테스트 환경 React + Vite ※. TTF vs OTF 차이 폰트 구조 TTF는 오래된 폰트 형식으로, 덜 복잡한 비트맵으로 구성되어 있어 일부 오래된 시스템과의 호환성이 더 좋을..

Web/React.js 2024. 7. 7. 18:07

[Vercel] 웹 서비스 배포하기 (Feat. Next, Github)

먼저 Repository를 생성하고, 작성한 리엑트 프로젝트를 업로드합니다. https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com 다음 Vercel 페이지에서 로그인을 진행합니다. 로그인을 하시면 프로젝트들을 확인할 수 있는 화면이 뜹니다. 여기서 Import Project를 통해 Github에 있는 Project를 연결해줍니다...

Web/etc 2024. 3. 13. 09:04

[TIL] 20240212 개발일지 (8일 - 12일)

설 연휴부터 어제까지 몸 상태가 좋지 않아서 제대로 포스팅은 하지 못했다. 공부한 내용은 git으로 정리하였고 npm 배포와 관련해서 작성해던 내용만 정리했다. 기타 npm 패키지 배포하기 어제 실패했던 npm으로 배포하기를 다시 진행하였다. 우선 npm Organizations의 이름을 변경하였다. 왜 안되는지 보니, 어제 username을 angelplayer로 지었더니 그게 Organizations로는 사용이 불가능 한 것 같았다. 그래서 username을 다른 것으로 변경하고 Organizations를 생성하였다. 어제는 carousel 안에 있던 index.tsx 파일명을 Carousel.tsx라고 지정했었다. 하지만 문제가 계속 Carousel 함수를 찾을 수 없다는 에러가 발생하였다. 다른 ..

일상/개발 일지 2024. 2. 15. 15:51

[React] 페이지 이동 시 스크롤 화면 최상단 이동하기

페이지 1 페이지 1에서 버튼(userNavigate())을 눌러 페이지 2로 이동 React와 react-router-dom으로 페이지를 구현하는 경우 나 useNavigate()를 통해 페이지를 이동하면 가장 최상단으로 이동하지 않고 현재 보고 있는 스크롤 위치로 이동하는 경우가 종종 발생합니다. 이런 문제를 해결하기 위한 가장 손쉬운 방법은 페이지(컴포넌트)마다 window.scrollTo(0, 0);를 작성하기가 있습니다. 하지만 매 페이지 컴포넌트에 이를 작성하기는 번거롭기 때문에 별도의 컴포넌트를 만들어서 사용하는 방법을 react-router-dom 공식 홈페이지에서 권장하고 있습니다. // ScrollToTop.jsx import { useEffect } from 'react'; impor..

Web/React.js 2024. 2. 10. 09:07

[TIL] 20240207 개발일지

알고리즘 Front-End url 공유 시 미리보기 이미지 및 내용 지정하기 채팅 서비스 등에서 URL 공유 시 출력되는 이미지, 제목, 설명을 지정하는 방법을 찾아보았다. meta 태그에 속성을 수정하면 적용된다고 한다. 우선 적용은 완료하였고 배포를 수행하고 적용되는데 약간 시간이 걸린다고 하니 우선 기다려봐야할 것 같다. 페이지 이동 시 최상단 화면 보여주기 https://angelplayer.tistory.com/537 react router dom을 이용하여 이동을 구현하면 실제 페이지 이동이 아니라 랜더링만 일어나기 때문에 사용자가 기존에 보던 스크롤 위치에서 새로운 데이터를 출력하게 된다. 이를 방지하기 위해서 별도의 컴포넌트를 작성하고, 해당 컴포넌트에서 url의 수정을 감지한 후, 변경 ..

일상/개발 일지 2024. 2. 8. 00:56

[TIL] 20240206 개발일지

알고리즘 강의 boj 10819 차이를 최대로 단순 순열 문제 boj 15686 치킨 배달 일단 순열로 풀었는데 시간초과나는걸 어거지로 pypy를 통해 성공시켰다. 다음 주에 다시 풀어봐야 할 듯 Front-End textarea 개행 출력되지 않는 문제 textarea에 글을 개행으로 작성하고 나서 데이터를 DB에 넣고 다시 출력하려고 하면 정상적으로 출력되지 않는 문제가 발생하였다. 뭔가 저장 도중에 개행이 날아가는 문제가 발생하는 것 같아서 작성할 방법을 모색하였다. 결국 1) 개행한 부분을 강제로 \n로 치환 2) 받아온 데이터에서 \n 부분을 잘라서 출력 과 같은 방법을 통해 해결하였다. 자세한 해결 방법은 아래에 정리하였다. https://angelplayer.tistory.com/535 기타

일상/개발 일지 2024. 2. 7. 00:36

[HTML/CSS] textarea 개행 안되는 문제 해결 (Feat. React)

(※ 저는 React와 Firebase를 사용하는 도중 문제가 발생하였습니다.) 태그를 사용하여 1)글을 작성 한 후, 2)DB에 저장하고, 3)출력을 했더니, 개행(Enter)이 모두 띄워쓰기(Space)로 치환되어 출력되는 현상이 발생하였습니다. 인터넷에서 유사한 문제가 발생한 사람들이 몇몇 있었으나 /n으로 저장이 되고 제대로 출력되지 않는 현상이었고, 저는 DB에 띄워쓰기로만 저장되는 상태였습니다. (※ 문제를 해결한 사람들 중에 "white-space: pre-wrap;를 통해서 해결하였다"는 분들도 계셨으나, 일단 저는 해당 방법으로 해결되지 않았습니다.) const formattedDescription = item.description.replace(/\r?\n/g, '\\n'); texta..

Web/HTML&CSS 2024. 2. 6. 09:35

[TIL] 20240204 개발일지

알고리즘 boj 1759 암호만들기 boj 12101 123더하기 123더하기에서 중복 순열을 통해 구현을 진행하였는데, 다른 사람의 코드를 보니 단순히 재귀 문제로 생각하고 구현했을 때 더 간결한 코드가 나오는 것 같았다. 굳이 순조부에 한정지어서 생각하지 않고 재귀적으로 구현한다는 생각을 가지는 것이 중요할 것 같다. Front-End react query 무한 호출 const paymentQuery = useQuery({ queryKey: ['payment'], queryFn: () => { return getPayment(); }, staleTime: 10 * 60 * 1000, // 문제 해결 부분 }); const updatePaymentStateMutation = useMutation({ m..

일상/개발 일지 2024. 2. 5. 00:08

[TIL] 20240203 개발일지

알고리즘 boj 1182 부분수열의합 boj 2529 부등호^ 오늘은 간단히 순조부 관련 문제를 풀었다. 순열, 조합, 부분집합이 각각 최대 범위가 얼마인지를 잘 알고 있는 것도 중요할 것 같다. 부등호 문제의 경우 일반 순열 방식으로 풀면 시간 초과가 나기에 적절한 조건문을 추가하는 것이 중요하였다. Front-End 배포 테스트 https://angelplayer.tistory.com/531 [Netlify] 웹 서비스 배포하기 (Feat. Github, React) 웹 서비스를 제작한 후 Github Repository에 업로드하고 이를 Netlify를 통해서 배포하는 방법에 대해서 설명드리겠습니다. Goals - React 프로젝트를 웹 상에 배포 To Do - Github에 React 프로젝트 ..

일상/개발 일지 2024. 2. 3. 23:52

[Netlify] 웹 서비스 배포하기 (Feat. Github, React)

웹 서비스를 제작한 후 Github Repository에 업로드하고 이를 Netlify를 통해서 배포하는 방법에 대해서 설명드리겠습니다. Goals - React 프로젝트를 웹 상에 배포 To Do - Github에 React 프로젝트 push - React Repository를 Netlify와 연결 - Netlify를 통해 프로젝트 배포 1. 프로젝트 생성 및 서비스 구현 먼저 배포 테스트를 위해서 Git Repository를 하나 생성하였습니다. 그리고 리엑트를 통해서 간단하게 배포를 확인할 수 있는 화면을 구현한 후 Repository에 push 하였습니다. 2. Netlify 세팅하기 https://app.netlify.com/ Netlify App app.netlify.com Netlify 홈페..

Web/etc 2024. 2. 2. 08:29

[TIL] 20240131 개발일지 (22일 - 31일)

알고리즘 강의 Java에서 Python으로 코딩테스트용 언어를 변경하기로 하였다. 다시 처음부터 공부 필요.. Front-End 글자 줄 넘어가면 ... 처리하기 /* 3줄이상 나오지 않게 하기 */ overflow: hidden; text-overflow: ellipsis; white-space: normal; height: auto; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 참고자료 : https://nh0404.tistory.com/43 한줄이 넘어가는 경우 ellipsis를 사용하는 것은 알고 있었으나, 여러 줄이 넘어가는 경우 조건..

일상/개발 일지 2024. 2. 1. 15:25

[Infra] Github Web 개발 헙업 환경 설정 (Feat. Spring Boot, React)

- Goals 팀원과 협업이 가능하도록 Github에 프로젝트 생성 및 초기 설정 작업 - 개발 환경 및 Tools Windows Github Intellij & Spring boot Vscode & React.js 1. Github 설정 우선 Github에 새로운 Repo를 생성합니다. Settings - Collaborators - Manage access에서 협업할 팀원을 초대합니다. master - develop-fe - develop-be 이번 프로젝트는 BE와 FE 모두 하나의 Repo에서 관리할 것이기 때문에 FE와 BE를 위한 별도의 브랜치를 각각 생성해서 진행할 것입니다. git checkout -b "develop-be" git push --set-upstream origin devel..

Programming/Infra 2023. 12. 13. 08:44

[React] react-router-dom v6 프로젝트에 적용하기

개발 환경 React + TypeScript Vite 개념 react-router-dom react-router-dom는 React에서 SPA(Single Page Appliction)을 개발하는데 필수적으로 사용하는 라이브러리 중 하나입니다. React(뿐만 아니라 전반적인 웹 프로젝트)에서 다른 페이지로 이동하는 전통적인 방법은 태그입니다. AngelPlayer 하지만 a 태그를 사용하면 경로 이동 시 페이지 전체를 로딩하기 때문에, 새로고침 되는 것 같이 화면이 깜박이는 현상이 발생합니다. 반면 react-router-dom과 태그를 이용하면 전체 화면 중 변경되는 부분만 수정되어 출력됩니다. Router Version Router는 크게 Router v5 및 Router v6로 나뉩니다. 둘 다 ..

Web/React.js 2023. 11. 2. 09:28

[HTML/CSS] 외부 Font(TTF/OTF) 웹 페이지에 적용하기

테스트 환경 React + Vite ※. TTF vs OTF 차이 폰트 구조 TTF는 오래된 폰트 형식으로, 덜 복잡한 비트맵으로 구성되어 있어 일부 오래된 시스템과의 호환성이 더 좋을 수 있습니다. OTF는 TTF의 확장 버전으로, 스플라인 규격에 대한 추가 지원(주로 베지어 곡선) 및 자체적인 스케일링 및 변환 특성이 있어 디자인과 출력 품질이 더 우수할 수 있습니다. 파일 크기 일반적으로 OTF 폰트 파일은 TTF 파일보다 크기가 큰 편이므로 웹 성능에 영향을 미칠 수 있습니다. 웹 사이트의 로딩 시간이 중요한 요소인 경우, 더 작은 파일 크기의 TTF가 더 나을 수 있습니다. 호환성 대부분의 모던 웹 브라우저는 TTF와 OTF를 모두 지원합니다. 그러나 일부 구식 시스템이나 오래된 브라우저에서는 ..

Web/HTML&CSS 2023. 11. 1. 08:04

[R3F] Drei, 재질 텍스쳐 매핑

https://github.com/pmndrs/drei GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber 🥉 useful helpers for react-three-fiber. Contribute to pmndrs/drei development by creating an account on GitHub. github.com MeshReflectorMaterial 반사를 표현 적용 시 사용함 MeshReflectorMaterial 3D에서 주변환경에 대한 이미지 데이터로 HDR 이미지를 주로 사용함 반짝이는 재질 표현시 사용함 MeshTransmissionMaterial 유리재질 표현 시 사용함 MeshWobbleMaterial 흔들거림 애니메이션..

Web/etc 2023. 10. 20. 08:22

[R3F] Geometry, Material

지오메트리 지오메트리 : 메시의 모양을 정의 모든 지오메트리는 버퍼지오메트리 클래스를 상속받음 어트리뷰트를 가짐 버퍼 지오메트리가 가지는 속성 Position : 형상의 3D차원 정점 Nomal : 모델 면에 대한 수직 벡터 Color : 정점 색상 UV : 텍스터 맵핑을 위한 좌표 Vertex Index : 면 구성을 위한 정점 인덱스 모든 재질은 Matreial class를 상속 받음 점 - Point*Matreial 선 - Line*Matreial 면 - Mesh*Matreial r3f는 drei 로 별도의 재질 컴포넌트를 제공 재질 meshBasicMaterial 광원의 영향을 전혀 받지않음 meshLambertMaterial 반사 하이라이트가 없고 반짝이지 않는 표면 모델의 단순성으로 그래픽 정..

Web/etc 2023. 10. 18. 10:19

[R3F] React Three Fiber 설치 & 기본 개념 정리

Vanilla Three의 경우 간단한 3D 도형이라도 생성하고 화면에 띄우기 위해서는 많은 번거로운 작업이 필요하였습니다. https://angelplayer.tistory.com/491 [Three.js] Three.js 설치 및 기본 사용법 Three.js는 기존의 web에서 3D 객체를 띄우기 위한 라이브러리인 WebGL의 불편함을 개선하고 직관적인 코드를 작성할 수 있도록 만들어진 JS 라이브러리입니다. 1. Three.js 다운로드 https://threejs.org/ Three angelplayer.tistory.com R3F(React Three Fiber)는 React에서 three.js를 효과적으로 사용할 수 있도록 해주는 라이브러리입니다. 가령 Three.js는 객체를 생성하기 위해서..

Web/etc 2023. 10. 17. 09:16

[HTML/CSS] 화면 백그라운드에 영상 넣기 (feat. React 적용법)

최근 페이지의 Background로 영상을 집어넣어 좀 더 고급스러워 보이는 사이트들이 종종 보입니다. 이를 간단히 구현하는 방법을 알아보도록 하겠습니다. 1. Project Setting npm create vite@latest react-video --template react cd react-video npm install npm run dev 우선 테스트를 진행할 프로젝트를 생성하였습니다. 저는 Vite + React + JS로 진행하였습니다. 제가 설정한 방법과 동일하게 프로젝트를 생성하려면 위와 같이 진행하시면 됩니다. (Vue와 같은 다른 라이브러리나, Vanilla HTML을 사용하더라도 영상 경로 등을 제외하면 기본 코드에 큰 차이는 없습니다!) 1440p video https://pix..

Web/HTML&CSS 2023. 9. 26. 08:42

[PWA] React 프로젝트에 PWA 적용하기

PWA(Progressive Web App)는 웹으로 개발된 서비스를 네이티브 앱과 같이 오프라인 작동, 설치 및 홈 화면 추가, 푸시 알림 등을 사용할 수 있도록 만들어 줍니다. 또한 모바일 뿐만 아니라 PC에서도 설치가 가능합니다. PWA에는 Vue, React 등을 사용한다면 쉽게 프로젝트에 적용할 수 있습니다. 이번에는 React를 통해 만들어진 프로젝트에 PWA를 적용해보도록 하겠습니다. 1. 신규 React 앱 생성 시 PWA 템플릿 적용하기 서비스에 PWA를 적용하는 가장 편한 방법은 프로젝트 생성 시 PWA 템플릿을 사용하는 방법입니다. $ npx create-react-app 프로젝트명 –template cra-template-pwa 기존 React 프로젝트 생성 방식에 말미에 –temp..

Web/React.js 2023. 8. 23. 08:48

AngelPlayer`s Diary