안녕하세요, 프론트엔드로 구직중인 초보 개발자입니다. 최근에 바닐라 자바스크립트를 사용해서 SPA를 구현해보는 기업 과제를 받았습니다. 평소에 React로 프로젝트 2개정도 한 실력이고 바닐라 자바스크립트는 기본 문법이나 Closer 같은 면접 지식만 알고 있어서 과제를 하나도 구현하지 못했습니다.. 과제를 풀고 드는 고민은 React를 더 공부하기 전에 바닐라 자바스크립트로 SPA, Component같은 부분을 구현해봐야하나 생각이 들더라구요.. 바닐라 자바스크립트로 저런 개념들을 구현할 줄 아는게 필수일까요? 아니면 React를 더 깊게 공부할까요 실무에 계신분들의 의견이 궁금합니다.
답변 3
인기 답변
안녕하세요! 결론부터 말씀드리면, 저는 개인적으로 React를 더 깊게 공부하는데에 우선순위를 두라고 말씀드리고 싶습니다. (물론, Vanilla JS로 SPA를 구현해보는 것이 중요하지 않다는 의미는 아닙니다.) 아마 잘 아시겠지만, React에서는 react-router-dom이라는 라이브러리를 사용하면 손쉽게 SPA를 구현할 수 있는데요, 해당 라이브러리를 쓰면서 실제로는 라우팅이 어떤 방식으로 진행되는지 전혀 모른다면 문제가 될 수 있겠지만, 예컨대 다음와 같이, "anchor 요소가 클릭됐을 때, 기본적으로 동작하는 URL 이동 event를 event.preventDefault()를 통해서 막고, 그 대신 브라우저 window.history 객체의 pushState 메서드를 통해 URL을 관리하면서 DOM의 innerHTML 속성을 통해 브라우저단에서 페이지를 렌더링한다." 정도의 흐름만 이해하고 넘어가셔도 React를 중급이상으로 사용하시는데에는 큰 무리가 없을거라 생각하고 있습니다. 또한, 회사, 면접관들마다 조금씩 차이가 있겠지만, 아무래도 "React 중급 + Vanilla JS로 구현한 SPA의 동작 원리만 이해한 사람" vs "React 초급 + Vanilla JS로 SPA를 직접 구현 가능한 사람" 중에 한 사람만 뽑는다면 전자가 좀 더 유리하지 않을까 조심스레 생각하고 있습니다. 더불어 제 개인적으로 React를 중급이상으로 사용할 수 있다는 것은 1. React의 라이프 사이클은 어떻게 되는지 2. React의 렌더링 과정은 어떻게 되는지 3. 컴포넌트가 (리)렌더링되는 조건은 무엇인지 4. (함수형 컴포넌트에서) useState, useEffect, useRef, useCallback, useMemo, useContext, useLayoutEffect를 어디서 왜 사용하는지 5. React.memo를 어디서 왜 사용하는지 6. 재사용가능한 컴포넌트는 어떻게 잘 만들 수 있을지 등등에 대해서 충분히 이해하고 있을 정도라고 생각하며, 위에 나열한 것들을 잘 이해하고 사용하기 위해서 Vanilla JS로 SPA를 구현할 줄 아는 것이 큰 도움을 줄 것 같지는 않습니다. 따라서 Vanilla JS로 SPA를 직접 구현해보는 것은 React를 좀 더 잘 다루게 되고 나서 진행하셔도 늦지 않으실 것 같구요, 아래 링크는 Vanilla JS로 구현한 SPA의 동작 원리를 이해하시는데 도움이 되실 것 같아서 참고하시라고 함께 남겨두겠습니다. https://nukw0n-dev.tistory.com/34 https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7
익명
작성자
1월 9일
둘 다 공부하기에는 다른 것도 너무 할게 많아서.. 석현님이 말씀하신대로 React를 더 깊게 공부해야겠어요! 고민이 많이 됐었는데 의견 주셔서 정말 감사합니다.
안녕하세요:) | 바닐라 자바스크립트로 저런 개념들을 구현할 줄 아는게 필수일까요? 필수는 아니지만 바닐라 자바스크립트로 한번 구현해보는 것 추천드려요! 두 가지 장점이 있는 것 같습니다. 1. DOM에 대한 이해: React만 사용해보면 DOM을 직접 조작할일이 드물기 때문에 DOM 구조 및 관련 함수를 이해하는데 도움이 됩니다. 2. SPA가 동작하는 방식을 로우 레벨에서 이해할 수 있음: 페이지 리로드 없이 라우팅 변경, root 태그만 있는 구조에서 컴포넌트를 렌더링하는 방법등 SPA를 직접 구현하면서 동작 방식에 대한 이해를 높일 수 있습니다. 프로그래머스 과제관에 가면 연습해볼 수 있는 문제들이 많습니다. React를 공부하면서 과제도 한번 해보면 좋을 것 같네요!
익명
작성자
1월 9일
우선 React를 더 깊게 공부해보고 바닐라 자바스크립트로 구현해봐야겠어요. 의견 주셔서 감사합니다!
안녕하세요! 실무에서는 React와 바닐라 자바스크립트 모두 사용하고 있습니다. React는 컴포넌트 기반으로 UI를 구성하는 라이브러리이기 때문에, 기본적인 자바스크립트 문법과 바닐라 자바스크립트로 SPA를 구현할 수 있는 능력도 필요합니다. React를 더 깊게 공부하면서 동시에 바닐라 자바스크립트를 활용해서 SPA를 구현하는 것도 좋은 방법입니다. 두 가지 모두 장단점이 있기 때문에, 사용할 수 있는 기술 스택이 많아지면 더욱 유연하게 개발할 수 있습니다. 하지만 과제를 받았을 때, React로 프로젝트를 몇 개 정도 한 실력이라면, 바로 바닐라 자바스크립트로 SPA를 구현하기는 어려울 수 있습니다. 그래도 도전하고 싶다면, 관련된 자료들을 찾아보고 기본부터 차근차근 공부해보세요. 마지막으로, 어떤 기술을 사용하던지 개발의 기초는 항상 자바스크립트입니다. 기본적인 자바스크립트 문법과 개념들은 꼭 익혀두는 것이 좋습니다.
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직 개발자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!