<div id="readability-page-1" class="page"><div><blockquote>
<p>이 글은 2020년 07월 15일에 있었던 7월 우아한세미나(주니어개발자로 성장하는 우아한 방법들)를 듣고 요약한 것입니다.<br><a href="https://www.youtube.com/watch?v=Qtg5xe6B_vA">https://www.youtube.com/watch?v=Qtg5xe6B_vA</a></p>
</blockquote>
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="youtube" data-video-url="https://www.youtube.com/watch?v=Qtg5xe6B_vA" data-video-thumbnail="https://scrap.kakaocdn.net/dn/bqYf91/hyHmQOUuD7/DMsNkhzdsUFQNoxdEfWF10/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720" data-video-width="860" data-video-height="484" data-video-origin-width="860" data-video-origin-height="484" data-ke-mobilestyle="widthContent"><iframe src="https://www.youtube.com/embed/Qtg5xe6B_vA" width="860" height="484" frameborder="0" allowfullscreen="true"></iframe>
<figcaption></figcaption>
<img src="https://scrap.kakaocdn.net/dn/bqYf91/hyHmQOUuD7/DMsNkhzdsUFQNoxdEfWF10/img.jpg?width=1280&amp;height=720&amp;face=0_0_1280_720"></figure>
<h3>📌 세상은...</h3>
<ul>
<li>웹 프론트엔드 기술이 활용되는 서비스 범위가 매우 넓어지고 웹의 기술 역시 다양하고 복잡하게 발전하고 있다.</li>
<li>또한, 서비스와 제품의 기술적 요구사항도 다양해지는 중이다.</li>
<li>이런 세상에서 우리가 어떻게 대응할 것인가를 10가지로 알아본다.</li>
</ul>
<h2>✌ 1. 현장 이해하고 대응하기</h2>
<ul>
<li>첫 번째 주제인 현장을 이해하고 대응하는 것이 사실상 결론이고 가장 중요한 것이다.</li>
</ul>
<h4>🎈 현장의 세가지 특징</h4>
<ul>
<li>함께 일하기</li>
<li>분석, 개발, 테스트, 배포, 피드백, 개선</li>
<li>제품과 서비스의 <b>지속적인</b> 운영</li>
<li>product를 만들고 서비스를 만들어도 끊임없이 유지하는 것이 현장의 대표적인 특징.</li>
</ul>
<h4>🎈 여기서 발생하는 문제들</h4>
<ol>
<li>커뮤니케이션의 어려움</li>
<li>일의 순서 정리</li>
<li>다양한 제약사항</li>
<li>품질과 일정(둘은 공존하기 어려움..)</li>
<li>형상관리(여러 명이 개발 코드를 협업해서 만들 때의 어려움)</li>
<li>테스팅의 어려움(품질과 관련되어 있고 현장에서의 어려움)</li>
</ol>
<h4>❗ 요즘 채용 공고를 보면 기업에서 원하는 기술과 지식이 많고 복잡하다.</h4>
<h4>🎈 이러한 상황에서의 우리의 대응법</h4>
<ul>
<li>
<p>🔸 연습은 실전처럼하는 것이 좋다.</p>
<pre><code>기초 프로그래밍 연습 -&gt; 미니 프로젝트 -&gt; 좀더 큰 프로젝트 -&gt; 같이 할 수 있는 프로젝트</code></pre>
<p>이렇게 프로젝트를 하면서 모르는 부분을 그때 그때 찾아보자.<br>인턴경험, 알바 경험 등등<br>현장이 원하는 인재는 경력같은 주니어..</p>
</li>
</ul>
<ul>
<li>🔸 문제 해결 능력 향상
<ul>
<li>다양한 방법으로 문제를 해결해보고 스스로 회고해보기.(어떻게 해결했고, 어떻게 했는지에 대한)</li>
<li>디버깅 잘 이해하기. (오류 메시지에 대한 대응과 인지)</li>
<li>다른사람의 방법도 배우기 (페어 프로그래밍)</li>
</ul>
</li>
</ul>
<h2>✌ 2. 프로젝트를 통해서 JS 익히기</h2>
<ul>
<li>
<p>JavaScript를 익히는 것이 가장 중요하다❗</p>
</li>
<li>
<p>책과 프로젝트의 거리감을 줄이고 두 개를 병행하되, 중심은 프로젝트로 하는 것이 좋다.</p>
</li>
<li>
<p>프로젝트를 하면서 언어 책을 함께 공부하는 것도 좋은 방법이다.</p>
<p>예를 들어 이런게 prototype이구나<br>closure를 활용해서 이렇게 구현할 수 있구나.<br>let, const의 차이가 이런거 구나.</p>
</li>
<li>
<p>📌 면접에서 이론을 많이 묻는 이유는 기초지식을 충분히 알고 대응하는 개발자인지를 확인하기 위해서이다.</p>
</li>
</ul>
<h2>✌ 3. 향상된 UX를 목표로 개발하기</h2>
<ul>
<li>
<p>FE 개발자는 사용자와 접점이 된다.</p>
</li>
<li>
<p>FE 개발자의 많은 시간은 완벽한 코드보다, 사용성 향상작업이다.(성능, 매끄러움 등)</p>
</li>
<li>
<p>사용자가 쓰기에 불편함이 없는 인터랙션 개발를 해야한다.</p>
<p>애니메이션<br>좀더 빠르고 좀더 직관적인 UX 고민, 개선</p>
</li>
<li>
<p>CSS3, DOM, Event, Animation 제어, 비동기에 대한 이해</p>
</li>
<li>
<p>디바운스 쓰로틀링</p>
</li>
</ul>
<h2>✌ 4. 함께 자라기</h2>
<ul>
<li>
<p>현업은 함께 익히고 함께 고민하고 함께 만들어 간다.</p>
</li>
<li>
<p>프로젝트를 할 수준이 아니더라도 함께 학습하고, 간단한 프로젝트를 함께 만들어보고 그에 대한 피드백을 받는 것이 중요하다.</p>
</li>
<li>
<p>함께 맞춰보는 것은 피곤하지만 맞춰보는 것이 중요하다.</p>
<p>업무를 분석하고 github issue/project로 일감 만들어서 관리하기<br>PR 보내기<br>코드리뷰 하기<br>git branch 전략세워보기</p>
</li>
<li>
<p>주변에 같이 할 사람이 없으면 커뮤니티를 활용해서 사람들과 함께 해본다.</p>
<p><a href="https://cafe.naver.com/hacosa">하드코딩 하는 사람들</a></p>
</li>
<li>
<p>협업도구 슬랙과 트렐로</p>
</li>
</ul>
<h2>✌ 5. 기초는 튼튼하게</h2>
<h3>✨ 기초에서 좀더 중요한 것들은?</h3>
<h4>1️⃣ 자료구조와 알고리즘</h4>
<ul>
<li>
<p>채용단게를 뚫기 위해서는 반드시 필요 ❗</p>
</li>
<li>
<p>문제를 좀더 다양한 방법으로 풀 수 있는 능력이 생기고, 효율성을 고려하면서 구현할 수 있는 능력이 생김.</p>
</li>
<li>
<p>꾸준히 연습을 하고 지속가능한 방법을 찾는 것이 중요하다.</p>
</li>
<li>
<p>연습은 실전처럼</p>
<p>◾ 시간 재기<br>◾ 쉬운 문제 많이 풀어보기<br>◾ 같은 문제 다시 풀어보기<br>◾ 다른 사람 코드 보기</p>
</li>
</ul>
<h4>2️⃣ 네트워크</h4>
<ul>
<li>
<p>처음부터 다 보는 것보다도 HTTP 중심으로 보는 것이 중요하다.(TCP, IP를 포함해서)</p>
</li>
<li>
<p>크롬의 개발자도구의 Network 탭에 있는 항목들을 모두 다 아는 것이 좋다.</p>
</li>
<li>
<p>HTTP 관련 책(추천 책은 HTTP 완벽 가이드/ 간단하게 볼려면 그림으로보는 HTTP&amp;Network Basic) 읽기</p>
<p>HTTP는 고전 책을 봐도 좋다.</p>
</li>
<li>
<p>개발하면서 알게 되는 용어를 찾아서 공부해보기.</p>
</li>
<li>
<p>네트워크 웹 보안(XSS,CSRF,OWASP)</p>
</li>
</ul>
<h4>3️⃣ 백엔드 접해보기</h4>
<ul>
<li>
<p>우리가 어떤 일을 어떻게 접할지 모른다.</p>
<p>SSR(server-side rendering)을 위한 서버를 운영해야 한다면?</p>
</li>
<li>
<p>Node.js 중심으로 웹 애플리케이션 서버와 연동해보기</p>
<p>내가 로그인을 만들면 HTTP요청을 보내고 Request를 보내면 서버에서 어떻게 받는지, Response는 어떻게 하는지 등에 대한 이해</p>
</li>
<li>
<p>Database, OS, 클라우드(AWS, 그래도 우선순위가 낮다.) 등의 지식도 중요하다.</p>
</li>
</ul>
<p><b>📌 종합적으로 프론트앤드 개발자보다는 좋은 프로그래머로 성장하는 것이 핵심이기 때문에 기초는 꾸준히 해야한다.</b></p>
<h2>✌ 6. HTML, CSS에서 FE 엔지니어로!</h2>
<ul>
<li>
<p>Component 기반(SPA) 개발이 표준이 된 세상</p>
</li>
<li>
<p>그렇기 때문에 HTML, CSS, JS를 따로 개발하기보다 함께 개발해야 하는 시대</p>
</li>
<li>
<p>하지만, React, Vue 를 할 줄 안다고 FE 개발자가 되기 어렵다.</p>
</li>
<li>
<p>가장 중요하고 가장 먼저 해야되는 것은 <b>바닐라 자바스크립트가 중요하다!!!!</b></p>
</li>
<li>
<p>꾸미는 것을 좋아하지 않는 분들은 FE 개발자가 되는 것은 좋지 않다고 생각한다.</p>
</li>
<li>
<p>프로그래밍 사고 늘리기가 최우선이다. ❗❗❗</p>
<p>◾ JS책만 보지 말고, 무언가 만들어보기<br>◾ 조건, 반복, 함수를 활용한 호출관계, 모듈을 만드는 방법 등<br>◾ 알고리즘 문제, 쉬운 문제를 많이 그리고 꾸준히 푸는 연습이 필요하다.<br>◾ 자바스크립트 프로그래밍 연습</p>
</li>
</ul>
<h2>✌ 7. 프론트..원래 이럼?</h2>
<ul>
<li>
<p>📌 <a href="https://github.com/devJang/developer-roadmap#%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A1%9C%EB%93%9C%EB%A7%B5">프론트앤드 로드맵</a>을 보면 배워야할 것들이 너무 많다.</p>
</li>
<li>
<p>전부 다 잘하기에는 힘들기 때문에 양보다는 질이 중요하다. 그렇기 때문에 무언가를 깊이 있게 다룰 수 있는 것이 중요하다.</p>
<p>예를 들어 공부하다 모르는 부분을 만나서 그 문제에 대해서 어느정도로 깊게 파고 들었나</p>
</li>
<li>
<p>내가 하고 있는 분야를 깊게 파고 있는가?</p>
<p>◾ 피드백받고 개선하기.<br>◾ 리팩토링을 시도하고 실험했는가<br>◾ 좀더 사용성을 올리기 위해서 다양한 방법을 찾아보고 시도했는가?<br>◾ 내가 얻어낸 코드를 공유하고, 노하우를 알리거나, 오픈소스화했는가?</p>
</li>
</ul>
<h2>✌ 8. React, Vue, Angular 익히기</h2>
<ul>
<li>
<p>React, Vue, Angular같은 프레임워크는 추상화 되어있고 편리한데 internal logic(내부 논리)을 알기 어렵다.</p>
</li>
<li>
<p>모두 다 할 필요는 없다.</p>
</li>
<li>
<p>바닐라로 훈련이 충분히 된 상태에서 접근하는 것이 좋다.</p>
</li>
<li>
<p>이미 프레임워크를 다루었다면 바닐라로 프레임워크 흉내내보기</p>
</li>
<li>
<p>하나만 깊이 있게 하는 것이 중요하다.</p>
</li>
<li>
<p>특정 프레임워크 비의존적인 부분에 대한 학습이 중요하다.</p>
<p>◾ 각 프레임워크의 동작 방식<br>◾ 렌더링 원리<br>◾ 상태 관리<br>◾ 모듈 관리<br>◾ 성능에 유리한 코딩방식</p>
</li>
</ul>
<h2>✌ 9. 내가 선택한 길이 맞을까?</h2>
<ul>
<li>열심히 그리고 즐겁게 개발하고 있다면 틀린 길은 없다.</li>
<li><b>나를 믿고 전진</b>하기</li>
<li>이것저것 왔다갔다 안하기</li>
<li>피드백을 받을 수 있는 방법을 찾아보기</li>
<li>다양한 멘토와 코드리뷰(커뮤니티를 활용할 수도..)</li>
</ul>

<ul>
<li>이력서 써보기</li>
<li>면접 기회 얻어보기 (부족한 것을 피드백 받기)</li>
<li>면접 기회가 없으면 면접 스터디 같은거라도..</li>
</ul>
<h4>📌 좋은 회사를 알아볼 수 있는 tip</h4>
<ul>
<li>그회사의 채용공고가 중요</li>
<li>이전 공고와 그전 공고보자</li>
<li>그 회사의 문화</li>
<li>면접 분위기 (갑을 관계/면접자의 질문의 질)</li>
</ul>
<h4>📌 <a href="https://www.notion.so/44da2a336b864d35bd642bc62a300708">개발자 지망생을 위한 주관적 추천도서 목록</a></h4>
<figure id="og_1598792031125" contenteditable="false" data-ke-type="opengraph" data-og-type="article" data-og-title="개발자 지망생을 위한 주관적 추천도서" data-og-description="최종수정일: 2020년 7월 28일" data-og-host="www.notion.so" data-og-source-url="https://www.notion.so/44da2a336b864d35bd642bc62a300708" data-og-url="https://www.notion.so/44da2a336b864d35bd642bc62a300708" data-og-image="https://scrap.kakaocdn.net/dn/bGSCd9/hyHjTerFIg/yXTjLk3QVXdvwN3cLMuoo0/img.jpg?width=1500&amp;height=1500&amp;face=0_0_1500_1500,https://scrap.kakaocdn.net/dn/TtK48/hyHbMGzutV/YTJVS3gKvKrkjzbhdPxYY1/img.jpg?width=1500&amp;height=1500&amp;face=0_0_1500_1500"><a href="https://www.notion.so/44da2a336b864d35bd642bc62a300708" target="_blank" rel="noopener" data-source-url="https://www.notion.so/44da2a336b864d35bd642bc62a300708">

<div>
<p>개발자 지망생을 위한 주관적 추천도서</p>
<p>최종수정일: 2020년 7월 28일</p>
<p>www.notion.so</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bGSCd9/hyHjTerFIg/yXTjLk3QVXdvwN3cLMuoo0/img.jpg?width=1500&amp;height=1500&amp;face=0_0_1500_1500,https://scrap.kakaocdn.net/dn/TtK48/hyHbMGzutV/YTJVS3gKvKrkjzbhdPxYY1/img.jpg?width=1500&amp;height=1500&amp;face=0_0_1500_1500"></figure>

</div></div>

SaDevelog

Harang

이 글은 2020년 07월 15일에 있었던 7월 우아한세미나(주니어개발자로 성장하는 우아한 방법들)를 듣고 요약한 것입니다.
https://www.youtube.com/watch?v=Qtg5xe6B_vA
  세상은...
웹 프론트엔드 기술이 활용되는 서비스 범위가 매우 넓어지고 웹의 기술 역시 다양하고 복잡하게 발전하고 있다.
또한, 서비스와 제품의 기술적 요구사항도 다양해지는 중이다.
이런 세상에서 우리가 어떻게 대응할 것인가를 10가지로 알아본다.
✌ 1. 현장 이해하고 대응하기
첫 번째 주제인 현장을 이해하고 대응하는 것이 사실상 결론이고 가장 중요한 것이다.
  현장의 세가지 특징
함께 일하기
분석, 개발, 테스트, 배포, 피드백, 개선
제품과 서비스의 지속적인 운영
product를 만들고 서비스를 만들어도 끊임없이 유지하는 것이 현장의 대표적인 특징.
  여기서 발생하는 문제들
커뮤니케이션의 어려움
일의 순서 정리
다양한 제약사항
품질과 일정(둘은 공존하기 어려움..)
형상관리(여러 명이 개발 코드를 협업해서 만들 때의 어려움)
테스팅의 어려움(품질과 관련되어 있고 현장에서의 어려움)
❗ 요즘 채용 공고를 보면 기업에서 원하는 기술과 지식이 많고 복잡하다.
  이러한 상황에서의 우리의 대응법
  연습은 실전처럼하는 것이 좋다.
기초 프로그래밍 연습 -> 미니 프로젝트 -> 좀더 큰 프로젝트 -> 같이 할 수 있는 프로젝트
이렇게 프로젝트를 하면서 모르는 부분을 그때 그때 찾아보자.
인턴경험, 알바 경험 등등
현장이 원하는 인재는 경력같은 주니어..
  문제 해결 능력 향상
다양한 방법으로 문제를 해결해보고 스스로 회고해보기.(어떻게 해결했고, 어떻게 했는지에 대한)
디버깅 잘 이해하기. (오류 메시지에 대한 대응과 인지)
다른사람의 방법도 배우기 (페어 프로그래밍)
✌ 2. 프로젝트를 통해서 JS 익히기
JavaScript를 익히는 것이 가장 중요하다❗
책과 프로젝트의 거리감을 줄이고 두 개를 병행하되, 중심은 프로젝트로 하는 것이 좋다.
프로젝트를 하면서 언어 책을 함께 공부하는 것도 좋은 방법이다.
예를 들어 이런게 prototype이구나
closure를 활용해서 이렇게 구현할 수 있구나.
let, const의 차이가 이런거 구나.
  면접에서 이론을 많이 묻는 이유는 기초지식을 충분히 알고 대응하는 개발자인지를 확인하기 위해서이다.
✌ 3. 향상된 UX를 목표로 개발하기
FE 개발자는 사용자와 접점이 된다.
FE 개발자의 많은 시간은 완벽한 코드보다, 사용성 향상작업이다.(성능, 매끄러움 등)
사용자가 쓰기에 불편함이 없는 인터랙션 개발를 해야한다.
애니메이션
좀더 빠르고 좀더 직관적인 UX 고민, 개선
CSS3, DOM, Event, Animation 제어, 비동기에 대한 이해
디바운스 쓰로틀링
✌ 4. 함께 자라기
현업은 함께 익히고 함께 고민하고 함께 만들어 간다.
프로젝트를 할 수준이 아니더라도 함께 학습하고, 간단한 프로젝트를 함께 만들어보고 그에 대한 피드백을 받는 것이 중요하다.
함께 맞춰보는 것은 피곤하지만 맞춰보는 것이 중요하다.
업무를 분석하고 github issue/project로 일감 만들어서 관리하기
PR 보내기
코드리뷰 하기
git branch 전략세워보기
주변에 같이 할 사람이 없으면 커뮤니티를 활용해서 사람들과 함께 해본다.
하드코딩 하는 사람들
협업도구 슬랙과 트렐로
✌ 5. 기초는 튼튼하게
✨ 기초에서 좀더 중요한 것들은?
1️⃣ 자료구조와 알고리즘
채용단게를 뚫기 위해서는 반드시 필요 ❗
문제를 좀더 다양한 방법으로 풀 수 있는 능력이 생기고, 효율성을 고려하면서 구현할 수 있는 능력이 생김.
꾸준히 연습을 하고 지속가능한 방법을 찾는 것이 중요하다.
연습은 실전처럼
◾ 시간 재기
◾ 쉬운 문제 많이 풀어보기
◾ 같은 문제 다시 풀어보기
◾ 다른 사람 코드 보기
2️⃣ 네트워크
처음부터 다 보는 것보다도 HTTP 중심으로 보는 것이 중요하다.(TCP, IP를 포함해서)
크롬의 개발자도구의 Network 탭에 있는 항목들을 모두 다 아는 것이 좋다.
HTTP 관련 책(추천 책은 HTTP 완벽 가이드/ 간단하게 볼려면 그림으로보는 HTTP&Network Basic) 읽기
HTTP는 고전 책을 봐도 좋다.
개발하면서 알게 되는 용어를 찾아서 공부해보기.
네트워크 웹 보안(XSS,CSRF,OWASP)
3️⃣ 백엔드 접해보기
우리가 어떤 일을 어떻게 접할지 모른다.
SSR(server-side rendering)을 위한 서버를 운영해야 한다면?
Node.js 중심으로 웹 애플리케이션 서버와 연동해보기
내가 로그인을 만들면 HTTP요청을 보내고 Request를 보내면 서버에서 어떻게 받는지, Response는 어떻게 하는지 등에 대한 이해
Database, OS, 클라우드(AWS, 그래도 우선순위가 낮다.) 등의 지식도 중요하다.
  종합적으로 프론트앤드 개발자보다는 좋은 프로그래머로 성장하는 것이 핵심이기 때문에 기초는 꾸준히 해야한다.
✌ 6. HTML, CSS에서 FE 엔지니어로!
Component 기반(SPA) 개발이 표준이 된 세상
그렇기 때문에 HTML, CSS, JS를 따로 개발하기보다 함께 개발해야 하는 시대
하지만, React, Vue 를 할 줄 안다고 FE 개발자가 되기 어렵다.
가장 중요하고 가장 먼저 해야되는 것은 바닐라 자바스크립트가 중요하다!!!!
꾸미는 것을 좋아하지 않는 분들은 FE 개발자가 되는 것은 좋지 않다고 생각한다.
프로그래밍 사고 늘리기가 최우선이다. ❗❗❗
◾ JS책만 보지 말고, 무언가 만들어보기
◾ 조건, 반복, 함수를 활용한 호출관계, 모듈을 만드는 방법 등
◾ 알고리즘 문제, 쉬운 문제를 많이 그리고 꾸준히 푸는 연습이 필요하다.
◾ 자바스크립트 프로그래밍 연습
✌ 7. 프론트..원래 이럼?
  프론트앤드 로드맵을 보면 배워야할 것들이 너무 많다.
전부 다 잘하기에는 힘들기 때문에 양보다는 질이 중요하다. 그렇기 때문에 무언가를 깊이 있게 다룰 수 있는 것이 중요하다.
예를 들어 공부하다 모르는 부분을 만나서 그 문제에 대해서 어느정도로 깊게 파고 들었나
내가 하고 있는 분야를 깊게 파고 있는가?
◾ 피드백받고 개선하기.
◾ 리팩토링을 시도하고 실험했는가
◾ 좀더 사용성을 올리기 위해서 다양한 방법을 찾아보고 시도했는가?
◾ 내가 얻어낸 코드를 공유하고, 노하우를 알리거나, 오픈소스화했는가?
✌ 8. React, Vue, Angular 익히기
React, Vue, Angular같은 프레임워크는 추상화 되어있고 편리한데 internal logic(내부 논리)을 알기 어렵다.
모두 다 할 필요는 없다.
바닐라로 훈련이 충분히 된 상태에서 접근하는 것이 좋다.
이미 프레임워크를 다루었다면 바닐라로 프레임워크 흉내내보기
하나만 깊이 있게 하는 것이 중요하다.
특정 프레임워크 비의존적인 부분에 대한 학습이 중요하다.
◾ 각 프레임워크의 동작 방식
◾ 렌더링 원리
◾ 상태 관리
◾ 모듈 관리
◾ 성능에 유리한 코딩방식
✌ 9. 내가 선택한 길이 맞을까?
열심히 그리고 즐겁게 개발하고 있다면 틀린 길은 없다.
나를 믿고 전진하기
이것저것 왔다갔다 안하기
피드백을 받을 수 있는 방법을 찾아보기
다양한 멘토와 코드리뷰(커뮤니티를 활용할 수도..)
✌ 10. 나를 알아봅시다.
이력서 써보기
면접 기회 얻어보기 (부족한 것을 피드백 받기)
면접 기회가 없으면 면접 스터디 같은거라도..
  좋은 회사를 알아볼 수 있는 tip
그회사의 채용공고가 중요
이전 공고와 그전 공고보자
그 회사의 문화
면접 분위기 (갑을 관계/면접자의 질문의 질)
  개발자 지망생을 위한 주관적 추천도서 목록

2020 FrontEnd 개발자가 되기 위한 10가지 방법

댓글