인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
로드맵 썸네일

인프랩 프론트엔드 파트 신규 합류자를 위한 로드맵

작성자 프로필 이미지

인프런 융디 ~

TypeScript
React
Next.js

초급 대상

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

25명 참여중

로드맵 코스

목적

이 로드맵은 인프랩의 프론트엔드 엔지니어로 합류하기 전 알아두면 좋은 글, 강의 등을 포함하고 있어요.

인프랩 프론트엔드 파트에서 함께 제품을 만들 때 알고 있으면 좋은 내용을 포함하고 있으니, 합류 전 어떤 기술을 다루고 어떻게 일을 하는지 파악하기 위해 많은 도움이 될 것 같으니 많은 관심 부탁드려요. 😆


미리 알아두면 좋아요!

인프랩 프론트엔드 파트는 인프런과 랠릿 유저들이 서비스를 사용하는 동안 최고의 유저 경험을 경험할 수 있도록 다양한 직군 팀원들과 소통하며 일 하고 있어요. 저희와 함께 일하기 전에 알아두면 좋은 것들을 소개할게요!


HTTP 웹 기본 지식

저희 파트는 웹 서비스를 구축하고 고도화하는 작업을 주로 담당하기 때문에 HTTP가 어떻게 동작하는지 이해하는 것이 중요해요. 특히, HTTP 상태 코드와 헤더를 잘 이해하고 캐싱 메커니즘을 효과적으로 활용할 줄 알아야 해요. 이러한 지식은 성능 최적화와 네트워크 부담을 줄이는 데 큰 도움이 돼요.


React + Typescript

저희 파트는 기존의 바닐라 자바스크립트로 구현된 레거시 코드를 React와 TypeScript를 사용한 최신 애플리케이션 코드로 이관하는 작업을 진행하고 있어요. 이 과정에서는 새로운 기술 스택 전환이 포함되므로, React와 TypeScript를 상황에 맞게 잘 활용할 수 있어야 해요. React는 컴포넌트 기반의 UI 라이브러리로, 코드의 재사용성과 유지보수성을 높이는 데 도움이 된답니다. TypeScript는 자바스크립트에 정적 타입 체계를 추가하여 코드의 안정성과 가독성을 향상시키는 도구예요. 따라서, 이 프로젝트의 성공적인 수행을 위해서는 두 기술에 대한 깊은 이해와 함께 실제 상황에서의 능숙한 사용이 필수적이예요.


디자인 시스템

저희 파트는 Mantine UI 라이브러리를 랩핑한 디자인시스템을 구축해서 모든 프로젝트에 사용하고 있어요. 디자인 시스템을 우리 팀에서 사용하는 이유는 여러 가지가 있어요. 일단 디자인 시스템은 디자인 작업을 효율적으로 만들어 줘서 시간을 절약하고 일관된 결과물을 만들 수 있게 도와줘요. 예를 들어, 우리가 만드는 제품이나 서비스의 디자인 요소들을 한 곳에 모아둔다면, 디자이너들이 매번 새로운 디자인을 시작할 때마다 일일이 새로 만들 필요가 없고, 이미 검증된 요소들을 재활용할 수 있어요. 이렇게 하면 디자인 작업이 빨라지고 팀 전체의 일관성도 유지할 수 있어요.

요약하자면, 디자인 시스템은 우리 팀이 더 효율적으로 일하고, 일관성 있게 디자인을 유지하며, 협업을 강화하며, 사용자 경험을 개선하는 데 도움을 주는 필수적인 도구라고 할 수 있어요.

더 자세한 내용이 궁금하다면https://tech.inflab.com/20240224-design-system/ 를 읽어보면 도움이 될 것 같아요!


모노레포

저희 파트는 관련된 프로젝트를 한 곳에서 관리하기 위해 모노레포를 사용하고 있어요. 덕분에 모든 팀원이 동일한 도구와 설정을 사용해서 일관된 개발 환경을 경험해요. 공통 코드나 라이브러리를 쉽게 공유하고 재사용할 수 있어서 유지보수도 훨씬 간편해요. 필요한 변경 사항을 한 번에 처리할 수 있어 의존성 관리도 쉬워지고요. 모든 프로젝트를 한 번에 빌드하고 테스트할 수 있으니까 오류를 빨리 발견하고 수정할 수 있어요. 덕분에 작업 효율성과 협업이 정말 많이 좋아졌어요. 😄 저희는 모노레포 도구로 Turborepo 를 사용하고 있어요.


기타

그 외에 인프랩 프론트엔드 파트에서는 TanStack QueryReact Hook Form, Github Actions 등을 활용하고 있습니다. 모두 파악하기 보단, 어떤 기술인지 미리 한 번 살펴본다면 적응하실 때 도움이 될 것 같아요.


마무리

웹 프론트엔드 엔지니어로 합류하기전 알아야 할 내용이 너무 많다고 느끼시나요? 너무 걱정하지 마세요. 💪 앞서 말씀드렸다시피 이 로드맵은 프론트엔드 파트가 제품을 만드는 데 관심을 갖고 있는 주제와 기본이 되는 기술을 제시하는 것이지, 모든 내용을 숙지해야 한다는 걸 의미하진 않습니다. 이렇게 함으로써 합류전 '잘 적응할 수 있을지'와 같은 걱정보다 요즘 인프랩 프론트엔드 파트는 이런 것에 관심이 있고, 이런 기술을 다루는구나' 또는 '이런 내용을 파악하면 좀 더 수월하게 적응할 수 있겠구나'와 같이 '천천히 워밍업을 하고 합류'하실 수 있지 않을까 합니다.

문서가 부담된다면 강의로, 강의가 부담된다면 문서로 대체해서 알아보는 것도 적극 권장합니다. 👍

로드맵 상세보기

11개 코스

로드맵에 포함된 외부링크 썸네일
인프런
인프랩 개발팀의 미션과 가치
안녕하세요 인프랩의 향로입니다. 최근 인프랩 팀은 적극적으로 개발자 채용을 하고 있습니다. 인프랩 채용 공고 지원하시는 분들 입장에서는 인프랩 개발팀은 어떤 것을 추구할까, 나와…
로드맵에 포함된 강의 썸네일
실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다.

33,000

44,000

로드맵에 포함된 외부링크 썸네일
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
로드맵에 포함된 도서 썸네일

저자

김용찬

출판

위키북스

요즘 프런트엔드 개발은 자바스크립트와 리액트부터 시작한다는 말이 있을 정도로 최근 몇 년간 프런트엔드 생태계에서 리액트의 비중은 날이 갈수록 커지고 있습니다.  이 책에서는 0.x 버전의 리액트부터 최신 버전인 18 버전에 이르기까지, 리액트를 둘러싼 다양한 내용을 다루고 있습니다. 리액트는 하나의 온전한 웹 프레임워크를 지향하지 않아 UI 외에 상태 관리나 서버 사이드 렌더링 등 웹 개발의 많은 영역에서 선택의 여지를 남겨뒀으며, 이 때문에 리액트 개발자

로드맵 코스 11