안녕하세요. 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 4기 수강 중인 hyeon입니다. 저번에는 파이널 프로젝트 회고를 소개해 드렸는데요 이번에는 부트캠프 과정이 마무리 되면서 과정 종료 회고를 통해 생생한 후기를 소개해 드리려 합니다.

패스트 캠퍼스 부트캠프 과정을 고민 중이신 분들께 많은 도움이 되면 좋겠습니다.

🥳 개요

저는 프론트엔드 과정 4기로써 총 7개월의 과정을 통해 수많은 프로젝트를 경험했습니다. 22년 12월에 첫 수업을 시작하였고 OT를 통해 수강생들과 친해질 기회를 얻었습니다. 기초 과정으로 HTML, CSS, JS를 배우고 바로 프로젝트를 시작하는데요. 저는 첫 프로젝트로 클론 코딩을 하였습니다. HTML, CSS만을 이용하여 사이트를 구축하면서 언어에 익숙해졌습니다. JS를 배우면 오픈소스 API를 통해 JS와 API 사용법에 대해 익히게 됩니다.

저는 OMDb API를 이용하여 영화 검색 프로젝트를 하였습니다. 이 프로젝트를 통해 기초를 쌓는 경험이 중요하다고 생각하였고 여기서 열심히 하시면 추후 프로젝트를 진행하는 데도 큰 어려움이 없습니다.

오픈소스 API중 하나인 OMDb API를 이용한 영화검색 프로젝트

3번의 개인 프로젝트를 완성하면 이제 협업을 위해 팀 프로젝트를 시작하는데요 REST API를 이용하여 팀원끼리 협의 후 쇼핑몰, 예약 사이트를 구현합니다.

실제 팀프로젝트때 구현한 안경 쇼핑몰 사이트

이를 통해 웹사이트의 동작 방식과 API 사용법을 알게 되어 큰 경험이 되었습니다.

기초 과정이 끝나면 이제 심화 과정인 React를 배우기 시작합니다! react는 페이스북에서 개발한 자바스크립트 라이브러리인데요 SPA를 사용하시려면 react는 꼭 사용해야 할 정도로 장점이 많습니다. 저는 총 18회차 과정을 통해 react의 동작 방식과 최적화, 스타일링, 라이브러리 등등을 배웠고 강의 중간에 개인 프로젝트와 팀 프로젝트가 부여됩니다!. 개인 프로젝트는 공공 API를 이용하여 지역별 미세먼지를 볼 수 있는 사이트를 구축하고 팀 프로젝트는 나만의 SNS 사이트를 만들어 react에 대해 많이 배울 수 있는 시간이었습니다.

모든 강의가 끝나면 백엔드와 프론트엔드가 만나 실제 사이트 배포까지 이어지는 미니 프로젝트를 시작합니다. 운영 측에서 주제를 주면 주제에 맞게 완성하면 되는데요. 저희 팀은 원래 주제인 연차/당직 관리에 더해 일정 관리까지 추가하여 구현했습니다.

미니프로젝트 일정 프로젝트 중 일부 발췌

미니까지 완료하면 이제 최종 단계인 기업 연계 프로젝트 즉, 파이널 프로젝트를 합니다. 파이널은 미니와 다르게 PM, 디자이너가 추가되어 처음부터 배포까지 팀원들 힘으로 진행합니다. 기업에서 요구하는 것을 PM이 받아 기획하고 디자이너가 그에 맞게 디자인하면 개발자가 실제로 구현하여 배포합니다. 이러한 과정을 통해 실제 기업에서 이루어지는 개발 과정을 직접 경험해봄으로써 아주 크나큰 자산이 되었습니다.

😁 회고

저는 이제 수료까지 약 1주가 남았는데요 그때까지 열심히 달려보겠습니다. 정말 길다면 길고 짧다면 짧은 부트캠프가 지나갔는데요 시간이 어떻게 흘러가는지 모르게 저는 정말 빠르게 지나갔습니다. 패스트캠퍼스 부트캠프에서 배운 지식과 경험을 토대로 취업 준비를 할 때 정말 큰 도움이 될 거 같습니다. 좋은 강의와 멘토분들을 제공해주신 패스트캠퍼스에게 정말 감사함을 느끼고 있습니다.

🎉 마무리

지금까지 기자단 활동을 해오면서 총 8개의 글을 모두 작성하였는데요 제가 직접 경험해보면서 수강생의 관점에서 쓴 글을 거짓 없이 모두 작성하였습니다. 추후 기자단이나 패스트캠퍼스 부트캠프를 고민하는 분께서 이 글들을 읽고 큰 도움이 되었으면 좋겠습니다. 이때까지 hyeon이었습니다. 감사합니다. 즐거운 하루 보내세요!

안녕하세요. 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 4기 수강 중인 hyeon입니다. 저번에는 미니프로젝트 회고를 소개해 드렸는데요 이번에는 프로젝트의 꽃인 파이널 프로젝트 즉, 기업 연계 프로젝트를 경험하면서 중간회고를 통해 생생한 후기를 소개해 드리려 합니다.

기업 연계 프로젝트 과정과 패스트 캠퍼스 부트캠프 과정을 고민 중이신 분들께 많은 도움이 되면 좋겠습니다.

🎉 개요

미니 프로젝트가 끝남과 동시에 파이널 프로젝트가 시작되는데요. 미니 프로젝트는 백엔드, 프론트엔드 개발자만 모여서 프로젝트를 진행했다면 파이널은 PM과 디자이너까지 함께 참여하여 프로젝트를 진행하는 차이가 있습니다.

파이널프로젝트 OT날에 각 참여기업과 주제가 소개되는데요. 미니와 다르게 파이널은 참여자가 직접 선택하여 본인이 원하는 주제를 선택할 수 있는 자유가 있어 좋았습니다. 총 6개 주제 중에서 자신이 원하는 3개를 선택해 우선순위를 정한 뒤 선택 이유와 함께 작성하여 제출하면 패스트캠퍼스 측에서 종합하여 각 주제에 배치됩니다.

또한 미니와 동일하게 운영 측에서 노션에 초대하여 필요한 정보를 알려주므로 개발에만 집중할 수 있어 편리했습니다.

패스트캠퍼스 파이널 프로젝트 노션 수행 타임라인 일부 중 발췌

🖥️ 프로젝트 중간회고

제가 속한 팀은 PM 7명, 디자이너 3명, 프론트엔드 4명, 백엔드 3명, 총 17명으로 진행했습니다. 저희 팀은 기업에서 중개 플랫폼을 주제로 선정하였습니다.

PM에서 먼저 기획을 진행하여 자료조사를 통해 기획서, 기능명세서 등등 개발에 필요한 자료들을 만들어 주셨고 디자이너 측에서 기획서를 바탕으로 웹 디자인 시안을 제작해주셨습니다. 그 후 와이어 프레임 및 디자인이 완성되면 저희 개발팀으로 전달되어 API 명세서와 각 화면 컴포넌트 단위를 정하여 개발하였습니다.

팀 Figma 일부 중 발췌

이때까지 해온 프로젝트들 보다 가장 규모가 크고 참여 인원이 많은 만큼 가장 많은 소통을 했습니다. 팀원들과의 소통뿐만 아니라 slack을 통해 실시간으로 기업과 소통하여 소통의 부재가 없었습니다. 여기서 저는 실제 기업에서 이루어지는 개발 과정들을 많이 배웠고 프로세스들을 경험하면서 많이 성장하여 만족했습니다.

실제 슬랙에서 이루어진 회의 후 이슈에 대한 정보 공유

또한 각 과정 참여자들은 멘토링을 통하여 잘 모르거나 부족한 부분을 질문을 통해 도움을 받을 수 있으므로 프로젝트를 진행하는데 큰 어려움이 없었습니다.

🎉 마무리

저는 현재 파이널 프로젝트를 진행하면서 중간 회고를 작성 중인데요. 지금까지 경험하면서 매우 만족하고 있습니다. 실제 기업에서 이루어지는 프로세스들을 배우면서 추후 취업하고 나서도 바로 적응을 할 수 있게 패스트캠퍼스에서 신경을 많이 쓴 게 보입니다. 앞으로 프로젝트가 끝나기 전까지 약 2주가 남았는데요 이제 끝이 보여 후련함과 동시에 정말로 훌륭한 수강생분들과 헤어질 생각을 하니 매우 아쉬웠습니다.

저는 지금까지의 경험을 통해 많이 성장한것이 스스로 느껴졌고 멘토, 훌륭한 수강생분들, 강사님, 운영진까지 이러한 좋은 분들과 함께 만나 정말 즐겁게 공부하여 좋았습니다.

따라서 이러한 경험들은 어디서나 할 수 없고 오직 패스트캠퍼스 부트캠프에서만 할 수 있다고 생각합니다. 그만큼 귀중한 경험을 하고 싶다면 지금이라도 이 글을 읽는 분께서는 기회를 놓치지 마시고 빨리 잡길 바랍니다! 긴 글 읽어주셔서 감사합니다. 다음에는 마지막 기자단 글로 찾아뵙겠습니다. 좋은 하루 되세요😁

안녕하세요. 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 4기 수강 중인 hyeon입니다. 저번에는 기자단 중간 후기를 소개해 드렸는데요 이번에는 부트캠프 파이널 전에 하는 미니 프로젝트를 경험하면서 회고를 통해 생생한 후기를 소개해 드리려 합니다. 미니프로젝트 과정과 패스트 캠퍼스 부트캠프 과정을 고민 중이신 분들께 많은 도움이 되면 좋겠습니다.

🎉 개요

부트캠프의 모든 강의가 끝나면 프론트엔드 과정 수강생과 백엔드 과정 수강생이 모입니다. 한 팀에 평균적으로 프론트엔드 4명, 백엔드 4명이 배정됩니다.

미니프로젝트 OT 날에 주제에 대한 설명을 해주고 팀들은 각자 모여 싱크업 미팅과 프로젝트 설계서를 작성합니다. 제가 진행했을 때는 총 3주가 주어졌는데요 생각보다 시간이 여유롭지 않았지만 제한된 시간 안에 몰두하여 최적의 결과를 내기에는 좋았습니다.

또한 운영 측에서 노션에 초대하여 필요한 정보를 알려주므로 개발에만 집중할 수 있어 편리했습니다.

패스트캠퍼스 미니프로젝트 노션 일부 중 발췌

마지막으로 프로젝트가 끝나면 발표회와 회고 공유회가 있습니다. 제한된 시간 안에 발표해야 하므로 팀원끼리 잘 상의하여 적절한 발표 자료를 준비해야 합니다.

🖥️ 프로젝트

저희 팀은 프론트엔드 3명, 백엔드 4명으로 이루어져 총 7명으로 진행했습니다. 프로젝트 주제는 연차/당직 프로젝트로 주어졌습니다. 처음 저희 팀은 소통을 중요시하여 만나서 자기소개 및 아이스브레이킹을 진행하였고 시간이 부족하므로 어느 정도 서로를 안 뒤에 바로 프로젝트에 대해 이야기를 했습니다. 4일간은 프로젝트 초기 설정 및 문서 작업, 회의에 모든 시간을 사용했고 기초가 잘 마무리되어 추후 개발에 들어가서도 큰 문제 없이 마무리를 할 수 있었습니다.

저희 팀은 다른 팀들과 달리 디스코드를 이용하여 코어타임에는 항상 대기하였습니다. 이러한 점은 문제가 발생 시 바로 모여 서로 머리를 맞대어 현장에서 해결하므로 빠른 해결과 일의 진행도를 파악할 수 있어 추후 회의 때 따로 언급하지 않아 시간을 아꼈습니다.

팀 디스코드에서 이루어진 문제상황에 대한 대화

또한 타임라인을 통해 데드라인이 다가오기 전에 일을 마무리 할 수 있어 좋았습니다

팀 노션 타임라인

🚩 회고

프로젝트 발표회가 마무리된 후 2일 뒤에 회고 공유회가 진행됐는데요 발표회는 실제 현업에 계신 분들께서 참석해주셨고 회고 공유회 때는 저희의 멘토분들께서 참여해주신 차이가 있습니다. 저희 팀은 각자 프로젝트를 진행하면서 발생한 트러블 슈팅과 그에 대한 아쉬운 점, 해결 방법 등을 작성하였고 팀에 대한 공통적인 회고 부분도 작성하여 팀이 더욱 발전할 수 있는 계기가 되었습니다.

팀 노션 회고 질문지 일부 중 발췌

회고 공유회가 마무리되고 다음으로 진행될 파이널 프로젝트 OT가 진행되었고 1등 팀의 결과가 발표되었습니다. 저희 Need More Task 팀이 1등을 하였고 비록 만나지는 못했지만, 디스코드에 모여 다 같이 기뻐하였습니다.😁

🎉 마무리

3주간에 팀원들끼리 정도 많이 쌓였고 등수 결과 발표 후 저희끼리 따로 디스코드에 모여 회포도 풀면서 다들 격려를 아끼지 않았습니다. 헤어지기 전 다들 아쉬워했고 수료식 때 만나 나머지 이야기를 나누자고 다짐했습니다.

이번 미니프로젝트를 진행하면서 저는 전보다 개발 능력, 커뮤니케이션 스킬이 많이 성장한 것을 느꼈습니다. 이러한 경험은 어디서나 할 수 없고 오직 패스트캠퍼스에서만 할 수 있다고 생각합니다. 그만큼 귀중한 경험을 하고 싶다면 기회가 주어졌을 때 이 글을 읽는 분께서는 놓치지 마시고 빨리 잡길 바랍니다! 긴 글 읽어주셔서 감사합니다. 다음 글로는 파이널 프로젝트 후기로 찾아뵙겠습니다.

안녕하세요. 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 4기 수강 중인 hyeon입니다. 저번에는 과정 3달 차 후기를 소개해 드렸는데요 이번에는 기자단을 경험하면서 중간 회고를 통해 생생한 후기를 소개해 드리려 합니다. 기자단 과정과 패스트 캠퍼스 부트캠프 과정을 고민 중이신 분들께 많은 도움이 되면 좋겠습니다.

🎉 소개

패스트캠퍼스 기자단은 패스트캠퍼스 국비 지원 부트캠프를 수강 중이거나 수료생을 대상으로 진행하는 활동으로 패스트캠퍼스 부트캠프 과정에 대한 솔직하고 생생한 이야기를 전하는 기자단입니다. 현재 기자단에 소속되어 있으신 분들로는 데이터 사이언스 / 프로그래밍 / 디지털 마케팅 / PM / UI,UX / 프론트엔드 / 백엔드 등 다양한 과정에 참여하고 계신 분들로 진행하고 있습니다.

제가 생각하는 기자단의 장점은 주어진 주제 내에서 기자단의 생각을 자유롭게 표현하며 패스트캠퍼스 부트캠프에 대한 생각을 모두에게 공유하는 한 명의 기자로서 본인의 역량 또한 기를 수 있기 때문에 아주 좋은 기회입니다.

혹시나 좋은 글만 써야 한다는 생각은 잠시 넣어두세요! 패스트 캠퍼스 기자단의 신조는 패스트캠퍼스 부트캠프에 대한 솔직한 후기를 남길 수 있는 용기를 가진 자 라고 할 수 있습니다.

실제 모집 글 중 일부 발췌

또한, 과정을 참여하면서 개발 블로그 작성 우수자로 선정되거나 과정을 성실히 수행하여 우수참여자가 된다면 우대사항이 되므로 평소 열심히 하신다면 기자단이 될 수 있습니다! 아래 포스터를 참고 해주세요.

기자단 모집 포스터

🎙️ 활동

저는 기자단 1기로서 활동 중인데요 기자단 활동은 총 8개의 글을 블로그에 작성하면 활동 종료를 합니다. 만약 기자단이 되어 주제를 선정하기에 어렵다면 걱정할 필요가 없습니다. 매니저님께서 주제에 대해 slack으로 친절히 알려주시기 때문에 부담 없이 작성할 수 있습니다.

실제 slack에서 받은 메세지

블로그 작성 시 작성 가이드를 잘 지키면서 작성하시면 됩니다. 그 이후로는 형식 없이 자신의 생각을 자유롭게 작성하면 됩니다.

블로그 작성 가이드 중 일부 발췌

또한, 기자단을 활동하면서 혜택이 있는 것을 아셨나요? 혜택은 다음과 같습니다. 정상 수료를 기준으로 패스트캠퍼스 기자단 수료증 발급과 패스트캠퍼스 강의 무료 제공(일부)을 받고 마지막으로 기자단 활동에 대한 장학금을 지급 받습니다.

단, 장학금을 지급 받으려면 총 8개의 블로그 발행 글이 필수이기에 조건에 들어맞는다면 활동기간 종료 후 총 50만 원이 일괄 지급됩니다.

이렇게 혜택도 다양하고 패스트 캠퍼스 부트캠프에 대해 솔직한 후기를 자유롭게 전할 수 있는 기자단을 추천해 드립니다!

✨ 마무리

저는 기자단 1기를 활동하면서 정말 만족하고 있습니다. 지금까지 블로그에 수강생 입장에서 작성한 후기 글을 여러 개 발행하였는데요. 이러한 포스트들을 통해 패스트캠퍼스 부트캠프 과정을 고민하거나 정보를 얻고 싶은 분들께 제공되어 결정에 큰 도움이 된다면 좋겠습니다. 저는 부트캠프를 알아볼 때 사전 정보가 많이 부족하여 결정하는 데까지 오랜 시간이 걸렸습니다. 하지만 이 글을 읽는 분들께서는 저와 다르게 패스트 캠퍼스 부트캠프에 참여하기 전까지 고민하는 시간을 줄이면 좋겠습니다. 이제 저와 같이 부트캠프에 참여해서 멘토님들과, 강사님들, 열정적인 수강생분들과 함께 좋은 커리어를 쌓아나가셨으면 좋겠습니다! 긴 글 읽어주셔서 감사합니다. 다음 글에서는 미니 프로젝트 후기로 찾아뵙겠습니다.

• currying은 둘 이상의 매개 변수가 있는 함수가 여러 함수로 분리된 패턴으로, 직렬로 호출하면, 필요한 모든 매개 변수가 한 번에 하나씩 누적된다
• 이 기법은 함수형 스타일로 작성된 코드를 읽고, 합성하기 더 쉬워진 경우 유용할 수 있다
• 함수를 currying하려면, 하나의 함수로 시작하여, 하나의 매개 변수를 취하는 일련의 함수로 분리해야 한다

spread 문법을 사용할 때의 이점은 무엇이며 rest 문법과 다른 점은 무엇인가요?

spread 문법을 사용할 때의 이점

라이브러리 함수를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있기 때문

rest 문법과 차이점

1. 사용하는 위치: Spread 문법은 배열이나 객체를 펼쳐서 사용하는 문법으로, 배열이나 객체 리터럴의 내부에서 사용합니다. 반면에 Rest 문법은 함수의 매개변수에서 사용하는 문법으로, 함수의 매개변수 선언에서 사용합니다.

2. 동작 방식: Spread 문법은 배열이나 객체를 복사하거나 연결하는 등의 작업을 수행하며, 복사본을 만들어 반환합니다. Rest 문법은 함수의 매개변수로 전달된 인자들을 배열로 받아서 사용합니다.

파일 간에 코드를 공유하려면 어떻게 해야하나요?

클라이언트(브라우저 환경)에서는, 변수/함수가 전역 스코프(window)에 선언되어있는 한 모든 스크립트가 이를 참조할 수 있습니다. 또는, 보다 모듈형 접근 방식을 위해 RequireJS를 통해 비동기 모듈 정의(AMD)를 이용합니다.

서버(Node.js)에서 일반적인 방법은 CommonJS를 사용하는 것입니다. 각 파일은 모듈로 취급되며, 변수와 함수를 module.exports 객체에 붙여서 내보낼 수 있습니다.

정적 클래스 멤버를 만드는 이유는 무엇인가요?

정적 클래스 멤버는 클래스의 인스턴스를 생성하지 않고도 클래스 자체에 속한 속성이나 메서드를 호출할 수 있게 해주는 멤버

정적 클래스 멤버를 만드는 이유

공통 데이터나 메서드를 관리하기 위해 인스턴스화 없이도 호출이 가능하므로 코드 구조가 더욱 단순해진다 클래스 레벨의 정보를 보존하기 위해 클래스의 확장성을 높이기 위해

function foo() {}는 함수 선언 var foo = function() {}은 함수 표현식

주요한 차이점은 함수 선언은 함수바디가 호이스트되지만, 함수 표현식의 바디는 호이스트되지 않습니다(변수와 동일한 호이스팅 동작을 가짐) 함수 표현식을 정의하기 전에 호출하려고 하면 Uncaught TypeError : XXX is not function에러가 발생

함수 선언

foo(); // 'FOOOOO'
function foo() {
  console.log('FOOOOO');
}

함수 표현식

foo(); // Uncaught TypeError: foo는 함수가 아닙니다
var foo = function () {
  console.log('FOOOOO');
};

2. let, var, const를 사용하여 생성된 변수들의 차이점은 무엇인가요?

var

• 함수 스코프를 가집니다. 함수 내에서 선언된 변수는 함수 내에서만 접근 가능하며, 함수 외부에서는 접근할 수 없습니다.
• 변수를 중복 선언할 수 있습니다.
• 호이스팅(hoisting)이 발생합니다. 즉, 변수가 선언되기 전에 사용되어도 에러가 발생하지 않습니다.
• 전역 변수로 선언하면 어디서든 접근 가능합니다.

let

• 블록 스코프를 가집니다. 중괄호({})로 둘러싸인 범위 내에서만 접근 가능합니다.
• 변수를 중복 선언할 수 없습니다.
• 호이스팅이 발생하지 않습니다.
• 초기화되지 않은 변수를 사용하려고 하면 ReferenceError가 발생합니다.

const

• let과 비슷하지만 상수(constant)를 선언할 때 사용됩니다.
• 블록 스코프를 가집니다.
• 변수를 중복 선언할 수 없습니다.
• 호이스팅이 발생하지 않습니다.
• 변수를 한 번 초기화하면 다시 할당할 수 없습니다.

3. ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?

4. 새 화살표 => 함수 문법에 대한 사용 예시를 들 수 있나요? 이 새로운 문법은 다른 함수와 어떻게 다른가요?

5. 생성자의 메서드에 화살표 문법을 사용하면 어떤 이점이 있나요?

함수 생성시 this의 값이 설정되고 그 이후에는 변경할 수 없다는 것 따라서, 생성자가 새로운 객체를 생성하는데 사용될 때, this는 항상 그 객체를 참조

6. 고차 함수(higher-order function)의 정의는 무엇인가요?

고차 함수는 다른 함수를 매개 변수로 사용하거나, 결과로 함수를 반환하는 함수 고차 함수는 반복적으로 수행되는 어떤 연산을 추상화하기 위한 것

7. 객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있나요?

디스트럭처링(destructuring)은 객체나 배열에서 원하는 값을 추출하여 변수에 할당하는 방법

8. ES6 템플릿 리터럴은 문자열을 생성하는데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있나요?

ES6 템플릿 리터럴(Template literals)은 문자열을 생성할 때 큰 유연성을 제공

Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(예: 네트워크 오류가 발생) 중 하나의 값을 생성할 수 있는 객체 promise는 fulfilled, rejected, pending 3가지 상태 중 하나일 수 있습니다. promise 사용자는 콜백을 붙여서 fulfill된 값이나 reject된 이유를 처리할 수 있습니다.

2. Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?

장점

• 코드의 가독성이 좋습니다. Promise는 then() 메서드를 사용하여 연속적인 비동기 코드를 작성성할 수 있습니다. 이렇게 하면 콜백 체인이 아닌 평평한 구조로 코드를 작성할 수 있으며, 콜백 지옥에서 벗어날 수 있습니다.
• Promise.all()을 사용하여 병렬 비동기 코드를 쉽게 작성할 수 있습니다.

단점

• 약간 더 복잡한 소스코드
• ES6 이전의 브라우저에서는 Promise를 지원하지 않는 경우가 있습니다. 이를 사용하기 위해서는 polyfill을 로드해야 합니다.

3. JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?

장점

• JavaScript의 오랜 문제점들을 해결하고 JavaScript 안티 패턴을 방지합니다.
• JavaScript 위에 syntactic sugar를 제공함으로써 더 짧은 소스코드를 작성할 수 있도록 해줍니다.
• 정적 타입은 시간 경과에 따라 유지 관리해야 하는 대규모 프로젝트에서 훌륭합니다(TypeScript의 경우).

단점

• 브라우저는 오직 JavaScript만 실행하기 때문에 빌드/컴파일 프로세스가 필요하며 브라우저에 제공되기 전에 JavaScript로 코드를 컴파일해야 합니다.
• 소스 맵이 미리 컴파일된 소스에 잘 매핑되지 않으면 디버깅이 어려울 수 있습니다.

4. JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하나요?

• React and Redux
  • React Devtools
  • Redux Devtools
• JavaScript
  • Chrome Devtools
  • debugger statement
  • Good old console.log debugging

5. 오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요?

오브젝트의 경우

for-in 반복

for (var property in obj) { 
        console.log(property);
    }

그러나, 이는 상속된 속성도 반복되며, 사용하기 전에 obj.hasOwnProperty(property) 체크를 추가해야 합니다.

Object.keys()

Object.keys(obj).forEach(function (property) { ... })

Object.keys()는 전달하는 객체의 열거 가능한 모든 속성을 나열하는 정적 메서드입니다.

Object.getOwnPropertyNames()

Object.getOwnPropertyNames(obj).forEach(function (property) { ... })

Object.getOwnPropertyNames()는 전달하는 객체의 열거 가능한 속성과 열거불가능한 모든 속성을 나열하는 정적 메서드입니다.

배열의 경우

for 반복

for (var i = 0; i < arr.length; i++)

여기에 있는 일반적인 함정은 var이 함수 스코프고 블록 스코프가 아니며, 대부분 블록 스코프의 반복자 변수를 원할 것이라는 점입니다. ES2015에는 블록 범위가 있는 let이 추가됐고, 이를 대신 사용할 것을 권장합니다. 그래서 다음과 같이 됩니다.

for (let i = 0; i < arr.length; i++)

forEach

arr.forEach(function (el, index) { ... })

필요한 것이 배열의 요소라면 index를 사용할 필요가 없기 때문에 이 구문이 더 편리 할 수 있습니다. 또한 every과 some메서드를 이용하여 반복을 일찍 끝낼 수 있습니다.

for-of 반복

for (let elem of arr) { ... }

ES6는 String, Array, Map, Set 등과 같은 iterable protocol을 준수하는 객체를 반복 할 수 있게 해주는 새로운 for-of 루프를 도입했습니다. for 루프의 장점은 루프에서 벗어날 수 있다는 것이고, forEach()의 장점은 카운터 변수가 필요 없기 때문에 for 루프보다 간결하다는 것입니다. for-of 루프를 사용하면, 루프에서 빠져 나올 수도 있고 더 간결한 구문도 얻을 수 있습니다.

또한, for-of 루프를 사용할 때 각 배열 요소의 인덱스와 값에 모두 접근해야하는 경우 ES6 Array의 entries() 메소드와 destructuring을 사용하면됩니다.

const arr = ['a', 'b', 'c'];

for (let [index, elem] of arr.entries()) {
  console.log(index, ': ', elem);
}

6. mutable 객체와 immutable 객체 사이의 차이점을 설명하세요.

• Mutable 객체는 값이 변경 가능한 객체
• Immutable 객체는 값이 변경되지 않는 객체

7. 동기, 비동기 함수의 차이점을 설명하세요.

동기 함수

동기 함수는 호출되면 함수의 작업이 모두 완료될 때까지 코드 실행이 멈추고, 함수가 반환된 이후에 다음 코드가 실행되는 함수입니다. 즉, 함수 호출 이후에는 해당 함수가 반환될 때까지 코드 실행이 중지되며, 이후 코드는 순차적으로 실행됩니다. 이러한 방식으로 코드를 작성하면 코드의 순서가 보장되기 때문에 프로그래밍이 간단해지지만, 함수 실행 중에 다른 작업을 수행할 수 없기 때문에 시간이 오래 걸리는 작업을 수행하면 다른 코드가 실행되지 않는 문제가 발생할 수 있습니다.

비동기 함수

비동기 함수는 함수가 호출되면 함수의 작업이 백그라운드에서 실행되며, 함수가 반환된 이후에도 코드 실행이 계속됩니다. 이러한 방식으로 코드를 작성하면 코드의 순서가 보장되지 않지만, 시간이 오래 걸리는 작업을 수행하는 동안 다른 코드가 실행될 수 있기 때문에 프로그램의 성능을 향상시킬 수 있습니다. 비동기 함수는 보통 콜백(callback) 함수나 프로미스(promise), async/await 등의 기술을 사용하여 구현됩니다.

8. 이벤트 루프란 무엇인가요? 콜 스택과 태스크 큐의 차이점은 무엇인가요?

이벤트 루프는 콜 스택을 모니터하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제거되고 실행될 콜 스택으로 푸시됩니다.

스택과 태스크 큐의 차이점

콜 스택은 현재 실행 중인 함수의 정보를 담는 자료구조이며, 태스크 큐는 비동기 작업이 완료되면 대기열에 추가하는 자료구조

질문

질문1

Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?

질문2

콜 스택과 태스크 큐의 차이점은 무엇인가요?

질문3

동기, 비동기 함수의 차이점을 설명하세요

질문4

JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?

• ==는 추상 동등 연산자이고 ===는 완전 동등 연산자입니다.
• ==연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등한지 비교
• ===연산자는 타입 변환을 하지 않으므로 두 값이 같은 타입이 아닌 경우 ===는 false를 반환

1 == '1'; // true
1 == [1]; // true
1 == true; // true
0 == ''; // true
0 == '0'; // true
0 == false; // true

2. JavaScript와 관련하여 same-origin 정책을 설명하세요.

• same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는 것을 방지합니다.
• origin은 URI 체계, 호스트 이름, 포트 번호의 조합으로 정의됩니다.
• 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 DOM을 통해 다른 웹 페이지의 중요한 데이터에 접근하는 것을 방지한다.

3. 왜 Ternary expression이라고 부르고, "Ternary"라는 단어는 무엇을 나타내나요?

"Ternary"는 "삼항"을 나타내고 삼항 표현식은 세가지 피연산자, 테스트 조건문, "then"표현식, "else"표현식을 받습니다

4. "use strict"; 이 무엇인가요? 사용시 장단점이 무엇인가요?

'use strict'는 전체 스크립트나 개별 함수에 엄격 모드를 사용하는데 사용되는 명령문 Strict 모드는 JavaScript 다양한 자바스크립트를 제한하는 방법

장점

• 실수로 전역변수를 만드는 것이 불가능합니다.
• 암묵적으로 실패한 예외를 throw하지 못하는 할당을 만듭니다.
• 삭제할 수 없는 속성을 삭제하려고 시도합니다. (시도 효과가 없을 때까지)
• 함수의 매개변수 이름은 고유해야합니다.
• this는 전역 컨텍스트에서undefined입니다.
• 예외를 발생시키는 몇 가지 일반적인 코딩을 잡아냅니다.
• 헷갈리거나 잘 모르는 기능을 사용할 수 없게 합니다.

단점

• 일부 개발자는 익숙하지 않은 기능이 많습니다.
• function.caller와 function.arguments에 더 이상 접근할 수 없습니다.
• 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.

5. 100까지 증가하면서 3의 배수에는 fizz를 출력하고, 5의 배수에는 buzz를 출력하고, 3과 5의 배수에는 fizzbuzz를 출력하는 for loop를 만드세요.

for (let i = 1; i <= 100; i++) {
  let f = i % 3 == 0,
    b = i % 5 == 0;
  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
}

6. 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇인가요?

모든 스크립트는 전역 스코프에 접근할 수 있으며, 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다. 모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하세요.

7. 왜 load 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?

사용 이유

웹 페이지에서 자바스크립트를 사용할 때, 이미지, 비디오, 스크립트 파일, 폰트 등과 같은 외부 리소스를 로드해야 할 때가 있다. 이러한 리소스가 로드되기 전에 스크립트가 실행될 경우, 오류가 발생할 수 있다. 따라서 이러한 리소스가 로드될 때까지 기다리는 방법이 필요합니다. 이를 위해 load 이벤트를 사용합니다.

단점

load 이벤트가 발생하려면 모든 리소스가 로드되어야 하기 때문에, 웹 페이지가 느려질 수 있다. 페이지가 완전히 로드되기 전에 사용자가 상호작용하려는 경우 사용자 경험이 저하될 수 있다.

대안

DOM 이벤트 DOMContentLoaded는 페이지의 DOM이 생성된 후에 발생하지만 다른 리소스가 로딩되기를 기다리지 않는다. 이것은 초기화되기 전에 전체 페이지가 로드될 필요가 없는 경우에 선호된다. 그러나 이 이벤트를 사용하면 모든 리소스가 로드되기 전에 자바스크립트 코드가 실행되기 때문에, 이벤트 핸들러에서 로드되지 않은 리소스를 사용하면 오류가 발생할 수 있습니다.

8. single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요.

Single page application (SPA)은 전체 페이지를 다시 로드하지 않고, 웹 페이지의 일부분만을 업데이트하여 사용자 경험을 개선하는 웹 애플리케이션

SEO-friendly란 검색 엔진 최적화(search engine optimization, SEO)를 고려하여 웹 페이지를 디자인하고 개발하는 것

SPA를 SEO-friendly하게 만드는 방법

1. 사이트맵 생성 : 검색 엔진에서는 웹 페이지의 내용을 크롤링하여 인덱싱합니다. SPA에서는 페이지가 동적으로 생성되기 때문에 검색 엔진이 해당 페이지를 크롤링하는 것이 어려울 수 있습니다. 이 문제를 해결하기 위해, 사이트맵을 만들어 검색 엔진이 페이지를 크롤링할 수 있도록 해야 합니다.

2. Pre-rendering : SPA에서는 페이지가 동적으로 생성됩니다. 이는 일부 검색 엔진에서 문제를 일으킬 수 있습니다. 이 문제를 해결하기 위해, SPA의 초기 페이지 렌더링을 pre-rendering 하여 검색 엔진이 이를 인덱싱할 수 있도록 해야합니다.

3. 올바른 Meta 태그 : Meta 태그는 웹 페이지의 정보를 설명하는 데 사용됩니다. SPA에서도 Meta 태그를 사용하여 검색 엔진이 페이지의 정보를 이해할 수 있도록 해야합니다.

4. URL 설정 : SPA에서는 URL이 동적으로 변경될 수 있습니다. 이를 해결하기 위해, URL을 변경할 때마다 history API를 사용하여 브라우저의 URL을 업데이트해야 합니다. 이렇게 하면 검색 엔진이 URL을 인식할 수 있습니다.

5. JSON-LD 마크업 : 검색 엔진에서는 JSON-LD 마크업을 사용하여 웹 페이지의 정보를 인식할 수 있습니다. SPA에서도 JSON-LD 마크업을 사용하여 페이지의 정보를 검색 엔진이 인식할 수 있도록 해야합니다.

6. 서버 사이드 렌더링 : SPA에서는 클라이언트에서 모든 작업을 수행합니다. 이에 대해, 검색 엔진은 페이지를 검색할 때 JavaScript를 실행하지 않기 때문에 페이지가 인덱싱되지 않을 수 있습니다. 이를 해결하기 위해, 서버 사이드 렌더링을 사용하여 SPA의 초기 페이지 렌더링을 서버에서 수행할 수 있도록 해야합니다.

질문

질문1

"use strict";이 무엇인지 설명하고 장단점을 설명해주세요

답변1

질문2

same-origin 정책에 대해 설명해주세요

답변2

질문3

single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요

답변3

질문4

load 이벤트를 사용하는 이유와 단점을 설명하고 대안책이 있다면 설명해주세요 대안책에 대한 단점은 무엇인가요

답변4

장점

• 상호작용성이 좋아진다. 서버의 새로운 컨텐츠에 대해 전체 페이지를 다시 로드할 필요 없이 동적으로 변경할 수 있다.
• 스크립트나 스타일 시트는 한 번만 요청하면 되므로 서버에 대한 연결을 줄여준다.
• 상태를 페이지에서 관리 할 수 있다. 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 JavaScript의 변수와 DOM의 상태가 유지된다.
• 기본적으로 SPA의 대부분의 장점과 같다.

단점

• 동적 웹 페이지는 북마크하기 어렵다.
• 브라우저에서 JavaScript가 비활성화된 경우 작동하지 않는다.
• 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없다.
• SPA의 대부분의 단점과 같다.

2. JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.

JSONP(JSON with Padding)는 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는데 사용되는 방법

사전 지식

동일 출처 정책 (Same-Origin Policy)

어떠한 문서나 스크립트가 다른 프로토콜 / 포트 / 호스트 에 있는 리소스 사용하는 것을 제한하는 정책

CORS(Cross-Origin Resource Sharing)

동작 방식

JSONP는 동적으로 생성된 script 태그를 사용하여 다른 도메인에서 JSON 데이터를 가져온다. 이 때, JSON 데이터를 쿼리 문자열에 포함시키고, 이를 호출하는 콜백 함수 이름도 함께 포함시킨다.

서버는 요청된 JSON 데이터를 해당 콜백 함수 이름과 함께 응답합니다. 이 때, 응답 데이터는 함수 호출의 인수로 전달됩니다. 이렇게 하면 다른 도메인에서 JSON 데이터를 안전하게 가져올 수 있습니다.

<!-- https://mydomain.com -->
<script>
  function printData(data) {
    console.log(`My name is ${data.name}!`);
  }
</script>

<script src="https://example.com?callback=printData"></script>

// https://example.com?callback=printData 에서 로드된 파일
printData({name: 'Yang Shun'});

3. JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?

라이브러리는 주로 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임이다. 여기에는 구성 데이터, 문서, 도움말 자료, 메시지 틀, 미리 작성된 코드, 서브루틴(함수), 클래스, 값, 자료형 사양을 포함할 수 있다.

4. 호이스팅에 대해 설명하세요.

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

그러나 선언문만 호이스팅되며 할당문은 호이스팅 되지 않는다

• var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화
• 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

  // var 선언이 호이스팅됩니다
  console.log(foo); // undefined
  var foo = 1;
  console.log(foo); // 1
  

// let/const 선언은 호이스팅되지 않습니다. console.log(bar); // ReferenceError: bar is not defined let bar = 2; console.log(bar); // 2

- 함수 선언은 함수몸체가 호이스팅
- 변수 선언 형태로 작성된 함수 표현식은 변수 선언만 호이스팅
```javascript
// 함수 선언
console.log(foo); // [Function: foo]
foo(); // 'FOOOOO'
function foo() {
  console.log('FOOOOO');
}
console.log(foo); // [Function: foo]

// 함수 표현식
console.log(bar); // undefined
bar(); // Uncaught TypeError: bar is not a function
var bar = function () {
  console.log('BARRRR');
};
console.log(bar); // [Function: bar]

5. event bubbling에 대해 설명하세요.

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작

이벤트 버블링은 이벤트 전파 과정 중에 이벤트 타깃까지 이벤트 전파가 이루어질 때까지 모든 조상 요소를 탐색하므로, 이벤트 핸들러를 한 곳에서 관리할 수 있어서 코드를 간결하게 유지할 수 있다. 그러나 이벤트 버블링으로 인해 의도치 않은 이벤트 처리가 발생할 수도 있으므로 주의해야 한다. 이를 방지하기 위해서는 이벤트 캡처링(Event Capturing)을 사용하거나 이벤트 버블링을 중지시키는 방법을 사용할 수 있다.

사전 지식

버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값) 캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달

동작 방식

1. 이벤트 발생(사용자 이벤트 혹은 강제 이벤트 할당:trigger)
2. 이벤트 발생 객체를 찾기 위하여 하위 탐색(캡쳐)
3. 이벤트 발생 객체 도달
4. 하위 탐색의 역순으로 복귀(버블링)

이벤트 버블링 방지 방법

e.stopPropagation()

stopPropagation() 메소드를 호출하면 버블링 또는 캡처링 설정에 따라 상위, 하위로 가는 이벤트 전파를 막을 수 있다.

e.stopImmediatePropagation()

stopImmediatePropagation() 메소드를 호출하면, 이벤트 전파와 더불어 형제 이벤트 실행을 중지한다.

e.target 으로 조건 걸어 방지

document.body.addEventListener('click', (e) => {

    if (e.target.id === "ancestor") {
        print('ancestor')
    }

    if (e.target.id === "parent") {
        print('parent')
    }

    if (e.target.id === "child") {
        print('child')
    }

});

e.preventDefault()

e.preventDefault() 는 이벤트 전파 뿐만 아니라 기본 이벤트 동작 자체를 취소한다.

6. attribute와 property의 차이점은 무엇인가요?

attribute

attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소

<div class= ‘my-class’></div>라는 my-class라는 클래스 속성을 가진 div 요소에서 div 는 element(요소) 이고 class 는 attribute(속성) 가 되며 my-class 는 class attribute의 value(값)가 됩니다.

property

property는 html DOM 안에서 attribute를 가리키는 표현

위 내용은 <div class= ‘my-class’></div> 태그를 DOM 으로 표현한 것인데 위에서 className이 property가 된다

차이점

attribute는 HTML 마크업에 정의되고 정적인(바뀌지 않는) 속성을 뜻한다 property는 HTML DOM에 정의되고 동적인(바뀌는) 속성을 뜻한다

7. 내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가요?

참조 무결성에 대해 좋지 않음

참조 무결성

참조 무결성은 관계 데이터베이스 관계 모델에서 2개의 관련 있던 관계 변수 간의 일관성

8. document load 이벤트와 document DOMContentLoaded 이벤트의 차이점은 무엇인가요?

• DOMContentLoaded 이벤트는 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생
• load 이벤트는 HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 외부 자원도 모두 불러오는 것이 끝났을 때 발생

참고

DOMContentLoaded를 막지 않는 스크립트

위와 같은 규칙엔 두 가지 예외사항이 있다.

1. async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않습니다.
2. document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립트는 DOMContentLoaded를 막지 않습니다.

질문

질문1

이벤트 버블링 방지 방법은 무엇이 있고 각각에 대해 어떤 역할을 하는지 설명해주세요

답변1

이벤트 버블링 방지 방법 글 참고

질문2

JSONP의 동작 방식을 설명해 주세요

답변2

동작 방식 글 참고

질문3

attribute와 property의 차이점에 대해 설명해 주세요

답변3

attribute는 HTML 마크업에 정의되고 정적인(바뀌지 않는) 속성을 뜻한다 property는 HTML DOM에 정의되고 동적인(바뀌는) 속성을 뜻한다

질문4

DOMContentLoaded를 막지 않는 스크립트에 대해 설명해주세요

답변4

1. async 속성이 있는 스크립트는 DOMContentLoaded를 막지 않습니다.
2. document.createElement('script')로 동적으로 생성되고 웹페이지에 추가된 스크립트는 DOMContentLoaded를 막지 않습니다.

안녕하세요. 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 4기 수강 중인 hyeon입니다. 저번에는 과정 2달차 후기에 대해 소개해 드렸는데요 이번에는 과정 3달 차를 경험하면서 수강생 입장에서 느낀 생생한 후기를 소개해 드리려 합니다. 과정을 고민 중이신 분께 많은 도움이 되면 좋겠습니다.

🧑‍🏫 React

과정 2달 차까지는 html, css, javascript를 배우면서 웹의 기초를 튼튼히 다지는 시간을 가졌습니다. 웹의 기초를 배우면서 javascript가 정말 중요한것을 알았는데요. react, vue, angular 등등 유명한 프레임워크는 javascript를 토대로 설계되었기 때문에 javascript를 모르면 나머지를 배우기가 어려워 기초가 정말 중요한것을 다시 알았습니다. 이러한 기초를 가지고 이제 응용 과정을 들어갔는데요 2022 기준으로 프론트엔드 프레임워크 유지율 순위를 보시면 react가 상위권에 있는 것을 알 수 있습니다.

2022 프론트엔드 프레임워크 유지율 순위

그만큼 아직도 핫한 프레임워크이며 기업에서도 많이 사용하므로 패스트캠퍼스에서도 트렌드에 따라 react강의를 진행하였습니다. 강의는 총 18회차로 진행되었고 react뿐만 아니라 redux, redux-thunk, redux-toolkit, react-query 등등 react에 관한 다양한 라이브러리도 배울 수 있었습니다.

또한 강의가 끝나면 해당 강의에 대한 퀴즈 및 실습이 주어지는데 수강생들과 자유롭게 질문과 토론이 주어져 복습을 하면서 자기 주도적 학습을 더욱 끌어올릴 수 있다는 장점이 있습니다.

실제 slack에서 진행된 질문/토론

만약 해당 강의에 대해 개선점이나 아쉬운 점이 있다면 강의가 끝나면 매번 해당 강의에 대한 만족도 조사를 시행하므로 실시간으로 개선이 된다는 메리트도 있습니다.

강사님께서 적극적이셔서 오히려 만족도 조사를 권장하십니다 ㅎㅎ

🧑‍💻 토이 프로젝트

react강의 중반쯤에 배운 내용을 토대로 간단한 토이 프로젝트를 진행합니다. 미세먼지 알리미를 만드는 개인 프로젝트였는데요 강의만 무난하게 따라가면 무리 없이 수행할 수 있는 수준이었습니다. 토이 프로젝트 기간에는 강사님께서 실시간으로 질문이나 코드를 봐주시므로 프로젝트를 수행하는데 어려움이 있으신분은 질문을 통해 해결하시면서 도움을 많이 받으셨습니다. 또한 프로젝트가 끝나고 강사님께서 따로 해설과 코드를 제공해주시므로 본인의 코드와 비교하여 개선할 점을 참고해 실력을 증진할 수 있다는 점이 좋았습니다.

토이프로젝트 설명 문서 중 일부 발췌

🌟 마무리

저는 과정 3달 차까지 과정을 밟아오면서 실력이 빨리 성장하는 것이 느껴져 좋았습니다. 특히 멘토분들과 강사님들의 현직자이셔서 빠른 트렌트와 그에 맞는 상황들을 잘 알고 계셔서 앞으로 취업 시 해야 할 행동들에 대해 많이 알려주셨습니다. 이러한 정보를 얻으려면 따로 열심히 알아보고 그만큼 시간을 투자를 해야 하므로 프로젝트에 집중할 시간을 줄여야 했겠지만, 패스트캠퍼스에서는 체계적으로 관리 되므로 프로젝트와 취업에 관한 준비를 효율적으로 준비할 수 있다는 점이 너무 좋았습니다. 저는 곧 파이널 프로젝트를 앞두고 있는데요 걱정되면서 한편으로는 취업을 할때가 다가오니 기대가 됩니다 ㅎㅎ.

이 글을 읽는 분들께서 많은 도움이 되었으면 좋겠습니다. 모두 다 같이 취업에 꼭 성공하시길 바랍니다! 긴 글 읽어주셔서 감사합니다. 다음 글은 기자단 중간 회고 후기로 찾아뵙겠습니다.

안녕하세요. 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 4기 수강 중인 hyeon입니다. 저번에는 과정 1달차 후기에 대해 소개해 드렸는데요 이번에는 과정 2달 차를 경험하면서 수강생 처지에서 솔직히 느낀 점을 소개해 드리려 합니다! 과정을 고민 중이신 분께 많은 도움이 되면 좋겠습니다!

🧑‍🏫 실시간 강의

과정 2달 차에서는 JavaScript 심화 과정 커리큘럼이 진행되었습니다. 심화 과정에서는 배운 내용을 바탕으로 간단한 토이프로젝트 3개를 진행하였습니다. 자칫 강의만 듣고 넘어가면 나중에 배운 것을 잊어버리거나 활용할 기회가 없어 JavaScript를 다루는 데 어려움이 있을 뻔했는데요 토이 프로젝트를 경험해 보면서 왜 강의에서 이런 내용을 가르쳤는지 이해가 되고 직접 부딪혀 보니 실력도 빨리 성장했습니다. 토이 프로젝트가 끝나면 팀 프로젝트가 시작됩니다. 이 부분은 토이프로젝트에서 다루겠습니다.

강의 후기로는 박영웅 강사님의 강의는 정말 만족스러웠습니다. 강의가 끝나고 수업 내용이나 토이 프로젝트에 대한 모르는 부분에 대해서 질문을 하면 실시간으로 세세하게 봐주시고 강의가 끝나고도 1시간가량 질문에 대해 답변해주시는 열정이 정말 대단하다고 느꼈습니다. 만약 수업 시간에 질문을 놓쳤다면 slack을 통한 질문을 작성하면 정말 빠르고 친절하게 답변해주십니다! 오히려 질문이 없으면 강사님께서 서운해하셔서 정말 열정이 많으신 분이라 좋았습니다.

slack에서 진행된 실제 질문에 대한 답변 일부

저는 이러한 점이 실시간 강의의 장점이라고 생각합니다. 만약 독강이거나 온라인 강의만 들었다면 빠른 피드백의 한계가 있어 아쉬웠을 겁니다. 패스트캠퍼스에서만 이런 혜택을 누릴 수 있으니 고민이 되는 분들은 신청 기간이 끝나기 전에 서두르세요!

🧑‍💻 팀 프로젝트

4번째 프로젝트인 팀 프로젝트를 진행하였습니다. 프로젝트의 주제는 주어진 REST API 이용하여 팀원과 상의 후 자유롭게 사이트를 제작하는 것입니다. 단, 프로젝트 사용 기술은 강의 때 배운 JavaScript만을 이용해야 했고 그 이외 라이브러리 사용은 자유였습니다. 저희 팀은 저를 포함하여 총 5명이 진행하였는데요 팀원 수는 팀마다 차이가 있지만 평균적으로 4~5명의 팀원이 모여 진행하였습니다.

프로젝트에서 주어진 REST API에 대한 설명

저는 팀 프로젝트를 하면서 정말 많은 경험을 얻었습니다. 경험도 좋았지만, 더 좋은 점은 프로젝트를 진행하면서 모르는 부분을 직접 강사님께 질문하면서 그에 대한 답변을 얻는다는 것이 좋았습니다. 강사님께서는 현업에 종사하시면서 겸업으로 강의를 진행하시기 때문에 최신 기술에 대한 정보를 바탕으로 답변을 얻어 예전 정보가 아닌 최신의 정보를 얻는다는 점이 장점이라고 생각합니다.

만약 팀 프로젝트를 팀원끼리만 진행하였다면 이 코드가 좋은 코드인지 또한 멘토링을 받고 싶어도 한계가 있어 받기 어려운 점을 패스트캠퍼스에서는 시원하게 받을 수 있어 정말 좋았습니다.

프로젝트가 끝나고 제출하면 현업에 종사하시는 멘토분들께서 직접 코드 리뷰도 진행해 주어 어떤 점이 아쉬웠고 어떤 점을 개선하면 좋은지 세세하게 알려주셔서 좋았습니다.

실제 멘토님의 코드 리뷰

📖 그룹스터디 멘토링

그룹스터디를 진행하면서 담당 멘토님이 직접 멘토링을 해주십니다. 스터디 활동 간에 스터디원들끼리 모르는 내용이나 깊게 파고들어야 할 지식이 생기면 멘토링 요청서에 질문을 작성합니다. 질문을 작성하면 멘토님께서 질문에 대한 답변을 작성해주시고 또한 추가로 멘토링 시간이 따로 할당되어 zoom에서 실시간으로 질문에 대한 자세한 답변을 들을 수 있어 정말 좋았습니다.

🌟 마무리

저는 과정 2달 차까지 경험해보면서 정말 만족스러웠습니다. 웹 개발을 하면서 배워야 할 과정 그대로 밟아가면서 효율적으로 성장한다는 것을 느꼈고 실속있게 짜인 커리큘럼대로 진행하니 시간 낭비 없이 취업 준비에만 집중할 수 있었습니다.

또한 실시간으로 멘토님 또는 강사님과 답변을 주고받는 시스템이 가장 큰 장점이라고 생각합니다. 언제든지 모르는 부분에 대한 즉각적인 피드백은 어디에서나 경험할 수 없다고 생각합니다. 오직 패스트캠퍼스에서만 이러한 시스템이 잘 구축되어 있어 개발자가 꿈이거나 현재 고민하고 계시는 분께서는 주저 없이 신청하세요!

이 글을 읽고 많은 도움이 되었으면 좋겠습니다. 긴 글 읽어주셔서 감사합니다. 다음 글은 3달 차 과정 후기로 찾아뵙겠습니다.

모듈패턴을 쓰는 이유와 특징

자바스크립트는 private 등의 접근 제한자가 없기때문에 클로저를 모듈패턴을 활용하여 이러한 특징들을 흉내내는 것

캡슐화

캡슐화, 즉 정보은닉을 구현하기 위해서 모듈패턴을 사용합니다. 따라서 이에 따른 오류로부터 보다 안전하게 값을 보호할 수 있습니다. 클로저를 통해 불필요한 전역 변수 사용을 줄이고, 스코프를 이용해 값을 보다 안전하게 다룰 수 있습니다. 또한 모든 관련 코드를 단일 논리 블록에 캡슐화할 수 있으므로 유지 관리가 더 쉬워집니다.

전역변수의 억제

전역 변수가 좋지 않은 이유는, 전역 변수는 다른 함수 혹은 로직 등에 의해 의도되지 않은 변경을 초래하는 side effect때문인데 side effect를 최소화하면, 의도되지 않은 변경을 줄일 수 있습니다. 특정 속성과 기능을 공개로 노출하고 개체 자체 내에서 속성과 기능의 범위를 제한하여 private로 만들 수도 있습니다. 그렇기 때문에 해당 변수는 함수 범위 외부에서 액세스할 수 없습니다. 이를 통해서 전역 스코프의 변수들과 이름이 충돌하는 문제를 줄일 수 있습니다.

재사용성

단일 코드 단위를 전체 애플리케이션에서 재사용할 수 있습니다. 모듈로 묶인 기능은 재사용할 수 있으며 여러 지점에서 동일한 기능을 정의할 필요가 없습니다.

예제

var Counter = (function () { //즉시실행함수로 감싼다
  // private 변수
  var num = 0;

  // 클로저
  //외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
    return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    }
  };
}());

// private 변수는 외부로 노출되지 않는다.
console.log(Counter.num); // undefined

console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2
console.log(Counter.decrease()); // 1
console.log(Counter.decrease()); // 0

Counter는 값으로 담고 있는 프로퍼티들을 담은 객체를 반환하고 있습니다. Counter의 스코프 밖에서 바라볼 때 Counter의 그 어떠한 프로퍼티에도 접근을 할 수 없습니다.

즉시실행함수는 한 번만 실행되므로 Counter가 호출될 때마다 num 변수가 초기화될 일은 없습니다.

즉시실행함수가 반환한 클로저는 Counter 변수에 할당되어 호출됩니다.

이 때 이 클로저는 자신이 정의된 위치에 의해 결정된 상위 스코프인 즉시실행 함수의 렉시컬 스코프를 기억하고 있어서 카운트 상태를 유지하기 위해 변수 num을 참조하고 변경할 수 있습니다.

결국 num은 클로저로 인해서 외부에서 접근할 수 없고 메서드들을 통해서 접근해야만 합니다.

2. 호스트 객체와 내장 객체의 차이점은 무엇인가요?

내장 객체

내장 객체는 ECMAScript 사양에 정의된 JavaScript 언어의 일부인 객체(예: String, Math, RegExp, Object, Function 등)

호스트 객체

브라우저 환경에서 제공하는 window, XmlHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체 브라우저에서 동작하는 환경의 호스트 객체는 전역 객체인 window, BOM(Browser Object Model)과 DOM(Document Object Model) 및 XMLHttpRequest 객체 등을 제공

• window
• document
• location
• XMLHttpRequest
• querySelectorAll ...

3. function Person(){}, var person = Person(), var person = new Person()의 차이점은 무엇인가요?

function Person(){}

function Person(){}은 정상적인 함수 선언

var person = Person()

var person = Person()은 생성자가 아니며 Person을 함수로 호출

• 함수를 생성자로 사용하려는 경우에 이렇게 호출하는 것은 일반적인 실수입니다. 일반적으로 생성자는 아무것도 반환하지 않으므로 일반 함수처럼 생성자를 호출하면 undefined가 반환되고 지정된 변수에 할당

var person = new Person()

Person.prototype을 상속받은 new 연산자를 사용하여 Person 객체의 인스턴스를 생성합니다. 또 다른 방법은 Object.create를 사용하는 것입니다: Object.create(Person.prototype).

function Person(name) {
  this.name = name;
}

var person = Person('John');
console.log(person); // undefined
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined

var person = new Person('John');
console.log(person); // Person { name: "John" }
console.log(person.name); // "john"

4. .call과 .apply의 차이점은 무엇인가요?

.call과 .apply는 모두 함수를 호출하는데 사용 apply()와 call() 메소드는 콜백 함수의 this를 위해서 사용되기도 한다 call()는 여러 인자를 나열해서 받고 apply()는 여러 인자를 한 배열에 받는다.

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 1, 2)); // 3
console.log(add.apply(null, [1, 2])); // 3

.call

• call()은 모든 함수에서 사용가능하며, this를 특정 객체로 지정할 수 있다.
• 호출함수.call(this로_지정할_대상)을 하면 함수에서 특정 객체를 this로 지정할 수 있다.

  const dog = {
  age: 12 
  }
  function printDogAge() {
  console.log(this.age)
  }
  printDogAge.call(dog)    // 12

매개변수를 전달하고 싶으면 call은 어떻게 써야할까?

call()의 첫 번째 인자가 this로 지정할 객체라면, 두 번째 인자부터는 함수에 넘겨줄 매개변수를 지정할 수 있다.

const dog = {
  age: 12 
}
function printDogAge(name, location) {
  console.log(this.age, name, location)
}
printDogAge.call(dog, 'mike', 'seoul')    // 12, mike, seoul

.apply

apply()는 두번째 인자에서 배열 형태로 넘긴 것을 각각 하나의 인자로 넘긴다.

const dog = {
  age: 12 
}
function printDogAge(name, location) {
  console.log(this.age, name, location)
}
printDogAge.apply(dog, ['mike', 'seoul'])   // 12, mike, seoul

5. Function.prototype.bind에 대해 설명하세요.

함수에 인자로 전달한 this가 바인딩된 새로운 함수를 리턴한다 즉, .bind는 .apply, .call 메소드와 같이 함수를 실행하지 않기 때문에 명시적으로 함수를 호출할 필요가 있다

function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

// bind 메서드는 첫 번째 인수로 전달한 thisArg로 this 바인딩이 교체된
// getThisBinding 함수를 새롭게 생성해 반환한다.
console.log(getThisBinding.bind(thisArg)); // getThisBinding
// bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArg)()); // {a: 1}

메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치 하는 문제를 해결하기 위해 유용하게 사용

const person = {
  name: 'Lee',
  foo(callback) {
    // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
    setTimeout(callback.bind(this), 100);
  }
};

person.foo(function () {
  console.log(`Hi! my name is ${this.name}.`); // Hi! my name is Lee.
});

따라서 bind 메서드를 사용하면 함수의 this 값을 변경하고, 새로운 함수를 생성할 수 있다. 이를 이용하면 함수를 이전에 바인딩된 this 값으로 호출하지 않고도 원하는 객체를 this 값으로 사용할 수 있다.

6. 언제 document.write()를 사용하나요?

JavaScript에서 document.write()는 현재 문서에 새로운 HTML 콘텐츠를 동적으로 삽입하기 위해 사용됩니다. 이 함수는 다음과 같은 경우에 사용될 수 있습니다.

• 초기 로딩시 HTML 콘텐츠를 삽입해야 할 때
• 이벤트 처리 루틴에서 HTML 콘텐츠를 삽입해야 할 때
• 간단한 테스트나 디버깅 목적으로 코드를 작성할 때

document.write() 함수는 자바스크립트가 로딩되는 시점에 실행되므로, 해당 스크립트가 HTML 문서의 로딩 시점 이후에 실행될 경우에는 적용되지 않습니다. 또한, document.write() 함수는 무분별한 사용으로 인해 페이지 구조가 복잡해질 우려가 있으므로, 가능한 경우에는 DOM 조작 메서드를 사용하는 것이 좋습니다.

7. Feature detection, Feature inference, UA String의 차이점은 무엇인가요?

Feature Detection

브라우저가 특정 코드 블록을 지원하는지에 따라 다른 코드를 실행하도록 하여, 일부 브라우저에서 항상 오류 대신 무언가 작동하도록 합니다

Feature inference

Feature detection과 마찬가지로 기능을 확인하지만 다른 함수도 존재한다고 가정하고 사용

UA String

네트워크 프로토콜 피어가 요청하는 소프트웨어 유저 에이전트의 응용 프로그램 유형, 운영 체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별할 수 있도록 해주는 browser-reported String입니다

8. Ajax에 대해 가능한 한 자세히 설명하세요.

자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식 Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작

Ajax의 동작방식

1. 사용자가 웹 페이지의 Ajax 요청을 트리거합니다.
2. JavaScript는 XMLHttpRequest 객체를 사용하여 서버로 데이터 요청을 보냅니다.
3. 서버는 요청을 처리하고, 필요한 데이터를 XML, JSON 또는 HTML 형태로 반환합니다.
4. JavaScript는 반환된 데이터를 처리하여 웹 페이지의 특정 부분을 업데이트합니다.
5. 이러한 업데이트는 페이지를 다시 로드하지 않고 비동기적으로 수행됩니다.

9. 익명 함수의 일반적인 사용 사례는 무엇인가요?

콜백 함수

콜백 함수는 다른 함수의 인수로 전달되는 함수입니다. 예를 들어, 웹 애플리케이션에서 비동기식 요청을 보낼 때, 요청이 완료될 때 실행할 함수를 콜백 함수로 전달할 수 있습니다. 이때 콜백 함수는 일반적으로 익명 함수로 작성됩니다.

이벤트 핸들러

웹 페이지나 애플리케이션에서 발생하는 이벤트에 대한 처리를 위해 이벤트 핸들러를 사용합니다. 이 때, 익명 함수를 이벤트 핸들러로 사용하여 이벤트가 발생했을 때 실행할 코드를 정의할 수 있습니다.

함수 리턴값으로 사용

함수 내부에서 동적으로 함수를 생성해야 할 때, 익명 함수를 사용할 수 있습니다. 예를 들어, 정렬 알고리즘을 구현하는 함수를 작성할 때, 사용자가 정렬 기준을 지정할 수 있도록 함수를 작성해야 할 경우, 익명 함수를 반환값으로 사용하여 동적으로 사용자 정의 함수를 생성할 수 있습니다.

즉시 실행 함수

즉시 실행 함수는 함수를 정의하자마자 즉시 호출하여 실행하는 함수입니다. 이 함수는 전역 네임스페이스를 오염시키지 않고 지역 변수를 사용할 수 있는 장점이 있으며, 일반적으로 익명 함수로 작성됩니다.

함수 매개변수로 사용

함수 내부에서 익명 함수를 선언하여 다른 함수에 전달하는 경우도 있습니다. 이때, 익명 함수는 함수의 매개변수로 사용됩니다. 이를 통해 함수의 기능을 확장하거나 다른 함수에서 처리해야 할 작업을 구현할 수 있습니다.

질문

질문1

모듈패턴을 쓰는 이유를 설명해주세요

답변

• 정보은닉을 구현하기 위해
• 전역변수의 억제
• 재사용성

질문2

Function.prototype.bind를 사용하는 상황을 설명해주세요

답변

메서드의 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this가 불일치 하는 문제를 해결하기 위해 유용하게 사용

질문3

Ajax의 동작방식을 설명해주세요

답변

1. 사용자가 웹 페이지의 Ajax 요청을 트리거합니다.
2. JavaScript는 XMLHttpRequest 객체를 사용하여 서버로 데이터 요청을 보냅니다.
3. 서버는 요청을 처리하고, 필요한 데이터를 XML, JSON 또는 HTML 형태로 반환합니다.
4. JavaScript는 반환된 데이터를 처리하여 웹 페이지의 특정 부분을 업데이트합니다.
5. 이러한 업데이트는 페이지를 다시 로드하지 않고 비동기적으로 수행됩니다.

질문4

익명 함수의 일반적인 사용 사례를 설명해주세요

답변

• 콜백 함수
• 이벤트 핸들러
• 함수 리턴값으로 사용
• 즉시 실행 함수
• 함수 매개변수로 사용

2. this가 JavaScript에서 어떻게 작동하는지 설명하세요.

3. 프로토타입 상속이 어떻게 작동하는지 설명하세요.

4. AMD vs CommonJS에 대해 어떻게 생각하나요?

5. 다음이 IIFE로 작동하지 않는 이유를 설명하세요: function foo(){ }();를 IIFE로 만들기 위해서는 무엇을 바꿔야하나요?

6. null, undefined, undeclared의 차이점은 무엇인가요? 어떻게 이 상태들에 대한 확인을 할 것인가요?

7. 클로저는 무엇이며, 어떻게/왜 사용하나요?

8. .forEach 루프와 .map() 루프 사이의 주요 차이점을 설명할 수 있나요? 왜 둘 중 하나를 선택할 것인가요?

2.3.1 네트워크 기기의 처리 범위

2.3.2 애플리케이션 계층을 처리하는 기기

L7 스위치

스위치는 여러 장비를 연결하고 데이터 통신을 중재하며 목적지가 연결된 포트로만 전기 신호를 보내 데이터를 전송하는 통신 네트워크 장비이다 L7 스위치는 로드밸런서라고도 하며 서버의 부하를 분산하는 기기

2.3.3 인터넷 계층을 처리하는 기기

2.3.4 데이터 링크 계층을 처리하는 기기

2.3.5 물리 계층을 처리하는 기기

2.2.1 계층 구조

TCP/IP 계층은 네 개의 계층을 가지고 있으며 OSI 7계층과 많이 비교한다 OSI계층은 애플리케이션 계층을 세 개로 쪼개고 링크 계층을 데이터 링크 계층, 물리 계층으로 나눠서 표현하는 것이 다르며, 인터넷 계층을 네트워크 계층으로 부른다는 점이 다르다 이 계층들은 특정 계층이 변경되었을 때 다른 계층이 영향을 받지 않도록 설계되었다

애플리케이션 계층

FTP, HTTP, SSH, SMTP, DNS 등 응용 프로그램이 사용되는 프로토콜 계층이며 웹 서비스, 이메일 등 서비스를 실질적으로 사람들에게 제공하는 층

전송 계층

송신자와 수신자를 연결하는 통신 서비스를 제공하며 연결 지향 데이터 스트림 지원, 신뢰성, 흐름 제어를 제공할 수 있으며 애플리케이션과 인터넷 계층 사이의 데이터가 전달될 때 중계 역할을 한다

• TCP: 패킷 사이의 순서를 보장하고 연결지향 프로토콜을 사용해서 연결을 하여 신뢰성을 구축해서 수신 여부를 확인하며 가상회선 패킷 교환 방식을 사용
• UDP: 순서를 보장하지 않고 수신 여부를 확인하지 않으며 단순히 데이터만 주는 데이터그램 패킷 교환 방식을 사용

가상회선 패킷 교환 방식

각 패킷에는 가상회선 식별자가 포함되며 모든 패킷을 전송하면 가상회선이 해제되고 패킷들은 전송된 순서대로 도착하는 방식

데이터그램 패킷 교환 방식

패킷이 독립적으로 이동하며 최적의 경로를 선택하여 가는데, 하나의 메시지에서 분할된 여러 패킷은 서로 다른 경로로 전송될 수 있으며 도착한 순서가 다를 수 있는 방식

TCP 연결 성립 과정

TCP는 신뢰성을 확보할 떄 3-웨이 핸드셰이크 라는 작업을 진행 3-웨이 핸드셰이크 과정 이후 신뢰성이 구축되고 데이터 전송을 시작

• TCP는 이 과정이 있기 때문에 신뢰성이 있는 계층이라고 한다
• UDP는 없기 때문에 신뢰성이 없는 계층이라고 한다

TCP 연결 해제 과정

TCP가 연결을 해제할 때는 4-웨이 핸드셰이크 과정이 발생

TIME_WAIT가 일정 시간 뒤에 닫는 이유는?

1. 지연 패킷이 발생할 경우를 대비하기 위해 패킷이 뒤늦게 도달하고 이를 처리하지 못한다면 데이터 무결성 문제가 발생
2. 두 장치가 연결이 닫혔는지 확인하기 위해 LAST_ACK 상태에서 닫히게 되면 다시 새로운 연결을 하려고 할 때 장치는 줄곧 LAST_ACK로 되어 있기 때문에 접속 오류가 나타난다

인터넷 계층

• 장치로부터 받은 네트워크 패킷을 IP주소로 지정된 목적지로 전송하기 위해 사용되는 계층
• IP, ARP, ICMP 등이 있으며 패킷을 수신해야 할 상대의 주소를 지정하여 데이터를 전달
• 상대방이 제대로 받았는지에 대해 보장하지 않는 비연결형적인 특징을 가지고 있다

링크계층

전선, 광섬유, 무선 등으로 실질적으로 데이터를 전달하며 장치 간에 신호를 주고받는 규칙을 정하는 계층 네트워크 접근 계층이라고도 한다 물리계층과 데이터 링크 계층으로 나누기도 하는데 물리계층은 무선 LAN과 유선 LAN을 통해 0과 1로 이루어진 데이터를 보내는 계층을 말하며 데이터 링크계층은 이더넷 프레임을 통해 에러 확인, 흐름 제어, 접근 제어를 담당하는 계층을 말한다

유선 LAN

• 전이중화 통신 양쪽 장치가 동시에 송수신할 수 있는 방식 송신로와 수신로로 나눠서 데이터를 주고 받으며 현대의고속 이더넷은 이 방식을 기반으로 통신

• CSMA/CD 데이터를 보낸 이후 충돌이 발생한다면 일정 시간 이후 재전송하는 방식 수신로와 송신로를 각각 둔 것이 아니고 한 경로를 기반으로 데이터를 보내기 때문에 데이터를 보낼 때 충돌에 대해 대비해야 했기 때문

유선 LAN을 이루는 케이블

• 트위스트 페어 케이블 여덟 개의 구리선을 두 개씩 꼬아서 묶은 케이블을 지칭

• 광섬유 케이블 광섬유로 만든 케이블 레이저를 이용해서 통신하기 때문에 장거리 및 고속 통신이 가능

무선 LAN

• 반이중화 통신 양쪽 장치로는 서로 통신할 수 있지만, 동시에는 통신할 수 없으며 한 번에 한 방향만 통신 할 수 있는 방식 장치가 신호를 수신하기 시작하면 응답하기 전에 전송이 완료될 때까지 기다려야 한다 둘 이상의 장치가 동시에 전송하면 충돌이 발생하여 메시지가 손실되거나 왜곡될 수 있기 때문에 충돌 방지 시스템이 필요하다

• CSMA/CA 과정

무선 LAN을 이루는 주파수

무선 신호 전달 방식을 이용하며 2대 이상의 장치를 연결하는 기술 비유도 매체인 공기에 주파수를 쏘아 무선 통신망을 구축하는데, 주파수 대역은 2.4GHz대역 또는 5GHz대역 중 하나를 써서 구축

• 와이파이 전자기기들이 무선 LAN 신호에 연결할 수 있게 하는 기술 지그비, 블루투스 등도 무선LAN을 이용한 기술

• BSS 기본 서비스 집합을 의미하며, 동일 BSS내에 있는 AP들과 장치들이 서로 통신이 가능한 구조 근거리 무선 통신을 제공하고 하나의 AP만을 기반으로 구축이 되어 있어 사용자가 한곳에서 다른곳으로 자유롭게 이동하며 네트워크에 접속하는 것은 불가능

• ESS 하나 이상의 연결된 BSS 그룹 장거리 무선 통신을 제공하며 BSS보다 더 많은 가용성과 이동성을 지원 사용자는 한 장소에서 다른 장소로 이동하며 중단 없이 네트워크에 계속 연결할 수 있다

이더넷 프레임

데이터 링크 계층은 이더넷 프레임을 통해 전달받은 데이터의 에러를 검출하고 캡슐화한다

계층 간 데이터 송수신 과정

애플리케이션 계층에서 전송 계층으로 보내는 요청 값들이 캡슐화 과정을 거쳐 전달 되고 다시 링크 계층을 통해 해당 서버와 통신을 하고 해당 서버의 링크 계층으로부터 애플리케이션까지 비캡슐화 과정을 거쳐 데이터가 전송

캡슐화 과정

상위 계층의 헤더와 데이터를 하위 계층의 데이터 부분에 포함시키고 해당 계층의 헤더를 삽입하는 과정 애플리케이션 계층의 데이터가 전송 계층으로 전달되면서 세그먼트 또는 데이터그램화 되며 TCP헤더가 붙는다 이후 인터넷 계층으로 가면서 IP헤더가 붙여지게 되며 패킷화되고 링크 계층으로 전달되면서 프레임 헤더와 프레임 트레일러가 붙어 프레임화가 된다

비캡슐화 과정

하위 계층에서 상위 계층으로 가며 각 계층의 헤더 부분을 제거하는 과정 캡슐화된 데이터를 받게 되면 링크 계층에서부터 타고 올라오면서 프레임화된 데이터는 다시 패킷화를 거쳐 세그먼트, 데이터그램화를 거쳐 메시지화가 되는 비캡슐화 과정이 일어난다 최종적으로 사용자에게 애플리케이션의 PDU인 메시지로 전달

2.2.2 PDU

네트워크의 어떠한 계층에서 계층으로 데이터가 전달될 때 한 덩어리의 단위를 PDU라고 한다 PDU는 제어 관련 정보들이 포함된 헤더, 데이터를 의미하는 페이로드로 구성되어 있으며 계층마다 부르는 명칭이 다르다 PDU중 아래 계층인 비트로 송수신하는 것이 모든 PDU중 가장 빠르고 효율성이 높다 하지만 애플리케이션 계층에서는 문자열을 기반으로 송수신을 하는데 헤더에 authorization값 등 다른 값들을 넣는 확장이 쉽기 때문

네트워크란 노드와 링크가 서로 연결되어 있거나 연결되어 있으며 리소스를 공유하는 집합을 의미 노드란 서버, 라우터, 스위치 등 네트워크 장치를 의미하고 링크는 유선 또는 무선을 의미

2.1.1 처리량과 지연 시간

처리량

링크 내에서 성공적으로 전달된 데이터의 양을 말하며 보통 얼만큼의 트래픽을 처리했는지를 나타낸다 많은 트래픽을 처리한다 = 많은 처리량을 가진다 단위로는 bps를 쓴다 초당 전송 또는 수신되는 비트 수

지연 시간

지연 시간은 매체 타입(무선, 유선), 패킷 크기, 라우터의 패킷 처리 시간에 영향을 받는다

2.1.2 네트워크 토폴로지와 병목 현상

네트워크 토폴로지

노드와 링크가 어떻게 배치되어 있는지에 대한 방식이자 연결 형태를 의미

트리 토폴로지

계층형 토폴로지라고 하며 트리 형태로 배치한 네트워크 구성을 말한다 노드의 추가, 삭제가 쉬우며 특정 노드에 트래픽이 집중될 때 하위 노드에 영향을 끼칠 수 있다

버스 토폴로지

중앙 통신 회선 하나에 여러개의 노드가 연결되어 공유하는 네트워크 구성을 말하며 근거리 통신망(LAN)에서 사용한다

• 장점 설치 비용이 적고 신뢰성이 우수하며 중앙 통신 회선에 노드를 추가하거나 삭제하기 쉽다
• 단점 스푸핑이 가능한 문제점이 있다
• 스푸핑: LAN상에서 송신부의 패킷을 송신과 관련 없는 다른 호스크에 가지 않도록 하는 스위칭 기능을 마비시키거나 속여서 특정 노드에 해당 패킷이 오도록 처리하는 것

스타 토폴로지

중앙에 있느 노드에 모두 연결된 네트워크

• 장점 노드를 추가하거나 에러를 탐지하기 쉽고 패킷의 충돌 발생 가능성이 적다 어떠한 노드에 장애가 발생해도 쉽게 에러를 발견할 수 있으며 장애 노드가 중앙 노드가 아닐 경우 다른 노드에 영향을 끼치는 것이 적다
• 단점 중안 노드에 장애가 발생하면 전체 네트워크를 사용할 수 없다

링형 토폴로지

각각의 노드가 양 옆의 두 노드와 연결하여 전체적으로 고리처럼 하나의 연속된 길을 통해 통신을 하는 망 구성 방식 데이터는 노드에서 노드로 이동하며 각각의 노드는 고리 모양의 길을 통해 패킷을 처리

• 장점 노드 수가 증가되어도 네트워크상의 손실이 거의 없고 충돌이 발생되는 가능성이 적고 노드의 고장 발견을 쉽게 찾을 수 있다
• 단점 네트워크 구성 변경이 어렵고 회선에 장애가 발생하면 전체 네트워크에 영향을 크게 끼친다

메시 토폴로지

망형 토폴로지라고도 하며 그물망처럼 연결되어 있는 구조

• 장점 한 단말 장치에 장애가 발생해도 여러 개의 경로가 존재하므로 네트워크를 계속 사용할 수 있고 트래픽도 분산 처리가 가능
• 단점 노드의 추가가 어렵고 구축 비용과 운용 비용이 고가이다

병목 현상

전체 시스템의 성능이나 용량이 하나의 구성 요소로 인해 제한을 받는 현상

2.1.3 네트워크 분류

LAN

근거리 통신망을 의미하며 같은 건물인 좁은 공간에서 운영 전송 속도가 빠르고 혼잡하지 않다

MAN

대도시 지역 네트워크를 나타내며 도시같은 넓은 지역에서 운영 전송속도는 평균이며 LAN보다는 더 많이 혼잡

WAN

광역 네트워크를 의미하며 국가 또는 대륙 같은 더 넓은 지역에서 운영 전송 속도는 낮으며 MAN보다 더 혼잡

2.1.4 네트워크 성능 분석 명령어

ping

네트워크 상태를 확인하려는 대상 노드를 향해 일정 크기의 패킷을 전송하는 명령어 이를 통해 해당 노드의 패킷 수신 상태와 도달하기까지 시간 등을 알 수 있으며 해당 노드까지 네트워크가 잘 연결되어 있는지 확인할 수 있다 TCP/IP 프로토콜 중에 ICMP 프로토콜을 통해 동작하며 이 때문에 ICMP 프로토콜을 지원하지 않는 기기를 대상으로는 실행할 수 없거나 네트워크 정책상 ICMP나 traceroute를 차단하는 대상의 경우 ping 테스팅은 불가능

netstat

접속되어 있는 서비스들의 네트워크 상태를 표시하는데 사용되며 네트워크 접속, 라우팅 테이블, 네트워크 프로토콜 등 리스트를 보여준다. 주로 서비스의 포트가 열려 있는지 확인 할 때 사용

nslookup

DNS에 관련된 내용을 확인하기 위해 쓰는 명령어 특정 도메인에 매핑된 IP를 확인하기 위해 사용

tracert

목적지 노드까지 네트워크 경로를 확인할 때 사용하는 명령어 어느 구간에서 응답 시간이 느려지는지 등을 확인할 수 있다

2.1.5 네트워크 프로토콜 표준화

다른 장치들끼리 데이터를 주고 받기 위해 설정된 공통된 인터페이스 IEEE 또는 IETF라는 표준화 단체가 이를 정한다 서로 약속된 인터페이스인 HTTP라는 프로토콜을 통해 노드들은 웹 서비스를 기반으로 데이터를 주고받을 수 있다

1.1 디자인 패턴

1.1.1 싱글톤 패턴

해당 클래스의 인스턴스가 오직 하나만 생성되도록 보장하고 이를 전역적으로 제공하는 디자인 패턴입니다. 여러 번의 인스턴스 생성으로 인한 자원 낭비를 막을 수 있으며, 하나의 인스턴스를 공유하여 사용하므로 객체 간 정보 교환에 용이

장점과 단점

장점

1. 하나의 인스턴스만 생성됩니다. 싱글톤 패턴을 사용하면 전역적으로 하나의 인스턴스만 생성되기 때문에, 메모리를 절약할 수 있습니다.

2. 전역적인 접근이 가능합니다. 자바스크립트에서 전역 변수를 사용하면 전역적으로 접근 가능하지만, 이는 전역 네임스페이스 오염 문제를 발생시킬 수 있습니다. 하지만 싱글톤 패턴을 사용하면 전역적으로 접근 가능하면서도, 전역 네임스페이스 오염 문제를 방지할 수 있습니다.

3. 객체 지향 프로그래밍의 원칙을 따릅니다. 싱글톤 객체는 전역적으로 사용되기 때문에, 단일 책임 원칙(Single Responsibility Principle)을 준수할 수 있습니다. 즉, 하나의 객체가 하나의 책임만을 지니기 때문에, 객체 지향 프로그래밍의 원칙을 잘 따르고 있습니다.

4. 객체 생성과 소멸에 대한 비용을 줄일 수 있습니다. 객체 생성과 소멸에는 비용이 들기 때문에, 이러한 비용을 줄일 수 있는 싱글톤 패턴을 사용하면 프로그램의 성능을 향상시킬 수 있습니다.

단점

1. 유연성이 떨어진다. 싱글톤은 전역적인 접근을 가능하게 하기 때문에, 다른 객체들과의 상호작용이 어렵다. 객체 간 결합도가 높아지고, 테스트가 어려워진다.

2. 테스트가 어렵다. 싱글톤 객체가 전역적으로 접근 가능하기 때문에, 해당 객체에 의존하는 다른 객체들의 테스트를 진행할 때, 싱글톤 객체의 초기 상태를 설정하고 해제하는 작업이 필요하다.

3. 멀티스레드 환경에서 안전하지 않다. 싱글톤 객체는 동시에 여러 스레드에서 접근 가능하기 때문에, 동기화 문제가 발생할 수 있다.

4. 메모리 누수가 발생할 수 있다. 싱글톤 객체는 프로그램이 종료될 때까지 메모리를 차지하게 되는데, 이를 해제하지 않으면 메모리 누수가 발생할 수 있다.

의존성 주입

모듈 간의 결합을 강하게 만들 수 있다는 단점 의존성 주입(DI, Dependency Injection)을 통해 모듈 간의 결합을 조금 더 느슨하게 만들어 해결

의존성이란 종속성이라고도 한다 A가 B에 의존성이 있다는 것은 B의 변경 사항에 대해 A 또한 변해야 된다는 것을 의미

의존성 주입자가 가로채 메인모듈이 간접적으로 의존성을 주입하는 방식 메인 모듈은 하위 모듈에 대한 의존성이 떨어지게 된다 이를 디커플링이라고 한다

디커플링

각각의 컴포넌트나 모듈을 독립적으로 개발 및 수정할 수 있도록 만드는 것 이를 통해 시스템이나 구성 요소 간의 결합도(coupling)를 낮추고, 유연성과 확장성을 향상시킬 수 있습니다.

의존성 주입의 장점

모듈들을 쉽게 교체할 수 있는 구조가 되어 테스팅 하기 쉽고 마이그레이션하기도 수월 추상화 레이어를 넣고 이를 기반으로 구현체를 넣어 주기 때문에 애플리케이션 의존성 방향이 일관되고, 애플리케이션을 쉽게 추론할 수 있으며, 모듈간의 관계들이 조금 더 명확해진다

의존성 주입의 단점

모듈들이 더욱더 분리되므로 클래스 수가 늘어나 복잡성이 증가될 수 있으며 약간의 런타임 패널티가 생기기도 한다

의존성 주입 원칙

상위모듈은 하위모듈에서 어떠한 것도 가져오지 않아야 한다 둘 다 추상화에 의존해야 하며, 이때 추상화는 세부 사항에 의존하지 말아야 한다

1.1.2 팩토리 패턴

팩토리 메소드 패턴에서는 객체를 생성하기 위한 인터페이스를 정의하는데, 어떤 클래스의 인스턴스를 만들지는 서브 클래스에서 결정하게 만드는 패턴.

장점과 단점

장점

1. 유지보수성이 높아집니다.

2. 코드 중복을 피할 수 있습니다.

3. 코드 확장성이 높아집니다.

4. 객체 생성 코드가 감춰집니다.

   단점

5. 팩토리 클래스가 많아질 수 있습니다. 팩토리 패턴을 사용하면서 팩토리 클래스가 많아질 수 있습니다. 이는 코드의 복잡도를 높일 수 있습니다.

6. 객체 생성 메서드를 추가할 때, 팩토리 클래스를 수정해야 합니다. 객체 생성 메서드를 추가할 때, 팩토리 클래스를 수정해야 합니다. 이는 코드 변경이 필요하므로 유연성이 떨어집니다.

7. 객체 생성 메서드를 오버라이딩할 수 없습니다. 자바스크립트에서는 클래스를 정의할 때 메서드를 오버라이딩할 수 있지만, 팩토리 패턴에서는 객체 생성 메서드를 오버라이딩할 수 없습니다.

1.1.3 전략 패턴

전략 패턴은 알고리즘을 캡슐화하여, 필요에 따라 서로 교환해서 사용할 수 있도록 만든 디자인 패턴입니다. 이를 통해 클라이언트는 각각의 알고리즘을 선택하여 사용할 수 있으며, 알고리즘의 변경이나 추가가 용이해지며 코드의 재사용성과 유지보수성이 좋아집니다.

장점

유연성: 전략 패턴은 알고리즘을 실행 중에 변경하거나 확장해야 할 때 유용합니다. 즉, 코드 수정 없이 새로운 알고리즘을 추가하거나 기존 알고리즘을 수정할 수 있습니다.

재사용성: 전략 패턴은 알고리즘을 클래스로 캡슐화하여 재사용성을 높입니다. 이러한 구조를 사용하면 알고리즘이 다른 클래스에서도 재사용될 수 있습니다.

테스트 용이성: 전략 패턴은 알고리즘을 캡슐화하고 인터페이스를 사용하여 각 알고리즘을 테스트하기 쉽습니다. 즉, 각각의 전략을 단위 테스트할 수 있으며, 코드의 결함을 발견하고 수정하기 쉽습니다

단점

복잡성: 전략 패턴은 추가적인 클래스와 인터페이스를 필요로 합니다. 이러한 클래스와 인터페이스는 코드의 복잡성을 증가시키므로, 작은 프로그램에서는 사용하지 않는 것이 좋습니다.

오버헤드: 전략 패턴은 실행 시간에 알고리즘을 변경하기 때문에 약간의 오버헤드가 발생할 수 있습니다. 이러한 오버헤드는 알고리즘이 간단한 경우 큰 문제가 되지 않지만, 알고리즘이 복잡한 경우 성능 저하를 초래할 수 있습니다.

선택의 어려움: 전략 패턴을 사용할 때 적절한 전략을 선택하는 것이 중요합니다. 올바른 전략을 선택하지 않으면 프로그램의 성능이 저하될 수 있습니다.

1.1.4 옵저버 패턴

객체의 상태 변화를 관찰하고, 이에 따른 처리를 다른 객체에게 알리는 디자인 패턴입니다. 이를 통해 객체 간의 의존성을 줄이고, 객체 간의 결합도를 낮출 수 있으며, 이를 통해 유연한 객체 지향 설계가 가능

1.1.5 프록시 패턴과 프록시 서버

프록시 패턴

객체의 대리자 역할을 하는 객체를 통해 객체의 접근을 제어하는 디자인 패턴입니다. 이를 통해 객체의 접근 제어, 객체의 생성과 삭제 등의 부가적인 작업을 수행할 수 있으며, 객체의 사용이 필요한 시점까지 객체의 생성을 지연할 수 있습니다 객체의 속성, 변환 등을 보완하며 보완, 데이터 검증, 캐싱, 로깅에 사용

1.1.6 이터레이터 패턴

순차적으로 데이터에 접근하는 인터페이스를 제공하는 디자인 패턴 이를 통해 컬렉션 내부의 데이터에 접근할 수 있는 일관된 방법을 제공하며, 데이터에 대한 추상화 수준을 높이고, 컬렉션과 데이터에 대한 불필요한 종속성을 제거할 수 있습니다.

1.1.7 노출모듈 패턴

모듈의 내부 상태나 메서드를 숨기고, 일부 기능만 외부에 노출하는 디자인 패턴 모듈 간의 결합도를 낮추고, 모듈의 구현 세부 사항을 숨길 수 있으며, 코드의 가독성과 유지보수성이 향상

1.1.8 MVC 패턴

MVC 패턴은 Model + View + Controller를 합친 용어

1) 구조

• Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
• View : 사용자에서 보여지는 UI 부분입니다.
• Controller : 사용자의 입력(Action)을 받고 처리하는 부분입니다.

2) 동작

MVC 패턴의 동작 순서는 아래와 같습니다.

사용자의 Action들은 Controller에 들어오게 됩니다. Controller는 사용자의 Action를 확인하고, Model을 업데이트합니다. Controller는 Model을 나타내줄 View를 선택합니다. View는 Model을 이용하여 화면을 나타냅니다.

3) 특징

Controller는 여러개의 View를 선택할 수 있는 1:n 구조입니다. Controller는 View를 선택할 뿐 직접 업데이트 하지 않습니다. (View는 Controller를 알지 못합니다.)

4) 장점

MVC 패턴의 장점은 널리 사용되고 있는 패턴이라는 점에 걸맞게 가장 단순합니다. 단순하다 보니 보편적으로 많이 사용되는 디자인패턴입니다.

5) 단점

MVC 패턴의 단점은 View와 Model 사이의 의존성이 높다는 것입니다. View와 Model의 높은 의존성은 어플리케이션이 커질 수록 복잡하지고 유지보수가 어렵게 만들 수 있습니다.

1.1.9 MVP 패턴

MVP 패턴은 Model + View + Presenter를 합친 용어입니다. Model과 View는 MVC 패턴과 동일하고, Controller 대신 Presenter가 존재합니다.

1) 구조

• Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
• View : 사용자에서 보여지는 UI 부분입니다.
• Presenter : View에서 요청한 정보로 Model을 가공하여 View에 전달해 주는 부분입니다. View와 Model을 붙여주는 역할을 합니다.

2) 동작

MVP 패턴의 동작 순서는 아래와 같습니다.

사용자의 Action들은 View를 통해 들어오게 됩니다. View는 데이터를 Presenter에 요청합니다. Presenter는 Model에게 데이터를 요청합니다. Model은 Presenter에서 요청받은 데이터를 응답합니다. Presenter는 View에게 데이터를 응답합니다. View는 Presenter가 응답한 데이터를 이용하여 화면을 나타냅니다.

3) 특징

Presenter는 View와 Model의 인스턴스를 가지고 있어 둘을 연결하는 역할을 합니다. Presenter와 View는 1:1 관계입니다.

4) 장점

MVP 패턴의 장점은 View와 Model의 의존성이 없다는 것입니다. MVP 패턴은 MVC 패턴의 단점이었던 View와 Model의 의존성을 해결하였습니다. (Presenter를 통해서만 데이터를 전달 받기 때문)

5) 단점

MVC 패턴의 단점인 View와 Model 사이의 의존성은 해결되었지만, View와 Presenter 사이의 의존성이 높은 가지게 되는 단점이 있습니다. 어플리케이션이 복잡해 질 수록 View와 Presenter 사이의 의존성이 강해지는 단점이 있습니다.

1.1.10 MVVM 패턴

MVVM 패턴은 Model + View + View Model를 합친 용어입니다. Model과 View은 다른 패턴과 동일합니다. MVVM 패턴의 구조, 동작, 특징, 장점, 단점을 이야기하겠습니다.

1) 구조

• Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분입니다.
• View : 사용자에서 보여지는 UI 부분입니다.
• View Model : View를 표현하기 위해 만든 View를 위한 Model입니다. View를 나타내 주기 위한 Model이자 View를 나타내기 위한 데이터 처리를 하는 부분입니다.

  2) 동작

  MVVM 패턴의 동작 순서는 아래와 같습니다.

사용자의 Action들은 View를 통해 들어오게 됩니다. View에 Action이 들어오면, Command 패턴으로 View Model에 Action을 전달합니다. View Model은 Model에게 데이터를 요청합니다. Model은 View Model에게 요청받은 데이터를 응답합니다. View Model은 응답 받은 데이터를 가공하여 저장합니다. View는 View Model과 Data Binding하여 화면을 나타냅니다.

3) 특징

MVVM 패턴은 Command 패턴과 Data Binding 두 가지 패턴을 사용하여 구현되었습니다.

Command 패턴과 Data Binding을 이용하여 View와 View Model 사이의 의존성을 없앴습니다.

View Model과 View는 1:n 관계입니다.

4) 장점

MVVM 패턴은 View와 Model 사이의 의존성이 없습니다. 또한 Command 패턴과 Data Binding을 사용하여 View와 View Model 사이의 의존성 또한 없앤 디자인패턴입니다. 각각의 부분은 독립적이기 때문에 모듈화 하여 개발할 수 있습니다.

5) 단점

MVVM 패턴의 단점은 View Model의 설계가 쉽지 않다는 점입니다.

1.2 프로그래밍 패러다임

1.2.1 선언형과 함수형 프로그래밍

• 프로그램을 수학적인 함수들의 조합으로 구성하는 방법
• 함수형 프로그래밍에서는 상태를 변경하는 명령형 프로그래밍과 달리, 입력값을 받아 출력값을 반환하는 순수 함수(pure function)를 중심으로 프로그래밍
• 순수 함수는 같은 입력에 대해 항상 같은 출력을 반환하며, 함수 내부에서 외부의 상태를 변경하지 않기 때문에 병렬성과 안정성, 테스트 용이성 등의 장점이 있습니다. 또한, 함수형 프로그래밍에서는 데이터의 상태 변화를 추적하기 위해 변수 대신 불변성 데이터 구조를 사용하고, 고차 함수(higher-order function)를 활용하여 코드의 재사용성을 높입니다.

1.2.2 객체지향 프로그래밍

• 객체들의 집합으로 프로그램의 상호 작용을 표현하며 데이터를 객체로 취급하여 객체 내부에 선언된 메서드를 활용하는 방식
• 설계에 많은 시간이 소요되며 처리 속도가 다른 프로그래밍 패러다임에 비해 상대적으로 느리다

객체지향 프로그래밍의 특징

추상화

복잡한 시스템으로부터 핵심적인 개념 또는 기능을 간추려내는 것을 의미

캡슐화

객체의 속성과 메서드를 하나로 묶고 일부를 외부에 감추어 은닉

상속성

상위 클래스의 특성을 하위 클래스가 이어받아서 재사용하거나 추가, 확장하는 것을 말한다 코드의 재사용 측면, 계층적인 관계 생성, 유지 보수성 측면에서 중요

다형성

하나의 메서드나 클래스가 다양한 방법으로 동작하는 것을 말한다

오버로딩

같은 이름을 가진 메서드를 여러개 두는 것을 말한다

오버라이딩

상위 클래스로부터 상속받은 메서드를 하위 클래스가 재정의하는 것을 의미

설계 원칙

단일 책임 원칙

모든 클래스는 각각 하나의 책임만 가져야 하는 원칙

개방-폐쇠 원칙

유지 보수 사항이 생긴다면 코드를 쉽게 확장할 수 있도록 하고 수정할 때는 닫혀 있어야 하는 원칙

리스코프 치환 원칙

프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 하는 것을 의미

인터페이스 분리 원칙

하나의 일반적인 인터페이스보다 구체적인 여러 개의 인터페이스를 만들어야 하는 원칙

의존 역전 원칙

자신보다 변하기 쉬운것에 의존하던 것을 추상화된 인터페이스나 상위 클래스를 두어 변하기 쉬운 것의 변화에 영향받지 않게 하는 원칙

1.2.3 절차형 프로그래밍

장점: 코드의 가독성이 좋으며 실행속도가 빠르다 단점: 모듈화하기가 어렵고 유지 보수성이 떨어진다

질문

질문 리스트

1

질문: MVC 패턴과 MVP 패턴, MVVM 패턴의 차이점은 무엇인가요? 답변: MVC 패턴, MVP 패턴, MVVM 패턴은 UI 구현 방법 중에 가장 대표적인 패턴입니다. 이 세 가지 패턴은 모두 UI와 비즈니스 로직의 분리를 위해 고안된 패턴입니다.

MVC 패턴은 모델, 뷰, 컨트롤러 세 가지 요소로 이루어져 있습니다. 모델은 데이터를 처리하고, 뷰는 UI를 담당하고, 컨트롤러는 뷰와 모델 간의 상호작용을 조정합니다.

MVP 패턴은 모델, 뷰, 프리젠터 세 가지 요소로 이루어져 있습니다. MVP 패턴은 컨트롤러 대신에 프리젠터라는 개념이 도입됩니다. 프리젠터는 뷰와 모델 사이의 중개자 역할을 하며, 뷰와 모델을 분리하여 유지보수성을 높입니다.

MVVM 패턴은 모델, 뷰, 뷰모델 세 가지 요소로 이루어져 있습니다. 뷰모델은 뷰와 모델 간의 인터페이스로서, 뷰와 모델을 느슨하게 결합시켜주는 역할을 합니다. 또한 데이터 바인딩을 통해 뷰와 뷰모델 사이의 상호작용을 단순화하여 코드의 가독성과 유지보수성을 높입니다.

2

질문: 싱글톤 패턴이란 무엇이며, 어떤 상황에서 사용할 수 있나요? 답변: 싱글톤 패턴은 애플리케이션에서 특정 클래스의 인스턴스가 하나만 생성되도록 보장하는 디자인 패턴입니다. 이 패턴을 사용하면, 메모리를 절약할 수 있고, 데이터 일관성을 유지할 수 있습니다. 예를 들어, 데이터베이스 연결을 담당하는 클래스에서 싱글톤 패턴을 사용하면, 데이터베이스 연결 객체가 여러 개 생성되는 것을 방지할 수 있습니다.

3

질문: 객체지향 프로그래밍과 절차형 프로그래밍의 차이점은 무엇인가요? 답변: 객체지향 프로그래밍은 데이터와 데이터를 처리하는 메서드를 하나의 객체로 묶어서 관리합니다. 이는 문제를 객체의 집합으로 분해하고, 각각의 객체가 자신의 상태를 캡슐화하고 독립적으로 동작하도록 하는 것을 목표로 합니다. 이와 달리, 절차형 프로그래밍은 순차적인 명령어들의 집합으로 구성된 함수와 변수들의 집합으로 문제를 해결합니다. 즉, 절차적인 방법으로 문제를 해결하는 것이 주 목적입니다.

객체지향 프로그래밍은 코드의 재사용성과 유지보수성이 뛰어나며, 코드의 가독성을 높일 수 있습니다. 또한 클래스의 상속과 다형성을 이용하여 복잡한 문제를 쉽게 해결할 수 있습니다. 반면에, 절차형 프로그래밍은 프로그램의 실행 순서가 명확하고, 디버깅이 쉽다는 장점이 있습니다. 하지만 대규모 프로젝트에서는 코드의 복잡성과 유지보수성이 떨어질 수 있습니다.

나에게 온 질문

1.

2.

3.

답변

1.

2.

3.

안녕하세요 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 4기 수강 중인 hyeon입니다. 저번에는 합격 및 OT 후기에 대해 소개 드렸는데요 이번에는 과정 1달차를 경험하면서 수강생 입장에서 솔직히 느낀점을 소개 드리려 합니다! 과정을 고민중이신분께 많은 도움이 되면 좋겠습니다!

✨커리큘럼

제가 수료중인 과정은 메가바이트 프론트엔드스쿨 과정 기준으로 말씀드리자면 총 7개월 과정으로 이루어져있습니다. 8개의 Part를 기준으로 강의가 나누어져 있는데요 전공생의 입장에서도 과정이 탄탄하고 놓치기 쉬운 cs지식까지 알려준다고 생각해 만족스러웠습니다. 또한 개발자라면 필수로 알아야 할 Git/Github강의도 포함되어 있어 세세하게 알려주셔서 정말 만족스러웠습니다! 또한 Git을 실습해보는 시간을 가지면서 팀프로젝트를 진행할때 일어나는 상황과 대처방법을 직접 경험해보니 당황하지 않고 침착하게 해결해나가는 저를 발견할 수 있었습니다. 마지막으로 프론트엔드 과정의 꽃인 기업 연계 프로젝트가 있는데요 기업 연계프로젝트는 프론트엔드 뿐만 아니라 UXUI디자이너, 백엔드 개발자와 같이 협업하여 진행합니다. 아직 과정 1달차라 경험해보지는 못했지만 이때까지 과정을 경험해본 바탕으로 정말 기대가 되는 프로젝트입니다. 프로젝트 세부 단계는 아래를 참고해주세요!

📑커리어 서비스

과정이 시작하고 1달이 다가올때 쯤 커리어 서비스를 시작하였습니다. 커리어 서비스는 5단계에 걸쳐 진행되고 각 분야의 현직자 분들이 직접 오셔서 수강생 한분 한분을 전부 다 코칭해주십니다. 커리어 서비스의 5단계는 총 아래와 같이 이루어 졌는데요 저는 1:1상담을 통해 저에게 부족한점과 앞으로 취업을 위해 무엇을 준비해야하는지 핵심사항만 빠르게 파악하여 알려주시므로 빠른 취업을 원하시는 분께는 정말 좋은 혜택이라고 생각합니다.

🖥️과제

과정을 진행하면서 강의뿐만 아니라 Toy Project도 진행하였습니다. 자칫 강의만 듣고 실무에 어디에 쓰이는지 모르는 경우가 많았는데요. 실무에 근접한 과제가 주어지고 문제를 해결하면서 감을 익히면서 정말 많은 것을 배웠습니다. 과제 수행기간이 끝나면 과정 수강생들 분들과 함께 코드리뷰가 주어집니다. 제가 풀었던 방식과 다른 수강생분들의 코드를 비교하면서 의견을 나누었고 보완점을 파악하여 실력 향상이 크게 되었다고 생각합니다.

👤그룹스터디

그룹스터디는 과정 초반에 스터디 주제가 주어지고 각자 원하는 주제에 들어가 맞는 사람들끼리 정했습니다. 주제는 크게 북스터디, 코딩테스트, 사이드 프로젝트가 주어졌습니다. 저는 javascript 지식이 부족하다고 생각해 모던 자바스크립트 딥다이브 교재를 가지고 스터디를 하였습니다. 혼자 공부를 했다면 모르는 부분에 대해 질문을 할곳이 부족했는데 수강생분들과 함께 공부할 때 서로 부족한 부분에 대해 질문하고 답변을 준비하면서 보완된 지식을 채워가는것이 좋았습니다.

😁마무리

현재 저는 과정 1달동안 경험하면서 정말 만족스러웠습니다. 독학을 하였다면 시간도 오래걸릴뿐만 아니라 핵심을 파악하기 어려웠을 것입니다. 패스트캠퍼스 프론트엔드 과정을 통해서 앞으로 취업을 준비할때 부족한 부분 없이 준비가 가능하고 여러 수강생분들과 훌륭한 강사님들 멘토진분들과 함께 하면서 풍부한 포트폴리오를 완성해 나가는 과정이 너무나 즐겁습니다. 긴 글 읽어주셔서 감사합니다.

46.1 제너레이터란?

코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 제너레이터와 일반 함수의 차이

1. 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다
2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다
3. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다

46.2 제너레이터 함수의 정의

제너레이터 함수는 function* 키워드로 선언한다 하나 이상의 yield 표현식을 포함

// 제너레이터 함수 선언문
function* genDecFunc() {
  yield 1;
}

// 제너레이터 함수 표현식
const genExpFunc = function* () {
  yield 1;
};

// 제너레이터 메서드
const obj = {
  * genObjMethod() {
    yield 1;
  }
};

// 제너레이터 클래스 메서드
class MyClass {
  * genClsMethod() {
    yield 1;
  }
}

제너레이터 함수는 화살표 함수로 정의할 수 없고 new연산자와 함께 생성자 함수로 호출할 수 없다

46.3 제너레이터 객체

제너레이터 함수를 호출하면 제너레이터 객체를 생성해 반환한다 반환한 제너레이터 객체는 이터러블 이면서 동시에 이터레이터이다

46.4 제너레이터의 일시 중지와 재개

제너레이터는 yield 키워드와 next 메서드를 통해 실행을 일시 중지 했다가 필요한 시점에 다시 재개할 수 있다 yield 키워드는 제너레이터 함수의 실행을 일시 중지시키거나 yield 키워드 뒤에 오는 표현식의 평가 결과를 제너레이터 함수 호출자에게 반환

46.6 async/await

46.6.1 async 함수

• await 키워드는 반드시 async함수 내부에서 사용해야 한다
• async함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다
  • 명시적으로 프로미스를 반환하지 않더라도 암묵적으로 반환값을 resolve하는 프로미스를 반환

46.6.2 await 키워드

프로미스가 settled상태가 될 때까지 대기하다가 settled상태가 되면 프로미스가 resolve한 처리 결과를 반환한다 반드시 프로미스 앞에서 사용해야 한다

46.6.3 에러 처리

const fetch = require('node-fetch');

const foo = async () => {
  try {
    const wrongUrl = 'https://wrong.url';

    const response = await fetch(wrongUrl);
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err); // TypeError: Failed to fetch
  }
};

foo();

async함수 내에서 catch문을 사용해서 에러 처리를 하지 않으면 async함수는 발생한 에러를 reject하는 프로미스를 반환한다

const fetch = require('node-fetch');

const foo = async () => {
  const wrongUrl = 'https://wrong.url';

  const response = await fetch(wrongUrl);
  const data = await response.json();
  return data;
};

foo()
  .then(console.log)
  .catch(console.error); // TypeError: Failed to fetch

47장: 에러 처리

47.2 try...catch...finally 문

console.log('[Start]');

try {
  // 실행할 코드(에러가 발생할 가능성이 있는 코드)
  foo();
} catch (err) {
  // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행된다.
  // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다.
  console.error(err); // ReferenceError: foo is not defined
} finally {
  // 에러 발생과 상관없이 반드시 한 번 실행된다.
  console.log('finally');
}

// try...catch...finally 문으로 에러를 처리하면 프로그램이 강제 종료되지 않는다.
console.log('[End]');

47.3 Error 객체

Error 생성자 함수가 생성한 에러 객체는 message프로퍼티와 stack 프로퍼티를 갖는다 message 프로퍼티의 값은 Error 생성자 함수에 인수로 전달한 에러 메시지 stack 프로퍼티의 값은 에러를 발생시킨 콜 스택의 호출 정보를 나타내는 문자열이며 디버깅 목적으로 사용

47.5 에러의 전파

에러는 호출자 방향으로 전파 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파

const foo = () => {
  throw Error('foo에서 발생한 에러'); // ④
};

const bar = () => {
  foo(); // ③
};

const baz = () => {
  bar(); // ②
};

try {
  baz(); // ①
} catch (err) {
  console.error(err);
}

에러의 호출자 방향으로 전파되는 그림

48장: 모듈

48.1 모듈의 일반적 의미

애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드조각 import와 export의 예제

48.3 ES6 모듈(ESM)

48.3.3 import 키워드

default 키워드를 사용하는 경우 var,let,const 키워드는 사용 불가

// lib.mjs
export default const foo = () => {};
// => SyntaxError: Unexpected token 'const'
// export default () => {};

42.1 동기 처리와 비동기 처리

자바스크립트 엔진은 싱글 스레드 방식으로 처리 현대 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기처리라고 함 현재 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리라고 함

42.2 이벤트 루프와 태스크 큐

이벤트 루프는 자바스크립트의 동시성을 지원함 태스크 큐

• 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역 이벤트 루프
• 콜스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인

43장: Ajax

43.1 Ajax란?

자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식

43.2 JSON

43.2.1 JSON 표기 방식

키와 값으로 구성된 텍스트 키는 큰따옴표로 묶어야 한다 값은 객체 리터럴과 같은 표기법을 사용 문자열은 반드시 큰따옴표로 묶어야 한다

43.2.2 JSON.stringify

객체를 JSON 포맷의 문자열로 변환 직렬화: 객체를 문자열화 하는 것

43.2.3 JSON.parse

JSON 포맷의 문자열을 객체로 변환 역직렬화: 문자열을 객체화 하는 것

43.3 XMLHttpRequest

43.3.1 XMLHttpRequest 객체 생성

브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행

43.3.3 HTTP 요청 전송

// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
xhr.open('GET', '/users');

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정: json
xhr.setRequestHeader('content-type', 'application/json');

// HTTP 요청 전송
xhr.send();

44장: REST API

44.2 REST API 설계 원칙

45장: 프로미스

45.1 비동기 처리를 위한 콜백 패턴의 단점

45.1.1 콜백 헬

콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하면서 콜백 함수 호출이 중첩되어 복잡도가 높아지는 현상

45.1.2 에러 처리의 한계

에러는 호출자(caller)방향으로 전파된다

45.2 프로미스의 생성

Promise 생성자 함수는 비동기 처리를 할때 콜백함수를 인수로 전달 받는데 콜백함수는 resolve와 reject를 함수를 인수로 전달 받는다

// 프로미스 생성
const promise = new Promise((resolve, reject) => {
  // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다.
  if (/* 비동기 처리 성공 */) {
    resolve('result');
  } else { /* 비동기 처리 실패 */
    reject('failure reason');
  }
});

45.3 프로미스의 후속 처리 메서드

프로미스의 비동기 처리 상태가 변화하면 후속 처리 메서드에 인수로 전달한 콜백 함수가 선택적으로 호출

45.3.1 Promise.prototype.then

첫 번째 콜백 함수는 비동기 처리가 성공 했을때 호출 두 번째 콜백 함수는 비동기 처리가 실패 했을때 호출

// fulfilled
new Promise(resolve => resolve('fulfilled'))
  .then(v => console.log(v), e => console.error(e)); // fulfilled

// rejected
new Promise((_, reject) => reject(new Error('rejected')))
  .then(v => console.log(v), e => console.error(e)); // Error: rejected

45.3.2 Promise.prototype.catch

한 개의 콜백 함수를 인수로 전달 받음 프로미스가 rejected상태인 경우만 호출 catch메서드는 then과 동일하게 동작 언제나 프로미스를 반환

// rejected
new Promise((_, reject) => reject(new Error('rejected')))
  .catch(e => console.log(e)); // Error: rejected

45.3.3 Promise.prototype.finally

프로미스의 성공 또는 실패와 상관없이 무조건 한 번 호출 then/catch메서드와 마찬가지로 언제나 프로미스를 반환

new Promise(() => {})
  .finally(() => console.log('finally')); // finally

45.4 프로미스의 에러 처리

에러처리는 then메서드에서 보단 catch메서드에서 하는것을 권장 then메서드를 호출한 이후에 호출하면 비동기 처리에서 발생한 에러뿐만 아니라 then메서드 내부에서 발생한 에러까지 모두 캐치 가능

promiseGet('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => console.xxx(res))
  .catch(err => console.error(err)); // TypeError: console.xxx is not a function

45.5 프로미스 체이닝

const url = 'https://jsonplaceholder.typicode.com';

// id가 1인 post의 userId를 취득
promiseGet(`${url}/posts/1`)
  // 취득한 post의 userId로 user 정보를 취득
  .then(({ userId }) => promiseGet(`${url}/users/${userId}`))
  .then(userInfo => console.log(userInfo))
  .catch(err => console.error(err));

then->then->catch 순서로 후속 처리 메서드를 호출

45.6 프로미스의 정적 메서드

45.6.1 Promise.resolve / Promise.reject

이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용 Promise.resolve는 인수로 전달 받은 값을 resolve하는 프로미스를 생성

// 배열을 resolve하는 프로미스를 생성
const resolvedPromise = Promise.resolve([1, 2, 3]);
resolvedPromise.then(console.log); // [1, 2, 3]

Promise.reject 메서드는 인수로 전달받은 값을 reject하는 프로미스를 생성

// 에러 객체를 reject하는 프로미스를 생성
const rejectedPromise = Promise.reject(new Error('Error!'));
rejectedPromise.catch(console.log); // Error: Error!

45.6.2 Promise.all

여러개의 비동기 처리를 모두 병렬 처리 할 때 사용

const requestData1 = () => new Promise(resolve => setTimeout(() => resolve(1), 3000));
const requestData2 = () => new Promise(resolve => setTimeout(() => resolve(2), 2000));
const requestData3 = () => new Promise(resolve => setTimeout(() => resolve(3), 1000));

Promise.all([requestData1(), requestData2(), requestData3()])
  .then(console.log) // [ 1, 2, 3 ] ⇒ 약 3초 소요
  .catch(console.error);

45.6.3 Promise.race

모든 프로미스가 fulfilled 상태가 되는것을 기다리는 것이 아니라 가장 먼저 fulfilled상태가 된 프로미스의 처리 결과를 resolve하는 새로운 프로미스를 반환

Promise.race([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3
])
  .then(console.log) // 3
  .catch(console.log);

전달된 프로미스가 하나라도 rejected상태가 되면 에러를 reject하는 새로운 프로미스를 즉시 반환

Promise.race([
  new Promise((_, reject) => setTimeout(() => reject(new Error('Error 1')), 3000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('Error 2')), 2000)),
  new Promise((_, reject) => setTimeout(() => reject(new Error('Error 3')), 1000))
])
  .then(console.log)
  .catch(console.log); // Error: Error 3

45.6.4 Promise.allSettled

프로미스 요소로 갖는 배열 등의 이터러블을 인수로 전달 받는다. 전달받은 프로미스가 모두 settled 상태가 되면 처리 결과를 배열로 반환

45.7 마이크로태스크 큐

마이크로태스크 큐는 태스크큐보다 우선순위가 높다

setTimeout(() => console.log(1), 0);

Promise.resolve()
  .then(() => console.log(2))
  .then(() => console.log(3));

2->3->1 순으로 출력 프로미스의 후속처리 메서드의 콜백함수는 마이크로태스크큐에 저장되기 때문

45.8 fetch

fetch함수는 HTTP응답을 나타내는 Response 객체를 래핑한 Promise객체를 반환 fetch 함수가 반환하는 프로미스는 기본적으로 HTTP에러가 발생해도 에러를 reject하지 않고 불리언 타입의 ok상태를 false로 설정한 Response객체를 reject한다. 네트워크 장애나 CORS에러에 의해 요청이 완료되지 못한 경우에만 프로미스를 reject한다