본문 바로가기

분류 전체보기

 (120)
Vite로 빌드하기 1. 빌드도구를 Vite로 선택하게 된 배경    기존 Webpack 빌드 시스템을 사용하는 이전 프로젝트에서 빌드 시간이 위와 같이 길고, 파일 변경 후 HMR(Hot Module Replacement) 성능도 떨어지는 문제가 있었습니다. 특히 개발 중 코드 변경을 즉시 반영하려면 시간이 많이 소요되어 개발자의 생산성이 저하될 수 있었습니다. 이에 비해 Vite는 빠른 빌드 성능과 즉시 반영되는 HMR 기능을 제공하여 개발 환경을 보다 효율적으로 개선할 수 있는 가능성이 있었습니다. 이를 바탕으로 개발자가 코드 변경 시 빠르게 결과를 확인할 수 있고, 빌드 시간을 단축시킬 수 있는 장점을 고려하여 Vite를 테스트 해보려는 결정이 이루어졌습니다.2. Vite vs Webpack1. 빠른 속도Vite:V..
WS vs WAS 1. WS (Web Server)Web Server는 클라이언트(일반적으로 웹 브라우저)로부터 HTTP 요청을 받아 정적 콘텐츠를 제공하는 서버입니다. 여기서 정적 콘텐츠란 이미지, HTML, CSS, JavaScript 파일과 같은 콘텐츠를 말합니다. Web Server의 주요 기능과 특징은 다음과 같습니다.역할: HTML, CSS, JavaScript, 이미지 파일 등 정적 리소스를 클라이언트에 전송.기능:클라이언트의 HTTP 요청을 수신하고, 요청에 맞는 정적 콘텐츠를 전송합니다.보안 인증, 캐싱, 압축 등의 기능을 제공하여 웹 애플리케이션의 성능을 최적화할 수 있습니다.동적 콘텐츠가 필요할 경우, WAS 등 다른 서버로 요청을 전달하고 결과를 클라이언트에 전달합니다.예시: Apache HTTP S..
23.11.05: 웹과 네트워크 - TCP/IP 프로토콜 HTTP란? 웹은 HTTP로 나타납니다. 우리가(Client가) 웹 브라우저의 주소창에 URL을 입력하여 어디론가 요청을 보내면, 응답이 돌아와서 우리가 요청한 웹 페이지가 보여집니다. 이때 HTTP를 통해서 HTML과 같은 리소스들을 가져오는데요. HTTP는 클라이언트와 서버 간의 프로토콜입니다. Protocol the system of rules and acceptable behavior that people or organiztions should follw in official situations for example when they have formal discussions. 출처: Cambridge Dictionary 프로토콜의 정의를 살펴보면 사람들, 기관들 사이에서 공식적으로 협의된 어떠..
23.08.23 : React Native - FlatList로 Infinite Scroll 구현하기 안녕하세요 FE 개발자 노은지입니다. React Native로 어플리케이션을 만들때, 효율적으로 List를 렌더링 할 수 있는 RN의 내장 컴포넌트인 FlatList에 대해서 알아보고, 무한 스크롤을 적용하는 방법을 공부 해보았습니다. FlatList 기본적인 리스트를 렌더링을 하기 위하여 편리한 여러 기능을 지원하는 고성능 인터페이스로 다음과 같은 기능을 제공합니다. 1. Fully cross-platform 웹, 모바일(iOS 및 Android)등 여러 플랫폼에서 완벽하게 작동 2. Optional horizontal mode horizontal prop 이용해 수평 스크롤 모드 지원 3. Configurable viewability callbacks onEndReached, onEndReachedT..
23.07.12: React, 관심사 분리 탐구 안녕하세요, FE 개발자 노은지입니다. 얼마 전, Table 안에 있는 TableToolbar 공통 컴포넌트를 수정하는 이슈를 진행하고 코드 리뷰를 하면서 팀의 시니어 개발자분께서 코멘트를 달아주셨습니다. 수정 전 TableToolbar의 모습은 아래와 같았습니다. 키워드를 이용해 table 내의 정보를 검색하고, table 내에서 사용자가 선택한 row가 몇 개인지 search input 우측에 표시되도록 하며, 우측 끝에 tool 들이 배치되도록 구성되어 있는데요. 새롭게 요구된 디자인은 아래와 같습니다. 1줄이었던 TableToolbar가 2줄로 표현이 되는 스타일 변경이 있었습니다. 특수한 페이지에서만 변경된 디자인이 적용 되도록 해야 했고, 선택된 row의 개수를 표시하는 UI가 조건부로 렌더링..
23.06.19: ‘쉽게 시작하는 타입스크립트’ 베타리딩 후기! 안녕하세요, FE 주니어 개발자 노은지입니다. 😊 FE 개발자로서 필수 기술 스택 중 하나라고 하는 TypeScript를 저는 입사 이후에야 처음으로 사용해 보았는데요. 2주간의 신입사원 온보딩 후 실무에 투입되면서, JavaScript로만 개발을 하다가 실무에서 쓰는 복잡하게 설계된 타입들을 처음 보았을 때는 대체 이걸 다 어떻게 이해하지...? 싶었습니다. 특히 Omit, Record 같은 실무에서 자주 만나볼 수 있는 위와 같은 타입들을 처음 보고는 현기증이 그만 ^^... 입사 초기에는 예전에 작성된 코드들과 팀원 분들께 얻은 조언들로 방향을 잡아가며 issue들을 해결하긴 했지만, 시간이 지날수록 '이렇게 찍어먹기 식으로 배운 TypeScript를 과연 내가 어디 가서 자신있게 쓸 줄 안다고 할..
23.04.09: Weekly I Learned <Fun English> Don’t Underestimate the Power of Self-Reflection Vocab Empathy: the ability to understand and share the feelings of another Thrive: to grow or develop well, to be successful or make steady progress Indispensable: absolutely necessary, essential Competency: the ability to do something successfully or efficiently Mediocre: of only average quality, not very good Contemplate: to think about somethin..
23.04.09: 1/4분기 회고, 나의 새해 다짐은 안녕한가? 저는 현재, Fun English라는 Club에 소속되어있습니다. Fun English는 Harvard Business Review(HBR)라는 매체를 이용한 스터디를 진행합니다. 이 모임을 통해 멤버들은 자유롭고 깊이 있는 대화를(영어로) 나눌 수 있습니다. 비즈니스 영어를 공부하는 것을 목적으로 두고 있지만 사실 저는 개인적인 이야기도 많이 진지하지만, 생각보다 딱딱한 분위기는 아닙니다. 모임장님이 Topic, Question list를 매주 준비해 사전에 공지 해 주시면 참석자들은 그에 대해 각자 고민과 생각을 정리하여 의견을 나누는 형식으로 진행이 되고 있습니다. 모임 전에 공부(과제)를 해야한다는 압박감이 있습니다만, 멤버들의 적극적인 참여를 이끌어내고 더 풍부한 대화 소재를 제공해 개인적으로..
반응형

티스토리툴바