파리에 사는 개발자
이은재
2019년~2022년에 프랑스의 Algolia 라는 회사에서 근무했습니다. 이 회사에 이력서를 넣은 계기와, 이사 오기까지의 과정, 그리고 여러 배운 점과 제 생각을 공유하고자 합니다. 모든 사람에게 적용될 "해외 취업 성공 비결" 같은 영상은 아닙니다. 다만 제 개인적인 경험을 자세히 풀어놓은 이 영상이 많은 분들께 좋은 힌트가 되기를 바랍니다.
Beginner
면접
学習した受講者のレビュー
受講後に得られること
フレームワークなしでJavaScriptコアのスキルを向上させる
JavaScriptのエコシステムをより深く理解する
レベルアップ！ JSの実力のコアを固めてみてください。
💡「なるのに、これはなぜなのでしょうか？」
私たちはいつもたくさんの様々なライブラリやフレームワークを使ってWeb開発をしています。ところで、正確に何がどのように戻るのか理解できない時が多いです。 JavaScriptのエコシステムは、多様な要素に複雑に絡み合っており、どのように糸口を解くのか分からないのです。
シナブロのJavaScriptは、ジュニアからミッドレベルへ、ミッドレベルからシニアへレベルアップするための足場を設けています。
「ウェブ開発は複雑すぎる」
JavaScriptの生態系が発展しつつ積み上げられた技術負債と互いに絡み合っている数多くの要素のためです。地面にヘディングして自分で学ぶこともできますが、既にそれを経験した人と真得だから座ってじっくり学ぶのも良い方法です。
「できますが、自信がありません」
使用しているフレームワークとライブラリがどのように調和して戻るのか、根本的な原理を理解できないと、マイナーなバグにもパニックしやすくなります。講義を通じて、重要なトピックをライブラリなしで直接開発し、動作原理を理解してください。
「開発実力レベルアップをしたい」
似たようなトイプロジェクトを繰り返し作れば手は早くなることがありますが、深く入るためには別の戦略が必要です。重要な概念を深く理解したら、どんな新しいフレームワークや技術が登場しても簡単に理解できる基礎知識が生まれます。
「新しいものが早すぎる」
JavaScript、特にフロントエンド陣営はまだ解決しなければならない問題が多く、様々な試みが絶えず起こっています。それで、新しいライブラリ、フレームワーク、概念が数え切れないほど注がれます。しかし、既存の問題を新しい方法で解決しようとする試みがほとんどです。
既存の問題をそのようなソリューションなしで直接解決してみると、新しく出てくるものがどのように異なって解決するかを比較し、簡単に理解できるようになります。
🙌🏻 こんにちは、イ・ウンジェです。
Daum、Kakao、Algoliaなどの会社を経て主にフロントエンド開発業務を行ってきました。現在Storyblokでフルスタック開発者として働いています。
あるスタートアップで長く働いている ある瞬間目を浮かべると、あまりにも多くが変わっていたんですよ。私は2014年から2017年末までにAngularJSを書いていましたが、2018年になってこそ見逃した多くのことを勉強し始めました。 ES6、React、Babel、…から始めて本当に終わりはありませんでした。
.jpeg?w=960)
2019年にフランスに引っ越してAlgoliaという会社に入社したのは、私に様々な概念を深く理解して働く良い機会でした。直接ぶつかり、周りの人々に聞いてみたり、全体的な絵を描いていきました。しばらく時間が経って、こういう内容がよくまとめられたコンテンツがあったらどれだけ良かったかという考えをするようになり、結局は講義にすることになりましたね。
📖コンテンツリスト（合計13時間16分）
1. DOM APIの基本
基本的なDOM APIを学び、フロントエンドフレームワークなしでどのようにHTMLを設定し、イベントを添付するかを練習します。 (1h 3m)
- innerHTML
- createElement
- appendChild
- addEventListener
2. ショッピングモールを作る
ショッピングモール商品リストとカート部分を実装してみます。目標はDOM APIを直接使用し、動的なインタラクションを実装することです。商品を買い物かごに入れて取り除く過程で、同じデータ（入れた数量）を画面上下（商品リストと買い物かご）に同時にうまく更新するように開発し、この過程でモダンなフロントエンドフレームワークがなぜ必要なのか体感してみます。 (1h 20m)
次に、実装したショッピングモール商品リストやショッピングカートをもう少し管理しやすく、デザイン、意味、役割を考慮して複数のコンポーネントに分けてリファクタリングしてみます。 (52m)
最後に、DOM要素を毎日見つけて数量を更新した方法の代わりに、データを更新すると、それに合わせて再アクティブにDOMが自然に更新されるように実装してみます。 (52m)
3. Webサーバーの基礎
Express（Express）を試して、Web サーバーの基礎を学びます。最近、VercelやNetlifyが提供するServerless Functionが簡単で快適です。そうする前に、どのようにバックエンドを設定したのかExpressで学びます。
また、viteで浮かび上がったフロントエンドがExpressサーバーに要求を送ったデータをレンダリングしてみて、その過程で経験するCORSという問題についても学びます。 (45m)
4. Arrayメソッド
さまざまな例を使用して、代表的なArrayメソッドであるfilter、map、reduceを練習します。基本的な文法は、熟知されたという仮定のもと、体力鍛練感で進めます。 (1h 18m)
5. npmライブラリの基礎
npmライブラリはどの構造を持つべきかを見て、CommonJSとESモジュールに絡み合った複雑な問題をゆっくりと理解します。そして、作業したライブラリをnpmに直接配布してみます。 (27m)
6. mini queryの作成
jQuery（ジェイクエリ）の非常に小さなサブセットを作成します。 yarn workspaceでmonorepoを構成する方法を学び、その中にライブラリー、サンプルアプリ、ドキュメントサイトまで作業することでライブラリー開発のための全体的なワークフローを体験してみます。
vitestを使ってunit test（ユニットテスト、ユニットテスト）を作成してみたり、ライブラリビルドプロセスを経て起こる状況での難しさを体験し、Tree-shakeについても調べます。 (1h 7m)
7. 映画情報サイト
映画検索サイトを作成します。結果は非常に簡単ですが、このエピソードでは非常に重要な概念を扱います。ブラウザのHistory APIを学び、それを使用してReact RouterなどのClient-Side Routingを直接実装します。 (45m)
その後、Server-Side Rendering（サーバーサイドレンダリング）をExpressサーバーに直接実装し、クライアントからそれをHydrationする部分まで実装します。ここまで終わったら、Next.jsのSSR + Hydrationのプロセスをかなり詳細に理解できるようになります。 (1h 14m)
8. 非同期練習する
Arrayメソッドの練習エピソードと同様に、非同期をよりよく扱うためにcallback、Promise、async、awaitを練習してみます。 (38m)
9. 静的ブログの作成
Jekyll、Gatsby、Next.jsなどを使って静的ウェブサイトをたくさん作っています。そのようなツールがどのように静的ウェブサイトを作成するかを見て、そのビルドプロセスをまねてみます。
この過程で、フレームワークやツールなしでNode.jsで書かれたスクリプトが、マークダウンで書かれたポストを静的ブログでビルドさせ、Vercelに配布までしてみます。 (1h 3m)
10. CLIの作成
CLI用のnpmライブラリの構造はどのようなものかを見て、直接CLIを直接作成してnpmに配布してみます。その後、 npm install -gでインストールして使用できるようになります。 (48m)
11. フォームライブラリの作成
👥受講したら
講義を購入された方は、学習者専用のDiscordチャンネルに招待されます。講義を聞くことができる質問を投稿してください。他の人が投稿した質問から学ぶこともできます。
何でも知らなくても大丈夫な空間で自由に質問して議論しながら一緒に学べるといいですね。あなたのJavaScriptの自信を高めることが最終的に最も重要な目標です。
❓ よくある質問
Q.講義でTailwind CSSを使用しますか？
ちょっとしたエピソード、「ショッピングモール作り」でTailwind CSSを使ってデザインをします。 Tailwind CSSがわからない場合は、自分で好きな方法でCSSを作成できます。もし、興味があれば、私が作った無料のビデオを参照してください。
Q. 私が聞くことができる実力でしょうか？
コック拾って言うのは難しいですが、次の項目に該当するなら受講してもいいようです。
- letとconstの違いを理解してください。
- import/exportでモジュールを扱うことができます。
- importとrequireの違いをある程度知っている。
-
const { name, address } = personこの文法を理解する。
- ReactやVue.jsを使ってデータベースなしで変数にTo-Doを保存する方法で、シンプルな機能のTo-Doアプリを作成できます。
- Reactを使用している場合は、useEffectとuseMemoをどのように使用するかをよく知っています。
- To-Doアプリを作ろうとすると、大体コンポーネントをどのように分割するか想像になる。
Q. 他の講義とどう違うのですか？
特定のプロジェクトを作ることを目指す講義が多いです。そのような講義の場合、さまざまな技術、ライブラリ、サービスなどを組み合わせて徐々に積み重ねていく過程を見せてくれます。さまざまなもの（What）とそれをどのように（How）組み合わせるかを学ぶという点で有用ですが、そんな川の特性上、Whyまで扱うのは容易ではありません。
シナブロのJavaScriptでは、特定のテーマについて以前にどのようにしていたのか、今はなぜこのようになったのか、変天使を学びながら、各アプローチの長所と短所を理解することになります。そして、フレームワークが私たちの目に見えないようにする機能を直接実装してみて、なぜそんなことをするのかがわかります。
WhatとHowを知っていることは本当に重要ですが、そこにWhyが抜けていれば、遠くへ行くのは難しいです。開発をしながら自信が不足した理由は、通常Whyの欠乏によるものです。バグが生じたときに状況を正確に理解できないので、どのように解決すべきかわからず、グーグルで得た結果を適用したところ、バグが解決されたが、それがなぜ解決されたのか理解できないので、蒸しして次に同じ状況がまた起きればどうでも心配になります。
だからWhyを正確に学ぶのは、次のレベルにアップグレードするために不可欠なプロセスです。直接ぶつかって学ぶ方法もありますが、すでにその過程を経験した人が詳しく解いて説明してくれることで学ぶのも効率的な方法です。実は、このようなミッドレベルを狙う講義は、入門者のための講義に比べて需要が少なくなければならず、こういうターゲティングの講義自体が珍しいと思います。
Q. 味見講義はありますか？
あります！本講義を見る前にプレビューしてみると、良い方法の準備運動のような内容を短い無料映像で作っておきました。 リンクでも確認可能です。
Q. 学生や就学生割引になりますか？
はい可能です。簡単な認証手続きを経た後、割引を提供します。
Q.別の質問があります！
私に電子メール、またはTwitter DMを与えてください。私がフランスに住んでおり、時差のため回答が少し遅れることがある点、予めご了承ください。
こんな方に
おすすめです
学習対象は
誰でしょう？
＆quot;なるのに、なぜこれが起こるのですか？＆quot;
"Web開発は複雑すぎます"
＆quot;できますが、自信がありません＆quot;
＆quot;開発のスキルをレベルアップしたいです。＆quot;
＆quot;新しいものがとても速く出てきます。＆quot;
前提知識、
必要でしょうか？
JavaScriptの入門者のためのコースではありません。ジュニアから中ニアへ、中ニアからシニアへ行くためのコア運動のための講座です。
622
受講生
34
受講レビュー
16
回答
4.9
講座評価
2
講座
안녕하세요. 이은재입니다. 프랑스에서 살고 있어요. 집에서 멍 때리고 냥이들 바라보는 걸 좋아하고, 저녁 식사 후에 한 시간 정도 산책하는 걸 즐깁니다. 시끄럽고 붐비는 도심이 부담돼서 파리 인근 소도시에 살고 있고, 새 구경을 좋아하고, 채소를 키우는 취미가 있어요.
좀 더 개발 관련 얘길 하자면, 2022년 11월부터 Storyblok 이라는 Headless CMS 서비스를 만드는 곳에서 개발자 유저들을 위한 extension platform 을 만들고 있어요.
2019년에 Algolia 라는 클라우드 기반의 검색 솔루션 회사에 입사하기 위해 프랑스로 이주했어요. 그 회사에서 InstantSearch 라는 오픈소스 UI 라이브러리를 만드는 일을 했어요. Vanilla JavaScript, React, Vue.js, Angular 총 네 가지 버전으로 라이브러리를 제공하기 위해 공통 로직을 따로 관리하고 각 flavor 는 최소한의 wrapper 이도록 하는 작업에 시간을 가장 많이 썼어요. 그 외에도 업무적으로 여러 오픈 소스 프로젝트에 참여했어요.
그전에는 한 스타트업에서 한국과 싱가폴에서 풀스택으로 3년 정도 일했고, 그 전에는 카카오와 다음 커뮤니케이션에서 4-5년간 주로 프론트엔드 업무를 했어요.
カリキュラム
全体
118件 ∙ (19時間 56分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
33件
4.9
33件の受講レビュー
damyo受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成그동안 봐왔던 강의와는 다른 느낌, 살짝 쉬어가는 느낌으로 편안하게 수강했습니다. 강의가 가벼웠다거나 쉬웠다는 의미는 아니에요. 예전에는 많은 지식과 기술을 때려 넣은(?) 강의가 좋기도 했지만(돈 값은 한다는 기분😁), 가끔은 따라잡기 버거울 때도 있고, 수강생들을 위한 강의인지 강사님이 아는 것을 트로피처럼 진열하고 본인의 업적을 쌓기 위함인지 헷갈리는 경우도 있었는데요. 은재님의 강의는 밸런스가 참 좋았던 것 같습니다. 적당히 넓고, 적당히 깊은 느낌이었어요. 무엇보다 공식을 암기하는 것이 아닌, 풀이하듯이 사고의 흐름을 따라가는 경험을 할 수 있어서 좋았어요. 모르고 있었지만 그냥 당연하게 생각하고 궁금해하지 않았던 것들, 중요하지 않다고 치부하고 관심도 가지지 않았던 부분들도 한번씩 언급해주셔서 다시 생각해보는 계기가 되기도 했구요. 문제를 어떻게 대하고 사고할 것인지, 그동안 나는 어떤 자세로 일했는지 되돌아봐야겠습니다. 기회가 된다면 은재님의 개발자로써의 팁(어떤 도구들을 사용하는지, 어떤 방식으로 일/협업하는지 등)도 공유해주시면 너무 좋을 것 같아요. 다음에 또 좋은 강의로 만나뵙길 기대하겠습니다. 감사합니다.
- 이은재知識共有者
와 그런 느낌 받으셨다니 너무 기쁘네요. 진짜 강의 기획하던 시점부터 "차근 차근" 한 주제씩 배워나갈 수 있으면 좋겠다고 생각했는데, 그런 느낌 받으셨다니 너무 행복합니다. 개발 도구라던가 협업 방식에 대해서도 보너스 에피소드 한번 고민해보겠습니다 😊
- Gichul Roh
受講レビュー 14
∙
平均評価 4.7
5
100% 受講後に作成강의자가 코드짜는 철학자 같습니다. 개발이란게 어떻게 보면 재밌는 일인데, 다시금 그 재미를 찾게 해주었습니다. 처음엔 강의가 단가가 좀 있어서 망설였었는데, 끝까지 1차 완강했습니다. 두세번은 봐야할 듯 합니다. 앱을 만드는 강의는 많은데 Node 환경이나 라이브러리 개발 강의어서 덕분에 관련 개발환경들의 이해도가 높아졌습니다. 다음 강의도 기대하겠습니다. 멀리서 건승하시기 바랍니다. 끝으로 섹션12 정적블로그 만들기 Deployment 영상에 1분 남짓 blackout 나는 부분 있습니다.
- 이은재知識共有者
너무 좋은 평가 감사합니다 😊 말씀하신 영상에 긴 공백이 있었네요. 덕분에 제거 후 다시 올렸습니다. 감사합니다!
- miho2582
受講レビュー 4
∙
平均評価 5.0
5
58% 受講後に作成평소 강사님의 SNS계정을 염탐하길 좋아하는데 강의를 소개하셔서 냉큼 커리큘럼부터 읽어봤어요. 마침 취준을 하며 바닐라 자바스크립트 기반의 프로젝트를 하던 시기였는데, 프로젝트를 하면서 아직도 자바스크립트 실력이 충분하지 못하구나! 라는 생각을 많이 했거든요. 라이브러리 & 프레임워크에서 편리한 기능을 자바스크립트로 어떻게 구현하는지에 대한 인사이트, 그리고 TDD나 npm 배포 등 혼자 공부하기엔 부담되는 개념을 알려주는 강의였어요. FE 를 공부하면서 막연하게 알고는 있지만 자세히 알아보려면 힘든 개념을 강사님과 함께 따라가니까 부담을 덜 수 있어서 좋았어요. 자바스크립트에서 빠르게 리액트로 넘어갔거나, 리액트로 개발을 시작했는데 막히는 부분이 있는 사람들에게 추천하고 싶은 강의예요. 이 강의는 취준하는 지금도 유용하지만 1년전... 인사이트를 마구 갈망했던 시기의 저에게 보여줬다면 박수를 치면서 봤을 강의라고 생각해요. 디스코드가 따로 개설되어서 수강자들을 관리해주시는 점과, 취준생 할인코드를 배포해주시는 점까지 여러모로 사려 깊은 강사분이세요! 추천합니다! (그리고 영상 속에서 잠깐 나오는 고양이도 귀여워요. ☺️)
- 이은재知識共有者
안녕하세요. 도움이 되었다니 정말 다행이에요 🥹 좋은 말씀 너무 감사하고 취준도 잘 되시길 응원합니다!
- 이현지
受講レビュー 2
∙
平均評価 5.0
5
97% 受講後に作成3년차 주니어 개발자입니다! 강좌를 탐색하다가 마음이 가서 바로 구매 후 들어봤는데 너무 좋았습니다ㅎㅎ 회사에서는 기능 개발 위주로 하다보니 프로젝트 셋업이나 코어 JS 개념을 접하기 어려웠는데, 이렇게 다양하면서 필수적인 지식들을 다뤄주셔서 너무 유익하고 좋았습니다. JS를 이용하여, React 처럼 동작하게 하기, SSR 직접 구현하신 것도 인상깊었고, 그 외에도 번들러나 모듈 개념도 다뤄주셔서 좋았습니다. 고기를 주는게 아닌, 고기 잡는 방식을 알려주는 강좌인것 같습니다ㅎㅎ 강좌를 들으면서 수업 구성에 대해 많은 고민을 하신게 느껴졌습니다. 틈틈히 복습하겠습니다. 감사합니다~!
- 이은재知識共有者
좋은 말씀 감사합니다 😊 저도 고기가 아닌 고기 잡는 방법을 알려드리는데 초점을 최대한 둬봤는데요, 그렇게 느끼셨다니 너무 기쁘네요. 질문 생기시면 언제든 남겨주세요. 감사합니다!
￥17,658
eunjaeの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문Course Thumbnail](https://cdn.inflearn.com/public/courses/327126/cover/edca2ab2-47b4-45b7-92c6-5bb00fd125eb/327126.jpg?f=avif&w=420)
![[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습Course Thumbnail](https://cdn.inflearn.com/public/courses/330604/cover/9c8dddcb-bd3b-4f3d-93af-ea382b6835c0/thumbnail.png?f=avif&w=420)
