Frorong

Vanilla Extract로 개발자 경험, 사용자 경험 모두 챙기자. emotion이나 styled-components와 같은 css-in-js 라이브러리들이 많은 인기가 상승 곡선을 그리고 있다. 이렇게 많은 인기를 얻고 있는 css-in-js 라이브러리는 무엇일까? css-in-js란? css-in-js는 어플리케이션의 스타일을 js로 작성하여 적용하는 것을 의미한다. 동작 원리를 간략히 설명하면 다음과 같다. 1. 개발자가 js로 스타일을 정의한다. 2. 라이브러리가 각 스타일에 대한 고유한 class name을 생성한다. 3. 생성된 스타일과 class name을 기반으로 style sheet를 생성한다. 4. 의 형태로 DOM에 주입한다. 이러한 css-in-js는 컴포넌트 기반 스타일링이 가..

Server Component란 무엇일까? Server Side Rendering이라는 개념을 아는가? (모른다면 아래 게시글 참고) SSR 개념 바로잡기! Server Side Rendering!! Server Side Rendering이 무엇일까? server side rendering을 이해하기 위해서는 먼저, client side rendering에 대한 이해가 필요하다. 브라우저 렌더링 관련 참고 게시글. 왜 translate를 사용해야 할까? 브라우저 렌 frorong.tistory.com 나는 얼마 전까진 서버컴포넌트와 서버사이드렌더링의 개념을 혼동하고 있었다. 서버 컴포넌트는 React 18부터 도입된 개념이다. 서버에서 동작하는 컴포넌트를 의미하며, 이전에 사용하던 컴포넌트는 클라이언트..

Husky로 코드 검사를 자동화해 보자! 🐶 코드리뷰를 하다보면 이런 경우가 있지 않나요? A: 이 부분 린트 적용이 안된 것 같습니다. B: 네 감사합니다! 적용하겠습니다. A: 이 부분 테스트 통과가 안된 것 같습니다. B: 네 감사합니다! 수정하겠습니다. 그런데 이런 것들을 개발자가 이런 정책을 지키는지 여부를 일일이 검사하는 건 리소스 낭비라는 생각이 들지 않나요? 이런 문제를 해결하기 위해 Husky라는 라이브러리가 있습니다. Husky는 git hook을 관리하기 위한 JS 라이브러리입니다. git add, commit 등의 이벤트가 발생하였을 때에 코드 스타일을 검사하거나, 테스트코드 실행 등의 동작이 가능합니다. git hook이란? git hook은 git 작업중 특정 시점에서 실행되는 ..

동적 데이터 수정 시 새로고침 후 toast 띄우기! 신선한 정보 제공과 사용자 피드백. 문제상황 이런 상황이 있지 않으셨나요? 어떤 리스트가 존재할 때에 그 리스트에 수정이 생기는 작업 후 사용자 피드백이 필요한 상황. 이 과정에는 리스트 새로고침도 필요하겠죠? 예를 들면 다음과 같습니다. 한 서비스에 상점이라는 기능이 있고 상점 페이지 접속 시 상점 리스트가 반환됩니다. 유저는 상점 카드를 클릭하여 상품 개수 차감이 가능하죠. 이 경우, 리스트의 상품 개수가 줄어들며 유저는 사용자 피드백과 함께 상품 개수가 줄어든 새로운 상품 리스트를 원할 것입니다. 이런 요구사항을 어떻게 구현해야 할까요? 신규 데이터를 받아오는 로직을 구현하는 것이 베스트라고 생각합니다. 아래 방식은 차선책들입니다. 새로운 리스트..

Server Side Rendering이 무엇일까? server side rendering을 이해하기 위해서는 먼저, client side rendering에 대한 이해가 필요하다. 브라우저 렌더링 관련 참고 게시글. 왜 translate를 사용해야 할까? 브라우저 렌더링 과정! 우리가 css 속성으로 애니메이션을 구현할 때에는 translate를 사용하라고 한다. 왜 때문일까? left나 right 속성으로 위치를 조정할 수도 있을 텐데 말이다. 그걸 이해하기 위해선 먼저 브라우저 렌더 frorong.tistory.com Client Side Rendering client side rendering은 클라이언트 즉, 브라우저 측에서 렌더링을 진행한다는 것이다. HTML, CSS, JS파일이 클라이언트로..

우리가 css 속성으로 애니메이션을 구현할 때에는 translate를 사용하라고 한다. 왜 때문일까? left나 right 속성으로 위치를 조정할 수도 있을 텐데 말이다. 그걸 이해하기 위해선 먼저 브라우저 렌더링 과정을 알아야 한다. 브라우저 렌더링 과정 사용자가 웹 서비스에 접속하려면 브라우저가 사용자가 요청한 웹 페이지를 서버에 요청하여 서버에서 보내준 응답을 화면에 그려줘야한다. 상세한 과정은 다음과 같다. 브라우저가 사용자가 접속할 주소로 네트워크 요청을 보내고 이 요청은 도메인과 IP를 매핑 해놓은 서버인 DNS 서버에 들려진다. 브라우저가 요청을 하면 DNS 서버에서 DNS 조회, 인증 과정 이후에 접속할 주소에 해당하는 웹서버와 연결이 된다. 서버는 브라우저 렌더링에 필요한 리소스를 반환한..

JS API연동? 어렵지 않아! 나는 처음 API연동할 때 상당히 고생했다. 아마 서버와 데이터를 주고받는 과정을 제대로 이해하지 못하고 무작정 시도한 탓이 아니었을까.? 이 글이 작년의 나 같은 사람에게 도움이 되었으면 좋겠다. API가 뭐길래?? API는 두 소프트웨어가 서로 통신할 수 있도록 해주는 매커니즘이다. 학교 급식 조회 서비스 어플리케이션의 클라이언트에서 서버에 급식 정보를 요청하면 서버가 급식 정보를 응답해 준다. 이게 API를 이용한 통신이다. 요청과 응답을 사용하여 두 소프트웨어가 서로 통신할 수 있다. 일반적으로 API는 클라이언트와 서버 측면에서 사용된다. 요청을 보내는 소프트웨어를 클라이언트라고 하고, 요청에 따라 응답하는 소프트웨어를 서버라고 한다. REST API는 뭐야?? ..

역변하는 메기 Ageneiosus inermis (Ageneiosus marmoratus) Chapter 1 이너미스의 특성과 생태 Chapter 2 이너미스의 생식 Chapter 3 이너미스 사육 환경 조성 Chapter 4 이너미스의 먹이 급여 Chapter 01 이너미스의 특성과 생태 Ageneiosus inermis 의 구분 Actinopteri -> Siluriformes -> Auchenipteridae -> Auchenipterinae 이너미스의 특징 Ageneiosus는 수염이 없다는 뜻입니다. 사실 이 속의 메기는 인간의 눈으로 구별할 수 없는 짧은 수염을 가지고 있습니다. 이너미스는 최대 60cm 정도로 성장합니다. 이너미스는 야행성으로 알려졌고 작은 물고기와 갑각류를 먹습니다. 고기의..