리액트와의 비교를 통해 살펴본 Svelte의 특징

광복절인 오늘, 오랜만에 글을 적는다. 요즘 진행하는 프로젝트의 기술 스택이 스벨트라, 새롭게 학습하면서 느꼈던 점들을 리액트와 뷰와의 비교를 통해 설명하고자 한다. 해당 글은 특히 스벨트의 관점에서 바라보는 글이다. 먼저 스벨트의 개념에 대해 알아보자. Svelte(스벨트) 스벨트는 개발자 Rich Harris에 의해 2016년에 출시된 오픈 소스 프론트엔드 웹 프레임워크이다. 리액트와 달리 가상돔을 사용하지 않는 것이 큰 특징이며, 빌드 단계에서 구성 요소를 컴파일하여 성능이 향상됐다. 스벨트는 라이브러리나 프레임워크가 아닌 컴파일러이다. 리액트나 뷰와 같은 다른 프레임워크들은 모두 런타임 환경에서 실행되기 때문에 프레임워크를 돌리기 위한 엔진이 소스코드에 포함돼 있지만 스벨트는 빌드 타임에 소스코드..

→2022.08.15

Engineering

웹 서버(web server)와 웹 애플리케이션 서버(web application server)의 차이

1. Web Sever와 WAS의 개념 Web Server(웹 서버) 웹 서버는 소프트웨어와 하드웨어로 구분되며 하드웨어는 Web 서버가 설치되어 있는 컴퓨터이며 소프트웨어는 클라이언트로부터 HTTP 요청을 받아 정적인 컨텐츠를 제공하는 컴퓨터 프로그램이다. 여기서 정적 컨텐츠는 HTML, CSS 및 이미지 파일 등이 해당된다. 웹 서버는 클라이언트로부터 HTTP 요청을 받으면 해당 요청이 정적 컨텐츠만 필요한 경우 WAS를 거치지 않고 정적 컨텐츠를 클라이언트로 제공한다. 반면 동적 컨텐츠 요청인 경우 해당 요청을 WAS로 보내서 WAS로부터 받은 결과값을 클라이언트에게 응답한다. 웹 서버의 예시 : Apache, Nginx, IIS 등 WAS(Web Application Server) 애플리케이션을 ..

→2022.06.05

Programming Language/JavaScript

JavaScript 데이터 타입에는 어떤 게 있을까

자바스크립트 데이터 타입은 처음 자바스크립트를 공부를 시작할 때 간단히 보고 넘어간 게 다였다. 그래서 그런지 얼마 전 데이터타입이 뭐가 있냐는 질문을 받았을 때 가물가물하게 떠올리며 얘기했던 일이 있어 다시 한번 확실하게 정리해야겠다고 생각했다. 먼저 데이터 타입을 왜 알아야 하는 지에 대해 생각해보면, 우리가 개발자로서 코드를 짤 때 사용하는 데이터의 타입에 따라 메모리 크기가 달라지기 때문에 데이터를 저장하며 얼마나 메모리를 사용할지 정하는 기준이 된다. 또한 메모리에 저장했으면 주소를 참조하여 데이터를 사용하게 되는데 이때 데이터값 자체는 2진수로 저장되기 때문에 이를 어떻게 해석할 것인가에 대한 기준이 되는 것이 바로 데이터 타입이다. 예를 들어 0100 0001로 표현된 2진수는 Number ..

→2022.05.31

Programming Language/JavaScript

Throttle와 Debounce

최근 바닐자 자바스크립트로 웹페이지를 구현하는 연습을 하고 있는데, 검색기능과 자동완성 기능을 구현할 때 Throttle과 Debounce 개념을 알게 되었다. Throttle과 Debounce를 사용하면 이벤트나 함수 호출의 빈도를 줄여 성능을 최적화 하는데 도움이 된다. 검색 기능에선 키보드 키를 하나씩 입력할 때마다 api 호출을 통해 데이터를 불러오게 되면 지나치게 많은 api 호출이 발생하기 때문에 비효율성을 초래하게 된다. 따라서 사용자의 키 입력이 끝났다고 판단된 이후나 입력이 어느 정도 된 중간 중간 검색을 시도하도록 최적화할 필요가 있다. 두 가지의 차이점을 알아보도록 하겠다. Throttle 와 Debounce 의 차이점은 이벤트를 언제 발생 시킬지의 시점 차이이다. Throttle은 ..

→2022.05.18

Algorithm/Programmers

[프로그래머스] 기지국 설치 / level 3 / 파이썬 / python

💡 solutions 💬 문제에서 구해야 하는 답은 '증성해야 할 기지국 개수의 최솟값'이다. 따라서 이를 구하기 위해서는 설치된 기지국으로부터 전파가 전달되지 않는 아파트들을 먼저 찾아야 한다. 💬 설치된 기지국 리스트를 가지고 순차적으로 탐색한다. start, end값을 갱신하며 전파가 전달되지 않는 아파트의 개수(before)를 구간별로 찾는다. 💬 spread는 기지국 하나를 설치하면 결과적으로 전파를 전달 받는 아파트의 개수이다. (기지국의 위치 또한 포함) 예를 들어 w가 2이면 총 5개의 아파트가 전파를 전달 받을 수 있다. 💬 한 구간에서 전파가 전달되지 않은 아파트들의 개수를 spread로 나눈 몫을 올림한 값이 바로 증설해야 할 기지국 개수이다. 모든 구간을 탐색하여 증설해야 할 기지국..

→2022.04.16

Algorithm/Programmers

[프로그래머스] 스티커 모으기(2) / 파이썬 / python / DP문제

💡 solutions 💬 첫 번째 스티커를 뜯은 경우 / 첫 번째 스티커를 뜯지 않은 경우 두 가지로 나눠서 DP 테이블을 만들고 풀이를 진행함. 💬 테스트케이스 33번이 런타임이 나서 찾아보니, 엣지 케이스 N = 1일 때를 처리해주지 않아서 인덱스 에러가 발생했고, 첫 번째 if문으로 해당 케이스를 보완. 👨‍💻 code def solution(sticker): if len(sticker) == 1: return sticker[0] dp1 = [0]*len(sticker) # 첫 번째 스티커를 뜯은 경우 dp2 = [0]*len(sticker) # 첫 번째 스티커를 뜯지 않은 경우 dp1[0] = sticker[0] dp1[1] = sticker[0] for i in range(2, len(stick..

→2022.04.15

Engineering

SSR과 CSR 비교하기

🗨️ SSR(Server Side Rendering) 전통적인 MPA(Multi Page Application)의 렌더링 방식, 브라우저(클라이언트)가 데이터 요청 시 브라우저 -> 프론트 서버 -> 백엔드 서버 -> 데이터베이스를 거쳐 데이터베이스에서 HTML 문서를 가져온 후 브라우저에 화면을 렌더링 하는 방식이다. 클라이언트 측에서 페이지 이동 및 클릭으로 요청이 발생할 때마다 서버에 요청하여 전체 HTML 문서를 다시 가져오기 때문에 변화하지 않는 부분까지도 다시 렌더링 되고, 잦은 서버 요청으로 부하가 일어나는 등의 비효율성을 초래한다. SSR은 첫 화면에서 기존 데이터가 존재하는 HTML 문서가 있기 때문에 검색 엔진이 색인을 생성하고 크롤링할 수 있어 SEO에 좋다. 사용자 인터랙션이 많지 ..

→2022.03.17

Engineering/React

리액트의 라이프사이클(Life Cycle)에 대해 알아보자

✔️라이프사이클이란? 리액트는 컴포넌트 단위로 개발하게 되는데 이때 각 컴포넌트들은 라이프사이클 즉, 생명주기를 가지고 있다. 생명주기는 생성부터 시작하여 업데이트가 되기도 하며 마지막에는 소멸되는 과정을 거치게 된다. 클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작하는데 이와 달리 함수형 컴포넌트에선 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현한다. 라이프사이클을 생성, 업데이트, 제거 총 세 가지 단계로 나눌 수 있고 각 단계마다 메서드가 존재한다. 총 9가지 메서드가 있으며 각 단계별 메서드에 대해 간단히 알아보려 한다. 참고로 클래스형 컴포넌트에서만 사용 가능하다. 아래 그림을 참고하자. 🗨️마운..

→2022.03.12

전체 글