SSR(Server-Side Rendering)의 장점과 단점

SSR(Server-Side Rendering)은 클라이언트와 서버의 역할을 분담하여 페이지를 렌더링하는 방식입니다. 이 방식은 다음과 같은 장단점이 있습니다. 장점: 초기 로딩 시간이 빠름 SSR은 서버에서 이미 페이지를 렌더링했기 때문에 초기 로딩 시간이 빠릅니다. 이는 사용자가 페이지를 보기 위해 기다리는 시간을 줄여주어 사용자 경험을 향상시킵니다. 검색 엔진 최적화(SEO) SSR은 서버 측에서 페이지를 렌더링하기 때문에 검색 엔진이 페이지의 콘텐츠를 잘 인식할 수 있습니다. 이는 검색 엔진 최적화를 위해 중요한 요소입니다. 보안성이 높음 SSR은 서버에서 페이지를 렌더링하기 때문에 보안성이 높습니다. 클라이언트에서 보안을 처리할 필요가 없기 때문입니다. 코드 유지 보수가 용이함 SSR은 클라이언..

CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)의 차이점은 무엇인가?

CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)은 모두 웹 애플리케이션의 페이지 렌더링 방식을 의미합니다. 하지만 두 방식은 다음과 같은 차이점이 있습니다. 클라이언트와 서버의 역할 분담 CSR은 클라이언트 측에서 동적으로 페이지를 렌더링하는 방식으로, 서버는 필요한 자원을 클라이언트에게 전달하는 역할만 수행합니다. 반면에 SSR은 서버 측에서 동적으로 페이지를 렌더링하고, 클라이언트는 렌더링된 페이지를 전달받아 화면에 표시하는 역할을 수행합니다. 초기 로딩 시간 CSR은 초기 로딩 시간이 느리다는 단점이 있습니다. 이는 클라이언트가 페이지를 렌더링하기 위해 필요한 자원을 모두 다운로드하고 초기화하는 시간이 필요하기 때문입니다. 반면에 SSR은 서버에서 ..

SSR(Server-Side Rendering)이란 무엇인가?

SSR(Server-Side Rendering)은 서버 측에서 동적으로 HTML 페이지를 생성하여 클라이언트에게 전달하는 기술입니다. 이는 클라이언트 측에서 동적으로 페이지를 렌더링하는 CSR(Client-Side Rendering)과는 대조적인 방식으로 작동합니다. SSR은 웹 애플리케이션의 성능을 개선하는 데 도움이 되며, 특히 초기 로딩 시간을 단축하여 사용자 경험을 향상시킵니다. 이는 클라이언트가 페이지를 렌더링하기 위해 필요한 자원을 다운로드하고 초기화하는 데 필요한 시간을 줄여줍니다. 또한 SSR은 SEO(Search Engine Optimization) 측면에서도 이점을 제공합니다. 검색 엔진은 페이지의 콘텐츠를 읽어들이기 위해 HTML 코드를 스캔하는데, CSR에서는 초기 페이지 로딩 시점..

클레이튼 대납 기능 구현하기 - klaytn fee delegation

가스비? Web3에서는 생소할수도 있는 가스비 라는 개념이 있다. 블록체인 네트워크에 특정 action(송금, 민팅 등)을 실행시키고, 검증시키는 댓가로 일정한 수수료(가스비)를 낸다. 보통 수수료하면 1,000원, 2,000원 정도를 생각할 수 있다. 하지만 블록체인, 특히 이더리움 같은 경우는 민팅시 사람들이 많이 몰려서 몇십만원 까지 수수료를 낸적도 있었다. 상품가격 보다 수수료가 더 비싸지는 기이한 현상이 발생한 것 이다. 아더디드 NFT를 구매하기 위해 ETH 가스비를 지불해야했는데, 구매 경쟁이 심해지면서 가스비가 최대 5ETH에 이르기도 하였음. 구매자들은 총 1억 2300만달러(약 1,550억원)를 가스비로 지불한것으로 알려졌다. https://twitter.com/yugalabs/stat..

리스트에서 랜덤으로 원소 뽑기 - python list random choices

import random selected = random.choice(someList) print(selected) 번외 확률을 가진 리스트에서 원소를 뽑는 방법이다. import random selected = random.choices( someList, # 원소 probabilityList # 원소의 확률 ).pop() print(selected)

Pillow 이미지처리 multiprocessing으로 성능 올리기

17+ 개의 PNG 레이어들을 랜덤으로 병합하여 10,000개의 이미지를 만들어내는 프로젝트를 진행중이다. 처음 single-thread 방식으로 구현하였을때 6시간이 걸리길래 식겁한 경험이 있다. 이를 단 20분으로 줄인 방법을 설명하고자 한다. 다음은 Pillow 라이브러리를 이용해 이미지 레이어를 합성하는 예시이다. def merge_image_layer(self, trait): image_layer_path = self.parse_image_directory(trait) # layer PNG image directories stack = Image.new('RGBA', (self.width, self.height)) # create new image canvas for layer, path in ..

vue sass global import - Sass 사용시 중복으로 import 안하도록 하는 방법

흔히 scss 작성시 다음과 같이 import 하여 사용한다. @import "./variables.scss"; * { margin: 0; padding: 0; color: $primary-color // variables.scss내에 선언된 변수 } 한두번은 괜찮지만 컴포넌트가 10개...100개...1000개 라면? 코드 한줄 한줄 줄이는건 우리에겐 소중하니까... 다음과 같이 설정해주자 // vue.config.js module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "@/style/variables.scss"; `, }, }, }, }; 이제 다른 컴포넌트에서 자유롭게 사용하자 // exampleComponent.js..

git pull 경고없애기 - Pulling without specifying how to reconcile divergent branches is discouraged

얼마전 맥북을 새로 사고 기존 레포지토리들을 풀받다가 벌어진 일이다. 알아보니 Git 2.27 부터 새로 추가된 기능이라 한다. repo를 pull 땡길때는 rebase, merge, fast-forward 방법이 있는데(기존에도 존재햇음), 이제 이를 명시적으로 정해달라고 warning을 띄워주는듯하다. 해결법 해당 레포지토리만 silence 하려면 git config pull.ff only 향후 모든 레포지토리에 대해 적용하려면 git config --global pull.ff only https://stackoverflow.com/questions/62653114/how-to-deal-with-this-git-warning-pulling-without-specifying-how-to-reconcil..