TIL 83

오늘의 트러블슈팅을 작성해보겠다.

문제 상황

drf         | django.db.utils.OperationalError: connection to server at "localhost" (::1), port 5432 failed: Connection refused
drf         |   Is the server running on that host and accepting TCP/IP connections?
drf         | connection to server at "localhost" (127.0.0.1), port 5432 failed: Connection refused
drf         |   Is the server running on that host and accepting TCP/IP connections?

- Django 애플리케이션이 PostgreSQL 데이터베이스에 연결을 시도했으나, 연결이 거부되었다는 오류가 발생함.

---

원인

PostgreSQL 서버가 포트 5432에서 실행 중인 것으로 보였으나, 실제로는 충돌이 발생하여 연결되지 않음.

 

---

해결 방법

PostgreSQL 서버를 정상적으로 실행하거나, 충돌하는 다른 PostgreSQL 프로세스를 종료한 후 올바른 버전으로 서버를 재시작해야 한다.

1. PostgreSQL 관련 프로세스 확인

ps aux | grep postgres

- 위 명령어를 실행하여 PostgreSQL과 관련된 프로세스를 확인. PostgreSQL 15가 실행 중인 것을 확인함.

 

2. 충돌 프로세스 종료

sudo kill -9 <PID>

- `PID`에는 실행 중인 PostgreSQL 15의 프로세스 ID를 입력하여 강제 종료.

 

3. PostgreSQL 서버 재시작

pg_ctl -D /opt/homebrew/var/postgresql@14 restart

- PostgreSQL 14 버전을 명시하여 데이터베이스 서버를 재시작.

---

PostgreSQL의 충돌로 인해 Django 애플리케이션에서 데이터베이스 연결 오류가 발생했으나, 충돌 프로세스를 종료하고 적절한 버전의 PostgreSQL 서버를 재시작하여 문제를 해결하였다.

---

중간 발표를 준비하였다.

 

프론트엔드의 스타일을 전반적으로 수정했다. 프론트엔드로 React를 사용하는데, 웹페이지의 크기를 조절하면 자동으로 웹페이지 안의 구성요소들의 크기와 위치가 조정되지 않았다. React는 화면의 크기마다 비율을 설정해주어야 했다. 스타일을 지정하는 파일에 아래와 같이 media로 화면의 크기마다 비율을 설정해야 한다.

  @media (max-width: 1400px) {
  margin-top: 33%;
  }

  @media (max-width: 1300px) {
  margin-top: 39%;
  }
  
  @media (max-width: 1200px) {
  margin-top: 45%;
  }

  @media (max-width: 1100px) {
  margin-top: 49%;
  }

  @media (max-width: 1000px) {
  margin-top: 58%;

위와 같이 너무 세세하게 지정하지 않아도 되지만, 비율이 신경쓰인다면 이렇게 세세하게 작성할 수도 있다.

 

React는 컴포넌트를 만들고, 그 컴포넌트들을 활용하여 웹페이지를 구성할 수 있다. 부모 컴포넌트와 자식 컴포넌트 관계를 통해, 부모 컴포넌트 안에서 자식 컴포넌트들을 조정할 수도 있다. 이번에 처음 React를 해보았지만, 부모 - 자식 관계의 중요성에 대해 크게 느낄 수 있었다.

 

각각의 컴포넌트를 활용해서 프론트를 작업하다가, 소소하지만 나름의 꿀팁을 찾았다. 어느 순간, 이 컴포넌트가 어디부터 어디까지인지 그 영역을 알고 싶을 때가 있다. 그럴 때는 알고 싶은 컴포넌트에 배경 색을 눈에 띄는 색으로 바꾸면 된다.

background-color: black;

주로 검정색으로 배경색을 설정하여 각 컴포넌트들의 영역을 확인했다.

 

부모 컴포넌트 안에서 행과 열로 자식 컴포넌트들이 구성되게 하고 싶었다. 이런 내 마음을 아는 지, React에는 마침 행과 열로 구성할 수 있는 기능이 있었다.

export const FormQuizTestContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2열 */
  grid-auto-rows: 480px;;
  gap: 1px;
  width: 100%;
`;

위와 같이 display를 grid로 설정해주면 된다. grid로 설정해주면 자식 요소들을 테이블의 행과 열처럼 배치할 수 있다. 위의 예시는 자식 컴포넌트들을 2열로 위치하게 하는 코드다. grid-template-rows로 repeat(1fr, 2) 를 추가하면 2행 2열로 배치시킬 수 있게 된다. grid-auto-rows 와 같은 설정을 통해 각각의 행과 열의 크기도 지정할 수 있다.