전체보기 79

자작 나스 만들기 - 소프트웨어편(헤놀로지)

nas용 컴퓨터는 준비되었고 이제 본격적으로 서버 컴퓨터로 만들어야 한다.헤놀로지(Xpenology)서버 컴퓨터로 사용하기 위해 선택한 DSM(Disk Station Manager)은 헤놀로지다. 시놀로지에서 만든 DSM의 해적판인데 GPL 라이선스를 사용 중이라고 한다. 해적판이라서 그런지 여러모로 불안정하고 불완전한 소프트웨어긴 하다. 구글에 "헤놀로지 설치"를 검색하면 정말 많은 글이 나온다. 유튜브에도 나스 구축에 관한 영상 몇 개가 있다. 너무 다양한 방법이 있고 각자 다른 방법으로 진행되기 때문에 엄청난 혼돈이 왔다.나의 경우 3개의 방식으로 시도했었고, 최종적으로 아래 게시글을 참고한 방법으로 성공했다. 헤놀로지 설치 성공한 게시글 링크https://svrforum.com/nas/801694..

자작 nas 만들기 - 하드웨어편

매달 날아오는 aws 결제 메일(사실 몇 천원도 안 나옴), 용량 적은 무료 클라우드, 때문에 개인 서버를 가지고 싶다는 생각을 했다.사실 위 두개는 애써 찾은 핑계고 내 서버를 가지면 멋지지 않을까라는 설렘에 nas를 구매하기로 결심했다.시놀로지 처음에 찾아본 것은 '시놀로지'. 개인용 나스를 검색하면 대부분 시놀로지 제품을 추천한다. 그 중에 처음 눈에 띈것은 DS120j. 나름 가격도 나스 중에서는 저렴하고(15만원) 개인용으로 쓸거라 괜찮지 않을까 생각했다. 근데 1베이로 구매로하면 HDD가 고장나면 모든 데이터를 날리게 된다는 무서운 이야기를 듣고 2베이 제품을 알아봤다. 그러는 참에 당근에서 DS220j를 15만원에 판다 글을 보고 바로 DS220j의 후기를 찾아봤다. 부정적인 후기로는 느리고..

크론탭을 이용한 반복 로직 구현

일전에 프론트 서버에서 10초마다 반복되는 api 호출을 구현했었다. 다음으로 구현해야 할 기능은 10초마다 호출되는 데이터에 error 데이터가 발생하면 유저에게 push 메세지가 발송된다. 문제 이 기능을 구현하다 보니 한 가지 문제가 있었다. 바로 유저가 실시간으로 데이터를 받는 시간이 서로 일치하지 않다는 것. 만약 앱이 리렌더링 되거나 새로고침되면 10초의 간격이 깨지고 다시 새로 데이터를 받고 0초부터 카운트가 시작된다. 그리고 10시 10분 10초에 접속한 사람은 20초, 30초마다 새로운 데이터를 받고, 10시 10분 15초에 접속한 사람은 25초, 35초마다 서로 다른 시간대에 데이터를 받게 된다. 이런 문제로 유저별로 error 메세지를 받는 시간이 조금씩 달라질 수 있었다. 이 문제를..

리액트에서 일정 간격 반복적으로 api 호출하기 refetchInterval

최근 회사에서 데이터 가공(?)에 시간을 많이 쓰고 있다. 배열로 받는 데이터를 객체로 만들어 그래프에 쓰기도 하고, 배열 -> 객체 -> 배열 -> 객체 4번을 타고 들어가서 쓰는 데이터도 있다. 처음에는 무지성으로 썼다만 요즘은 sql 쿼리문이나 api에서 로직을 수정해서 원하는 데이터로 만들기도 한다. 그렇게 다듬어진 데이터로 실시간 그래프를 구현하는데 1분에 한 번, 빠르면 5초에 한 번씩 데이터를 호출한다. 최근 이를 구현하면서 다양한 방법이 있어 시도해 보고 기록해 본다. api 반복 호출 setInterval 처음에 사용한 방법은 useEffect에서 setInterval을 사용하는 방법이다. setinterval을 useEffect에서 호출하는 것 자체가 좋은 코드는 아니었다. const ..

tsc, node에서 typescript 실행하기

블로그에 비공개로 밀려있는 글이 꽤 된다. 요즘 공부하는 것들이 쉽게 이해되지 않다 보니 글도 쉽게 마무리되지 않고 있다. 그래도 오늘은 비교적 가벼운 주제로 글을 써본다. node에서 typescript가 실행되지 않는다? 문제의 발단은 다음과 같다. namespace와 module의 차이점, 스코프에 대해 이것 저것 테스트해본 코드다. //index.ts const a = "aaaa"; namespace test { export const b = "bbb"; console.log(b); } console.log(test.b); console.log(a); index.ts에 코드를 작성 후 node로 결과를 보기 위해 터미널에 node index.ts를 쳤는데 아래와 같은 에러가 떴다. SyntaxEr..

tailwindcss 초보 사용기

tailwindcss를 처음 접하고 몇몇 페이지에 적용해서 사용해 봤다. 사용해 본 결과 그 장점과 단점에 대해 간단하게 정리해 본다 tailwindcss는? tailwindcss는 2017년에 처음 등장한 css 프레임워크로 마크업 태그에 인라인 속성으로 사용하는 것이 특징이다. 아래와 같이 태그의 class에 사용한다. 위 내용을 css로 작성한다면 아래과 같다. width: 20rem; height: 20rem; padding: 10rem; display: flex; flex-direction: row; border-radius: 4px; 보다시피 tailwindcss는 획기적으로 css 코드를 압축/단축한다. 장점 그 외에도 여러 장점이 있다. 명시도에 구애받지 않는다 CSS에서 명시도란 선택..

React 초보가 Vue 프로젝트에 참여하게 된 이야기

전 직장 동료이자 백엔드 개발자 대니의 권유로 새 프로젝트에 참여하게 되었다. 사내 도서 공유 서비스인데 가지고 있는 책을 올리면 다른 팀원이 빌리는 형식의 플랫폼이다. 이게 뭔가 싶었는데 설명을 듣다 보니 꽤 괜찮은 서비스가 될 것 같았다. 대니는 '더글로리'에 빗대었는데, TV나 유튜브를 보고 다른 사람과 공유하고 이야기 나눌 때의 짜릿함. 그게 책이 된다면? 내가 읽었던 책을 누군가 읽고 그에 대해 공감이나 토론을 한다면 얼마나 즐겁겠는가. 독서도 장려하고 말이지. 그 외에도 친해지고 싶은 동료가 있다면 그의 책을 빌려서 어색함을 덜 수도 있고, 자신의 지적허영심도 채울 수 있는 그런 서비스가 될 것 같았다. 백엔드 2명, 프론트엔드 2명, 디자이너 1명, 팀 구성도 꽤 본격적이라 바로 참여하기로 ..

오픈소스는 과연 혁명일까? 오픈소스의 역사와 평가

성당과 시장우연히 "성당과 시장"이라는 책을 접했다. 오픈소스의 선구자인 에릭 레이먼드가 지은 책인데, 당시 이 책에 감명받은 해커가 한둘이 아니란다(참고로 해커는 옛날에 개발자를 지칭하던 단어다). 일단 나도 책 가격에 감명을 받긴 했다. 오픈소스를 지향하기 때문에 무료로 배포한다고 한다. 동일한 작가가 만든 또 다른 책 "오픈 소스 혁명의 목소리"까지 읽고 나니 영화 한 편을 본 듯했다. 과거의 해커들에게 동화되어 컴퓨터 프로그래밍 역사를 함께 한 기분이었다. 대해커 시대의 저자그도 그럴 것이 저자인 에릭 레이먼드는 리눅스를 만든 리누스 토르발즈, 자유 소프트웨어 혁명가 리처드 스톨만, C언어와 유닉스를 만든 켄 톰슨과 데니스 리치 등 컴퓨터 역사서에 등장할 만한 업적을 세운 사람들과 동시대 해커다..

input의 불필요한 렌더링이 줄이기 State Colocation(상태 공존)과 함께

개인 프로젝트를 진행하다가 이상한 렌더링을 발견했다. input 창에 글자를 입력할 때마다 렌더링이 발생한다. 파란색 프레임이 생성되는 것은 React Develop Tool의 렌더링 표시 기능인데, 렌더링이 될 때마다 표시된다. 보다시피 글자 하나 입력 시 렌더링 된다. 그리고 이메일 input창에 값을 입력했는데 전체 페이지가 렌더링 되는 것을 볼 수 있다. 그냥 봐도 거꾸로 봐도 백덤블링하면서 봐도 비효율적인 것을 알 수 있다. 원래 이런 건가 싶어 리액트로 만든 다른 사이트를 엿보았다. 오늘의집과 직방 또한 이러한 현상이 나타났다. input에 글자를 입력하는데 왜 렌더링이 일어난다는 것에 대한 의문. 잦은 렌더링을 피해야 하는 것은 상식이기 때문에 해결하고 싶음 마음. 두 포인트를 해결하기 위해..

효율적인 업무 분배를 위한 Jira 태스크 관리

팀 프로젝트에서 결과물도 중요하지만 프로젝트 일정 관리와 업무 분배가 참 중요하다고 느끼는 요즘이다. 어쩌다 보니 팀 프로젝트 업무 분배를 내가 맡았기 때문인데, 나름 스타트업에서 프로젝트 관리를 경험해 본 적이 있었다는 이유였다. 업무를 어떻게 나눌까?이전 경험에 의하면 프로젝트의 최종 목표를 모든 팀원이 공유하고, 최종 목표를 달성하기 위해 1주일 단위로 작은 목표를 세워서 스프린트 단위로 만들었다. 그리고 각 팀원 별로 OKR을 설정하고 태스크 단위로 쪼개어 업무를 분배했다. 이럴 경우 팀원 한명한명이 기억하고 짊어져야 할 목표가 많아지게 되는데 이것은 긍정적인 효과를 불러오더라. 목적의식을 부여하고 자발적인 기여를 기대하는 것이다. 수평적 지식 공유목표 공유가 어떤 긍정적인 효과를 불러오는지 조금..