https://stackoverflow.com/questions/16049335/cocoapods-pod-install-permission-denied

 

cocoaPods pod install Permission denied

This is the short version: When I run pod install in an Xcode project I get [!] Pod::Executable pull error: cannot open .git/FETCH_HEAD: Permission denied If I run sudo pod install I ...

stackoverflow.com

 

위 포스팅에서 아래 글대로 해서 해결했다.

 

유저에게 CocoaPods 권한을 준다.

$ sudo chown -R <유저명> ~/Library/Caches/CocoaPods

리액트에서 디버깅을 해보자

나는 옛날에 다른 언어로 코딩할 때, 문제가 생기면 break point를 걸어 디버깅을 자주 했었는데,
웹에서는 아무 생각 없이 그냥 console.log를 찍어가면서 디버깅을 하고 있었다.

이번에 공부를 하다가 문득 디버깅도 제대로 못하면 안된다고 생각해서 리액트에서는 어떻게 break point를 걸어서 디버깅을 할 수 있을지 알아보았다.

우선, 가장 기본적인 리액트 프로젝트 생성해서 실행하자.

[실행 및 디버그] 탭으로 이동 해서 [실행 및 디버그] 버튼을 눌러준다.

디버거 선택이 나오면 웹앱(Chrome)을 골라준다

그럼 .vscode 폴더가 생기면서 그 안에 launch.json이 생기는데, 여기서 파일에 내용을 설정한다

url을 3000(리액트) 포트로 변경, webRoot에 "/src"를 붙여준다

[이전 이미지]

[이후 이미지]

그 이후, "디버깅 시작"을 누르면 새로운 브라우저 창이 열리면서 디버깅 가능한 상태가 된다.

이후, 브레이크 포인트를 걸고 브라우저를 새로고침 해보면 브레이크 포인트에 실행이 걸리면서 노란색 표시가 뜨는 것을 확인할 수 있다.

useState를 적용하여 변수를 만들면 브레이크 포인트 시점에서의 변수 상태도 확인할 수 있다.

앞으로는 console.log를 줄이고, breakpoint를 활용한 디버깅을 좀 자주 활용하는 버릇을 들여야 할 것 같다.

프론트엔드 리액트로 개발을 하던 모듈을 사용할 때 import를 주로 사용하는데, node에서 require가 익숙치 않아 import를 사용하기로 했다.
그러다 DB 정보를 .env 파일에 보관하기 위해 .env 파일을 만들었다.

DB_HOST = 주소
DB_USER = 아이디
DB_PW = 비밀번호
DB_NAME = 디비명

그 이후 리액트에서 하던 것처럼 process.env.변수명으로 사용했는데 인식이 안되서 찾아보니
dotenv라고 하는 모듈이 필요하다고 해서 설치했다.

$ yarn add dotenv

require로 dotenv 모듈을 사용하려면 아래와 같이 사용하면 되는데,

require("dotenv").config();

그래서 import도 같은 방법으로 사용하면 될까 싶어서 사용해보았다.

import dotenv from "dotenv";

dotenv.config();

그러자 에러가 발생했다.

왜인지는 모르겠지만 모듈을 찾을 수 없다고 나온다.
그래서 검색을 좀 진행해보았다.

원인은 아마 dotenv 모듈에 index.js가 없어서 그런걸로 추정된다. 결과적으로는 아래와 같이 작성하면 된다.

import "dotenv/config";

Ubuntu 22.04 LTS에 MongoDB 설치하기

예전에 개인 Github에 정리해뒀던 내용인데, 블로그에 기록해두기 위해 적는다.
Ubuntu 22.04에서 MongoDB를 설치하는 방법이다.

순서대로 입력합니다

$ wget -qO- https://www.mongodb.org/static/pgp/server-5.0.asc | gpg --dearmor > /etc/apt/trusted.gpg.d/mongo.gpg
$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list
$ sudo apt update
$ sudo apt install -y mongodb-org

위의 과정이 오류 없이 진행 되었다면 아래 코드로 몽고 DB를 제어할 수 있습니다.

# 부팅시 자동 실행 등록
$ sudo systemctl enable mongod

# 몽고 DB 시작
$ sudo systemctl start mongod

# 시작되지 않는 경우
$ sudo systemctl daemon-reload

# 실행중인지 확인
$ sudo systemctl status mongod

# 중지
$ sudo systemctl stop mongod

위 제어 코드 안되는 경우 몽고DB가 제대로 설치되지 않은 것이므로 아래 코드도 실행 (MongoDB는 우분투 22.04를 정식으로 지원하지 않아 안되는 것임. 아래 방법은 권장되지 않는다고 함)

이제는 된다고 한다 ㅎㅎ… 옛날에 썻던 글이라 중간 줄만 그었다…

$ echo "deb http://security.ubuntu.com/ubuntu impish-security main" | sudo tee /etc/apt/sources.list.d/impish-security.list
$ sudo apt-get update
$ sudo apt-get install libssl1.1
$ sudo apt install -y mongodb-org

끝!

참고링크
https://itnixpro.com/install-mongodb-on-ubuntu-22-04/
https://askubuntu.com/questions/1403619/mongodb-install-fails-on-ubuntu-22-04-depends-on-libssl1-1-but-it-is-not-insta

에러 메세지는 아래와 같다

Module not found: Error: Can't resolve 'react-dom/client' in '/Users/laud/Laud/Practice/dmsweb/src'
ERROR in ./src/index.js 5:0-40
Module not found: Error: Can't resolve 'react-dom/client' in '/Users/laud/Laud/Practice/dmsweb/src'

webpack compiled with 1 error

 

 

구글에 module not error can’t resolve ‘react-dom/client’라고 검색하여 최상단 스택 오버플로우 문서를 봤다.

 

답변 중에서 가장 상단에 있는 내용을 읽어보았다.

 

 

아마 추측 되는 원인은 React 17과 React 18에서 index.js 작성 방식이 달라진게 원인인 것 같다.
나는 create-react-app을 통해 리액트 프로젝트를 생성했고, 17버전 react 프로젝트로 작업하기 위해 react와 react-dom 버전을 낮추었었다.

 

 

그럼, 이제 코드를 고쳐보자

 

<원본 코드>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

 

 

<변경 후 코드>

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

워드프레스 블로그 운영하다가 유지관리하기 조금 번거로워져서... 다시 여기로 돌아옵니다... ㅎㅎ;;

나중에 다시 옮길수도?

 

워드프레스 블로그에서 포스팅했던 글들도 천천히 정리해서 올릴 예정!