칼럼) “프론트엔드 개발자를 찾을 수 없는 이유”라는 칼럼 읽은 후

---

You can also think of front end as the “client side” of an application. So let's say you're a front end developer. This means your job is to code and bring to life the visual elements of a website. You'd be more focused on what the user sees when they visit a website or app.
참고: https://kenzie.snhu.edu/blog/front-end-vs-back-end-whats-the-difference/

---

   프론트엔드라는 건 웹사이트나 앱을 이용하는 유저들의 측면에서 보는 걸 말한다. 우연히 “프론트엔드 개발자를 찾을 수 없는 이유”라는 아래 링크의 칼럼을 읽게 됐고 프론트엔드 개발자가 알아야 하는 리스트 등을 알려줘서 정말 유용한 것 같다.

Why can‘t we find Front End Developers (2014)
https://github.com/0xjjpa/whycantwefindfed
(한국어 번역본은 여기서 가능하다. https://taegon.kim/archives/4810)

   웹 개발자 과정 수업을 지금까지 한 달 배우면서 HTML, CSS, Javascript를 배웠고 현재 개인 포트폴리오 웹사이트를 만들고 있다. 내가 생각하는 프론트엔드 개발이라는 건 딱 "1. 대부분의 사람들이 생각하는 프론트 엔드란"의 4개 리스트였는데 현실은 아니었다.🤣 생각보다 신경 쓸 게 정말 많다. 
   특히 "2. 프론트엔드 개발자가 실제로 하는 것"의 6번에서 나온 나온 마진, 패딩 지정하면서 최대한 깔끔하게 보이도록 만드는 데 시간이 어마어마하게 걸렸다. 기획자, 웹디자이너, UX/UI 디자이너, 프론트엔드 개발자, 백엔드 개발자 등 직업들이 왜 세부적으로 나뉘어있는지 알 것 같다.

6. Style the Web Application with proper spacings, typography, headings, face fonts, icons, margins, paddings, grids and so on.
(Web applications include online forms, shopping carts, word processors, spreadsheets, video and photo editing, file conversion, file scanning, and email programs such as Gmail, Yahoo and AOL. Popular applications include Google Apps and Microsoft 365.)

---

프론트엔드 개발자가 알아야 하는 툴 등 리스트😊

- Visual Design tools (Photoshop, Adobe, Macaw, Sketch)
- Programming Tools (IDE's, Command Line, Source Version Control, Bash scripts, Build tasks)
- Marketing (Newsletters, Campaigns, Analytics, SEO, Social Media)
- UX (animations, transitions, feedback, interfaces, visual language) 
- Content tweakes (breakpoints, avoiding orphan words, readability, colors)
(SEO means Search Engine Optimization and is the process used to optimize a website's technical configuration, content relevance and link popularity so its pages can become easily findable, more relevant and popular towards user search queries, and as a consequence, search engines rank them better.)

   단순하게 코딩만 할 줄 아는 게 아니고 웹의 작동 원리, 사용하는 언어, 다른 모든 구성 요소, 시스템, 어떻게 상호작용하는지 등을 알아야 하니까 컴퓨터 공학에 대한 지식도 필수인 것 같다. 

The fundamental mechanics of Computing and Software should always be taking into account even if you are coding in Javascript or in a browser. 

A good Front End Engineer will not only take in account the mechanics of the Web and the languages it uses, but also has experiences in all the different components, systems, and concepts than interact with it.

 

숙련된 프론트엔드 개발자가 알아야 하는 라이브러리 등 리스트😊

- Knowledge and usage of modern MVC Javascript libraries (e.g. AngularJS, EmberJS, ReactJS)
- graphic libraries (e.g. D3, SnapSVG)
- DOM manipulation libraries (e.g. jQuery, Zepto)
- lazy loading or package management libraries (e.g. RequireJS, CommonJS)
- task managers (e.g. Grunt, Gulp)
- package managers (e.g. Bower, Componentjs)
- testing (e.g. Protractor, Selenium)

 

   여러모로 프론트엔드 개발자가 해야 할 것과 지양해야 할 것을 알려주는 도움이 되는 칼럼이다. 또 기억해야 할 것은 사용자가 항상 최우선이라는 점이다. 

---

1. 대부분의 사람들이 생각하는 프론트 엔드란: 
1. What most people think Front Engineering is:

1. Taking a Photoshop file, Image, or Wireframe and making it into a webpage.
2. Sometimes design previous Photoshop file, Image or Wireframe.
3. Code Javascript, which creates animations and makes transitions inside a webpage.
4. Code HTML and CSS, which defines content and styling inside a webpage.

---

2. 프론트엔드 개발자가 실제로 하는 것:
2. What Front End Engineers actually do:

1. Establish a visual language between Designers and Engineers
2. From a Visual Design, define a set of components that represent content, brand, features, etc.
3. Establish a baseline for the Web Application in terms of conventions, frameworks, requirements, visual languages and specs.
4. Define the scope of the Web Application in terms of devices, browsers, screens, animations.
5. Develop a Quality Assurance guideline to ensure brand fidelity, code quality, review of product by stakeholders.
6. Style the Web Application with proper spacings, typography, headings, face fonts, icons, margins, paddings, grids and so on.
7. Style the Web Application with multiple resolution images, device oriented mockups, all while taking care of design guidelines.
8. Markup the Web Application taking into account semantics, accessibility, SEO, schemas and microformats.
9. Connect to an API to retrieve information in a friendly, non-battery consuming, device and client aware way.
10. Develop client side code to perform smooth animations, transitions, lazy loading, interactions, application workflows, most of the time taking into consideration progressive enhancement and backwards compatible standards.
11. Ensure Backend connections are secure, taking Cross Origin Resource Sharing (CORS) procedures into account, protect against Cross Site Scripting (XSS) and Cross Site Request Forgery (CSRF).
12. Never forgetting that despite strict deadlines, stakeholders requests, and device limitations, the User is, and will always be first.

In order to achieve aforementioned goals, Front End Engineers use many tools that range from
Visual Design tools (Photoshop, Adobe, Macaw, Sketch),
to Programming Tools (IDE's, Command Line, Source Version Control, Bash scripts, Build tasks).
Sometimes we even have to take care of Marketing (Newsletters, Campaigns, Analytics, SEO, Social Media),
UX (animations, transitions, feedback, interfaces, visual language)
to Content tweakes (breakpoints, avoiding orphan words, readability, colors).

---

3. 안 좋은 프론트엔드 엔지니어링이란 (그래서 실제 프론트엔드 개발자에게 안 좋은 영향을 주는 것):
3. What bad Front End Engineerings do (and thus hurting real Front End Engineers):

1. Abuse of Javascript Libraries, since they don't really know the internals of Javascript (e.g. jQuery for everything).
2. Abuse of Javascript Plugins, using other people's code without been able to even read it (e.g.  jQuery.doParallaxPls.js).
3. Add to Web Application CSS Frameworks (Bootstrap, Foundation, Skeleton) while using 5% of the CSS/JS, without seeing any requirements, designs, or performing any kind of comparison/evaluation.
4. Feed the idea that just because you add CSS Framework, a site is “Responsive”, or that responsiveness is some sort of spice you can just sprinkle into a Web Application at any time.
5. Talking about “Responsive Web Design”, but being unaware of Server side techniques
6. Coding CSS without conventions, preprocessors, naming standards, good practices, and at the same time writing CSS with over qualified selectors, ids, magic numbers, !important.
7. Ignoring performance, memory leaks (not knowing what's a memory leak _really _is), failing to audit their code or measure it.
8. Presenting a product without any kind of metrics, or the metrics being “It works on my Computer/Browser/Device”™
9. Pretty much creating Software while Ignoring 30 years of Software Engineering.

---

Most of the time you want a **Computer Science **guy or girl that **then decided to work with Front End Engineering. **It's not a requirement to have a CS background to be a good Front End Engineer, **but the fundamental mechanics of Computing and Software should always be taking into account even if you are coding in Javascript or in a browser. **Good Front End Engineers know that the web is probably one of the most powerful platforms and environments that exists, and as such, the code that is executed there, must be developed with the same care (or even more) than any other language in any other virtual machine or runtime.

A good Front End Engineer will not only take in account the mechanics of the Web and the languages it uses, but also has experiences in all the different components, systems, and concepts than interact with it. Here's a few things that an experienced Front End Engineer should know or do on top of just the normal Front End Engineering tasks:

4. 숙련된 프론트엔드 개발자가 알아야 하는 것과 일반적인 프론트엔드 개발자보다 더 알아야 하는 것 (힌트: 당신이 고용하고 싶은 이들을 말한다.) 
4. What experienced Front End Engineers need to know and do on top of good Front End Engineers **** (hint: this are the ones you want to hire):

1. DNS Resolution, usage of Content Delivery Networks (CDN), and performance on multiple Hostnames as part of resources requests.
2. HTTP Headers (Expires, Cache-Control, If-Modified-Since)
3. All rules from Steve Souders (High Performance Websites)
4. How to solve all problems showed by PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline.
5. When to leverage tasks to the server and when to the client.
6. Usage of cache, pre-fetching and post-load techniques
7. Native Javascript, knowing when to do something from scratch and when to look up for someone else code, and at the same time being able to evaluate the pros and cons of doing so.
8. Knowledge and usage of modern MVC Javascript libraries (e.g. AngularJS, EmberJS, ReactJS), graphic libraries (e.g. D3, SnapSVG), DOM manipulation libraries (e.g. jQuery, Zepto), lazy loading or package management libraries (e.g. RequireJS, CommonJS), task managers (e.g. Grunt, Gulp), package managers (e.g. Bower, Componentjs) and testing (e.g. Protractor, Selenium).
9. Image Formats, benefits, when to use which one and how, Image Optimisation techniques, and loading strategies (sprites, lazy loading techniques, cache flushing, PNG interlaced)
10. Knowledge and usage of CSS Standards, modern conventions and strategies (e.g. BEM, SMACSS, OOCSS)
11. The Computer Science of Javascript (memory management, single threaded nature, garbage collector algorithms, timeouts, scoping, hoisting, patterns)

---