프론트엔드7 [Next.js] Module not found: Can't resolve 'child_process' 오류 원인 및 해결 Next.js로 생성한 프로젝트에 MongoDB 호스팅 데이터베이스를 연결했는데, 아래와 같은 오류가 발생하였다. "Module not found: Can't resolve 'child_process'" 에러는 일반적으로 프론트엔드 코드를 실행할 때 Node.js 전용 모듈인 'child_process'를 사용하려고 할 때 발생한다. 보통 'child_process'는 서버 측에서 외부 프로세스를 실행하거나 시스템 명령을 실행할 때 사용되는데, 나는 프론트엔드 코드에서 이를 사용하려고 했고, 이를 대체할 수 있는 다른 방법을 찾아서 해당 부분을 수정해야 하는 것. 프론트엔드 코드와 DB를 연결하려고 했으니, API 라우팅을 사용하여 API 엔드포인트를 만들고, 프론트엔드에서는 해당 엔드포인트를 호출하여 .. 2024. 2. 28. [Next.js] 페이지 라우팅 웹 사이트를 구성할 때 홈 화면 뿐만 아니라 주제에 따라 여러 페이지를 이동하게끔 만드는 것이 일반적인 특징이다. 이번 포스팅에서는 Next.js에서 페이지를 이동하는 라우팅 방법에 대해 설명 해보려고 한다. *페이지, URL 만들기 우선 기본 웹사이트 주소는 http://localhost:3000 이다. 쇼핑몰 웹사이트를 만든다는 가정 하에 상품 목록 페이지를 따로 만들려고 한다. localhost:3000/list 라는 주소를 입력받거나 바로 이동할 시에 페이지를 띄우게끔 설정해보자. 1. pages 폴더 밑에 내가 만들 URL 이름의 폴더를 만든다. (localhost:3000/list를 입력했을 때 생성되는 페이지라면 list라는 폴더를 만든다.) 폴더를 만듦과 동시에 해당 이름의 URL이 생성되.. 2024. 2. 26. [Next.js] Next.js 설치와 세팅 Next.js는 프론트엔드 + 백엔드 까지 풀 스택 개발이 가능한 프레임워크로 잘 알려져있다. 나는 React로 프론트엔드 기능과 UI 코드를 짜고 Spring Boot로 만든 백엔드 서버와 연동하는 방식의 프로젝트를 경험하였는데, Next.js를 새롭게 배워보면서 서버 사이드 렌더링과 풀 스택 개발 경험을 쌓기로 하였다. 우선, 서버 사이드 렌더링이 왜 필요한가? 묻는다면 React나 Vue 라이브러리를 활용한 클라이언트 사이드 렌더링 사용시 요즘 많은 앱과 웹사이트들 처럼 UI 디자인이 예쁘고 부드러운 사이트는 만들 수 있지만 첫 페이지 로딩 속도 저하, 검색 노출 어려움 같은 단점이 존재한다. 이는 상업적인 이익을 내야하는 웹사이트에는 치명적이라고 볼 수 있다. 서버 사이드 렌더링을 사용하면 서버에.. 2024. 2. 26. [React] useRef의 장점 및 활용 React.js의 가장 큰 특징은 업데이트 반영, 즉 리렌더링이라고 생각한다. 이를 활용하기 위해 어떤 특정한 값의 변동을 반영할 때 상태 관리 hook인 useState를 주로 사용하게 된다. 그런데 React.js는 자바스크립트 문법을 사용하면서도 변수(ex. let count = 0 )를 사용하면 상태 관리에 애를 먹게 된다. 리렌더링 후 값이 초기화 되버리는 단점이 있기 때문인데 useState의 장점(값을 유지) 과 변수의 장점(렌더링 되지 않아 성능에 도움)을 합쳐둔 useRef가 있다. 각각의 hook을 비교하면서 장점과 활용법에 대해 포스팅하기로 했다. * useState, 변수 , useRef 비교 useState, 변수 , useRef를 비교하기 위해 버튼을 클릭하면 값을 증가시키는 U.. 2024. 2. 20. [구글 파이어베이스 호스팅(Firebase Hosting)] 프론트엔드 리액트 프로젝트 배포하기 백엔드 스프링 부트 프로젝트 배포에 성공한 나는 프론트엔드 리액트 파일 또한 배포하기로 했다. 내 프로젝트에서 대부분의 기능이 Axios를 활용한 클라이언트 -> 서버 / 요청-응답 구조였기 때문에 리액트 배포 역시 필연적이었고, 이번에는 NCP가 아닌 다른 호스팅 서비스를 이용해보기로 했다. 정적 웹사이트를 무료로 배포할 수 있는 서비스는 꽤 많이 있다. Netlify , Heroku , Vercel , Github Pages 등의 사이트들이 Javasript , React.js 프로젝트를 무료로 배포할 수 있게 서비스하고 있다. (Heroku는 무료 지원이 거의 사라졌다고 한다.) 다만 나는 어떤 이유에서인지 배포과정에서 갖가지 오류가 발생하여 애를 먹었는데, 구글 파이어베이스의 호스팅 서비스로 배포.. 2023. 9. 22. [React] Context API 사용법 일반적으로 React에서 컴포넌트 간에 데이터를 전달할 경우 props를 사용하여 부모 컴포넌트 -> 자식 컴포넌트로 데이터를 넘겨주고 이어받는 방식을 많이 사용하게 된다. 그런데 멀리 떨어진 컴포넌트로 데이터를 전달하거나, props를 사용하기 적절치 않은 경우가 있다. 그럴 때 유용하게 사용할 수 있는 Context API를 설명하고, 적용하여 프로젝트를 개선한 사례를 기록하려고 한다. 1. Context API의 개념 React Context API는 React 애플리케이션에서 전역 상태를 관리하고 컴포넌트 간에 데이터를 효율적으로 전달하기 위한 도구이다. Props를 계속해서 컴포넌트로 전달하는 번거로움을 줄이고, 상태 및 데이터를 보다 쉽게 공유할 수 있도록 도와주는 역할을 한다. 2. Cont.. 2023. 8. 26. [React] 리액트 쿠키 사용법 웹사이트에서 '쿠키'를 이용하면 클라이언트를 식별하는데 유용하게 활용이 가능하다. 나는 쿠키로 회원과 비회원을 구분해 useState 훅으로 ui를 유동적으로 변경하는 방식으로 프론트엔드를 개발중이다. 그래서 리액트의 'cookie' 사용법에 대해 포스팅하려고 한다. 여기서 주의할 것은 'cookie'와 'react-cookie'는 문법이 다르다는 점이다. 'js-cookie'도 조금 다르다. 난 이전에 'react-cookie'로 개발을 해봤는데, 이번에는 사용해보지 않은 'cookie'를 활용해보았다. yarn 홈페이지 기준 이용자 수가 월등히 많은걸 보니 훨씬 상용적으로 쓰이는 듯 싶었다. 아무튼 패키지를 설치할 때 세 가지를 확실히 구분하는게 좋을 듯. 우선, 라이브러리를 설치하고, 사용할 컴포넌.. 2023. 7. 27. 이전 1 다음
