bytrustu tech blog

01. 이 강의를 수강하게 된 이유 최근에 패스트캠퍼스에서 제공하는 "마이크로 프론트엔드: 대규모 서비스 설계부터 운영까지" 라는 강의를 수강하고 있다. 이 강의를 선택한 주된 이유는 회사의 기술적 도전과제에 대한 해결책을 찾기 위해서였다. 하나의 도메인 내에서 여러 개의 프론트엔드 프로젝트가 분산되어 운영되고 있다. 이러한 구조는 다양한 관리상의 문제와 협업의 어려움이 발생했고, 이를 해결하기 위한 방안으로 마이크로 프론트엔드 아키텍처를 주목하게 되었다. 시중에 마이크로 프론트엔드 강의는 없어 패스트캠퍼스 강의를 선택하게 되었다. 이 강의를 통해, 얻은 인사이트들과 노하우를 통해 새롭게 시작하는 회사 프로젝트에 도입할 수 있었으며, 실제로 이 아키텍처가 시스템 전반적으로 중요한 역할을 하게 되었다. ..

매주 멘토링을 준비하느라 회고를 작성하는 것이 쉽지 않았다. 🥲 3주차 3주 차에는 남은 코어자바스크립트 내용인 클로저, 콜백함수, 프로토타입, 클래스를 진행했다. 함께 참여하는 멘티분과 내가 경력자이다 보니 진행이 잘되어서 나머지를 한 주에 진행을 하기로 했다. 사실 1, 2주 차는 자바스크립트 2챕터씩 진행하기도 했고, 앞부분이라 학습에 무리가 없을 정도의 내용들이었다. 하지만 나머지 부분들은 내가 학습이 부족한 부분이 많았던 만큼 학습시간이 많이 요구되었다. 그리고 개인적인 일정까지 생기다 보니, 직장과 병행하기 힘들다는 생각도 들었다. 하지만 지금 아니고선 멘토링 과정을 듣기가 쉽지 않을뿐더러, 내가 지금까지 학습을 제대로 안 했다는 반증이기에 마음을 잡고 학습을 했다. 4주차 4주 차는 어느 때..

어느 때보다 바쁜 한 주를 보냈다. 1년간 참여한 컬리 프로젝트가 종료되었고, 남은 태스크 처리와 인수인계로 하루하루가 바쁜 나날이었다. 그 와중에도 나를 칭찬해 보자면 매일 멘토링 준비를 위해 자는 시간을 줄이고 공부를 했다는 것이다. 👍 이번주는 코어자바스크립트의 실행컨텍스트와 This를 진행하게 되었다. 실행컨텍스트도 여러 번 공부했지만 내부동작원리까지는 제대로 학습을 못했었다. 아~ 이런 게 있구나 하는 정도? 멘토링을 준비하면서 느낀 점은 매 주가 기술면접이기에 매 챕터마다 이해할 때까지 학습을 해보게 된다. 자연스레 실행컨텍스트 동작원리를 깨우치 고나니 This도 어렵지 않게 이해가 되었다. 멘토님이 나와 함께하는 멘티가 답변을 잘해주어 사전학습 내용으로는 일찍 마무리하게 되었고, 웹 전반적인..

멘토 선정 멘토 리스트에 내가 가고싶은 워너비 회사에 재직 중인 멘토분도 계셨는데, 내심 그분께 멘토링을 받고 싶은 마음이 있었다. 운영진에게 그런 의견을 어필해볼까 생각도 해보았지만, 여기만의 시스템이 있을 것 같아 의견을 전달하진 않았다. 그럼에도 운이 좋았는지 멘토링 받고 싶었던 멘토님으로 선정되었다. 🎉 그리고 첫번째 멘토링을 진행했고, 회고를 하려 한다. 첫 시간에는 OJT, 나의 이력 관련 질문, 사전 학습 요청 주신 내용으로 진행을 하였다. OJT 멘토님의 간략한 이력 소개와 멘토링을 어떻게 진행을 하는지에 대한 설명이 있었다. 6개월간 나의 개발 태도와 개발자로써 지탱할 수 있는 지식들을 잘 쌓아갈 수 있을 것이라는 생각이 들었다. - 질문위주의 멘토링: 프론트엔드 개발자에게 필요한 지식에..

2023.2월부터 진행하게 되는 에프랩 OT에 다녀오게 되었다. "오프라인 만남"에 익숙하지 않아 들뜬 마음으로 발걸음을 옮겼다. 교육과정 소개와 멘토&멘티 만남의 자리로 생각하고 참여하였는데, 각 섹션마다 운영진분들의 열심히 준비한 노력들이 돋보였다. 나는 E팀으로 배정되어 있었는데, 이것 또한 다 이유가 있었다? (초반 2달 학습기간에는 팀으로 회고하는 자리를 가진다.) 각 팀마다 5~7명 정도로 배정되어 있었고, 시작 10분 전에 도착했지만 우리 팀 중엔 내가 가장 일찍 도착하였다. OT 진행은 1. Ice Breaking Time 2. Pair Work Time 3. Mentoring 101 순으로 진행 되었고, 나는 그중에 2번째 시간이 가장 좋았던 것 같다. 아이스브레이킹 시간에는 운영진 측에..

Javascript의 데이터 타입으로는 기본형과 참조형으로 구분된다. 기본형은 불변성의 특징을 가지고 있고, 참조형은 가변적이라고 하는데 이것을 잘 이해하려면 메모리 영역에서 데이터 처리과정을 알아야 할 필요가 있다. 데이터 처리과정 기본형 1. 변수 영역에서 빈 공간 @1003을 확보한다. 2. 확보한 공간에 식별자를 a로 지정한다. 3. 데이터 영역에서 'abc' 문자열을 검색하고 없다면 빈 공간 @5004에 문자열 'abc'를 저장한다. 위와 같은 방법으로 변수 영역에 사용할 값을 데이터 영역에서 검색 후, 없다면 새로운 공간에 값을 저장하고 값에 해당 메모리주소를 반영한다. 변수 a에 새로운 값을 입력하면 어떨까? 새로운 값을 입력했을 경우에도 위와 같은 방법으로 변수 영역에서 해당 값을 검색 후..

에프랩 지원서를 넣은 이후에 메일이 왔다. 풀어볼 만한 기술 문제라고 함께 적혀 있었는데, 프론트엔드 기술면접에 주로 출제되는 가상 돔의 내용이었다. SPA 프레임워크를 사용하게 되면 가상 돔에 대한 이론을 접할 수 있다. 실제 돔에 반영하기 이전에 가상 돔에서 수정된 돔 트리를 비교해서 반영될 부분만 갱신한다라고만 간단하게 이해하고 있었다. Reconciliation이라는 용어도 생소하여 이번에 학습해보게 되었다. Virtual DOM(Virtual Document Object Model) 이란? VDOM은 실제 DOM을 추상화한 개념으로, 실제 DOM을 직접 조작하는 것 대신에 VDOM을 조작하여 그것을 이용하여 실제 DOM을 갱신하는 기술이다. React는 항상 두 개의 VDOM을 가지고 있다. 1..

전역 상태관리 링크 React의 Context API 는 컴포넌트 트리 안에서 전역적으로 접근 가능한 데이터를 관리할 수 있는 방법을 제공한다. 이것은 컴포넌트가 상위 컴포넌트에게서 Props를 전달받아야 하는 경우보다 편리하게 전역 상태를 관리할 수 있게 해 준다. Props로 데이터를 전달할 경우 발생할 수 있는 문제 리액트는 컴포넌트에게 데이터를 전달해주어야 할 때 Props를 통해 전달한다. 부모와 자식 컴포넌트 간의 depth가 깊어질수록 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 하는 불편함이 있다. 이러한 경우를 Props Drilling이라고 부른다. Context API는 이와 같은 문제해결을 하기 위해 Context를 생성하여 컴포넌트 계층 간의 데이터 전달을 쉽게 해주는 ..