✅ 파이썬 행렬 전환 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/는 소스를 나타내며 축소/연결, 기타 컴파일 되기 전의 원시 코드로, 코드를 읽고 편집하는 데 사용된다. (즉..

🌀 상황 JSON 객체로 받은 문장 내용을 개행(줄바꿈)하여 html(jsx)에 출력해야한다. 📌 문제 \n 이나 \\n , 심지어 태그까지 JSON 문장에 넣어봤지만, 줄 바꿈 처리 없이 모두 한 줄로 출력됐다. ✅ 해결 태그라는 것이 있다. preformatted tag 라는 뜻으로 태그나 다른 처리 작업 없이 원하는 포맷으로 html 을 출력한다. currentQuestion['title'] 은 JSON 객체에서 title 이란 key 로 문장을 받아온 값이다. 해당 값을 pre 태그 내부에 넣어주면 \n 이 제대로 먹히는 것을 확인할 수 있다. ... return ( {currentQuestion['title']} ) 이렇게 개행이 된다. 그런데 뭔가 정렬이 예쁘지않아 다른 방법도 찾아봐야할 것 ..

회사 프로젝트 개발환경 세팅하라는 말에 호다닥 인프런에서 웹팩 강의를 구매했다. 그전까지는 개발환경, webpack 같은 말이 낯설고 나랑은 거리가 먼 개념이라 생각했는데, 공부하면 할 수록 더 배워야 한다고 느꼈다. 로더와 플러그인의 차이 로더가 파일 단위로 처리하는 반면, 플러그인은 번들된 하나의 결과물을 대상으로 처리한다. 예제에서 생성된 결과물이 main.js 하나이기 때문에 플러그인이 한 번만 동작한 것이라 추측할 수 있다. 자주 사용하는 플러그인 bannerPlugin main.js 의 최상단에 출력될 내용을 작성할 수 있다(like banner) const childProcess = require('child_process'); // git 명령어를 넣을 수 있다. plugin..