개발로그

[Javascript] Auto Scroll을 중단

스크롤이 자동으로 진행되는 도중에 유저가 개입할 경우 Scroll 이벤트를 종료시켜야 하는 기능이 필요했다. 유저의 개입에 대한 판단을 이렇게 접근했다.- 스크롤 이벤트가 발생한다.- 유저가 개입할 경우 scroll height와 client height + scroll top을 비교해서 scroll height가 더 클 경우 유저가 개입한 것으로 판단한다. 유저의 개입 여부를 판단하는 로직을 스크롤 이벤트 내에서 처리하다보니 자동 스크롤도 스크롤 이벤트, 유저의 개입도 스크롤 이벤트로 처리되어 간헐적으로 유저의 개입에도 자동 스크롤 상태가 유지되는 경우가 있었다. 유저가 개입 상황을 판단하는 방식을 다르게 생각했다.- 모바일 환경이라면 유저가 터치를 통해 개입할 수 있다.- PC 환경이라면 MouseE..

덥다. 지친다.열정마저 녹는다.  가을이 오면다시 일어나

어쩌다 시작하게 되었는가? 서비스 중인 웹 서비스에 백엔드 관련 추가 개발 기능을 배포할 일이 생겼다. 추가 개발과 관련해서 DB 테이블에 스키마 변경이 있었다. 이전에 DB 스키마를 변경할 때, TypeORM 옵션에서 synchronize 옵션을 true로 바꿔 변경했다가 데이터가 날아간 경험이 있었다. TypeORM에서도 해당 방법으로 프로덕션 DB의 스키마를 변경하는 것을 추천하지 않는다. This option automatically syncs your database tables with the given entities each time you run this code. This option is perfect during development, but in production you may ..

최근 바이트로 저장된 값을 10진수로 변환하여 DB에 저장하는 로직을 구현해야했다. 단순히 부호가 없는 경우 parseInt 내장함수를 사용해 10진수로 변환할 수 있다. const buf = 'a1d2'; const num = parseInt(buf, 16); console.log(num); // 41426부호가 있는 경우 맨 앞 자리의 숫자에 따라 음수, 양수로 나눠지며 계산하는 방법도 달라진다. 부호가 있는 16진수의 경우 앞자리가 07은 양수, 8F는 음수다. (2진수로 변환시 맨 앞 비트가 0이면 양수, 1이면 음수) 2진수로 변환 후 맨 앞 비트에 따라 부호를 판단하고, 1의 보수를 구해 10진수로 변환하고 음수 변환을 한다. function getDecimal(buf) { //..

보통 Typescript로 코드를 작성할 땐, camelCase로 이름 규칙을 작성하는데, Database에선 snake_case로 이름 규칙을 작성하게 된다. 기존에는 TypeORM 데코레이터에서 name으로 이름을 작성했다. @Entity('users') export class UserEntity { @Column({ name: 'last\_name' }) lastName: string; } 코드도 길어지고, 가끔 이름을 빼먹는 경우도 발생하고 문제가 되었다. 찾아보니 typeorm-naming-strategies라는 라이브러리가 있었고, 조금 더 코드를 단순화 할 수 있었다. 사용 설치 npm i typeorm-naming-strategies typeorm module에..

이슈 Nestjs를 사용 중 A Module이 B Module을 참조하고, B Module이 A Module을 참조하는 순환 참조 형태가 발생 해결 Module 참조 시 forwardRef를 사용해 해결 @Module({ imports: [forwardRef(() => BModule)], }) export class AModule {}

- Nextjs 서버 에러로그에 Large Page Data 관련 로그 - getStaticProps, getServerSideProps, getInitialProps에서 큰 데이터를 리턴하면 발생 - 코드 확인, getServerSideProps에서 사용하는 것보다 과도하게 데이터를 가져오는 것이 확인됨 - 데이터 정리 - Graphql 사용할 때 Query에 이것저것 담고 가져오는 경우가 있었는데 무작정 쓰지 말자

Nestjs common 데코레이터 @Ip @nestjs/common 에 있는 @Ip 데코레이터를 통해 IP 정보를 가져오도록 코드를 구현했는데, 공인 IP 주소가 아닌 사설 IP 주소를 가져왔다. 어떤 네트워크에서 접근해도 같은 사설 IP로 기록되는 문제가 발생했다. nestjs-real-ip 라이브러리를 찾아 적용하게 되었다. 공인 IP를 가져오는 것을 확인할 수 있었다. 무엇이 다를까? 기본 데코레이터를 사용하면 Reqeust 객체에서 ip를 조회한다. nestjs-real-ip를 사용하면 내부적으로 request-ip를 사용하는데, 단순히 Request 객체에서 ip를 조회하는게 아니다. request-ip 코드에 getClientIp 함수를 사용하는데, Request Header 객체 내에 IP..

MUI Table Pagination 간단하게 Pagination을 사용하기 위해 MUI의 TablePagination을 사용했다. ISSUE TablePagination에서 select 선택 시 body에 right padding이 추가되었다. Solve MUI Select 사용 시 같은 현상이 있는데, 와 같이 코드를 추가하면 해당 현상을 해결할 수 있다고 한다. 하지만 TablePagination엔 MenuProps가 없다. 찾아보니 SelectProps가 존재했다. 위와 같이 처리해주면 body에 right padding이 강제로 들어가는 현상을 막을 수 있다.

다시 블로그 다른 플랫폼, 애매하게 불편한 것들 취업 후 바쁘다는 핑계로 더욱 방치한 블로그 다시 글을 쓰고 싶다 그동안 취업, 1년, 곧 1년을 채운다 다양한 경험을 하게 되었다 하지만 다 내 것이 되었냐 묻는다면 희미한 기억만 남을 뿐 다시 만난다면 새로울 것이다 블로그가 다시금 필요하다 생각했다 다시 공부