Wantedly インターン

3/2 – 3/4 三日間 wantedly.comっていうWeb Serviceを作ってサビス中にある会社のインターンをやりました。 wantedlyは就活サイトを基づいた会社です。この会社のインターンに申し込みした一番大きい理由はhttp://stackshare.io/wantedly/wantedlyを見ると多分日本の会社の中で一番最新の技術を使うかなって思って申し込みしました。 そんなきっかけで始めたインターンで何をやったか 1日目 1日目は 「シゴトでココロオドル サービス」についてアイディアを出ることでした。一応アイディアを出てそれを基づいてhttps://moqups.comを使ってでもを作りました。この過程は実際にWantedlyが新しいサービスを作る時使う方法です。https://moqups.comを使うとただデザインを考えることだけじゃなく実際にUI/UXを考えることも可能になるしこのアイディアが本当に使えるものかを確認できます。こんな事をやりながら1日目は終わりました。 2日目 2日目は昨日のものの発表とReactについて勉強をやり明日までWantedlyのホームページを作る課題を進みました。みんなReactについて経験がないのでWantedlyが作ったチュートリアルをやってReactを勉強しました。Reactについては検索をすると出るとすぐ出ると思いますが簡単に言うとJSが直接にHTMLをreturnするしVirtual Domを作ってJSによってHTMLを作るUI Libraryです。 こんな追加問題がありました。もちろん解答はないし自分が考えてやることでそれについてのフィドバックは3日目にもらえました。 3日目 2日目には時間がほぼなかったので2日目にだいたいやりました。適当にComponentを作るとホームページだけ作ることは簡単にできます。 追加1はreact-Routerを使うとできると思います。追加2はstatic HTMLを送るか(RESTfulにちょっと問題になりますが例外処理でやるとできます)もしくは要請を二つで分けて早く見えたいものだけ早くもらうごととかでできると思います。追加3はJSから今のwindowの大きさをわかるためwindow.innerWidthを使うしresize Eventが起きたらその値をupdateするといつもwindowの大きさを分かれるのでそれでレスポンシブを作るとできます。4番目はサーバ側でクライアントから要請が来たらそれがbotの要請か実際にuserの要請か判断して(user agent headerを使うと区別ができると思います)サーバサイドレンダリングをやるとjsonをresponseするかを決めればいいと思います。 もちろんこれは答えじゃありません。でも実際に現場にいると解決しなければならない問題です。この課題をやりながら僕はいろいろ学びました。そして実際会社でやるDemoDayに見てあとは懇親会をやって終わりになりました。 実際に感じるこのインターンの長点 率直な話では課題をやりながらReactについてよくわかりましたや僕の実力が本当に上がりました。とかはありません。だった三日実際にコーディングをやった日は二日です。そこで自分の実力がそんなに上がることはできません。そうすると何を学んだ?何がいい?と聞くとやはり普通には経験できないことを経験できることが一番いいかって思います。普通なら自分がサービスを考えてることはほぼないし(ハッカソンもありますがでない人も多いので)やはり現場の人とずっと話せるしチームで何かをやることそれが一番良かったですよね。最初でも行ったですが多分今日本で一番新しい技術を使う会社で実力が高い人たちに自分が聞きたいことをずっと聴くし、また長く話せる機会はほぼ何です。また普通勉強をするとしたら一人でやることが多いですが今回は全てチームでやるのでその経験も積めました。開発力は上がらないですがそれ以外エンジニアとして必要なものが上がるって言えます。ただの開発力だけならば一人で勉強することがいいかも知らないですがもしエンジニアになるとしたらいい機会であると思います。最後である懇親会の料理がすごいのでそれだけ見ても十分に来る理由になると思います Advertisements

Euler.net – 327- Rooms of Doom 解き方

3つの部屋は1列で自動ドアによって互いに繋がっています。 各ドアは、セキュリティ・カードにより操作されます。部屋に入るとドアが自動的に閉じ、そのセキュリティカードを再度使用することはできません。開始時、カードの数に制限を分配しますが、各部屋(出発室にも)には、スキャナが含まれており、最大3つのカードしかを持てる。各部屋には、セキュリティカードの任意の数を格納することができるボックスがあります。 単に一度部屋1を通過しようとした場合は、部屋3に入ると、あなたはすべてのカードを3枚使用しているだろうと永遠にその部屋に閉じ込められたことになります。 ただし、収納ボックスを利用する場合は、エスケープが可能です。たとえば、あなたは、あなたの最初のカードを使用して、部屋1を入力収納ボックス内の1つのカードを配置し、出発室に戻ってまた3枚のカードを得る。あなたは部屋1に入って、ボックスにあるカード1枚を得る。これで、再びカードを3枚持っていると、残りの3つのドアを通って移動することができるようになります。この方法では、合計で6セキュリティカードを使用して、すべての3つの部屋を通って移動することができます。 これは、3枚が持てるカードを最大値だとすると、123枚のカードを使ったら、6室を通って移動することが可能です。 Cは、任意の時点で実施することができるカードの最大数とします。 Rが通過する部屋の数とします。 M(C、R)は、いつでもCカードの最大値まで運ぶのR部屋を通過する必要なカードの最小数とします。 例えば、M(3,6)=123、M(4,6)= 23 そして、ΣM(C、6)= 3≤C≤4のための146。 ΣM(C、10)= 3≤C≤10のための10382。 3≤C≤40のためΣM(C、30)は? こんな問題です。 この問題はDP(Dynamic Programming)問題です。 簡単に例でM(4,6)から考えます。説明をため出発室は部屋0、1番目の部屋は部屋1などで言います。もし部屋1のボックスに部屋2〜最後の部屋まで行けるカードがあったら私たちはまた部屋0にもどらなくてもいいです。部屋2〜最後の部屋まで行くため必要なカードの数はM(4,6-1)です。(部屋1を無視するので部屋の数が1減る) M(4,6) = M(4,5) + (カードM(4,5)枚を部屋1に移すために必要なカードの数) + 1 です。(移す事が終わった後で最後の1は部屋0から部屋1まで行くため) (カードM(4,5)枚を部屋1に移すために必要なカードの数) は 簡単に計算ができます。 もしカードを最大N枚を持てるとすると、1回にカードはN-2枚移す事ができます。(2個は部屋に移動するため使うので)また実はカードをM(4,5)枚じゃなくてM(4,5)-(c-1)枚だけ移ったらいいです。(M(4,5)-(3)] / [2])回動くとカードは全部移れます。でも回数は自然数だけなのでceilを使います。ex) 3.7回 → 4回 M(4,6) = M(4,6) + 1 + 2*ceil([M(4,5)-(3)] / [2]) です。 M(c, r) = M(c,r-1) + 1  + 2*ceil([M(c,r-1)] – (c-1)] / [c-2]) です。 もし…

Euler.net – 287- Quadtree encoding 解き方

問題 quadtree encodingは(0 1)ビットのシーケンスとして2^N×2^N白黒画像を記述することができます。これらの配列は、このように左から右読みます 1番目のbitはcomplete 2^Nx2^N領域によって 「0」の時は、分割を表し: 2nの地域×2nの電流は、2N-1×2N-1次元の4つのサブ領域に分割され 次のビットは、左上、右上、左下と右下のサブ領域の説明含まれています。 「10」は、現在の領域は全部黒。 「11」は、現在の領域は全部白。 正の整数Nの場合は、以下の方式に2Nの画像×2NとしてDNを定義します。 座標を持つ画素は、X = 0、Y = 0は、左下から (X – 2^(N-1))^2 +(y – 2^(N-1))^2≤2^(2N-2)時は黒以外は白です D24を説明する最小の配列の長さは何ですか?   こんな問題です。 一応上の式が表すimageが何かわかるため これを実行します。numが3や4、5ぐらいで実行するとこの式が円ぽっいです。または(x-r)^2+(y-r)^2=r^2 この式を中学校の時みたごとがありますよね。円の中心が(r,r)半径がrの円の式です。rが2^(N-1)だと思うとこの式が円と思えます。一応この2つの方法でこの式が円とするごとがわかったらあとは簡単です。(違うかも) 上のcodeをnumが12ぐらいで実行すると時間がめっちゃかかります。大略しても4000×4000の配列をまたずっと計算するごとは無理です。24は絶大無理。この問題はこれを計算する問題じゃないと思います。そうするとうちがわかった「円」を使います。 簡単にするため円を4つの部分で分ける。左上から時計回りで1、2、3、4で呼ぶ。1だけ見るとこんな感じになります。この部分は白は全部左上で黒は全部右下にあります。これを見ると1の中ではもし一番左上が白なら全部白になるし、一番右下が黒なら全部黒になる事をわかります。例を見ると もしこんなimageがあるとします。最初は左上(1)を見ると黒じゃないし右下(4)を見ても白じゃないです。そうするとこのimageを4つで分けると左と右のimageと他の2個のimageが出ます。左のimageを見ると右下(4)が白なので全部白、右のimageは左上(1)が黒なので全部黒になる事を分かれます。これを利用するとこの問題はdivide conquer を利用して解けることをわかります。 divide_1は1の部分のimageをcompressする関数です。 divide_1(0,0,pow(2,num-1),pow(2,num-1))をすると1部分だけのcompress結果が出ます。これを利用してdivide_2,3,4を作ると結果が出ます。でもまだ計算量が多いので減るため この部分を追加、colorは変形します。 また私たちがわかりたいのは長さなので divide部分を変えます。 これを追加すると結果が出ます。(361sかかりました) このぐらいやっても早くないですが、もうちょっと出来るからって思ってやると def up(x): return int(round(x + 0.5)) def down(x): return int(round(x – 0.5)) で変えます。floatよりはintが早いです。361s → 357s 4秒減りました。 def…

만화 사이트 안드로이드 어플 #3

일단 우리는 이걸 잘 파싱을 해야한다. java에서 파싱하는 방법이나 라이브러리는 많지만 일단 나는 Jsoup라는 것을 사용하겠다. 혹시 Python의 BeautifulSoup를 안다면 Jsoup를 들었을때 어떠한 형식으로 사용하는지 바로 알 것이다. Jsoup라는 것을 검색하는 것을 추천한다(자세한 설명은 언제나 검색이다) 일단 간단하게 설명하면 jquery선택자를 통해서 파싱이 가능하게 하는 것이다(편하다) 일단 jsoup를 gradle에 추가한다. 그러면 Import 완료이다.(라이브러리는 gradle로 관리하자) 일단…

만화 사이트 안드로이드 어플 #2

일단 새프로젝트를 만듭시다. 저는 Android_Manga_Test로 했습니다. 일단 우리는 슬라이드메뉴를 넣을 예정이니 여기서 밑에서 오른쪽 2번째에 있는 Navigation Drawer 을 클릭하시고 만들어 주시면 됩니다.  그러면 간단하게 슬라이드 바가 있는 메뉴를 만들게 됩니다. 사실 요즘 필요한 대부분의 뷰는 이 프로젝트 만드는 곳에서 쉽게 알수 있습니다. 예를 들어 탭을 생각해 보죠. 옛날에는 Tab을 만들려면 탭호스트라는 것을 쓰고 되게…

만화 사이트 안드로이드 어플 #1

우리가 전에 까지 만들었던 MEAN stack으로 만드는 만화사이트 의 어떻게 보면 이어지는 내용입니다. 하지만 안보셔도 전혀 관계가 없는 이야기 이니 신경쓰지 안으셔도 됩니다(그래도 BackEnd에 관심이 있다면 읽으면서 따라하시는걸 추천해요). 그러면 우리는 다시 무슨 기능이 필요할까를 생각해야 합니다. 기능은 1개면 충분하죠. 크롤링. 왜냐구요? 우리사이트가 크롤링 하는 사이트 였으니까요. 방법은 간단합니다. 서버에 값을 요청 가져오기. 그걸 적절하게 보여주기. 끝….

Mean Stack 으로 만드는 만화 사이트 #12

일단 aws의 ID를 만들고 ubuntu 인스턴스를 만듭니다(이것들에 대한 설명은 다른곳에도 잘 나와있으니 검색하여 주시길 바랍니다) 그다음 nginx 설정. 세큐리티 설정을 해주시면 열립니다. 이런거나 , 이런글 , 특히 이글 을 참조하시면 위의 과정을 쉽게 할 수 있습니다. 그후 git을 설치후 git clone을 통해 우리의 소스코드를 가져옵니다(혹시 git을 사용하지 않았다면 지금이라도 설치하고 실행하세요. 버전관리가 편해집니다) 이제 업데이트가 있을때는 git pull을 통해 업데이트를…

Mean Stack 으로 만드는 만화 사이트 #11

이번에는 지속적인 업데이트를 하도록 만들겠습니다. 현재는 우리가 서버를 한번 킬때마다 1번 업데이트가 되는 모습입니다. 하지만 우리가 실제로 크롤링 사이트를 만들기 위해서는 지속적으로 크롤링을 하도록 만들어야 합니다. 지속적으로 크롤링을 하지만 또 무작정 너무 많이 하다보면 서버자원도 많이 들고 좋지 않기때문에 적당하게 일정주기 마다 하도록 하면 될 것 같습니다. 그러면 그러기 위한 함수 setInterval을 사용하도록 하겠습니다. 일단…

Mean Stack 으로 만드는 만화 사이트 #10

슬슬 이 강좌도 막바지로 가고 있네요. 적당히 routes/api에 maru_api.js를 추가합니다. mini_api.js를 복사한뒤 url과 find부분만 수정하면 됩니다. 이렇게 말이죠. 그 뒤 public/view 안에 있는 mini를 maru라는 폴더를 만들어서 복사합니다.(어차피 똑같기 때문이죠)그뒤 모듈명을 maru로 바꾸고, angularApp에 maru모듈을 추가, index.html에 maru.js를 추가합니다. 그뒤 mini부분을 maru로 적당히 수정. 그 다음 update부분도 적당히 수정하면 완성입니다.(링크부분도 다 적당히 바꿔주세요. 잘모르겠으면 github을…

Mean Stack 으로 만드는 만화 사이트 #9

하하하하하하하하하하하하하하…… git commit 9-1까지 썻는데 지워졌네요 하하…. 워드프레스 자동저장은 슬슬 믿을 수가 없네요…. 하…. 다시 처음 부터 쓰고 싶은데 기억이 안나요. 적당히 기억나는 것만 쓰겠습니다. 혹시 이상한 점이 있으면 말씀해주세요. 일단 우리는 marumaru.in이라는 사이트를 크롤링 하고 싶습니다.  이 만화사이트는 목록은 marumaru.in 이라는 사이트에 실제 만화를 보는 창은 http://www.mangaumaru.com/ 에 있습니다. 그런데 이 mangaumaru.com 이라는 사이트는 noscript…

Mean Stack 으로 만드는 만화 사이트 #8

나는 업데이트를 추가 할려구 한다. 물론 이미 업데이트를 볼수 있지만 무언가 접근성이 별로 인듯 하다. 접근성을 편하게 해보자. 어떻게 하면 좋을까? Material Tab 이게 괜찮아 보인다. 이걸 이용해 보자. 이걸로 zangsisi, minitoon, 마루마루(나중 추가) 3개의 만화 사이트의 업데이트를 돌아다니면 되게 좋게 될거 같다. 한번 적용해 보자. 우리는 이미 update들만의 json을 돌려주는 url을 만들었다. 그러면 일단 시도를…

Mean Stack 으로 만드는 만화 사이트 #7

#7 에서는 minitoon.net 이라는 사이트의 만화를 크롤링 해보겠다. 일반적으로 사이트의 로그인 유지는 쿠키or 세션을 쓴다. 이 부분에 대한 원리는 좋은 글들이 많으니 검색하여 알아보도록 하자. 이 사이트에서 로그인을 유지 시키는 세션은 PHPSESSID라는 쿠키이다. 이 쿠키를 지우고 새로고침을 하면 로그아웃이 되어 버린다.(쿠키를 확인하는 방법은 웹브라우저에서 개발자 도구를 켜서 resource를 보거나 또는 크롬 확장기능 중에서 editthiscookie 라는…

Mean Stack 으로 만드는 만화 사이트 #6

일단 이 만화세상이라는 부분을 바꾸고 싶다. 이부분이 현재 페이지에 맞게 동적으로 바뀌었으면 좋겠다. 이걸 하기 위해서는 Angular 의 scope 범위에 대해서 알아야 한다. 현재 우리들은 이런 식의 scope범위가 설정 되어 었다. RootScope는 언제나 모든 scope의 제일 최상위에 있는 scope이다. 우리는 항상 App이라는 controller 곳에서 사이드바나 fab이 사라지고 지워지는 작업을 해왔다. 이 AppController은 index.html의 body부분에 설정되어 있다….

Mean Stack 으로 만드는 만화 사이트 #5

오늘은 정말 뭔가 쓰기 싫지만 1일 1포스팅과 1커밋을 위해 씁니다요. 이거라도 해야지. 그러면 일단 sidebar의 버튼들을 바꾸자. 적당히 이름들을 바꾸었다. 이제 저장할때 현재 시간을 저장하기로 하자. 그러면 언제 업데이트가 됬는지 쉽게 알수 있을것 같다. 현재 시간을 저장하는 방법은 2개가 있다. 저장할때 현재 시간을 넣는 방법과, mongoose의 date의 default값을 현재시간으로 설정 하는 방법이다. 이번에는 default값으로 넣어보겠다….

Mean Stack 으로 만드는 만화 사이트 #4

벌써 #4다. 내가 이시간에 전공공부를 했으면 아마 못해도 A는 받지 않았을까 싶다. 슬슬 모든글에 헛소리가 들어가는것 같다. 착각이다. 포스팅을 다시 시작하자. 우리가 지금 가지고 있는 데이터가 무엇인지. 무엇을 만들지 다시 한번 확인하도록 하자. 현재 우리는 ManhwaList와 Manhwa를 가지고 있다. 우리가 무엇을 해야하나. 전체 ManhwaList를 보여주는 창. 특정 ManhwaList안에 있는 Manhwa들을 보여주는 창. 특정 Manhwa안에 들어있는…

Mean Stack 으로 만드는 만화 사이트 #3

벌써 #3이다. (아쓰기 싫다. 귀찮다. 아 내가 이걸 왜 쓰고 있지?) 깃헙을 참고하길 바란다. 이상한 글을 본것같지만 아마 착각일거다. 무시하고 넘어가자. #2에서 우리는 리스트를 저장하였다. 리스트에는 각각의 만화들을 저장해 보겠다. 그전에 리스트를 저장했는데 지금은 한번 실행될때 마다 계속 새롭게 저장을 해버린다. 중복저장을 피해보자. 중복저장을 검색하기 위한 방법은 2개 이다. 처음에 모든 리스트를 가지고 와서 자체적으로…

Mean Stack 으로 만드는 만화 사이트 #2

이제 우리는 핵심기능인 크롤링을 어떻게 할수 있을지 알아보자. 전체적인 코드는 깃헙을 참고하자 기본적으로 가장 유명한 cheerio를 사용할려고 한다. cheerio가 무엇인지는 검색하여 보자. 하지만 실제로 크롤링을 하면 cheerio뿐만이 아니라 request, jschardet등을 사용하여야 한다. 하지만 cheerio-httpcli 라는 라이브러리가 있다. 이 라이브러리는 전체적으로 파싱에 필요한 모든것을 알아서 처리해 준다. 그렇기 때문에cheerio-httpcli를 사용하도록 한다. 사용법은 어렵지 않다. 라고 쓴다면…

Mean Stack 으로 만드는 만화 사이트 #1

Mean Stack으로 뭐 만들까 하다가 그냥 다른 만화사이트에서 크롤링해서 그걸 보여주는 만화 사이트를 만들기로 결정. 크롤링 연습을 위해서 만드는 사이트 이기 때문에 크롤링을 제대로 해보자는 의미에서 만화블로그 3개를 크롤링해서 저장한 다음 보여주는 사이트를 하기로 한다. 첫번째는 그냥 크롤링하면 되는사이트. 2번째는 회원에게만 보여주는 사이트(크롤링을 위해 세션함께 보내주는 요청이 필요하다) 3번째는 JS로 페이지가 만들어 지는 사이트(즉 일반적인…

Google Inbox Design #8

이미 다 한뒤에 쓰는 #8 입니다. 일단 #8 에서는 하면서 제가 못했던것이나 그 외에 하고 싶었던 말들을 쓰겠습니다. Bootstrap에 대해서 이번에 저는 Bootstrap을 사용하지 않았는데요. 일단 여러가지 이유가 있습니다. 그전에 Bootstrap이 정확하게 무엇인지 부터 알아야 하는데요. Bootstrap은 간단하게 디자인 라이브러리 입니다. 이 부트스트랩은 css와 jquey로 이루어져 있지요. 일단 전에도 말했지만 angular을 쓰면서 jquery 쓰는것 좋지 않습니다….

Google Inbox Design 만들기 #7

이번에는 반응형 웹 디자인을 하도록 하자. 깃헙 google Inbox도 웹에서 핸드폰크기까지의 반응형디자인을 구현하지 않았다.(핸드폰에서 google inbox자체가 안들어 가진다. 바로 앱스토어나 플레이 스토어 등으로 넘어가서 어플설치를 권유한다. 물론 이게 맞는거다 / 여러 이유가 잇지만 어플이 있다면 무조건 어플로 넘어가게 하는게 좋다. 대부분의 이용자는 어플을 설치하라고 할 시 대부분 설치하며 또한 어플을 설치하면 훨씬더 이용률이 높게 된다….