안녕하세요. 개발을 뿌셔버리는 프론트엔드 개발자, Joy 입니다.
(instagram joy.crash.dev link) -> Follow me!
2022년에 블로그를 개설하고 첫 번째 포스팅을 했었고, 지금 두 번째 포스팅으로 돌아왔습니다. 생각보다 블로그 쓰는 게 쉽지 않더라구요. 저는 다시 이 기술 블로그를 작성하기 위해 개발 공부도 착실하게 하고, 블로그 계획도 하나하나 만들어 갔습니다.
첫 포스팅에서도
나와 비슷한 길을 걷는 초보 개발자들에게 선배 개발자로서 전해 줄 수 있는 이야기, 기술적 도움 또 스스로 개발자로 성장하면서 기록이 주는 배움의 기회 등 여러 가지를 기대하고 있습니다!
라고 말했었는데요. 이번에 연재할 시리즈도 제가 도움을 줄 수 있는 신입, 주니어 개발자들의 성장에 도움이 되었으면 합니다.
본격적으로 앞으로 연재하게 될 시리즈를 소개드리자면, 시리즈 제목은
“주니어 프론트엔드 개발자를 위한, 7가지 개발지식 드래곤볼 시리즈”, in English “7 Programming Topic Dragon Balls (for Junior Frontend Engineers)”
입니다.
제가 현업에서 활동하면서 실무적인 스킬이나 일 처리는 잘 되는데, 가끔 진짜 JavaScript나 TypeScript의 동작에 관련된 이론 지식이 필요할 때가 종종 있더라구요. 그런데 정확히 내가 어떤 부분을 모르는지, 어디를 공부해야 할지 몰라 헤매고 어려웠던 경험들이 있습니다. 그래서 신입, 주니어 개발자들을 위해 7가지 알고 가면 실무에 도움 되는 topic을 준비해 봤습니다.
아래 7가지 topic이 이번 “주니어 프론트엔드 개발자를 위한, 7가지 개발지식 드래곤볼 시리즈”, in English “7 Programming Topic Dragon Balls (for Junior Frontend Engineers)”에서 연재할 내용 목차입니다:
- 함수와 호이스팅: 함수 선언문과 함수 표현식의 차이, 화살표 함수 특징, 함수 호이스팅 비교
- this와 함수 호출 방식: this 바인딩 방법: 함수 호출, 메서드 호출, 생성자 호출, apply/call/bind
- 클로저: 클로저의 개념, 동작 방식, 유용한 활용 방법
- 프로미스와 비동기 프로그래밍: 프로미스의 상태와 동작, async/await 사용법
- 클래스와 상속: ES6 클래스 문법, 상속 구현, 메서드 오버라이딩
- 스프레드 문법과 구조 분해 할당: 스프레드 연산자의 사용법, 배열 및 객체 구조 분해 할당
- 브라우저의 렌더링 과정: 브라우저가 HTML, CSS, JavaScript를 파싱하고 렌더링 하는 과정
이 시리즈는 실무에 도움이 되는 주요 프론트엔드 개발 개념이기도 하고, 코딩 인터뷰에서 만나게 될 질문들이기도 합니다. 저는 간략하게 개념에 대해서 설명하고, 매 topic마다 관련한 코딩 인터뷰에서의 예상 질문, 그리고 실제 관련해서 코드를 작성하거나 코드의 맥락에서 예측되는 값을 스스로 생각해 보는 “Challenge Questions” 섹션이 모든 topic에 포함되어 있습니다. 해당 “Challenge Questions”의 답안은 다음 topic에서 제공됩니다. (예. 1장의 “Challenge Questions” 답안은 2장에서 제공됩니다)
이제 모든 준비는 끝났습니다. 저와 함께 프론트엔드 개발자로 성장의 꿈을 이룰 7가지의 개발지식 드래곤볼을 모을 준비가 되셨나요? Follow me~!
이 시리즈를 통해 많은 것을 배우고, 한 걸음 더 성장한 자신을 만나기를 기대합니다. 화이팅!
.
.
[In English]
Hello, I’m Joy, the frontend developer who crashes code!
I started this blog in 2022 and made my first post, and now I'm back with my second post. Writing a blog isn’t as easy as I thought. To prepare for this tech blog, I've been diligently studying and planning each post.
In my first post, I mentioned that
I wanted to share stories, technical help, and the benefits of keeping records as a developer.
This new series is also aimed at helping junior developers grow.
Introducing my new series: "7 Programming Topic Dragon Balls (for Junior Frontend Engineers)".
While working in the field, I often found myself needing a deeper understanding of JavaScript and TypeScript internals. I didn’t always know where to look or what to study. So, I’ve prepared 7 topics that will be useful for junior developers.
Here are the topics for the “7 Programming Topic Dragon Balls (for Junior Frontend Engineers)” series:
- Functions and Hoisting: Differences between function declarations, expressions, arrow functions, and hoisting.
- this and Function Calls: How this is bound in different contexts: function calls, method calls, constructor calls, and apply/call/bind.
- Closures: Understanding closures, how they work, and practical uses.
- Promises and Asynchronous Programming: States and workings of promises, using async/await.
- Classes and Inheritance: ES6 class syntax, implementing inheritance, method overriding.
- Spread Syntax and Destructuring: Using spread syntax, array and object destructuring.
- Browser Rendering Process: How the browser parses and renders HTML, CSS, and JavaScript.
Each topic will include explanations, interview-style questions, and “Challenge Questions” to test your understanding. Answers to the “Challenge Questions” will be provided in the following topic.
Are you ready to gather all 7 Dragon Balls of developer knowledge with me? Follow me on this journey to becoming a better frontend developer!
I hope this series helps you learn a lot and take one more step toward growth. Let’s do this!