파리에 사는 개발자
이은재
2019년~2022년에 프랑스의 Algolia 라는 회사에서 근무했습니다. 이 회사에 이력서를 넣은 계기와, 이사 오기까지의 과정, 그리고 여러 배운 점과 제 생각을 공유하고자 합니다. 모든 사람에게 적용될 "해외 취업 성공 비결" 같은 영상은 아닙니다. 다만 제 개인적인 경험을 자세히 풀어놓은 이 영상이 많은 분들께 좋은 힌트가 되기를 바랍니다.
Beginner
면접
BEST
Sinabro Javascript
Build a solid foundation and confidence by developing a variety of topics from scratch with JavaScript.
Reviews from Early Learners
What you will learn!
Developing Core JavaScript Skills Without a Framework
Understanding the JavaScript ecosystem more deeply
Level Up! Build your core JS skills.
💡 “It works, but why does it work?”
We always use a variety of libraries and frameworks for web development, but often times, it's hard to understand exactly what's going on. The JavaScript ecosystem is so complex and intertwined with so many different elements that it can be hard to unravel the mystery.
Sinabro JavaScript provides a stepping stone to level up from junior to mid-level, and from mid-level to senior .
“Web development is too complicated.”
This is because of the technical debt and the numerous intertwined elements that have accumulated over the evolution of the JavaScript ecosystem. While you can dive in and learn on your own, it's also a good idea to sit down and learn slowly with someone who's already been there .
“I can do it, but I don’t have the confidence.”
If you don't understand the fundamental principles of how the frameworks and libraries you use work together, it's easy to panic over even minor bugs. This lecture will teach you how important topics work by developing without libraries .
“I want to level up my development skills.”
Repeating similar toy projects might make you faster, but diving deeper requires a different strategy. Once you deeply understand the core concepts, you'll have a foundational understanding that will allow you to easily grasp any new frameworks or technologies that emerge.
“New things are coming out so quickly.”
JavaScript, especially the front-end, still has many issues to address, and various attempts are constantly being made. Consequently, countless new libraries, frameworks, and concepts are emerging. However, most of these are attempts to solve existing problems in new ways.
Once you've tried solving existing problems without those solutions, it becomes easier to compare and understand how new solutions solve them differently .
🙌🏻 Hello, this is Eunjae Lee.
I've worked primarily in front-end development at companies like Daum, Kakao, and Algolia. I currently work as a full-stack developer at Storyblok.
After working at a startup for a long time, I suddenly woke up to find so much had changed. I used AngularJS from 2014 to the end of 2017, but it wasn't until 2018 that I started learning all the things I'd missed. It started with ES6, React, Babel, and so on, and it was endless.
.jpeg?w=960)
Moving to France in 2019 and joining a company called Algolia was a great opportunity for me to gain a deeper understanding of various concepts and work with them. I developed a comprehensive picture by directly engaging with the concepts and asking questions to those around me. After a while, I began to think about how useful it would have been to have well-organized content on these topics , which ultimately led me to create a course.
📖 Content List (Total 13 hours 16 minutes)
1. Basics of DOM API
Learn the basic DOM API and practice structuring HTML and attaching events without a front-end framework. (1h 3m)
- innerHTML
- createElement
- appendChild
- addEventListener
2. Create a shopping mall
Let's implement a shopping mall product list and shopping cart. Our goal is to implement dynamic interactions using the DOM API directly. As products are added and removed from the shopping cart, we'll develop a system that simultaneously updates the same data (quantity) across multiple screens (the product list and shopping cart). Through this process, we'll experience the importance of a modern front-end framework. (1h 20m)
Next, we'll refactor the implemented shopping mall product list and shopping cart into several components, considering design, meaning, and role, to make them more manageable. (52m)
Finally, instead of manually searching for DOM elements and updating their quantities, let's implement a method that automatically updates the DOM reactively when data is updated. (52m)
3. Web Server Basics
Learn the fundamentals of web servers by using Express. Serverless functions offered by Vercel and Netlify are easy and convenient these days, but before those became available, we'll explore how backends were structured using Express.
We'll also learn about CORS, an issue encountered during the rendering of data from a vite-powered frontend requesting an Express server. (45m)
4. Array method
We'll practice representative Array methods like filter, map, and reduce through various examples. We assume you're familiar with basic grammar, and we'll proceed with a sense of physical training. (1 hour 18 minutes)
5. npm library basics
We'll explore the structure of an npm library, slowly delve into the complex issues surrounding CommonJS and ES Modules, and deploy our library directly to npm. (27m)
6. Create a mini query
Let's build a very small subset of jQuery. Learn how to set up a monorepo using Yarn Workspace, and experience the overall workflow for library development by working on a library, example app, and documentation site within it.
We'll write unit tests using vitest, experience the challenges that arise during the library build process, and explore Tree-Shake. (1h 7m)
7. Movie information site
Let's build a movie search site. The result is very simple, but this episode covers crucial concepts. We'll learn about the browser's History API and use it to implement client-side routing, similar to React Router. (45m)
Next, we'll implement server-side rendering directly on the Express server and hydrate it on the client. By the end of this tutorial, you'll have a fairly detailed understanding of Next.js' SSR + hydration process. (1h 14m)
8. Practice asynchronously
Similar to the Array method practice episode, we'll practice callbacks, promises, async, and await to better handle asynchrony. (38m)
9. Create a static blog
Many static websites are built using tools like Jekyll, Gatsby, and Next.js. Let's take a look at how these tools create static websites and mimic their build process.
In this process, we'll build a static blog from Markdown posts using a Node.js script, without any frameworks or tools, and deploy it to Vercel. (1h 3m)
10. Creating a CLI
Let's take a look at the structure of the npm library for CLI, create our own CLI, and deploy it to npm. After that, we'll use npm install -g It can be installed and used as (48m)
11. Creating a Form Library
👥 If you take the class
Those who purchase the course will be invited to a learner-only Discord channel . Ask any questions that arise during the course. You can also learn from the questions posted by others.
I hope we can learn together through free questions and discussions in a space where it's okay to not know anything. Ultimately, improving your confidence in JavaScript is our most important goal.
❓ Frequently Asked Questions
Q. Do you use Tailwind CSS in your lectures?
In just one episode, "Building an Online Store," I use Tailwind CSS for design. If you're unfamiliar with Tailwind CSS, you can write your own CSS in any way you like. If you're interested, you can also refer to my free video .
Q. Is this something I can listen to?
It's hard to say for sure, but if any of the following apply to you, you might want to take this course.
- Understand the difference between let and const.
- You can handle modules with import/export.
- I know the difference between import and require to some extent.
- I understand this grammar:
const { name, address } = person.
- You can create a simple to-do app using React or Vue.js by storing to-dos in variables without a database.
- If you use React, you probably know how to use useEffect and useMemo.
- If you were asked to create a To-Do app, you can roughly imagine how it would be broken down into components.
Q. How is it different from other lectures?
Many courses focus on building specific projects. These courses often show a gradual process of combining various technologies, libraries, and services. While this is useful in learning the "what" and "how" of combining various elements, it's difficult to cover the "why" part of these courses.
In Sinabro JavaScript, you'll learn the history of how certain topics were done in the past and why they're done this way today, understanding the pros and cons of each approach. And by implementing the features frameworks hide from us, you'll understand why they do what they do.
Knowing the "What" and "How" are crucial, but without the "Why," you'll struggle to get far. Lack of confidence in development often stems from a lack of "Why." When a bug occurs, you don't fully understand the situation, so you don't know how to fix it. Applying a Google search result might fix the bug, but you don't understand why. This leaves you feeling uneasy and worried about what to do if the same situation arises again.
Therefore, accurately learning the "why" is essential for upgrading to the next level. While hands-on learning is one way, learning from someone who's already been through the process and explaining it in detail is also an effective method. In fact, the demand for these mid-level courses is bound to be lower than for beginners, which is why such targeted courses are rare.
Q. Is there a trial class?
Here it is! Before watching this lecture, I've created a short, free video with some helpful warm-up exercises. You can also check it out at the link .
Q. Is there a discount for students or job seekers?
Yes, you can. We will provide you with a discount after completing a simple verification process .
Q. I have another question!
Please email me or DM me on Twitter and I'll respond. I live in France, so please understand that my replies may be delayed due to the time difference.
Recommended for
these people
Who is this course right for?
"It works, but why does it work?"
“Web development is too complicated.”
“I can do it, but I don’t have the confidence.”
“I want to level up my development skills.”
“New things are coming out so quickly.”
Need to know before starting?
This is not a course for beginners in JavaScript. This is a course for core exercises to go from junior to senior, and from junior to senior.
607
Learners
30
Reviews
15
Answers
4.9
Rating
2
Courses
안녕하세요. 이은재입니다. 프랑스에서 살고 있어요. 집에서 멍 때리고 냥이들 바라보는 걸 좋아하고, 저녁 식사 후에 한 시간 정도 산책하는 걸 즐깁니다. 시끄럽고 붐비는 도심이 부담돼서 파리 인근 소도시에 살고 있고, 새 구경을 좋아하고, 채소를 키우는 취미가 있어요.
좀 더 개발 관련 얘길 하자면, 2022년 11월부터 Storyblok 이라는 Headless CMS 서비스를 만드는 곳에서 개발자 유저들을 위한 extension platform 을 만들고 있어요.
2019년에 Algolia 라는 클라우드 기반의 검색 솔루션 회사에 입사하기 위해 프랑스로 이주했어요. 그 회사에서 InstantSearch 라는 오픈소스 UI 라이브러리를 만드는 일을 했어요. Vanilla JavaScript, React, Vue.js, Angular 총 네 가지 버전으로 라이브러리를 제공하기 위해 공통 로직을 따로 관리하고 각 flavor 는 최소한의 wrapper 이도록 하는 작업에 시간을 가장 많이 썼어요. 그 외에도 업무적으로 여러 오픈 소스 프로젝트에 참여했어요.
그전에는 한 스타트업에서 한국과 싱가폴에서 풀스택으로 3년 정도 일했고, 그 전에는 카카오와 다음 커뮤니케이션에서 4-5년간 주로 프론트엔드 업무를 했어요.
Curriculum
All
118 lectures ∙ (19hr 56min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
29 reviews
4.9
29 reviews
damyoReviews 1
∙
Average Rating 5.0
5
100% enrolled그동안 봐왔던 강의와는 다른 느낌, 살짝 쉬어가는 느낌으로 편안하게 수강했습니다. 강의가 가벼웠다거나 쉬웠다는 의미는 아니에요. 예전에는 많은 지식과 기술을 때려 넣은(?) 강의가 좋기도 했지만(돈 값은 한다는 기분😁), 가끔은 따라잡기 버거울 때도 있고, 수강생들을 위한 강의인지 강사님이 아는 것을 트로피처럼 진열하고 본인의 업적을 쌓기 위함인지 헷갈리는 경우도 있었는데요. 은재님의 강의는 밸런스가 참 좋았던 것 같습니다. 적당히 넓고, 적당히 깊은 느낌이었어요. 무엇보다 공식을 암기하는 것이 아닌, 풀이하듯이 사고의 흐름을 따라가는 경험을 할 수 있어서 좋았어요. 모르고 있었지만 그냥 당연하게 생각하고 궁금해하지 않았던 것들, 중요하지 않다고 치부하고 관심도 가지지 않았던 부분들도 한번씩 언급해주셔서 다시 생각해보는 계기가 되기도 했구요. 문제를 어떻게 대하고 사고할 것인지, 그동안 나는 어떤 자세로 일했는지 되돌아봐야겠습니다. 기회가 된다면 은재님의 개발자로써의 팁(어떤 도구들을 사용하는지, 어떤 방식으로 일/협업하는지 등)도 공유해주시면 너무 좋을 것 같아요. 다음에 또 좋은 강의로 만나뵙길 기대하겠습니다. 감사합니다.
- 이은재Instructor
와 그런 느낌 받으셨다니 너무 기쁘네요. 진짜 강의 기획하던 시점부터 "차근 차근" 한 주제씩 배워나갈 수 있으면 좋겠다고 생각했는데, 그런 느낌 받으셨다니 너무 행복합니다. 개발 도구라던가 협업 방식에 대해서도 보너스 에피소드 한번 고민해보겠습니다 😊
- Gichul Roh
Reviews 14
∙
Average Rating 4.7
5
100% enrolled강의자가 코드짜는 철학자 같습니다. 개발이란게 어떻게 보면 재밌는 일인데, 다시금 그 재미를 찾게 해주었습니다. 처음엔 강의가 단가가 좀 있어서 망설였었는데, 끝까지 1차 완강했습니다. 두세번은 봐야할 듯 합니다. 앱을 만드는 강의는 많은데 Node 환경이나 라이브러리 개발 강의어서 덕분에 관련 개발환경들의 이해도가 높아졌습니다. 다음 강의도 기대하겠습니다. 멀리서 건승하시기 바랍니다. 끝으로 섹션12 정적블로그 만들기 Deployment 영상에 1분 남짓 blackout 나는 부분 있습니다.
- 이은재Instructor
너무 좋은 평가 감사합니다 😊 말씀하신 영상에 긴 공백이 있었네요. 덕분에 제거 후 다시 올렸습니다. 감사합니다!
- miho2582
Reviews 4
∙
Average Rating 5.0
5
58% enrolled평소 강사님의 SNS계정을 염탐하길 좋아하는데 강의를 소개하셔서 냉큼 커리큘럼부터 읽어봤어요. 마침 취준을 하며 바닐라 자바스크립트 기반의 프로젝트를 하던 시기였는데, 프로젝트를 하면서 아직도 자바스크립트 실력이 충분하지 못하구나! 라는 생각을 많이 했거든요. 라이브러리 & 프레임워크에서 편리한 기능을 자바스크립트로 어떻게 구현하는지에 대한 인사이트, 그리고 TDD나 npm 배포 등 혼자 공부하기엔 부담되는 개념을 알려주는 강의였어요. FE 를 공부하면서 막연하게 알고는 있지만 자세히 알아보려면 힘든 개념을 강사님과 함께 따라가니까 부담을 덜 수 있어서 좋았어요. 자바스크립트에서 빠르게 리액트로 넘어갔거나, 리액트로 개발을 시작했는데 막히는 부분이 있는 사람들에게 추천하고 싶은 강의예요. 이 강의는 취준하는 지금도 유용하지만 1년전... 인사이트를 마구 갈망했던 시기의 저에게 보여줬다면 박수를 치면서 봤을 강의라고 생각해요. 디스코드가 따로 개설되어서 수강자들을 관리해주시는 점과, 취준생 할인코드를 배포해주시는 점까지 여러모로 사려 깊은 강사분이세요! 추천합니다! (그리고 영상 속에서 잠깐 나오는 고양이도 귀여워요. ☺️)
- 이은재Instructor
안녕하세요. 도움이 되었다니 정말 다행이에요 🥹 좋은 말씀 너무 감사하고 취준도 잘 되시길 응원합니다!
- 이현지
Reviews 2
∙
Average Rating 5.0
5
97% enrolled3년차 주니어 개발자입니다! 강좌를 탐색하다가 마음이 가서 바로 구매 후 들어봤는데 너무 좋았습니다ㅎㅎ 회사에서는 기능 개발 위주로 하다보니 프로젝트 셋업이나 코어 JS 개념을 접하기 어려웠는데, 이렇게 다양하면서 필수적인 지식들을 다뤄주셔서 너무 유익하고 좋았습니다. JS를 이용하여, React 처럼 동작하게 하기, SSR 직접 구현하신 것도 인상깊었고, 그 외에도 번들러나 모듈 개념도 다뤄주셔서 좋았습니다. 고기를 주는게 아닌, 고기 잡는 방식을 알려주는 강좌인것 같습니다ㅎㅎ 강좌를 들으면서 수업 구성에 대해 많은 고민을 하신게 느껴졌습니다. 틈틈히 복습하겠습니다. 감사합니다~!
- 이은재Instructor
좋은 말씀 감사합니다 😊 저도 고기가 아닌 고기 잡는 방법을 알려드리는데 초점을 최대한 둬봤는데요, 그렇게 느끼셨다니 너무 기쁘네요. 질문 생기시면 언제든 남겨주세요. 감사합니다!
$110.00
eunjae's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]Course Thumbnail](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
