포시코딩

개요 {selectRoom()}}> {exitChat(meetup.id)}}>나가기 많이 코드가 생략 됐지만 대충 이런 엘리먼트가 존재할 때 나가기 버튼을 눌렀는데 selectRoom() 함수가 실행되는 문제를 발견했다. 백엔드쪽에선 별로 고려하지 않아도 되는 부분이라 예전에 배웠다가 완전 까먹고 있었는데 이번 상황에 생각이 나서 다시 해결 방법을 기억할 겸 정리해보았다. 해결 방법 이런 현상은 '이벤트 버블링' 이라고 한다. div 안에 button이 있는 형태라 button을 누르면 div도 눌렸다는 상황이 발생하는건데 나가기 버튼에 있는 함수에 아래의 코드 한줄을 추가하여 간단하게 해결할 수 있다. function exitChat() { e.preventDefault(); // .. 그 후 코드 작..

개요 {meetup.title} 약속시간: {new Date(meetup.schedule).toLocaleString()} {meetup.content} {exitChat()}}>나가기 function selectMeetup(e) { e.target.classList.add('active'); } 위 코드에 대해 div 를 클릭 시 내가 원하는건 meetups_box_body_item 클래스를 가진 div에 active 클래스가 추가되는건데 내부의 h5나 p태그를 클릭 시 해당 엘리먼트에 active가 추가되고 있다. 해결 방법 e.target은 클릭된 요소 그 자체를 나타내기 때문에 부모 요소에 클래스를 추가하려면 e.currentTarget을 사용하는게 맞다. e.currentTarget은 이벤트가 ..

개요 MySQL의 어떤 테이블에서 softDelete를 한 데이터만 가져와야 하는 특수한 상황이 생겼다. 첫 번째 row에 있는 혼자 deletedAt이 null이 아닌 데이터를 가져와야 하는 상황. deletedAt이 null인 데이터들을 가져올 때 알아서 걸러주기 때문에 deletedAt의 데이터가 있는 데이터를 가져와야 하는 상황은 처음 다뤄봤는데 이런 특수한 상황에 대해 생각보다 잘못된 정보가 많아 정리하게 되었다. 시행착오 1. find()에서의 시도 처음에는 그냥 softDelete된 데이터를 빼고 가져올 때 find({ where: { deleted: null } }) 위 코드를 쓸 때 처럼 반대로 쓰면 되지 않을까 하여 not null을 쓰기 전 null은 먹히나 테스트 해봤는데 async..

개요 Nest.js에서 TypeORM으로 데이터 가져올 때 랜덤으로 가져와야 하는 상황이 있어서 방법을 찾아보다 구글에 나와있는 방법들과는 좀 다르게 성공해서 기록 코드 const photos = await this.photoRepository.createQueryBuilder('p') .select([ 'p.id', 'p.image' ]) .orderBy('RAND()') .limit(5) .getMany(); 내가 사용한 코드 예제다. createQueryBuilder를 사용하면서 인터넷에 나와있는 방법과는 달리 orderBy()에서 'RANDOM()'이 아닌 'RAND()'를 써야 한다. 랜덤으로 5개를 가져오기 위해 limit(5)를 추가로 사용 데이터가 아무것도 없을 시 그냥 빈 array []..

해결 전 3월 16일 11시 51분에 schedule은 3월 16일 13시로 저장 local schedule, createdAt 둘 다 값 그대로 들어갔다. RDS schedule은 값 그대로, createdAt은 9시간 마이너스된 값이 들어감 local schedule, createdAt 각각 9시간씩 마이너스 RDS DB 값이 그대로 나오고 있음 해결 후 기존에 schedule에 대해 string으로 전달되어 class-validator를 통해 강제로 date 타입으로 변환되는 값을 db에 넣었는데 new Date('날짜시간') 값으로 전달하여 강제 date 타입 변환 없이 db에 넣게끔 하니 정상적으로 동작되었다. 아래는 3월16일 13시에 schedule을 3월16일 14시로 등록한 모습. loc..

개요 개발하다보면 날짜 시간 관련해서 time zone 문제를 다들 겪어봤을 것이다. 전 세계 시간에 대해서도 영점이 존재하고 한국 시간은 9시간을 빼줘야 영점에 맞춰지게 된다. 어떤 날짜 시간을 저장할 때 해당 국가의 시간이 아닌 위에서 말한 영점 시간에 맞춰져 저장이 되야 하는데 이유는 이 서비스가 그 나라뿐만 아니라 다른 나라에서도 접속이 가능할거고 시차가 존재할텐데 나는 9시에 저장했는데 내가 있는 나라보다 1시간 빠른 나라에서 동시에 저장했어도 8시에 저장하게 되는 일이 생기는 이유 때문이다. TypeORM에서 자동으로 만들어 넣어주는 createdAt, updatedAt도 자동으로 그 영점에 맞춰져 저장이 되는데 내가 모임 약속 시간이라는 schedule 컬럼에 대해 string으로 받아 Ty..

개요 JavaScript에서 local과 production 서버 등에 따라 실행하는 host가 달라질 때 그대로 localhost 라고 써놓으면 문제가 된다. host에 따라 내 서버 주소를 바라보게 하려면 window.location.origin // http://localhost:3000 이걸 쓰면 앞에 프로토콜부터 뒤에 포트까지 리턴하니 이걸 사용하면 된다.

개요 카톡에 어떤 링크를 공유하면 이렇게 자동으로 미리보기가 나오는 걸 경험해봤을 것이다. 'og'태그는 웹 사이트가 다른 웹 사이트에 공유될 때 대표 이미지, 제목 및 설명과 같은 메타 데이터를 제공하는 Open Graph 프로토콜의 일부라고 한다. 이게 자동으로 되는게 아니고 따로 설정해줘야 하는건데 어떻게 설정할 수 있는지 알아보자 코드 HTML의 head 부분에 이렇게 작성하면 끝이다.

개요 Node.js의 Event Emitter는 특정 이벤트에 리스너 함수를 달아서 이벤트가 발생했을 때 이를 캐치할 수 있도록 만들어진 api라고 한다. 오늘은 Nest.js에서 Event Emitter를 쓰는 법을 알아보고자 한다. 기본적으로 공식 홈페이지에서의 안내를 따랐다. https://docs.nestjs.com/techniques/events Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScri..

React에서 input 태그에 작업을 하다가 onKeyPress 를 쓰려고 하니 @deprecated 이 뜨면서 빗금이 쳐지는걸 보았다. 이런 경우 더 이상 사용되지 않으니 다른걸 쓰라고 추천하는건데 검색해보니 정말 keyPress는 더 이상 지원되지 않으니 다른걸 쓰라고 나왔다. 이유가 궁금해 찾아보았지만 따로 찾아볼 수는 없었다. :( 대신 keyDown, keyUp을 쓰라고 추천하는데 개인적으로 keyDown 같은 경우 한글에서는 글자를 다 완성하지 않았는데도 실행할 경우가 있으니 keyUp을 쓰는걸 추천한다.