프론트엔드 개발자라면 알아야 할 것들

Question

ㅍ론트엔드 개발자로 취업한지 4달차가 지나가고 있는데 사실 비전공자에 좀 빠르게 취업이 성ㄷ공해서 남들에 비해 지식이 많이 뒤쳐진다고 생각하고 있습니다..혹시 프론트엔드 개발자라면 꼭 알아야 할 것들 ? 혹은 개발자라면 알아야 할것들이 있으면 알려주시면 감사하겠습니다

몰랑토끼 · Answer

cs, 프론트엔드 로드맵이 가장 기본

RWB · Answer

되게 여러가지가 있긴 한데, 본문에 FE라는 것 외에 어떠한 정보도 없기에 그냥 스탠다드한 기준으로 말씀드릴게요.React 기준이긴 하나, 몇몇 디펜던시 애들을 제외하곤 Vue나 Svelte라고 해서 크게 달라질 건 없습니다.기본Node.js기본 베이스가 되는 생태계라 알아야합니다.TypeScript개인 취향에 따라 싫어하시는 분도 있지만, 실무에선 99% 쓴다고 생각하는 편이 좋습니다.React / Next.jsReact를 쓰는 스택은 열에 아홉 Next.js를 사용합니다. SSR 렌더링에 특화된 프레임워크입니다.vite타 빌더들에 비해 퍼포먼스, 특히 속도가 월등히 빠른 빌더입니다. SSR 렌더링을 지원하려면 직접 구축해야하지만, 몇몇 회사는 메인 스택으로 사용하고 있습니다.(토스의 일부 서비스가 vite 기반으로 SSR 렌더링을 직접 구현하고 있습니다.)스타일링tailwindcssSSR 렌더링, AI가 대두되면서 중요도가 상당히 높아졌습니다.CSS / SCSS(SASS)기초적인 스타일링 문법입니다.styled-components / emotion.js (CSS-in-JS)CSR에 특화되어 있고, SSR에서는 추가 설정이 필요하거나, 예상치 못한 사이드이펙트를 유발합니다.CSS-in-JS 방식의 고질적인 퍼포먼스 문제로, 점점 우하향하는 추세입니다.npm / yarn / pnpm패키지 매니저입니다. 프론트 개발을 하게 되시면 위 셋 중 하나는 반드시 쓰게 됩니다.비교적 최근에 개발된 프로젝트라면 pnpm을 많이 쓰고있을겁니다.yarn은 추천드리지 않아요. v1은 deprecated 됐고, v2는 무슨 이상한 설정을 해줘야 하는데다, yarn v2의 PnP 방식이 기존 node_modules기반과 달라 호환이 안 되는 경우가 가끔 생깁니다.상태관리zustand / jotai현재 가장 핫한 상태관리 라이브러리입니다. 두 라이브러리 모두 같은 사람이 개발했고, 사용법이 서로 다릅니다.jotai의 경우, 후술할 recoil과 매우 유사합니다.recoil현 시점엔 deprecated 됐지만, 근 몇 년 동안 상당히 핫했던 애라, 많은 곳에서 이미 쓰고 있을겁니다.tanstack-query (구 react-query)API 상태관리 라이브러리입니다.그 밖의 주요 개념SSR / CSR / SSG / ISRDOM 렌더링 기법입니다.SSR: 서버에서 렌더링해 DOM에 뿌려주는 방식입니다. SEO에 특화되며, 동적 페이지 표현에 유리하지만, 서버가 필요합니다.CSR: 클라이언트(브라우저)에서 렌더링하여 DOM에 뿌려주는 방식입니다. 구현 방식에 따라 완전한 serverless가 가능하지만, 동적 페이지 렌더링이 불가능하며, 능동적인 SEO도 구현하기 어렵습니다.SSG: 빌드를 통해 정적 파일을 생성함으로써 완전한 serverless 운영이 가능합니다. SSR과 CSR의 장단점을 적절히 갖고 있습니다. (SEO 특화, serverless 등) 그러나 컨텐츠 변경에 따라 항상 빌드 타임이 요구됩니다.ISR: SSG를 통해 SSR의 단점을 개선한 방식입니다. 일정 시간마다 SSG 렌더링을 수행함으로써 SSR의 리소스 낭비를 해결할 수 있습니다.CORSAPI 통신하시다보면 한 번은 보게 됩니다. 프론트엔드 개발자가 조치할 수 있는 건 없지만, 그렇기에 더더욱 개념을 알아둬야 무의미한 삽질을 피할 수 있습니다.AWS케이스에 따라 다루게 될 수도 있습니다. 몰라서 나쁠건 전혀 없습니다.Docker서비스 배포 시 많이 활용합니다. Dockfile 기술 방식에 대해 간단하게 알고 있으면 좋습니다.CI / CD (Github Actions, Amplify 등)자동화 배포 프로세스를 위해 알아두셔야 하며, 이미 가시는 회사 대부분에 구축되어 있을겁니다. 대충 어떤식인지만 알아두셔도 됩니다.SEOB2C 서비스 내지는 플랫폼 개발을 하게 된다면 반드시 알아야할 요소입니다.기술이라기보단 방법 내지는 노하우에 가깝습니다.Monorepo (turborepo, nx)하나의 레포지토리에 여러 컨텍스트를 가진 서비스, 패키지 등을 통합하여 관리하는 방식입니다.공통 패키지를 두어 비슷한 여러 서비스를 분산 개발, 운영할 수 있기에 종종 사용합니다.처음 접하면 러닝커브가 좀 있을겁니다.ESLint / Prettier코드 포맷터입니다. 몇 번 써보시면 대충 아실거에요.빼먹은 것도 분명 있을건데 당장은 떠오르지 않네요.

누누나나 · Answer

React는 내부 시스템 구조 Fiber 라든가Vue는 반응형 시스템이 어떤 형식으로 동작하는지 라든가

kim · Answer

https://roadmap.sh/ 이건 어떰?

캐티 · Answer

프론트에 필수는 언어 내지는 마크업 규격이빈다. 반박시 내 말이 맞스빈다.Can i use (Can I use... Support tables for HTML5, CSS3, etc) 에 자주 들어가서 이케이케 확인하는 거를 슬데 없는거 처럼 여기는 사람들이 있었다 하더라도 사용자들이 가지고 있는 대부분에 기기에서 어디까지 되는지 아는 것은 중요한 거이고 혹여나 한 사람이라도 흘리지 아니하는 정밀함이 비로소 장인에 노력 인거를 아나요. 전공이 아니었다 하더라도 it기기를 좀 많이 가지고 사용한다 이럼 어느정도 머는 안되고 머는 된다 감이 생기는 거여서 앵간하면 개발자로서 많은 장비를 얻어보아요. (친구거를 뺏들어서 사용하거나 ..)

레어플로우 · Answer

4개월차면 가장 중요한건 기본기입니다. 프론트앤드라면 html 마크업은 물론이고 특히 유저들의 모바일 유입량이 대부분인 경우라 css 미디어쿼리에 대한 대응은 철저하게 파악해야 합니다. 요즘은 플립폰이니 폴드폰이니 다양한 디바이스가 많이 나와 각각 완벽하게 대응하는 스킬도 필수요소죠.프런트앤드는 백앤드와 비교 시 유저 접근성이 우선인 경우라 크로스브라우징도 매우 중요 합니다. iOS와 안드로이드에 따라 쓰는 코드로 여러가지구요.예를 들어 디테일하게 들어가면 프론트앤드는 iOS에서의 크롬 출력과 사파리 출력에도 차이가 있습니다. 괜히 프론트앤드의 꽃이 미디어쿼리라는 말이 나온게 아니죠.프론트앤드 4개월 차면 html , css(미디어쿼리, 크로스브라우징)정도 마스터 하고 스텝 바이 스텝으로 다음 스킬을 갖추는게 좋습니다. 지금 시기에 이것 저것 욕심 내면 금방 쉽게 포기하게 됩니다.

프론트엔드 개발자라면 알아야 할 것들

6개의 답변

기술 목록