그럼에도 불구하고

요즘 추세를 보면 Webpack기반의 CRA보다 Vite를 많이 쓴다고 해요 "남들도 Vite 쓰니까~ 나도 Webpack 말고 Vite 써보자" 하고 썼던 나를 반성하는 글입니다. ( 최소한 이유는 알고 쓰자..ㅎㅎ ) 🧑🏻‍💻 번들러 ( Bundler) 번들러는 여러개의 파일들을 하나의 파일로 묶어주는 도구입니다. 번들러는 웹 개발에서 사용되는 도구 중 하나로, 웹 애플리케이션을 개발하거나 배포할 때 사용됩니다. 번들러의 주요 역할은 여러 개의 웹 리소스 파일, 예를 들면 JavaScript 파일이나 CSS 파일 그리고 이미지 파일 등을 하나의 번들(묶음)로 결합하고 최적화하는 것입니다. 이러한 작업을 통해 웹 애플리케이션의 성능을 향상하고 로딩 시간을 줄일 수 있습니다. 번들링을 하지 않는다면 매우..

면접 중에 면접관님께서 하셨던 말씀이 있는데 저희는 SaaS 기반의 클라우드 컴퓨팅 서비스를 통해 소프트웨어를 제공하는데.. 얼핏 알고 있던 SaaS가 정확히 어떤 의미인지 정의 내려지지 않아서 정리하기로 마음먹었습니다~~ 그 SARS 바이러스 아니고요 CSS를 보완하고 더 효과적으로 작성하기 위한 전처리기 Sass 아니고요 (그저 빛..) SaaS는 Sortware as a Service로! 우선 클라우드부터 보고 넘어가겠습니다. 🧑🏻‍💻 클라우드? 클라우드는 다양한 데이터 센터에 있는 원격 웹 서버로서 데이터베이스를 호스팅 하고 애플리케이션 코드를 실행합니다. 클라우드 제공 업체는 인터넷을 통해 고객이나 최종 사용자에게 서비스를 전달할 수 있습니다. 클라우드에는 아래와 같이 3대 클라우드 서비스 모델..

Start! 🧑🏻‍💻 Cross origin이란? 크로스 오리진 (cross origin) 문제란 "브라우저는 자신의 오리진과 다른 오리진의 API 서버와 통신할 때 문제가 발생한다"는 개념입니다. 크로스 오리진 문제를 발생시킴으로써 잠재적인 위험을 가진 문서의 로딩을 제한해 브라우저 공격의 가능성을 줄일 수 있습니다. 크로스 오리진 문제는 웹 브라우저에 내장된 SOP(Same Origin Policy: 동일 근원 정책)라는 보안 정책 때문에 발생합니다. 크로스 오리진과 SOP를 이해하려면 브라우저의 오리진이라는 개념부터 이해해야 합니다. 브라우저가 웹 서버에 요청(request)을 전송하면 이에 대해 웹 서버는 응답(response)을 합니다. 일반적인 경우라면 웹 서버는 HTML 문서 형태를 응답할 ..

Start! 🧑🏻‍💻 라이브러리와 프레임워크의 차이를 알고 있나요? 라이브러리는 특정 기능 개발을 도와주는 도구들을 모아놓은 개념이고, 프레임워크는 프로그램을 개발하기 위한 구조를 제공하는 개념입니다. 프레임워크를 사용하면 개발에 대한 전체적인 기능을 제공하고, 프로그램 제어 흐름을 프레임워크에서 관리하는 차이점이 있습니다. 이런 특징을 제어의 역전이라고 합니다. 🧑🏻‍💻 React에 대해 설명해 주세요. React는 UI를 만들기 위한 JavaScript 라이브러리입니다. React는 스스로 상태를 관리하는 캡슐화된 컴포넌트를 조합해 복잡한 UI를 만들 수 있도록 지원하며, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다. 🧑🏻‍💻 React의 원리, 특징이 무엇인가요? Re..

Start! 🧑🏻‍💻 프론트엔드 ⭐️ 🧑🏻‍💻 사용자가 URL을 입력한 후 화면이 출력되기까지의 과정을 설명해 주세요. 사용자가 URL을 입력하면 웹 브라우저에서 URL의 유효성을 판단합니다. URL이 유효하지 않으면 웹 브라우저는 입력한 내용을 검색하게 되고, URL이 유효하면 DNS 서버에 연결할 IP를 요청합니다. DNS 서버에서 IP 주소를 받으면 3-way 핸드셰이킹으로 TCP 통신을 위한 가상 회선을 연결합니다. HTTP 연결 요청을 서버에 보내면, 이에 대한 응답을 받고 웹 페이지 화면을 출력합니다. ⭐️ 🧑🏻‍💻 브라우저 렌더링 과정에 대해 설명해 주세요. HTML 파일과 CSS 파일을 파싱 해서 각각 Tree를 만듭니다. (DOM Tree, CSSOM Tree 생성) 두 Tree를 결합하..

Start! 🧑🏻‍💻 DOCTYPE은 무엇을 하나요? DOCTYPE는 document type의 약어입니다. DOCTYPE는 항상 DTD(Document Type Definition)와 관련됩니다. DTD는 특정 문서가 어떻게 구성되어야 하는지 정의합니다. (예시: button은 span을 포함할 수 있지만, div는 그럴 수 없다.) 반면, DOCTYPE는 문서가 대략 존중할만한 DTD를 선언합니다. 웹 페이지는 DOCTYPE 선언이 필요합니다. 유저 에이전트에게 문서가 존중하는 HTML 사양의 버전을 알리는 데 사용됩니다. 유저 에이전트가 올바른 DOCTYPE을 인식하면, 문서를 읽는 데에 DOCTYPE과 일치하는 no-quirks mode를 트리거합니다. 유저 에이전트가 올바른 DOCTYPE을 인식..

면접관: www.naver.com를 주소창에 치면 무슨 일이 일어나나요? 나: 네이버가 켜집니다. 농담입니다만, 이렇게 대답할 수는 없잖아요 ㅠ 만약 면접에서 면접관님이 이런 질문을 해주신다면, 어떻게 대답하실 건가요? 실제로 웹사이트를 개발하는 개발자라면, 문제가 터졌을 때 "어디서부터 문제가 발생했지?" 하고 역추적하는 자세를 갖춰야 합니다. 제가 생각하는 이 질문의 의도는 개발자는 과정을 이해해야 하는 사람이고, 웹을 다루는 기본적인 cs 지식을 갖췄는지 여부를 묻는 것이 아닐까 싶습니다. 그럼 다시 질문으로 돌아와서 네이버를 주소창에 치면 무슨 일이 발생할까요? 답을 먼저 말씀드리자면 👉 리다이렉트, 캐싱, DNS, IP 라우팅, TCP 연결 구축을 거쳐 요청, 응답이 일어나는 TTFB(Time ..

Tag에 대해 알아보겠습니다. 🧑🏻‍💻 Semantic Versioning Semantic version 지정 사양은 소프트웨어 release를 위한 표준화된 버전 지정 시스템을 설명합니다. 개발자가 소프트웨어 릴리스에 의미를 부여할 수 있는 일관된 방법을 제공합니다. 버전은 마침표로 구분된 세 개의 숫자로 구성됩니다. 2.4.1 2: MAJOR RELEASE 4: MINOR RELEASE 1: PATCH RELEASE 📌 Initial Release 일반적으로 첫 번째 release는 1.0.0으로 시작합니다. ⭐️ Patch Release Patch Release는 일반적으로 새로운 기능이나 중요한 변경 사항이 포함되어 있지 않습니다. 일반적으로 코드 사용 방식에 영향을 미치지 않는 버그 수정 및 기..

git fetch와 git pull에 대해 알아보겠습니다. 🧑🏻‍💻 Remote Tracking Branches remote/branch 패턴을 따릅니다. - origin / master는 origin이라는 원격 repository의 master branch 상태를 참조합니다. - upstream / logoRedesign은 upstream(공통 원격 이름)이라는 이름의 원격에서 logoRedesign 분기의 상태를 참조합니다. 📌 Remote Branches git branch -r git branch -r을 실행하여 local repository가 알고 있는 원격 branch를 볼 수 있습니다. git checkout remote/branch github에서 git clone 해서 받아온 시점의 상태..

지속적으로 업데이트됩니다! 🧐 Start! 🧑🏻‍💻 자바스크립트 엔진 자바스크립트가 동작되게 하려면 브라우저 자체에서 내장되어 있는 JS 엔진이 필요하다. 이것이 동작하는 시간을 런타임이라고 하는데 런타임 하는 과정에서 코드를 한 줄씩 읽고 번역해서 실행을 해주는 것을 인터프리터 라고 한다. 런타임 : JS 엔진이 동작하는 시간 인터프리터 : 런타임 하는 과정에서 코드를 한 줄 한 줄 읽고 번역해서 실행해 주는 것 [JavaScript] 컴파일러 언어 vs 인터프리터 언어 오늘은 컴파일러 언어와 인터프리터 언어의 차이를 알아보자 우선, 컴파일러 언어와 인터프리터 언어의 이해를 돕기 위해 프로그래밍이란 무엇이며, 프로그래밍 언어가 무엇인지 짚고 넘어가 despiteallthat.tistory.com 🧑🏻‍..

git checkout, git restore, git reset, git revert에 대해 알아보겠습니다. [ git checkout ] git checkout or git checkout HEAD~? (1개, 2개, 3개 ~~~ ) 내가 입력한 commit hash 시점으로 돌아갈 수 있습니다. ( 돌아가서 확인이 가능하다. ) 📌 Detached HEAD git checkout을 사용하면 Detached HEAD 문구를 볼 수 있는데 두 가지 옵션이 있습니다. 1. 분리된 HEAD에 머물면서 이전 commit의 내용을 확인합니다. 2. 새 branch를 만들고 전환한다. HEAD가 더 이상 분리되지 않으므로 이제 변경 사항을 적용하고 저장할 수 있습니다. git check commit hash를 ..

git stash에 대해 알아보겠습니다. [ Git Stash ] 커밋하지 않은 변경사항들을 임시 저장하도록 해주고 불필요한 커밋으로 이력이 지저분해지는 것 없이 나중에 돌아올 수 있게 해 줍니다. 일반적으로, 아직 완성되지 않았거나 커밋할 준비가 되지 않은 것에 대해서도 커밋을 할 수 있습니다. 📌 git stash git stash 어느 시점에서, 커밋하지 않은 모든 변경사항이나 등록했거나 또는 등록하지 않은 변경사항을 모두 stash 합니다. 즉, 변경사항을 기억했다가 워킹 디렉터리의 변경사항을 되돌리는 것입니다. 그래서 더 이상 그 변경사항을 보지 못하지만, stash에서는 여전히 사용 가능해서 나중에 돌아와서 되찾을 수 있게 해 줍니다. 📌 git stash pop git stash pop ⭐️..