프론트엔드 개발

명령형 프로그래밍 VS 선언형 프로그래밍

우선, 두 프로그래밍 패러다임의 차이점을 이해하기 전에 각각의 프로그래밍에 대한 개념을 이해하고자 한다. 명령형 프로그래밍 (Imparative Programming) 컴퓨터 과학에서 명령형 프로그래밍(命令型 프로그래밍, 영어: imperative programming)은 선언형 프로그래밍과 반대되는 개념으로, 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다. 자연 언어에서의 명령법이 어떤 동작을 할 것인지를 명령으로 표현하듯이, 명령형 프로그램은 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것이다. 글들을 읽다보면, 이해가 갈법하면서도, 잘가지 않는다. 가장 이해하기 쉽게 생각하면, 명령형 프로그래밍은 "HOW"를 제시한다. 우선 예시 코드를 보자. /..

리팩토링(Refactoring) 이란?

학생 신분에서, 교육을 받는 입장에서 또는 개인 및 팀 프로젝트를 하는 입장에서, 가장 접하기 쉽지 않은 부분 중 하나가 리팩토링이지 않을까 생각한다. Software Engineering을 하시는 분이라면, 모두들 어느 시점에서는 꼭 마주하는 이 리팩토링, 가장 어색하고 개인적으로도 하고 싶지 않았던 ( "반복 작업"을 하기 싫어하는 성격이다... 게임도 이지모드, 하드모드, 헬모드 등 반복적인 루프를 갖고 있는 게임을 싫어한다... ) 부분에 대해서 가장 필요하고 가장 빈번하게 일어나는 작업 중 하나란 것을 몸소 한번 더 인지하며 개념을 정리하고자 하였다. Wikipedia에서는 리팩토링(Code Refactoring)을 다음과 같이 정의하였다. code refactoring is the proces..

드디어... 첫 직장...

약 1년간의 웹 개발자의 교육을 통해 프론트엔드 직무로 첫 직장을 다닐 수 있게 됬습니다!!!!! 앞으로 주니어 프론트엔드 개발자의 커리어와 그에 알맞는 실력을 쌓기 위해, 다시 한번 제 스스로를 다잡고자 합니다! 또한 이제 제가 바라던 조금 더 "필요한 공부"를 할 수 있기에, 자주 블로그 글도 쓰고 다양한 프로젝트도 접하면서 발전해보고 싶네요 ㅎㅎ 제가 들어간 조직의 서비스는 현재 5년 가량 된 레거시를 바탕으로 유지보수 해온 서비스에 리팩토링, 새로운 아이디어 및 개발을 주 목적으로 할 수 있을 것 같은데, 상당한 MAU를 보유한 서비스에 다양한 방면으로 개발에 임할 수 있는 점이 메리트인 것 같습니다ㅎㅎ 영어로 업무가 진행 되는 부분이 상당히 많은데, 이러한 점도 마음에 듭니다 ㅎㅎ 당분간은 프론..

[데스크탑 애플리케이션: 01] Firebase + Nextron (Electron + Next.js)

* 기업의 코딩테스트 과제로 데스크톱 채팅 애플리케이션을 만들어보는 토이프로젝트를 진행해 보았다. 마지막으로 진행했던 토이프로젝트가 소켓 통신을 이용한 크롬 익스텐션 채팅 어플리케이션 이었던 만큼, 주어진 시간 (10일)내에 어느 정도 결과물을 보일 수 있었던 것 같다. 요구사항은 사용자 리스트 출력, 개인 메세지(대화), 그룹 메세지(대화)의 구현이었고, 데스크탑 애플리케이션을 만들어 보는 것 이었다. Javascript를 이용해서 만들 수 있는 데스크탑 애플리케이션은 Electron이 있다. 그 중, React (SSR 기반의 Next.js)를 이용해야 하기 때문에 Next.js와 Electron을 합친 템플릿(Boilerplate)을 제공해준 Nextron 오픈 소스를 활용하였다. https://g..

[이미지 렌더링: 02] 웹 성능과 이미지 최적화

지난 무한스크롤 기능과 이미지 로딩에 이어, 이미지 렌더링의 최적화를 연습해보기 위해 두가지의 페이지를 추가 구현 해 보았다. 우선, 이미지를 렌더링하는데 있어서 컴포넌트 혹은 이미지를 특정 시점에 로딩함으로써 불필요한 이미지 렌더링을 줄임으로 초기 로딩 시간을 대폭 줄일 수 있다. 물론 이미지를 효율적으로 렌더링 하는 방법은 다양하지만 (위의 방법 외에도 source와 picture 태그를 이용한 렌더링 등) 이미지를 받아오는 서버를 직접 만들지 않는점을 고려하여 우선은 두가지만 진행하였다. 첫번째 방법은 Chrome 75에서 소개한 Native Lazy Loading 방식으로, 태그의 CSS property 중 loading에 lazy를 활용하는 것이다. 다음과 같이 loading property에 ..

[이미지 렌더링: 01] 무한스크롤과 이미지 렌더링

타 사이트들을 돌아다니며, 크롬 개발자 도구의 Ligthouse 를 사용하여 성능 측정을 해보았다. 꽤나 많은 사이트들이 성능 점수에서 낮은 것을 확인할 수 있었고, 이에 대한 이유를 파악해보고자 하였다. 해당 사이트(어디인지는 비밀 ㅎ...)는 성능적으로 매우 아쉬운 점수를 보였다. 체감 상, 이 점수대의 성능에서는 웹 인터렉션이 빠르다 라는 체감을 전혀 받지 못하는 것 같다. 다소 버벅거림이 있는 성능, 주된 원인으로서 이미지라 생각했다. 해당 사이트는 다량의 이미지를 렌더링하는데, lazy loading과 같이 성능적인 설계를 전혀 고려하지 않았었다. 조금 더 근거를 얻기 위해 Lighthouse의 의견을 들어보았다. 이미지 인코딩과 크기, 차세대 형식 및 오프스크린 이미지 지연하기를 제외한 부분들..