만족

맥북 프로(2019)의 키보드 키감은 상당히 거지같아서 블루투스 키보드를 하나 장만했다. 중요 조건은 1. 타이핑할 맛이 나는가 (눌리는 느낌과 반발력이 적당한가) 2. 가벼운가 3. 얇은가 요즘 로우 프로파일 기계식 키보드가 핫한데, 블루투스로도 나온 제품이 몇개 있어서 '빈폭 탭텍'을 구매했다. (로우 프로파일 키: 키의 타건감은 살리되 키의 높이를 줄여 키보드 부피를 줄인 제품) 요즘은 기계식 키보드 보급이 잘 되어 있어서 2~3만원으로도 기계식 키보드를 장만할 수 있는 시대인데 154,000원은 기계식 키보드에서도 절대 저렴한 가격은 아니다. 그래도 맥 전용 키(command, option)이 따로 존재하는 점과 위에서 말한 내 구매조건에 들어맞았기 때문에 하나 구매했다. 생김새 일단 비주얼은 합..

create-react-app 으로 리액트 프로젝트를 생성했다면 프로젝트 빌드 시에 webpack을 이용해 많은 파일들을 큰 몇개의 덩어리로 합쳐준다. webpack은 SPA(Single Page Application)을 제작하기에 제격인 빌드 도구이다. SPA의 장점은 첫 로드 후(청크를 한번에 다운로드) 추가적인 로드가 없어서 사용자에게 웹이 아니라, 마치 하나의 앱을 설치한 것 처럼 부드러운 환경을 제공할 수 있으나, 첫 로드가 오래 걸린다는 단점이 있고, 번들링 시에 파일 크기에 오버헤드가 존재한다. (실제로 Hello world를 출력하기만 하는 프로젝트를 빌드해도 100KB단위로 프로덕션이 만들어진다) 프로젝트가 작은 경우에는 그대로 프로덕션을 제공해도 로딩이 조금 더 걸리는 수준에 그치지만 ..

오늘 약 5개월동안 진행한 프로젝트에서 사용하지 않는 라이브러리 제거를 진행했다. 웹 사이트 퍼포먼스 측정 결과, 특히 사이트 로딩 속도에서 매우 처참한 결과가 나왔기 때문이다. 한번에 모든 페이지를 로드하기 때문에 초기 로드에 비교적 많은 시간이 필요한 SPA의 치명적인 단점이 굳이 필요하지 않은 의존성들과 함께 존재하면 빌드의 결과물인 청크 사이즈의 비대로 인해 로딩 시간이 더더욱 길어지게 된다. 나는 개발 초기에 사용이 간편한 부트스트랩을 사용하다가 디자인 수정 작업을 거치면서 부트스트랩보다는 material-ui가 더 적합하다는 것을 깨달았다. 그러나 이미 많은 컴포넌트들에 부트스트랩이 들러붙어 있어서 상당히 손대기 어려웠다. 대부분의 편집기나 IDE에 존재하는 Find in Path 기능을 이용..

맥에서만 발생하는 현상이라고 하며, 가장 인기있는 테마 플러그인인 MaterialUI의 오류라고 한다. 최신 버전에서는 수정되었으므로, preference->plugins로 간 다음 MaterialUI를 업데이트 한 다음 재시작하면 된다.

서버 개발자가 신경써야 할 것은 많습니다. 그 중에서도 서버의 자원은 한정적이기 때문에 이를 모니터링하고 대응하는 것 역시 중요한 미덕입니다. 특히나 스타트업이나, 개인 프로젝트에 사용하는 서버는 코어가 한두개짜리인 저가형 서버를 사용하기 때문에 리소스 관리에 많은 심혈을 기울여야 할 것입니다. 먼저 고전적인 리소스 모니터링 방법은 top 명령어를 이용하는 것입니다. 우분투에서 추가 설치 없이 기본적으로 사용 가능한 명령어입니다. 단순하게 커맨드라인에 top을 사용하는 것 만으로도 메모리/CPU/프로세스 상태를 모니터링 할 수 있습니다. 치명적인 단점은 반드시 ssh로 서버에 들어가서 명령어를 입력한 다음 명령어를 입력해서 쳐다봐야 한 다는 점과 모두 텍스트로 이루어져 있어 가독성이 그리 좋지는 않다는 ..

나에게 알뜰폰에 대한 인식은 사실 별로 좋지 않다. 딱히 알뜰폰을 써보고 불만이 생겼다거나 하는 것은 아니고, 이름에서 오는 거부감이 있다. 이게 공모전같은걸로 이름을 받아서 선정한거라는데, 개인적으로 이름만 보고서는 뭔가 기존 통신사에 비해 속도가 느린 대신 요금이 싼 것만 같은 느낌을 주기 때문이다. 알뜰폰이 뭘까? 참고 우리나라에서 이동통신망 사업자를 불러보라면, 백이면 백 SKT/KT/LG를 떠올릴 것이다. 아직까지도 대부분의 사람들이 가입된 곳이기도 하고. 그런데 피쳐폰때는 덜 느껴졌겠지만, 3G/4G/5G로 넘어오면서 가계 요금제 부담이 극심해지기 시작했다 (4인 가족 기준 한달 통신비로만 10~20만원이 나간다) 아마 대부분의 사람들은 3~5만원 정도의 요금제를 사용하고 있을 것이다. 이런 ..

Routing을 위해 component에 컴포넌트를 집어넣을 때, 보통은 아랫쪽처럼 하지만 뭔갈 더 집어넣어서 라우팅하기 위해 위와 같은 방법으로 컴포넌트를 만든 후, 리턴하게끔 해서 사용했었다. 그런데, 위의 방법은 문제가 있다. 아래쪽 방법으로 사용하면, 이 컴포넌트의 부모 컴포넌트가 업데이트되어도 Lol쪽은 언마운트되지 않지만, 위쪽 방법으로 사용하면 기존에 있던 와 새로 리턴되는 를 다른 인스턴스로 판단하여, 기존의 를 언마운트하고, 새로운 를 마운트한다. 간단히 말해서, 부모 컴포넌트가 업데이트 될 때마다 라우트의 컴포넌트를 새로 만든다는 뜻이다. 만약 위와 같은 방법을 사용한다면, 해당 컴포넌트의 업데이트 관련 라이프사이클을 만져주는 식으로 의도하지 않는 언마운트/마운트를 막아주어야 한다. 안..

network reqeust를 아주아주 편하게 만들어주는 작고 직관적인 라이브러리인 axios에 대해 알아보자. 설명하기에 앞서, 만약 당신이 제이쿼리를 사용하고 있고 제이쿼리에서 사용하는 기능이 쿼리셀렉트(ex: $("#test") )와 네트워크 통신(ex: $.get(...))뿐이라면 쿼리셀렉트를 기본 API로 변경하고 네트워크 부분은 axios로 교체하는 것을 추천한다. (왜냐면 compress되었다 하더라도 제이쿼리자체가 파오후라 어쩔 수 없이 로딩이 좀 걸린다) 실전압축으로다가 빠르게 알아보자. Installation 을 삽입하거나 npm을 사용중이라면 터미널에 yarn add axios를 사용해 설치하자. Axios를 사용해보자 많고많은 함수들이 구현되어 있지만, 딱 하나만 잘 써도 단물 다 ..

두 개념 모두 비동기적인 작업을 좀더 직관적이고 편리하게 진행하기 위해 탄생한 개념이다. 아주아주 빠르게 실전압축으로다가 알아보자. Promise는 무엇인가? es6에서 처음 등장한 개념이다. Promise는 pending(작동 중), fulfilled(성공적으로 완료), reject(실패)의 세 상태를 가진다. 미리 정의된 상태를 통해 비동기적인 작업을 쉽게 다룰 수 있다. new Promise((resolve, reject)=>{ //... }); 와 같이 선언한다. (resolve, reject)=>{ ... } 에는 프로미스로 진행할 작업 내용을 정의하고, 성공 시 resolve( [전달하고싶은 값] ); 을 호출하고, reject( [전달하고 싶은 값;주로 에러 정보] )를 호출한다. resol..

2020년이 되었습니다. 2019년에 내가 무엇을 이루었는지 돌아보려 합니다. 1. 가장 애착이 가는 앱, 사이퍼즈 서포터 2018년 7월에 인턴 생활을 하며 짬짬이 제작하던 앱, 사이퍼즈 서포터는 제가 좋아하는 게임인 사이퍼즈가 타 인기게임보다 정보를 얻을 수 있는 공간이 없다고 판단하여 만든 앱 입니다. 2019년에는 2.x버전으로 올려서, 디자인/속도/기능 등 많은 방면에서 고민하며 사용자 경험을 극대화시키기 위해 많이 노력했습니다. 프로그램 제작 부분은 모두 혼자 담당하기 때문에(서버, 웹, 앱), 알아야 할 것이 매일같이 늘어갔습니다. 물론 저도 사람인지라 정말 하기 싫을때도 많았지만, 참고 열심히 배우다보니 정말 많은 지식이 쌓였습니다. 단적으로, 앱에서는 '패키지' 개념을 잘 활용하지 않아서..

요번에 정부과제를 하면서 IOS프로그래밍을 건들 일이 있어서 맥북을 한대 구매했다. 평생을 윈도우만 쓰면서 살았던 나한테는 꽤나 혼란스러웠지만 (물론 서버쪽 건드릴때는 우분투도 쓰긴 했다) 쓴지 5달정도 되어가는 지금은 많이 적응이 되서 이제 그럭저럭 쓸만하다. 그래서 간단하게 두 OS를 비교해보려 한다. 둘 중에 고민하는 사용자가 있다면, 도움이 되었으면 좋겠다. 단, 맥에서만 돌아가는 프로그램이 필요하다면, 또는 그 반대라면 이 글을 읽을 필요 없이 그걸 사면 된다. (애초에 선택지가 없는거지만...) 맥의 장점 내가 생각하는 맥의 최고의 장점, 화면 쓸어넘기기 기능이다. 비유하자면, 모니터 여러대를 가상으로 만들고, 쓸어넘기는 것으로 모니터를 전환하는 것 같은 느낌이다. 풀사이즈로 볼 수 있어서 몰..

한 1년가량 Digital Ocean을 사용했으나, 여러가지 문제가 있어서 아마존으로 옮기게 되었다. 사실 성능 하나때문에 옮긴 것은 아니다. 이 서버에 굉장히 많은 서비스들을 올려서 사용하고 있는데, 나름 잘 버텨줬기 떄문에 딱히 성능에 불만이 있지는 않다. (하루 고유 이용자 약 1500~1700명) 내가 특별히 알고리즘을 잘 짰다거나 하는건 아니고... 그래도 나름 디지털오션의 CPU성능은 좋은 편에 속하기에 개떡같은 알고리즘을 줘도 CPU 로드율이 그렇게 높지 않다. 문제는 해외, 그것도 저 먼....곳에 있는 싱가폴 리전이라는 점이다. 이게 웃긴게 어떤 시간에는 1MB/s정도가 나와주다가, 어떤 시간에는 10KB/s근처에서 빌빌거리고 있다... 안정적이지 못한 연결 품질은 사용자로부터 불쾌감을 ..

최근 외국에서 '조 티펜'이라는 사람이 강아지 구충제인 '펜벤다졸'을 섭취하여 말기암을 치료했다는 사례가 국내에 퍼지면서, 많은 암 환자들이 이 약을 구매해서 섭취하는 사례가 많다. 약국에서는 이 약이 동나는 현상까지 나타났다고 하며, 심지어는 당뇨병에도 효능이 있다는 소문이 돌아 해당 질환을 앓는 사람들 마저도 이 약을 찾고 있다. 내가 말하고 싶은 것은 '펜벤다졸은 많은 질환에 도움을 줄 수 있다'라거나 '펜벤다졸은 해당 질환에 소용이 없다'를 말하고 싶은 것이 아니다. 더구나 내 전공은 약학이나 의학이 아니기 때문에 더더욱 내가 다룰만한 분야는 아니라고 생각한다. (요즘은 유튜브에도 많은 의사, 약사들이 활동하고 있다. 해당 내용이 궁금하다면 유튜브에 펜벤다졸만 검색해도 수두룩하게 나오니 참고바람)..

안녕하세요? 상당히 오랜만의 업데이트입니다. 원래는 2.x버전에서 유지/보수만 조금씩 해줄 예정이였는데, 얼마전에 OPEN API를 공개했더라구요. 기존 API는 보여주는 정보도 적을 뿐더러, 데이터가 분산되어 있어서 속도도 느리고 받을 수 있는 정보도 극히 제한적이였지만, OPEN API는 대놓고 유저에게 '이거 써!' 하고 친절하게 준 느낌이라 바로 개발에 들어갔습니다. 현재 학부과정 4학년에 있고, 곧 취업시즌이다보니, 여기저기 많이 불려다니고 그러느라 상당히 오래 걸렸네요. 하지만, 그만큼 유용한 기능들이 많이 추가되었고, 답답했던 속도도 많이 개선되었기 때문에 분명 패치내용은 만족하실거라고 생각해요. 사족이 조금 길었는데, 이제 본론으로 돌아가겠습니다. 먼저, 3.0.3버전 기준으로 사이퍼즈 서..

ListView는 꽤 옛날에 나온 놈이라 호환성이 그렇게 좋지 못하다. 제목에서도 언급했듯이 가장 많이 문제를 일으키는 경우는 ScrollView 내부에 ListView가 존재할 때 이다. 이 경우 ListView의 전체 높이가 ListView의 하나의 목록의 높이로 잡혀서 상당히 괴이한 모양의 컴포넌트를 만들어낸다. 대안은 두 가지가 있다. 첫 번째는 ListView를 버리는 방법이다. 위의 문제를 해결하기 위해서, 그리고 성능 향상을 위해서 ListView대신 RecyclerView를 이용하는 방법이다. 이 방법은 구글에 Android RecyclerView example만 쳐도 수백개의 예제가 나오므로 설명은 생략한다. 이 방법의 단점은 매우 번거롭다는 것이다. Adapter를 갈아엎는 수준으로 만..

ScrollView를 사용해서 스크롤을 구현하고 스크롤의 시작지점이나 끝지점에 hit했을 때, 저런 물결무늬가 나오는데 UI구성에 따라서 저게 상당히 흉해 보일 때가 있다. 이걸 뭐라고 불러야 하는지도 모르겠어서 검색하기도 꽤 난감했었는데 이 effect는 overScroll 할 때 발생한다고 한다. overScroll은 눈치챘겠지만, 끝이나 시작지점에 닿았음에도 같은 방향으로 계속해서 스크롤을 시도할 때를 말한다. 단순히 ScrollView의 옵션에 overScroll= "never" 하면 사라진다.

일단, fragmentTransaction단에서 커밋조차 실패한 경우에는 논외로 한다. xml에서 인플레이션했던, transaction으로 commit했던 간에, getFragmentManager().findFragmentById() 혹은 getFragmentManager().findFragmentByTag()를 분명 일치하게 입력했는데도 null을 return 하는 경우가 있다. Fragment코드를 생성할 때, Fragment클래스를 auto import하면 (alt+enter를 이용한 경우도 마찬가지) import android.support.v4.app.Fragment; 가 자동으로 import된다. 그런데, getFragmentManager().findFragmentById() 는 (getFra..

사이퍼즈 서포터는 다음 정보를 수집합니다. 1. 오류 발생 시 오류 정보(익명)Firebase Crashlytics를 이용하여 자동으로 수집됩니다.해당 정보는 익명으로 수집됩니다. 2. 사용 정보(익명)Firebase Analytics를 이용하여 자동으로 수집됩니다.해당 정보는 익명으로 수집됩니다. 3. 광고 분석Google Admob/Google Adsense 를 이용하여 자동으로 수집됩니다.해당 정보는 익명으로 수집됩니다. 4. 코멘트/문의사항 등록 시 작성자의 IP 및 현재 머무르는 페이지 정보해당 정보는 악성 유저 차단 및 고객 지원에 사용됩니다. 이 외의 정보는 수집하지 않으며, 용도 외에 사용하지 않습니다.

()=> {...} 과 function foo(){...} 은 단순히 텍스트의 길이의 차이만 있는 것은 아니다. 해당 함수를 instance 로써 사용할 때 차이점이 드러나게 된다. this pointer의 가리키는 위치가 서로 다른데 ()=>{...} 에서 this는 자신이 속한 instance를 pointing한다.그러나 function foo(){...} 에서는 자신이 속한 object를 pointing한다 function foo1(){ this.val= 1; return { val: 2, func: function (){ console.log(this.val); } };} function foo2(){ this.val= 1; return{ val: 2, func: ()=>{ console.log(..

O 표기법 Big O 표기법이라고 읽는다. 알고리즘의 Time Complexity를 분석하는 데 가장 많이 쓰이는 표기법이다. O(g(n)) = { f(n) | 충분히 큰 n에 관해서 f(n)