개발자

프론트엔드 취준생 알아두면 좋은지식? 있나요?!

2022년 08월 29일조회 1,362

한창 리액트 공부하며 개인 프로젝트를향해 공부중인 취준생입니다! 인터넷에 검색하면 나오는 당연한 html css javascript react vue 말고 이외의 배경지식? 이나 뭐 알아두면 좋은 네트워크지식? uiux? 알아두면 좋을게 뭐가있을까요? 또는 그런 지식들이 잘 들어있는 추천하는 책같은게 있을까요?! 좋은 책이있다면 추천해주실수있으실까요!?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

인기 답변

정종윤님의 프로필 사진

❓ 프론트엔드 취준생이 알아두면 좋은 지식은 무엇이 있을까요? 💡 개인적으로 브라우저 지식, 컴퓨터 네트워크, 알고리즘/자료구조 를 추천합니다. --- 프론트엔드 분야는 다른 분야에 비해 비교적 역사가 짧고, 트렌드가 자주 바뀌기 때문에 "알아두면 좋은 지식" 에 대해 콕 집어 이야기는 다소 어렵습니다. 물론 말씀해주신 것처럼 HTML, CSS, JS 자체에 대한 기본적인 지식은 당연히 잘 알아야 하긴 하지만요. 하지만 제가 개인적으로 취업 준비 과정을 겪고, 현업을 경험하면서 직접 공부의 필요성을 느낀 분야가 있기 때문에 이를 소개해드리고자 합니다. 첫 번째는 브라우저 자체에 대한 이해입니다. 프론트엔드 개발자는 보통 브라우저에서 동작하는 웹 애플리케이션을 제작하기 때문에 브라우저 자체에 대한 이해를 할 필요가 있습니다. 브라우저의 내부 구조가 어떻게 구성되어 있고, 어떠한 브라우저의 종류가 있으며, CORS는 왜 발생하고, 브라우저의 특성에 따라 어떤 성능 최적화를 고민해볼 수 있는지를 공부할 수 있습니다. 물론 우리가 브라우저 개발자는 아니기 때문에 브라우저 내부의 모든 것을 알 필요는 없지만, 특히 브라우저의 전체적인 렌더 과정을 일컫는 중요 렌더링 경로(Critical Rendering Path)는 매우 중요하기 때문에 여기에서 비롯된 전반적 지식을 알아두는 것이 필요합니다. 한편 프론트엔드 직군에서는 각 브라우저 별 다르게 발생하는 이슈(Cross-browsing Issue)를 해결한 경험 등을 중요하게 보는 곳도 있으니, 이에 대한 프로젝트 경험 및 공부도 있으면 좋을 것 같습니다. 두 번째는 컴퓨터 네트워크 지식입니다. 프론트엔드 개발자는 일반적으로 브라우저를 통해 서버와 HTTP 통신을 합니다. JS에서 HTTP 통신을 호출하는 방법은 간단하지만(fetch API, XMLHttpReqeust 호출 등) 그 사이에는 정말 많은 레이어의 네트워크 통신이 숨겨져 있습니다. 전통적으로 OSI 7계층이라는 모델에 따라 흐름을 설명하곤 하죠. 내가 보내고자 하는 데이터를 패킷으로 나누고, 헤더를 붙이고, 물리 라우터를 타고 흘러가는 전통적인 네트워크 플로우에서부터, DNS 서버에서 IP 주소를 받아오고, 웹사이트가 HTTPS 일 경우에 필요한 SSL 인증서 교환 과정처럼 프론트엔드 개발자가 알아야 할 지식도 배울 수 있습니다. CDN이나 로드밸런서 같은 개념은 아직도 트래픽 대응을 위해 많이 쓰고 있기도 하구요. 최근에는 HTTP 통신이 TCP에서 UDP로 전환되는 추세인데 이렇게 프로토콜이 변하게 된 이유와 과정에 대해서도 알아두면 좋을 것 같습니다. 이런 식으로 내가 호출한 비동기 호출 API 한 번이 내부적으로 어떤 과정을 통해 나에게 다시 되돌아오는지를 훑어보면서 기술들을 하나씩 조사해보는 것을 추천합니다. 세 번째는 알고리즘과 자료구조입니다. 이는 사실 직군과 상관 없이 개발자라면 기본적으로 알아두어야 할 지식이라고 생각하는데요, 주어진 상황에 가장 최적화된 알고리즘과 자료구조를 사용하면 효율적으로 코드를 작성할 수 있기 때문입니다. 프론트엔드에서만 한정지어 설명해보자면... React를 써서 프로젝트를 개발하셨기 때문에 아시겠지만 React.memo와 React.useMemo, React.useCallback 등의 API는 메모이제이션이라는 방법을 기반으로 한 메서드들이며 이것은 동적 프로그래밍(Dynamic Programming)의 기법을 적용한 것입니다. 또한 React는 상태에 맞추어 선언형으로 DOM을 리렌더링하기 위해 Fiber라는 자료구조를 두고 이것을 링크드 리스트로 관리하고 있습니다. 여기에서 미루어보아, 프론트엔드 현업에서 실제로 내부 코드를 이해하고 분석하는 데 있어 알고리즘과 자료구조도 생각보다 많은 도움이 되기 때문에 추천합니다. 아, 그리고 혹시 모를 코딩테스트도 대비할 수 있고요. 물론 이 외에도 기초적인 CS 지식(운영체제, 데이터베이스, 소프트웨어 공학 등...)과 패러다임(함수형 프로그래밍, 객체 지향 프로그래밍 등...), 디자인 지식 역시 알아두면 도움이 됩니다. 다만 이러한 지식들이 칼로 자르듯 나뉘어지는 게 아니라 조금씩 얽혀있기 때문에, 하나를 공부하다보면 자연스럽게 다른 분야도 공부할 수 있게 될 것이에요. 안타깝게도 저는 위의 지식들을 책으로 배우지는 않아서 어떤 책을 추천해드리면 좋을지는 모르겠네요. 컴퓨터 네트워크와 알고리즘/자료구조 같은 경우에는 전공 서적이 있을 법도 한데, 브라우저 지식은 책보다는 구글의 문서에 더 잘 나와있는 것 같습니다.

INA.님의 프로필 사진

INA.

프런트엔드 개발자2022년 08월 31일

감사합니다! 프론트준비중인데 많은 도움이 됐습니다

profile picture

익명

작성자

2022년 09월 01일

자세한답변 감사합니다! 이렇게 보니 아직 많이 부족하네요..ㅋㅋ 열심히 공부해보겠습니다!

정종윤님의 프로필 사진

정종윤

네이버 프론트엔드 개발자2022년 09월 01일

여러 기술 용어가 나와서 압도당할 수도 있지만, 너무 조급해 하지는 말고 본인이 프로젝트나 취준하면서 알게된 CS 지식들을 좀 더 깊게 파보는 식으로 공부해보세요! 화이팅~

장호재님의 프로필 사진

아무리프론트엔드라도 네트워크기본 시스텀 공부추천드립니다 사실백프론트따질거없이 기본적인 근본지식이라생각이됩니다

profile picture

익명

작성자

2022년 08월 31일

답변 감사합니다!!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!