전체 글
FE
주소창에 www.google.com을 입력하면 발생하는 일
2025. 03. 07 블로그 A/S 프로젝트🚧 로 추가한 글입니다.기존에는 "웹 브라우저" 로 퉁쳤던 대상을, 정확히 누가 수행하는지 자세히 알아봅시다. 주소창에 URI를 입력하면 어떤 일이 생길까?주소창에 URI를 입력하면 다음과 같은 일이 진행된다. 1. handling inputs: 텍스트를 입력했네. 쿼리야 URL이야?누가: 브라우저 프로세스의 UI 쓰레드가무엇을: 주소창에 입력한 텍스트를어떻게Search Query인지, URL인지 판단Search Query - 검색엔진으로 쿼리 보내서 검색 준비URL - 네트워크 쓰레드로 URL 값 보낼 준비 2. Start Navigation: enter 눌렀네. 요청 보내자!2-1. UI 쓰레드누가: 브라우저 프로세스의 UI 쓰레드가무엇을: 주소창에 입력..
크롬 브라우저 아키텍처 알아보기 (프로세스와 스레드)
2025. 03. 07 블로그 A/S 프로젝트🚧 로 추가한 글입니다.프로세스, 쓰레드 ... 이론으로는 많이 들어봤고, 정리까지 했었다.그렇지만 이걸 내가 왜 알아야할까.. 라는 불평을 하곤 했다. 운영체제는 정말 프론트엔드와 관련이 없을까? (1) 용어정리프로세스프로그램을 구동해, 프로그램의 상태가 메모리상에서 실행되는 작업 단위하나의 프로그램에는 하나의 프로세스 할당스레드하나의 프로그램에서 여러 개의 작업을 수행하기 위한 더 작은 실행 단위하나의 프로세스에는 여러 개의 스레드스레드끼리는 메모리 공유 크롬 브라우저를 애용하지만 크롬 브라우저 아키텍처는 모름매일 크롬 브라우저로 개발하지만 아키텍처에 대해서는 모르고 있었다... 이렇게 여러 프로세스를 가지고 있는데, 특히 Renderer 프로세스와 Pl..
[2주차][Taskify] JS로 함수형 컴포넌트 만들기(1) - 가상 DOM, DOM 변환
리액트의 동작원리함수(컴포넌트) → 객체(VDOM) → DOM 1. 함수(컴포넌트) → 객체(VDOM)리액트처럼 컴포넌트를 사용하기 위해서 반환된 JSX 를 가상 돔 JS 로 바꾸어보는 것부터 시작하자!JSX를 JS로 트랜스파일링?트랜스파일러: 바벨const App = () => { return ( hello );}ReactDOM.render(, document.getElementById("root"));import { jsx as _jsx } from "react/jsx-runtime";const App = () => { return _jsx("div", { children: _jsx("h1", { children: "hello" }) ..
[1주차] 펀딩 프로그래스 업데이트를 위한 실시간 데이터 동기화 기술
앞으로 진행할 프로젝트의 팀원들을 만나 그라운드 룰과 주제를 정하는 시간을 가졌다! 아이디에이션 끝에 "택시비 펀딩"을 주제로 한 프로젝트를 진행하게 됐다. 이렇게 빨리 정해진 적은 없었던 것 같은데... 너무 재미있을 것 같다. 요구사항펀딩 프로그래스 업데이트에 대해 어떻게 처리해야 할 지에 대한 논의가 이루어졌다. 아래와 같은 상황이다. 1. 사용자 B가 펀딩 X에 접근. 총 목표 금액이 50000원임을 확인.2. 사용자 A가 펀딩 X에 1000원 후원.3. 사용자 B는 화면을 새로고침 하지 않아도, 펀딩 X의 초기 금액에서 1000원이 차감된 "49000원" 화면과 + 늘어난 진행도를 볼 수 있어야 함! 위와 같은 기능 구현을 위해, 서버에서 클라이언트로 실시간 이벤트를 전송할 수 있는 기술들을 ..
우아한테크코스 2트 합격 후기 ✨ (7기 프론트엔드 FE) + 입과포기?!
코드 및 회고 모음4주간 진행했던 프리코스 코드 및 회고들이다.1주차 GitHub - hamo-o/javascript-calculator-7Contribute to hamo-o/javascript-calculator-7 development by creating an account on GitHub.github.com [우테코 프리코스 1주차 회고] 첫 TDD는 계획대로 되지 않아시작하면서사실 이전 프리코스에서는 "다들 그렇게 하니까" 라는 생각으로 쫓기듯 코드를 작성했다. 하지만 이번 프리코스에서는 "내 코드를 완벽히 이해하자" 라는 목표를 세우고, 나만의 근거hamo0.tistory.com 2주차 GitHub - hamo-o/javascript-racingcar-7Contribute to hamo-o..
[우테코 프리코스 3주차 회고] 모델: 뷰야, 나 업데이트됐어! 새로 렌더링해조.
시작하면서지난 주 개선 사항은 다음과 같다.TDD와 BDD를 상호보완적으로 사용하기단위테스트를 억지로 BDD로 작성하려 하지 않고, 기능 개발 시 TDD로 개발하다가 예외 처리와 전체 기능 테스트에서 BDD를 사용했다.제어 역전을 구현할 수 있는 다른 패턴들 공부하기MVC, MVP, MVVM, MVI, FLUX 등 다시 공부. 중간 객체를 어떻게 잘 활용할 수 있을지 생각해보고, 각 모듈의 역할에 대해서 고민하기MVC, MVP, MVVM, MVI의 흐름을 직접 그려보면서 익혔다. FLUX와 REDUX는 MVI에서 파생된 개념이라 따로 공부하면 좋을 것 같다.또한 2주차보다 3주차 미션의 구현 사항이 조금 더 복잡해짐에 따라, 자연스럽게 중간 객체의 필요성을 느끼게 되었다. 컨트롤러에서 입력 단위에 따라 ..
[우테코 프리코스 2주차 회고] 넌 전혀 MVC 하고 있지 않아
시작하면서지난 주 개선 사항은 다음과 같다.테스트 네이밍 관련 내용 조사, 나만의 규칙 만들기It Should, Given/When/Then, Describe/Context/It 등의 방식이 있다.이번 테스트는 BDD 방법론 중 하나의 방법인 Given/When/Then 으로 작성하였다.테스트 방식에 따라서 네이밍 체계 역시 달라지기 때문에, 방식을 먼저 정하고 규칙을 만드는 것이 좋을 것 같다.주석으로 처리하는 대신 사용할 수 있는 skip() 활용하기에러 클래스 관리 관련 내용 학습1주차에서 커스텀 에러 클래스를 지정했었다. 2주차에는 공통 에러 헤더를 부모 클래스에서 관리하지 않고 각 자식 클래스에서 import 해오던 부분을 수정하였다. super() 을 조금 더 효율적으로 사용할 수 있었다.또한..
