본문 바로가기

전체 글

 (291)
[React-Quill] 에디터 영역 스크롤 바 만들기 react-quill 을 통해 에디터를 그대로 띄워보면 다음과 같다. 기본 설정에서도 글을 작성하는데는 문제가 없지만, 에디터 영역이 너무 작다는 점은 불편하게 느껴진다. 특히 해당 영역은 기본적으로 스크롤 기반으로 동작하지 않기 때문에 글을 길게 작성함에 따라 에디터 영역이 계속 증가한다. 티스토리 블로그 글쓰기처럼 에디터 영역이 계속 확장되어도 상관 없다면 이 동작 그대로 사용해도 되지만, 나는 에디터 글쓰기 란이 어느 정도 초기 공간을 가지고 있고, 그 이상은 스크롤 형식으로 동작하기를 원하기 때문에 이 동작을 변경해야 한다. Quill 공식문서에서는 scollingController 옵션을 통해 스크롤 대상을 변경할 수 있다고 설명하고 있다. https://quilljs.com/docs/confi..
[css] tailwind css - 화면 가운데 정렬 + 꽉 채우기 위와 같이 화면을 꽉 채우면서 form 요소는 가운데 정렬을 만들었다. {children} 화면 꽉 채우기: w-full min-h-screen 가운데 정렬: flex items-center justify-center 세로 방향으로 꽉 채우는 방법에는 h-full과 h-screen이 있다. h-full의 경우 height: 100%에 대응되는데, 이는 부모 요소에 영향을 받는다. 거슬러 올라가서 모든 부모를 h-full로 만들면 1사용할 수는 있긴 한데, 애초에 높이라는 개념이 없는 html, body 요소에 높이를 지정하는 것은 어울리지 않는다. h-screen은 height: 100vh에 대응되는 속성으로, 부모와 관계없이 동작한다. 이때 min을 붙이면 min-height: 100vh가 되는데, 이..
[크롤링] 네이버 뉴스 URL 쿼리 파라미터 현재 키워드를 기반으로 네이버 기사 본문 및 댓글 목록을 가져오는 프로젝트를 진행하고 있어 알게된 점을 정리해둔다. 네이버의 뉴스 검색 탭의 경우 옵션 탭을 통해 여러가지 필터 항목을 제시한다. 해당 옵션 목록을 단순 검색 뿐만이 아니라 크롤링에도 활용할 수 있다면 더 효율이 높아질 것이다. 또한 당연하게도 이러한 옵션들은 크롤링 과정에서도 활용할 수 있다. 위 보이는 옵션들은 url의 query parameter 상에 표현된다.일부 검색 항목을 변경해가면서 검색을 진행하면 어떤 쿼리 값이 옵션과 대응되는지 볼 수 있다. 예를 들어 아래와 같이 검색 옵션을 지정하고 "윤석열"을 검색해보자. 위 옵션에서 발생한 URL은 다음과 같다. https://search.naver.com/search.naver?wh..
[typescript] structural typing https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#structural-type-system https://eclipse.dev/n4js/features/nominal-and-structural-typing.html nominal typing 타입의 이름을 기준으로 타입을 구분하는 방식. 두 유형의 이름이 동일하면 동일한 것으로 간주하며, 타입 T1이 T2의 서브타입으로 간주되기 위해서는 반드시 extends와 같은 구문을 이용하여 명시적으로 서브타입임을 선언해야 한다. 위 특성에 의해 nominal typing을 채택하는 언어에서는 내부 속성 및 메서드를 동일하게 가지고 있더라도 클래스의 이름이 다르면 다른 것으로 간주되며..
[batch] cron 표현식 https://ko.wikipedia.org/wiki/Cron cron - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. ko.wikipedia.org cron은 유닉스 계열 운영체제의 시간 기반 잡 스케줄러이다. 과거부터 시간 기반 스케줄링을 수행할 때 자주 사용한 유틸리티 프로그램으로, 일정 시간마다 정해진 동작을 수행해야 하는 배치 프로그램을 구현할 때 많이 사용한다. 이렇다 보니 많은 배치 스케줄러들이 cron을 직접 사용하지는 않더라도 일종의 표준처럼 해당 유틸의 시간 표현 방식을 동일하게 사용하는 경우가 많다. 크론 식은 다음 필드를 포함한다. 필드 값 초 0-59, 특문 분 0-59, 특문 시 0-59, 특문 일(day of month) 0~31, 특문 월(month) 1..
[jest] 동일 파일 내의 함수 mocking하기 코드 깃허브 주소: https://github.com/blaxsior/my_nest_study/tree/master/capp/src/auth/util 참고한 내용: https://stackoverflow.com/questions/45111198/how-to-mock-functions-in-the-same-module-using-jest export async function genHash(user_pass: string, salt: string) { return (await pbkdf2(user_pass, salt, 100000, 64, 'sha512')).toString('hex'); } export async function generatePassword(user_pass: string) { cons..
[크롤링] 네이버 뉴스 댓글 API 분해해보기 네이버 뉴스 댓글은 "더보기 버튼"이 존재해서 댓글을 특정 개수 단위로 가져올 수 있다. 이것만 보면 페이지가 동적으로 동작하므로 셀레니움 기반으로 데이터를 가져오는 프로젝트가 많이 있었다. 처음에는 나도 댓글 수집을 셀레니움 기반으로 해야 하나 고민을 했다. 나는 가능한 한 네이버 댓글을 셀레니움 없이 크롤링 할 수 있기를 원했다. 셀레니움은 브라우저를 직접 조작하는 방식이라 단순 http 통신보다 속도가 느리기 때문이다. 진행 중인 프로젝트에서 하루의 특정 시간마다 뉴스 데이터를 수집 및 가공하여 머신러닝을 돌려야 하는데 데이터 양이 상당할 수도 있다는 점, 사용되는 서버 환경이 기껏해야 EC2 프리티어 수준에서 조금 좋은 수준일 것이라고 예상하는 점을 고려하면 데이터를 최대한 짧은 시간 내에 읽어 ..
[nodejs] thread pool 참고 자료 유튜브 채널: https://www.youtube.com/watch?v=3JYNNf3Iljo libuv, nodejs 공식 문서 및 깃허브 node의 이벤트 루프가 싱글 스레드 기반으로 동작하기는 하지만, 내부적으로 들어가면 시간이 오래 걸리는 특정 작업(File I/O, DNS 등)의 경우 libuv 라이브러리가 제공하는 스레드 풀을 이용하여 처리한다. https://docs.libuv.org/en/v1.x/threadpool.html#threadpool libuv에서 스레드 개수는 UV_THREADPOOL_SIZE 환경 변수로 나타나며 기본 값은 4이다. 이 값은 변경할 수 있으며, 최대 1024의 값을 가질 수 있다. 병렬성 수준 nodejs는 os 모듈의 cpus().length 또는 ..

티스토리툴바