📌 상황 heroku 에 배포해 놓은 데이터베이스와 연결하는 과정에서 발생한 에러. 개인 프로젝트 백엔드와 데이터베이스를 헤로쿠에 배포시키고 연동했다. 처음엔 pg_hba.conf 가 문제인줄 알았는데, 구글링을 통해서 해결한 방법으로 모든 호스트와 포트는 다 열어놓은 상태였다. pg_hba_conf 파일을 여는 방법은 맥북 기준으로 최상단 루트에서 아래 명령어를 입력한다. 최상단 루트란 usr 이 존재하는 루트를 말한다. cd usr/local/var/postgres 아무튼 pg_hba.conf 파일에서 시도할 수 있는 방법은 모두 동원했지만 동일한 에러메시지만 나왔다. 🍎 SSL off Why am I seeing connection errors for my Heroku Postgres databas..

📌 React - Netlify, Redirection 에러 리액트 서버를 netlify 를 통해 정상 배포했다. 이 때 새로고침을 하면 아래와 같은 에러메시지가 나타난다. page not found 는 404 에러로, 현재 url 에서 찾고자 하는 자원을 못찾았을 때 발생한다. 이전 까진 정상적으로 보이던 화면이 왜 새로고침 이후엔 보이지 않을까? ✏️ 원인 내 설정에서 리액트가 최초 접속할 때의 url 은 / 이다. 그리고 이 때 index.html 을 읽는다. 즉 해당 url 에 대한 자원은 index.html 로 정해져 있다. 하지만 화면을 넘기면서 라우팅된 url 이 예를 들어 /a 혹은 /b 가 됐을 땐, 각 url 에 맞는 자원이 존재하는가? 그렇지 않다. index.html 처럼 정해진 자..

✅ 파이썬 행렬 전환 zip() 함수를 사용하면 배열 간의 원소를 묶을 수 있는데, 이를 행렬전환에 사용할 수 있다. 우선 asterisk (*) 표현을 사용하면 배열을 한 꺼풀(?) 벗겨 낼 수 있는데, matrix 에 asterisk 를 적용하면 [1, 2, 3], [4, 5, 6], [7, 8, 9] 의 형태가 된다. 즉 세개의 서로 다른 배열이 생성된다. 이 세개의 배열에 zip() 함수를 적용하면 각 배열 내 원소의 순서에 맞게 묶이게 된다.( 첫번째 원소 끼리, 두번째 원소 끼리 ... ) 이를 다시 리스트로 처리하면 matrix 2차원 배열을 기준으로 각 column 끼리 묶이게 되는 것과 같은 효과를 낼 수 있다. matrix = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]..

📌 미디어 쿼리 사이드 프로젝트 퍼블리싱이 젤 힘들다. 아니 사실 배포 A @media (max-width: 900px) { B } @media (max-width: 600px) { C } max-width : 900px 이란, 가로 px 이 900 보다 작으면 B의 css 가 적용되고, 900 보다 크면 A 의 css 가 적용된다. 즉, 일반적으로 A 의 코드가 적용되지만, 900px 보다 작은 크기에선 B 의 코드가 적용된다. 또한 max-width 는 데스크탑 우선 적용이라, 미디어 쿼리의 분기가 큰 순서대로 적용된다. 어떻게 보면 A 의 코드는 900px 보다 높은 px 크기 이기에 적용되는 것이다. 📗 overflow-x: hidden overflow 속성은 컨텐츠 요소의 크기가 박스보다 긴 상..

지쳤나요? 예쓰! 아침부터 트러블슈팅의 연속이었다. typeorm-model-generator 로 엔티티를 가져올 때마다 RepositoryNotFoundError 가 발생한다. 옆자리 후배님은 당신은 한번도 이런 에러가 난 적이 없다며 슥 오더니 슥 해결해주고 간다. ( entities 경로에 .d 를 제외하니 해결됐다. ) typeorm도 연결됐겠다, 젠킨스로 배포를 시도했는데 역시나 터졌다. 처음엔 환경변수 때문인가 싶었는데, 아무리 설정을 바꿔줘도 결과는 계속 타임 아웃만 반환했다. 처음엔 로그도 찍히지 않아서 뭐가 문제인가 싶었는데, 그냥 로그 경로를 잘못 알고 있었던 것이었다. 데브옵스 팀 주임님 도움을 받아 로그를 확인할 수 있었는데 디비 커넥션이 없다고.... 로컬에선 분명 디비 잘 붙었는..

🍏 삼항연산자를 이용한 jsx 리턴 jsx/tsx 에서 아래처럼 삼항 연산자를 사용하여 원하는 태그를 렌더링 하는 경우가 많다. responseData['image'] 값이 존재할 때와 그렇지 않을 때 각각 다른 태그를 렌더링하는 코드인데, 우선 코드 가독성이 너무 떨어져 다른 방법을 찾고 싶었다. 🍎 Nesting 대신 OR operator 를 사용한 리턴 다른 분의 벨로그 를 통해 네스팅이 아닌 early return 이란 방법을 알게 됐다. (이분도 주니어 같은데 글을 깔끔하고 가독성있게 잘 쓰신다. 무엇보다 내용이 좋다..!!) 우선 삼항 연산자로 사용할 코드 부분을 아예 다른 컴포넌트로 생성한다. QuestionImg 라는 컴포넌트를 생성하여 아래 주석된 코드를 밀어넣었다. 이제 한눈에 봐도 코..

리액트에서 '정적'으로 이미지를 로드하는 방법은 어렵지 않다. 여기서 '정적'으로 이미지를 업로드 한다는 것은, 랜딩페이지의 고정된 이미지처럼 딱히 변경될 필요가 없는 (정적인) 이미지를 뜻한다. 사용할 이미지를 import 한 후, 해당 변수(poster) 를 img 태그의 src에 넣어주기만 하면 된다. 이미 경로를 from 에서 선언했으니 굳이 src prop 에 경로를 다시 쓸 필요없이 변수만 사용하면 된다. import poster from "../images/슬의.png" ... ... 🍎 React 에서 (동적으로) 이미지 로드하는 방법 (require(...).default) 동적으로 이미지를 로드할 경우, 이 방법은 그다지 좋지 않다. 만약 상황에 따라 10개의 서로 다른 이미지를 로드해..

https://junior-datalist.tistory.com/193 210908 개발기록: JSON 의 줄바꿈 문제 🌀 상황 JSON 객체로 받은 문장 내용을 개행(줄바꿈)하여 html(jsx)에 출력해야한다. 📌 문제 \n 이나 \\n , 심지어 태그까지 JSON 문장에 넣어봤지만, 줄 바꿈 처리 없이 모두 한 줄로 출력됐다. ✅ 해 junior-datalist.tistory.com 📌 태그를 사용한 JSON 개행의 한계 이 날은 태그를 사용하여 json 데이터의 개행을 적용할 수 있었다. 문제는 태그를 적용하면서 여러 사이드이펙트가 나타났는데 우선 div 내부 글자가, div 를 뚫고 나가기 시작했다. autoflow 도 적용하고 별짓을 다했지만 남은건 처참히 div 를 뚫고 나간 글자들 뿐이었다..

🎁 src/ 와 dist/ 의 차이 리액트 개발을 하면서 src와 dist 가 눈에 자주 밟혔다. src 는 source 라고 어림잡아 생각할 수 있었다. 우리의 소스코드를 작성하는(?) 정도로 여겼는데, dist 는 무엇인지 감이 잡히지 않았다. stackoverflow 에서 둘의 차이를 찾을 수 있어 약간의 의역을 곁들여 기록한다. 📌 src/ src/ stands for source, and is the raw code before minification or concatenation or some other compilation - used to read/edit the code. src/는 소스를 나타내며 축소/연결, 기타 컴파일 되기 전의 원시 코드로, 코드를 읽고 편집하는 데 사용된다. (즉..