본문 바로가기
[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.
[자바 구문] 알고리즘 태스크 Java에 대해 꾸준히 공부해오고 있지만, 여전히 아리송하고 새로 알게 되는 메서드나 원리들이 참 많은 것 같다. 기본기를 탄탄히 유지하고 또 향상시키기 위해 CodeGym 같은 사이트에서 도움을 받고 있는데, 여러 문제들을 풀면서 시간을 많이 쏟았던 예문은 블로그에 포스팅하여 복습 하기로 마음 먹었다. 오늘은 알고리즘 태스크 라는 문제의 요구 사항과 해결 과정을 기록하려 한다. * 알고리즘 태스크 대강 요약하자면, 0보다 큰 숫자를 N 개 입력 받고 , 그 중 가장 큰 숫자를 화면에 표시하는 코드를 작성하는 과제이다. 우선, 내가 생각한 과제의 해결 방법은 아래와 같았다. 1. Integer.MIN_VALUE 를 활용하여 maximum 변수를 선언한다. 더보기 Integer.Min_VALUE Java에.. 2024. 2. 21.
[React] useRef의 장점 및 활용 React.js의 가장 큰 특징은 업데이트 반영, 즉 리렌더링이라고 생각한다. 이를 활용하기 위해 어떤 특정한 값의 변동을 반영할 때 상태 관리 hook인 useState를 주로 사용하게 된다. 그런데 React.js는 자바스크립트 문법을 사용하면서도 변수(ex. let count = 0 )를 사용하면 상태 관리에 애를 먹게 된다. 리렌더링 후 값이 초기화 되버리는 단점이 있기 때문인데 useState의 장점(값을 유지) 과 변수의 장점(렌더링 되지 않아 성능에 도움)을 합쳐둔 useRef가 있다. 각각의 hook을 비교하면서 장점과 활용법에 대해 포스팅하기로 했다. * useState, 변수 , useRef 비교 useState, 변수 , useRef를 비교하기 위해 버튼을 클릭하면 값을 증가시키는 U.. 2024. 2. 20.
[Node.js] Node.js의 특징 Node.js 이벤트 기반(event-driven) 및 비차단식 I/O(non-blocking I/O) 모델을 기반으로 하는 JavaScript 런타임 환경. 효율적이고 확장 가능한 서버 측 애플리케이션을 구축하는 데 도움을 주는 특징 때문에 웹 서버를 구성할 때 요긴하게 쓰일 수 있다. 그럼 이벤트 기반과 비차단식 I/O가 무슨 의미일까? 1.이벤트 기반 (Event-Driven): Node.js는 이벤트 기반의 비동기 프로그래밍 모델을 채택하고 있다. 즉 어떤 이벤트가 발생하면 콜백 함수를 호출하는 방식을 의미하는 것인데 사용자의 요청, 파일의 읽기/쓰기 완료, 네트워크 요청 등과 같은 작업과 관련이 있다. 이러한 이벤트들이 Node.js 이벤트 루프(event loop)에 의해 감지되고 관리되는 것.. 2024. 1. 16.
[프로그래머스] 약수의 개수와 덧셈 문제 설명 및 예시 주어진 두 숫자 내의 숫자들 중 약수의 개수가 짝수면 그 수를 더하고, 홀수면 빼는 함수를 만드는 문제이다. 풀이 우선 약수의 개수를 세는 메서드를 하나 만들고, 주어진 숫자들 내에서 반복문을 통해 계산하는 방법을 생각했다. 1. 약수의 개수를 세는 countDivisors 메서드를 생성한다. 2. 1부터 특정 숫자까지 for문을 돌려 나머지가 0이 되게 하는 수가 존재할 때마다 count를 하나씩 늘려간다. ex) n이 6이면 1,2,3,4,5,6 중 1,2,3,6이 6과 나누어 떨어지는 약수이므로 4개를 반환할 것이다. 3. 결과를 반환할 answer 변수를 정의한다. 4. 주어진 수 left , right 내에서 반복문과 함께 앞서 정의했던 divisorCount 메서드를 호출한.. 2023. 10. 27.
[프로그래머스] 전화번호 목록 문제 설명 및 예시 주어진 배열의 원소가 다른 원소의 접두어인 경우를 판단하는 함수를 구현하는 문제이다. 풀이 접두어를 판단하는 startWith() 메서드와 HashMap을 사용하는 두 가지 풀이법으로 문제를 해결했다. 우선 startWith() 메서드를 사용한 풀이이다. 1. 효율적인 비교를 위해 배열을 길이 순으로 정렬한다. 2. 반복문으로 현재 전화번호와 그 다음 전화번호를 비교한다. (마지막 전화번호는 비교할 필요 없음) 3. *startWith() 메서드로 접두어가 존재하면 false, 그렇지 않으면 true를 반환한다. startWith()와 contains() 메서드는 유사한 것처럼 보이지만 중요한 차이점이 존재한다. A.startWith(B) : A의 접두어가 B인지 판단하는 함수. A... 2023. 10. 23.
[프로그래머스] 추억 점수 문제 설명 및 예시 주어진 name과 yearning 배열을 사용하여 name과 yearning을 매핑하고, 2차원 배열 photo를 순회하면서 그리움 점수를 합산하여 결과를 반환하는 문제이다. 풀이 name과 yearning 배열의 원소들을 매핑해야하는 점에서 HashMap 사용에 대한 힌트를 얻었다. 1. String 타입의 name, Integer 타입의 yearning 을 저장할 HashMap을 생성한다. 2. name과 yearning 배열은 길이가 같고, 원소의 순서대로 값을 할당하면 되므로 for문을 통해 HashMap에 (키,값) 쌍의 원 소를 삽입한다. 3. 최종 값을 반환할 result 배열을 생성한다. 1. 반복문을 활용하여 2차원 배열 photo의 행에 해당하는 1차원 배열 원소에서.. 2023. 10. 19.

티스토리툴바