분류 전체보기 39

[Javascript] match와 includes 메서드로 한자 깨짐 오류 수정하기

들어가며담당하고 있는 홈페이지에서 사용하고 있는 폰트가 한자를 호환하지 않는 오류가 있었다.한자를 사용하면 빈칸으로 나오거나 ?로 나오는 오류를 수정해보자. 먼저 한자를 추출하고, 다른 폰트 스타일이 적용된 span태그로 묶을 것이다. 이때 무엇인가 추출하는 메서드에 match와 includes가 있다. match 메서드정규 표현식을 사용하여 복잡한 패턴을 찾을 때 사용한다.찾은 패턴이 있으면 일치하는 배열을 반환하고, 없으면 null을 반환한다.includes 메서드문자열이 포함되어 있는지 간단히 확인할 때 사용한다.문자열이 표함되어 있으면 true, 없으면 false를 반환한다. includes 메서드는 정확하게 어떤 한자를 쓸지를 적어야하지만 match 메서드는 정규 표현식을 사용해서 어디에 뭐가 ..

Study/Javascript 2024.09.12

[React] Firebase로 앱 배포하기

들어가며리액트 프로젝트를 제작한 후 배포를 할때 npm run build를 하여 배포한다.만약 파일질라같은 FTP에 배포할 땐 build 파일에 있는 파일들을 모두 옮기고, 도메인/index.html과 같은 주소로 접속하면 된다.하지만 router기능(페이지)을 추가했다면 '/' 같은 Home 페이지가 있을 것이다. 이럴때 FTP같은 곳에 배포한다면 index.html로 접속되기 때문에 오류가 생긴다. 따라서 Firebase나 Vercel같은 단일 페이지로 배포해주는 곳에 호스팅한다면 이러한 오류없이 프로젝트를 배포할 수 있다. 프로젝트 빌드하기빌드란 배포를 위해 파일을 생성하는 과정이다.npm run build빌드의 결과물은 build 폴더에 저장되는데, 이 폴더에는 배포에 필요한 모든 파일이 있다.용..

Study/React 2024.08.07

[React/Next.js] 스와이퍼(swiper) 컨트롤러 커스텀하기

스와이퍼 UI 가져오기https://swiperjs.com/demos#navigation Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com위 경로에서 CodeSandbox 중 React 선택## App.jsximport React, { useRef, useState } from 'react';// Import Swiper React componentsimport { Swiper, SwiperSlide } from 'swiper/react';// Import Swiper stylesimport 'swipe..

Study/React 2024.08.02

[React] json 형식 데이터 줄바꿈 적용하기 (split)

들어가며게시판이나 댓글에 글을 쓸 때 엔터를 사용하여 줄바꿈을 한다.REST API를 통해서 JSON 문자열로 데이터를 저장하면 엔터가 적용이 안될 때가 있다.저장한 데이터를 VIEW창에 불러올 때 엔터를 적용하는 방법을 알아보자.  새 노트 추가 페이지에서 위와 같이 작성하고 저장한 후, 데이터를 확인해보자. 데이터에는 위와 같이 "/n"이 포함되어 있는 것을 확인할 수 있다.데이터를 map메서드로 가져올 때 content 부분은 split메서드를 사용하여 "/n"부분을 구분자로 나눠준다.구분자는 끊어야할 부분을 말한다.  {item.content?.split("/n").map((it, idx)=>( {it} ..

Study/React 2024.07.31

[React] Next.js 실시간 데이터 적용 (cache 삭제)

들어가며create에서 POST를 했지만 실시간으로 반영되지 않음fetch에서 정보를 가져오면 Next.js에서는 정보를 캐시(.next 폴더)로 저장한다.next폴더를 삭제하고 다시 생성한다.rm -rf .next 또는 .next 폴더 삭제npm run dev새로고침💡 캐시가 삭제되고 개발환경을 다시 실행하면서 json 정보를 가져온다. 마찬가지로 POST를 할 때도 캐시를 삭제하는 작업이 필요하다. Revalidating Data(...)export default async function RootLayout({ children }) { const resp = await fetch('', {next:{revalidate:10}}) const topics = await resp.json(); ..

Study/React 2024.07.29

[React] Next.js 프로젝트 초기 세팅

프로젝트 생성터미널을 열고 프로젝트 생성npx create-next-app@latest .생성 후 파일 > 폴더 열기를 통해서 생성한 폴더를 가져와야 함 (파일이 보이지 않음) 프로젝트 시작npm run dev  초기 세팅(reset)/src/app/layout.js : 페이지의 기본 골격page.js : 메인 페이지globals.css : 전체 css (초기 내용 전체 삭제).next : build 배포판이 저장되는 폴더public : 정적 자원(이미지 등) 폴더# layout.jsimport "./globals.css"; export const metadata = { title: "Create Next App", description: "Generated by create next app",};..

Study/React 2024.07.26

[React] Next.js 란? (Next.js와 React.js의 차이점)

들어가며Next.js란?서버 사이드 렌더링(SSR)을 통해 HTML을 서버에서 마크업하여 검색 엔진에서 페이지를 더 잘 인식하고 색인화 하는데 도움이 되어 SEO 관리에 좋음기존의 리액트는 클라이언트 사이드 렌더링(CSR)으로 클라이언트 측에서 마크업이 생성되어 로딩시간이 오래걸리고 SEO 관련 적용 시간이 오래걸린다는 단점이 있음Next.js와 React의 차이1. 서버 사이드 렌더링 (SSR)React는 클라이언트 측에서만 렌더링되지만, Next.js는 서버 측에서도 렌더링할 수 있음SSR은 페이지 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 개선하는데 도움2. 정적 사이트 생성 (SSG)Next.js는 빌드 시점에 페이지를 렌더링하여 HTML 파일을 생성하고 정적 사이트를 생성할 수 있음SSG..

Study/React 2024.07.24

[React] 날짜 정렬 + 아이폰(IOS) 오류 (axios, sort)

들어가며styled components를 이용하여 제작한 노트앱 프로젝트를 배포하고 모니터링하던 중에 이상한 오류를 발견했다.pc환경에선 최신순, 오래된순 정렬이 정상적으로 작동하는데 모바일(아이폰 mini12 기종)로 확인해보니 정렬이 안되는오류가 있었다.먼저 어떤 형식으로 날짜를 설정했는지 보고 오류를 찾아보도록 하겠다. toLocaleDateString()// POST:CREATE if(!contRef.current.value){ if(window.confirm("내용이 없습니다. 그대로 저장하시겠습니까?")){ axios.post(`${process.env.REACT_APP_API_URL}/notes`,{ (...)..

Study/React 2024.07.19
728x90