FrontEngineer JungBam

웹 브라우저의 기본적인 구조는 7단계로 나뉜다. ① 유저 인터페이스 : 유저와 상호작용하는 부분 ② 렌더링 엔진 : HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시 ③ 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진을 연결하는 기능 ④ 네트워킹 : 브라우저가 인터넷에서 리소스를 가져올 ⑤ UI 백엔드 파트 : 콤보박스나 윈도우 등 브라우저가 이미 갖고있는 UI들을 그려줌. ⑥ 자바스크립트 인터프리터 : 자바스크립트 코드 실행 ⑦ 데이터 펄시스턴스 : 로컬 스토리지나 쿠키와 같은 보조 기억장치에 데이터를 저장하는 기능 좀 더 깊게 보려면? [Browser] 브라우저의 구조 | Browser Structure "브라우저, 왜 알아야 할까" 브라우저에 내부 동작에 대해 꼭 알아야 할까요? 브라우저는 IE..

webpack 연습 : https://github.com/studyTS-bam/webpack-prac 가이드를 따라서 연습하면서 각각의 커밋을 통해 각 챕터를 나눠서 해봤다. CRA와 barbel을 알고 있었음에도 그 동작원리에 대해서 자세히 보지 않은 것에 대해서 이제와서라도 보게 된것에 다행이라는 생각이 든다. 번들링이 어떤 작업을 하는지.. CRA가 왜 좋은지에 대한 생각이 많이 들었다. 프로젝트의 성능 최적화를 하기 위해서 '코드 스플리팅'에 대하여 공부하다가 webpack까지 와서 공부하면서 개발을 할 때에 고민해야 하는 점이 더 늘게 되어 기쁘다. 아는만큼 보인다고 했었던가, 점점 보이는 것이 늘어가고 공부할 것이 늘어가는 것 또한 얼마나 설레이는 일인지. 리액트의 번들링 관련되어 아래 글을 ..

리액트 최신버전에서는 특정 번들링 최적화가 필요없다고 이야기는 하지만 또 어떤 부분에 있어서는 번들링 최적화를 만져줘야하는 부분이 있다. 예를 들면 lodash의 경우에는 번들링 최적화가 필수적이라고 들었다. 그래서 번들링 최적화 중 가장 많이 들어본 webpack에 대해서 공부를 시작하기로 했다. 그렇다면 번들링이란 무엇일까? 번들이라는 말에서와 같이 하나로 묶어주는 작업을 이야기하는데, 묶어주는 작업에 있어 모듈들의 의존성 관계를 파악하여 이에 맞게 그룹화해준다. 그럼 애초에 하나로 작업하면 되지 않나? 하나에서 작업할 때에는 작업의 효율성이 떨어지기 때문에 각각의 기능별로 모듈화를 시켜주게 되었고 이를 하나로 합칠 때에 불필요하게 다 그룹화하는 것이 아니라 의존성이라는 서로의 관계를 고려하여 묶어주..

목표 설정이 중요하다고 생각하고 부트캠프를 끝낸 지금, 나한테 필요한 건 취업이라는 것에 묶여있기보다 next level로 넘어가는 것이다. 최근 트렌드에 맞춰서 웹+앱을 다 아우르는 개발자가 되기 위해 기본이 되는 것들(TS, 최적화)을 익히고 하고 싶었던 공부(recoil)를 할 생각이다. 1. TS 공부 - 타입스크립트가 익숙해질때까지 써볼 생각이다. 2. 최적화 공부 - 번들링에 대한 공부 - 렌더링 최적화에 대한 공부 - 브라우저에 대한 공부(캐시, 서버와의 통신 등) 3. recoil을 조금 더 딥하게

길 것 같았던 항해 기간이 끝나고 수료식을 했다. 시간이 지나면 지금 느끼는 감정들이 또 달라질테니 수료한 지금의 심정을 회고하며 글을 작성한다. 34살 전역 이후, 3번의 부트캠프. 항해99 수료 이후 2주만에 회사를 골라가기까지 34살 전역을 하고 선택한 프론트엔드 2012년 백엔드 개발자로 인턴 9개월, 신입으로 허드렛일 4개월을 마치고 병역의 의무를 다하기 위해서 사관학교로 군 생활을 시작했다. 그렇게 전투복을 입고 9년 6개월의 시간이 흐르고 사회로 나왔다. 항상 새로운 것을 도전하고 바꾸고 싶었던 해소되지 않는 가슴 속의 뜨거움을 표출할 직업을 고민하다가 계속해서 변화하고 배워야 하는 개발자를 다시 해보자는 생각이 들었다. 34살에 이직을 선택하고 걱정이 없었던 것은 아니었으나, 어떤 것을 하..

웹피란? web과 picture가 합쳐진 단어로, 웹에서 사용되는 gif, jpg, png의 이미지 파일을 대체하기 위해 개발된 이미지 포맷이다. 웹피의 장점 1. 가장 큰 장점은 파일 사이즈이다. 특히, gif파일의 경우에는 손실방식으로 저장하면 20~30%까지 줄일 수 있다. 이러한 장점은 이미지 저장 및 사용에 드는 리소스를 줄일 수 있을 것이다. 2. 두번째를 현실적으로 느껴지는 것은 확장자 명이 하나라는 점이다. 여러가지 확장자명을 고민할 필요없이 webp면 된다는 점이다. 3. 구글에서 webp에 대한 소스를 오픈했기 때문에 이를 사용하는데에 어떠한 비용도 추가되지 않는다는 점이 있다. 웹피의 단점 아직 많은 편집기들이 webp를 지원하지 않는 경우가 있고 IE를 포함한 몇몇 브라우저에서는 해..

코드 스플리팅이란 ? - 자바스크립트로 개발하였을 때에 프로젝트가 커질 수록 자바스크립트 파일 용량이 커지고 용량이 커지면 페이지 로딩속도가 느려지게 되는데, 이 부분에 있어서 지금 필요한 코드가 아닌경우에는 나중에 필요할때 불려지도록 하는 작업을 말한다. 이를 통해서 로딩속도를 개선할 수 있다. 프로젝트의 페이지 중에 꼭 필요한 페이지와 필요하지 않을 수 있는 페이지를 나누어 필요하지 않을 수 있는 페이지의 경우 스플리팅되도록 작업했다. 이렇게 분류된 페이지로는 프로필 설정 페이지, 회원탈퇴 페이지, 에러 페이지, 서버점검 페이지로, 해당 페이지들은 React.lazy를 통해 스플리팅 작업을 했다. React.lazy와 함께 suspense를 사용하여 해당 페이지들이 필요시 불려올때 로딩페이지를 띄워줄..

이번 실전프로젝트 초기버전에서는 webRTC를 이용한 그룹채팅을 채팅과 함께 구현하려고 했었다. 이때 고민했었던 것이 socket 인스턴스를 어디에서든 하나의 인스턴스로 만들어 주고 싶었고 이 때 찾은 방법이 싱글톤 방법이었다. 싱글톤 패턴의 가장 기본적인 방법은 네임스페이스 패턴을 객체로 만들어 사용하는 것이다. 이렇게 되었을 때에는 모든 변수들이 다 공개되는 그림이 그려진다. 예를 들어 아래와 같은 네임스페이스 패턴의 객체를 생성하면 eventName. 을 찍게 되면 안에 있는 모든 변수들이 공개되는 것을 말한다. 이러한 변수들을 숨기고자 한다면 숨길 수 있을 것이다. 하나의 방법은 즉시실행함수를 통해 반환값으로 변수들을 주는 것이다. 아래의 코드를 예시로 보면 이해하기 쉬울 것이다. 싱글톤 패턴을 ..