# 프론트엔드 학습 로드맵 ## 소플 (이인제) ### 2024.01.16 ![width:300px bg right](https://cdn.markslides.ai/users/1/images/FAVn91MPf5GxJGCSXJ584) --- ![width:280px bg right:30%](https://cdn.markslides.ai/users/1/images/Vi-3db_FrGHk150qUBovO) # 발표자 소개 ## 소플 (이인제) * 개발을 사랑하는 소프트웨어 엔지니어 * 여러 회사, 스타트업, 프리랜서 등을 거쳐 현재 1인 스타트업 운영 중 * 오래 전부터 소프트웨어 교육에 관심을 가지고 꾸준히 활동 중 * [처음 만난 리액트](https://www.yes24.com/Product/Goods/123904932) 저자 * 이메일: inje@soaple.io * 웹사이트: https://www.soaple.io/ --- ### 오늘의 주제 # 프론트엔드 학습 어떻게 해야할까? 🤔 --- # 프론트엔드란? - 사용자와 직접적으로 상호작용하는 웹 인터페이스 - 사용자 경험(UX)을 담당 - 디자인, 애니메이션, 데이터 처리 등 다양한 역할 --- # 프론트엔드 vs 백엔드 - 프론트엔드 - 사용자와 직접 상호작용하는 부분 - 백엔드 - 서버와 데이터베이스와 같은 내부 시스템을 처리하는 부분 --- # 프론트엔드만 학습하면 될까? * 모든 개발 지식들은 다 연결되어 있음 * 특정 분야에 제한을 두지 않기 * 프론트엔드 학습을 하되, 그 과정에서 필요한 백엔드 지식도 함께 익히는 것이 필요 --- # 프론트엔드 학습 순서 1. HTML과 CSS 2. JavaScript 4. 라이브러리와 프레임워크 5. 상태 관리 6. 빌드 도구 7. 테스팅 도구 8. 성능 최적화 9. 웹 접근성 --- # 1. HTML과 CSS ![width:480px bg right](https://upload.wikimedia.org/wikipedia/commons/1/10/CSS3_and_HTML5_logos_and_wordmarks.svg) --- # HTML이란? - 웹 페이지를 만드는 언어 - **H**yper **T**ext **M**arkup **L**anguage의 약자 - 웹 페이지의 구조를 정의 - 텍스트, 이미지, 비디오 등의 콘텐츠를 웹에 표시 - 태그를 사용하여 웹 페이지의 요소를 정의 - CSS, JavaScript와 함께 사용하여 동적인 웹 페이지를 생성 --- # HTML 예시 코드 ```html 소플의 블로그

소플의 블로그에 오신 것을 환영합니다!

``` --- # CSS란? - 웹 페이지의 디자인 요소를 제어하는 언어 - HTML과 함께 사용하여 웹 페이지의 레이아웃과 스타일을 정의 - 색상, 폰트, 배경 이미지, 간격 등을 조정 - 웹 페이지의 반응형 디자인을 지원 - CSS3는 애니메이션, 그림자, 그라디언트 등의 기능을 제공 --- # CSS 예시 코드 ```css #header { font-size: 24px; color: white; background-color: black; } .container { width: 100%; display: flex; flex-direction: column; } ``` --- # 주요 스타일링 라이브러리 * Sass (https://sass-lang.com/) * Emotion (https://github.com/emotion-js/emotion) * styled-components (https://styled-components.com/) * Tailwind CSS (https://tailwindcss.com/) --- ![width:480px bg right](https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/768px-JavaScript-logo.png) # 2. JavaScript --- # JavaScript - 웹의 동적인 요소를 담당 - ES6+ 문법 이해 - 비동기 처리에 대한 이해 (`Promise`, `async`/`await`) --- # ES6 - ES6는 ECMAScript 6를 의미 (ECMAScript 표준의 6번째 버전) - 2015년에 릴리즈 되었기 때문에 ECMAScript 2015라고 부르기도 함. - ES6에서 arrow functions, classes, modules, and template literals 등이 추가 됨. - 대부분의 브라우저에서 지원하는 자바스크립트의 표준이라고 할 수 있음. - 현재 최신버전은 ES14 (ECMAScript 2023) --- # JavaScript 예시 코드 ```js document.getElementById("myButton").onclick = function() { alert("Hello, World!"); } ``` --- # JSX * A syntax extension to JavaScript * 자바스크립트의 확장 문법 * JavaScript + XML/HTML * JSX를 사용하면 코드가 간결해지고 가독성이 향상됨 * 프론트엔드 개발자라면 무조건 JSX를 쓴다고 생각하면 됨 --- # JSX 예시 코드 ```jsx const element =

Hello, world!

; ``` --- # 3. 라이브러리와 프레임워크 ![width:360px bg right:40%](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2300px-React-icon.svg.png) --- # 대표적인 프론트엔드 라이브러리, 프레임워크 - 라이브러리 - React.js - 프레임워크 - Vue.js, Angular.js --- # 라이브러리 vs 프레임워크 - 가장 큰 차이점은 프로그램의 흐름에 대한 제어 권한 - 라이브러리 - 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태 - 프레임워크 - 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있음 --- # 리액트 (React.js) * Meta(전 Facebook)에서 개발한 오픈소스 자바스크립트 UI 라이브러리 * 현재 전세계적으로 프론트엔드 개발에 가장 많이 사용 됨. --- # Next.js - Next.js는 React 기반의 서버 사이드 렌더링(SSR) 프레임워크 - React의 기능을 확장하여 SEO 최적화와 초기 로딩 속도 개선을 제공 - Next.js는 자동 코드 분할, 프리페칭, 캐싱 등의 기능을 제공하여 사용자 경험을 향상시킴. - 현재 React를 사용하는 기업들은 대부분 Next.js로 제품을 개발하는 추세 --- # 4. 상태 관리 ![width:360px bg right](https://cdn.worldvectorlogo.com/logos/redux.svg) --- # 상태 관리(state management)란? * 웹사이트의 규모가 커지고 수많은 상태들을 관리하게 되면서, **언제 어디서 어떻게 상태가 업데이트 되는지** 파악하기가 힘들어짐. * 계속해서 바뀌는 수많은 상태들을 체계적으로 관리하는 것 --- # 대표적인 상태 관리 라이브러리 * Redux (https://redux.js.org/) * Recoil (https://recoiljs.org/) * Zustand (https://github.com/pmndrs/zustand) * MobX (https://mobx.js.org/) --- # 상태 관리 라이브러리를 꼭 써야할까? * 하나의 상태를 여러 컴포넌트에서 접근할 일이 없다면 굳이 쓰지 않아도 됨 * 애플리케이션 규모가 커지고 복잡해지면 상태 관리 라이브러리를 쓰는 것이 좋음 * 상태의 변화를 체계적으로 디버깅 및 관리할 수 있기 때문 --- # 5. 빌드 도구 ![width:360px bg right](https://raw.githubusercontent.com/webpack/media/master/logo/icon-square-big.png) --- # 빌드(Build)란? * 웹애플리케이션을 배포하기 위해 하나의 패키지로 묶는 과정 * 빌드 과정에서 모듈 번들링(Bundling), 트랜스파일링(Transpiling) 등이 일어나게 됨. * 빌드의 결과물을 서버에 올리는 과정을 **배포(Deployment)** 라고 함. --- # 번들링(Bundling) - 번들링은 여러 개의 파일을 하나로 묶는 것을 의미 - 주로 웹 개발에서 사용 됨 - 여러 개의 CSS, JavaScript, 이미지 등의 파일을 하나의 번들 파일로 생성 - 번들링을 통해 파일의 크기를 줄이고, 웹 페이지의 로딩 속도를 향상시킬 수 있음 - 번들링 도구로는 Webpack, Parcel, Rollup 등이 있음 - 번들링은 모듈 시스템을 사용하는 프로그래밍 언어에서 특히 유용하게 사용 됨 --- # Webpack - 모듈 번들러 - 자바스크립트, CSS, 이미지 등 모든 종류의 파일을 모듈로 취급 - 의존성 관리 및 번들링을 통해 최적화된 파일 생성 - 개발 및 배포 단계에서 사용 가능 --- # 트랜스파일링(Transpiling = Translate + Compile) * 소스 코드를 한 프로그래밍 언어에서 다른 언어로 변환하는 과정 * source-to-source compilers * 주로 최신 버전의 언어로 작성된 코드를 이전 버전에서도 실행할 수 있도록 변환하는데 사용 * ES6 코드를 ES5 코드로 변환하는데 사용 * 코드의 호환성을 유지하면서 개발자들이 최신 언어의 기능을 사용할 수 있도록 도와줌 * 자동화된 도구를 사용하여 수행되며, 개발자가 직접 코드를 수정할 필요가 없음 --- # Babel - JavaScript 컴파일러 - ES6+ 코드를 이전 버전의 JavaScript로 변환 - 다양한 브라우저와 환경에서 호환성 보장 --- # ESLint - 정적 코드 분석 도구 - 자바스크립트 코드의 오류, 버그, 스타일 문제 등을 찾아주는 도구 - 커스터마이징 가능한 규칙 세트를 제공 - 개발자들이 일관된 코드 스타일을 유지하고 품질을 향상시킬 수 있도록 도와줌 --- # 6. 테스팅 도구 ![width:360px bg right](https://miro.medium.com/v2/resize:fit:600/1*i37IyHf6vnhqWIA9osxU3w.png) --- # 테스팅이란? - 소프트웨어의 정확성, 완전성, 보안성을 검증하는 과정 - 버그나 오류, 문제점을 찾아내어 수정하기 위한 목적 - 소프트웨어 개발 과정의 중요한 부분으로, 품질 향상에 크게 기여 - 다양한 테스팅 방법론과 도구가 있으며, 상황에 따라 적절한 테스팅 방법을 선택하여 사용 --- # 단위 테스트 (Unit Test) - 소프트웨어의 가장 작은 단위를 테스트하는 방법 - 이는 개별 함수, 메소드, 클래스, 모듈 등을 대상으로 함 - 단위 테스트의 목적은 개별 컴포넌트가 예상대로 작동하는지 확인하는 것 - 이를 통해 버그를 빠르게 찾아 수정할 수 있음 - 단위 테스트는 코드의 품질을 향상시키고, 리팩토링을 안전하게 수행할 수 있게 도와줌 --- # JavaScript의 대표적인 단위 테스트 라이브러리 * Jest (https://jestjs.io/) * Mocha (https://mochajs.org/) --- # UI 테스트 * 실제 화면에서 기능들이 정상적으로 작동하는지 테스트 하는 것 * 브라우저 테스트 * 대표적인 UI 테스트 도구 * Cypress (https://www.cypress.io/) * 소개 동영상: https://www.cypress.io/videos/home_page.webm --- # 7. 성능 최적화 ![width:480px bg right](https://camo.githubusercontent.com/833f8c89c65fc10380da3856d945814392fbb0156210b8538b7d12665c7a3705/687474703a2f2f7468656a616d65736b796c652e636f6d2f696d672f72656163742d6c6f616461626c652d73706c69742d62756e646c65732e706e67) --- # 성능 최적화 * 렌더링 최적화 * 불필요한 재렌더링 방지 * 번들 최적화 * 코드 스플리팅 (Code Splitting) * 하나의 컴포넌트를 여러 조각으로 쪼개는 것 * 이미지 Lazy Loading --- # 8. 웹 접근성 ![width:360px bg right](https://www.w3.org/Icons/wai) --- # 웹 접근성 (Web Accessibility) - WAI-ARIA - **W**eb **A**ccessibility **I**nitiative - 웹 접근성에 대한 표준을 만드는 기관 - **A**ccessible **R**ich **I**nternet **A**pplications - 장애를 가진 사용자가 웹 콘텐츠에 더 쉽게 접근할 수 있는 방법을 정의하는 여러가지 특성 --- # 웹 접근성을 잘 지켜야 하는 이유 * 모든 사용자의 웹 이용 * 법적 의무 * 사용자 경험 향상 * 검색 엔진 최적화(SEO) --- # 프론트엔드 학습 순서 정리 📒 ```typograms HTML/CSS => JavaScript => Libraries/Frameworks => State management => Build Tools => Testing Tools => Performance Tuning => Web Accessibility ``` --- # 그밖에 학습이 필요한 부분들 * TypeScript * Git, GitHub 사용법 * 다양한 배포 방법 (CI/CD) --- # 배워두면 좋은 라이브러리들 * 각종 UI 라이브러리 * Material UI (https://mui.com/) * Chakra UI (https://chakra-ui.com/) * shadcn/ui (https://ui.shadcn.com/) * Data Fetching & Caching * react-query (https://tanstack.com/query/) * SWR (https://swr.vercel.app/) * Storybook (https://storybook.js.org/) --- # 가장 중요한 것 ⭐️ * 꾸준히 학습하기 * 너무나 빠르게 새로운 것들이 쏟아져 나옴 * 다양한 개발 커뮤니티에 참여하기 * 실제 나만의 프로덕트를 처음부터 끝까지 **혼자** 만들어보기 --- # 개발 공부를 하는데 있어서 나에게 꼭 필요한 것은 무엇인가요? * 현직 개발자의 1:1 과외 * 공부를 하면서 잘 하고 있는건지 점검할 수 있었으면 좋겠다. > 결국 현업 개발자로부터 코드 리뷰, 멘토링 등을 받을 수 있는 기회가 필요하다는 것. --- ## 질문 1. # 프론트엔드 포트폴리오를 어떻게 만들어야 될까요? > 작은 서비스라도 아래 전체 개발 과정을 처음부터 끝까지 다 경험해보시면 좋습니다. > 환경 세팅 > 프로젝트 생성 > 코드 작성 > 테스트 및 디버깅 > 빌드 > 배포 > 운영 > 그리고 그 과정에서 발생한 문제와 그걸 어떻게 해결했는지를 잘 기록하고 정리하면 좋은 포트폴리오가 될 것입니다. > (작동하는 모습을 스크린샷이나 동영상으로 캡처해두는 것도 좋습니다.) --- ## 질문 2. # 뭘 준비하고 어떻게 공부해야 최대한 빠르게 취업할 수 있을까요? > 취업으로 가는 최대한 빠른 길을 제가 알고 있다면 꼭 알려드리고 싶습니다 😂 > 하지만 개발은 운동처럼 꾸준히 해나가면서 실력을 키워야하는 분야라고 생각합니다. > 오늘 배운 로드맵에 나와 있는 것들을 순서대로 하나씩 공부하시면 되고, 그 기간을 줄이려면 그만큼 더 시간을 투자해서 열심히 하시는게 제일 빠른 길이 아닐까 싶습니다. --- ## 질문 3. # PostCSS, SCSS, styled-components, Tailwind CSS 등 스타일 적용방식이 회사마다 다른걸로 알고있는데 어떤 방식을 선호하시나요? > 말씀해주신대로 스타일을 입히는 방식은 회사마다 천차만별입니다. > 저는 개인적으로 styled-components를 선호하지만, 다른 방식들도 어느정도 다 경험은 해보았습니다. > 한 가지 방식에 얽매이기 보다는 CSS 표준 속성들을 잘 익혀두고 각 스타일링 방식에 맞게 적용할 수 있는 능력을 키우는 것이 필요합니다. --- ## 질문 4. # 신입 기준으로 면접이나 취직해서 업무를 맡았을때 React, TypeScript, Next.js를 어느정도 숙지하고 있어야 할까요? > 최근에는 신입분들도 수준이 꽤 높아져서 간단한 웹사이트 정도는 혼자 만들수 있는 수준이 되어야 하지 않을까 싶습니다 😂 > 하지만 신입이기 때문에 아주 높은 수준을 요하지는 않고, 기초적인 부분에 대해서만 잘 숙지하고 있다면 그 이후에는 회사에서 개발을 하면서 익혀나갈 수 있다고 생각합니다. --- ## 질문 5. # 리엑트로 혼자 무엇을 만들면 프론트엔드 개발자로 일을 할 수 있을까요? > 가장 단순하게는 간단한 블로그 서비스를 만들어 보시는게 어떨까 싶습니다. > 프론트엔드, 백엔드 API 연동, 검색 엔진 최적화 (SEO) 등 단순한 블로그 서비스에도 여러가지 기술적으로 시도해볼 것들이 많습니다. --- ## 질문 6. # 프론트엔드를 공부할 때 가장 중요하다고 생각하는게 무엇인가요? > 비단 프론트엔드뿐만 아니라 모든 개발 분야에서 가장 중요한 것은 인내심과 끈기라고 생각합니다. 공부하는 과정, 기능을 구현하는 과정, 그리고 문제를 발견하고 해결해나가는 모든 과정에서 인내심과 끈기가 필요합니다. > 그리고 특별히 프론트엔드는 실제 사용자에게 보이는 부분이기 때문에 화면에 보이는 티끌을 찾아낼 수 있는 꼼꼼함이 있다면 좋습니다. --- ## 질문 7. # 어떤 언어를 가장 많이 쓰는지, 그리고 요즘 회사에서 많이 필요로 하는 언어는 무엇인지 궁금합니다. > 최근에는 프론트엔드 개발에 있어서는 TypeScript 많이 사용합니다. > 그래서 JavaScript를 학습하고 어느정도 익숙해진 이후에는 TypeScript를 무조건 학습하시는 것이 좋습니다. --- # 자유로운 질문답변 💬 --- ![width:300px bg right:38%](https://cdn.markslides.ai/users/1/images/FAVn91MPf5GxJGCSXJ584) # 감사합니다. * 소플 웹사이트 * https://www.soaple.io/ * 소플이 만든 프론트엔드 지식 포털 FrontOverflow * https://www.frontoverflow.com/