본문 바로가기

Frontend

 (18)
프론트엔드에서 상태란? 웹 프론트엔드에서 핵심적으로 논의되는 주제인 상태는 무엇이며 왜 관리해야하는 대상인지 그리고 관리하는 방법에는 어떤 것들이 있는지 알아봅니다. 프로그래밍에서 상태란? 프로그래밍에서 상태에 대해 이야기해보기 전에 저의 현재 상태에 대해 이야기해보겠습니다. 저는 현재 의자에 앉아서 책상에 올려져있는 뜨거운 커피를 마시고 있습니다. 현재 저의 상태는 앉아 있다는 것이고 커피의 상태는 뜨거운 상태입니다. 몇시간이 지났습니다. 저는 운동을 하러 나갔고 책상에 있던 커피는 식었습니다. 이제 제 상태는 운동 중인 상태이고 책상에 있던 커피는 차가워진 상태입니다. 이것이 현실 세계에서의 상태입니다. 현실 세계에서의 상태와 비슷하게 프로그래밍에서의 상태는 데이터로 표현합니다. 컴퓨터 프로그램에서 상태란 시간이 지남에 따..
Automatic batching for fewer renders in React 18 https://github.com/reactwg/react-18/discussions/21 React 18은 기본적으로 더 많은 일괄 처리를 수행하여 버전을 18로 올리는 것만으로 성능이 향상됩니다. 애플리케이션 및 라이브러리 코드에서 업데이트를 수동으로 일괄 처리할 필요가 없습니다. 이 게시물에서는 일괄 처리가 무엇인지, 이전에는 어떻게 작동했는지, 변경된 사항은 무엇인지 설명합니다. 이것은 대부분의 사용자가 생각할 필요가 없는 심층 기능입니다. 그러나 교육자 및 라이브러리 개발자와 관련이 있을 수 있습니다. What is batching? 일괄 처리는 React가 성능 향상을 위해 여러 상태 업데이트를 단일 리렌더링으로 그룹화하는 것입니다. Batching is when React groups mul..
Next.js 환경 변수 환경 변수 Loading Environment Variables Next.js는 .env.local에 저장한 환경변수를 process.env로 읽어 올 수 있다. # .env.local DB_HOST = localhost DB_USER = myuser DB_PASS = mypassword 환경변수는 빌드 타임에 평가된다. process.env는 표준 JavaScript 객체가 아니므로 비구조화할당을 통해 가져올 수 없다. 무조건 process.env.PUBLICK_KEY와 같은 방법을 사용해야한다. 흥미로운 방법은 Next는 $var을 통해 환경 변수를 재사용할 수 있다는 것이다. 예제는 아래와 같다. # .env HOSTNAME=localhost PORT=8080 HOST=http://$HOSTNAME..
PWA (점진적 웹 앱) PWA(Progressive Web App)은 어떤 기술이나 앱을 뜻하는 것이 아니라, 웹에서 사용할 수 있는 기술만을 사용하여 유연하고 적응 가능한, 보다 네이티브 앱과 같은 웹앱을 만든다는 개념으로 Google에서 처음 사용하였다. 비슷한 개념으로 반응형 웹 앱(Responsive Web App)이 있다. 반응형 웹 앱은 우리가 만든 웹 앱이 디바이스 화면의 크기에 맞게 화면의 레이아웃과 폰트 사이즈 등이 바뀌어 동작한다는 개념으로 웹 페이지에 대한 모바일 테블릿 디바이스의 사용자 경험을 증가시키는데 이점과 목적이 있다. PWA는 반응형 웹 앱을 베이스로 좀더 네이티브 앱과 같은 기능이 추가된다. 오프라인 상황 지원, 푸시알림, 위치 활성화 옵션 , 카메라 엑세스 및 홈 화면에 모바일 경험을 추가하는..
React Query와 상태관리 이 글은 우아한테크세미나를 듣고 내용 및 제 생각을 정리한 글입니다. State 상태란, 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음 즉, 문자열, 배열, 객체등의 형태로 응용 프로그램에 저장된 데이터 개발자 입장에서는 관리해야할 데이터들 UI/UX의 중요성과 함께 프로덕트 규모가 커지고 FE에서 수행하는 역할이 늘어났습니다. 모던 FE에서는 웹사이트가 정말 많은 상태를 가지고 있고, 상태는 시간에 따라서 변화하기 때문에 이를 관리해주는 Redux, Mobx같은 라이브러리가 등장합니다. (React에서는 단방향 바인딩이므로 Props Drilling 이슈도 존재) 그 중 가장 많이 사용하는 redux를 잠깐 들여다 보겠습니다. 흔히 리덕스에서는 store라는 전역 상태 저장 공간..
React Server Components Introducing Zero-Bundle-Size React Server Components (2020년 12월 21일에 작성된 글 입니다.) 이 글은 위 글및 동영상을 참고하여 번역 및 개인 생각을 적은 글 입니다. 소프트웨어 개발에 있어서 위 삼각형의 세가지 부분을 한번에 가져갈 수 없다고 합니다. 예를 들면 Good, Cheap을 선택하면 Fast하지 못하게되고 Fast, Good을 선택한다면 Cheap하게 개발 할 수 없음을 의미합니다. Dan은 React에서 위 세가지를 모두 가져가고 싶다고 합니다. Good user experience Cheap maintenance Fast performance 갑자기 Dan은 Spotify가 좋다고 합니다. 그리고 Spotify의 앱의 컴포넌트를 구성한다..
em vs rem CSS에서 em과 rem의 차이를 명확히 알아봅시다. em과 rem은 상대 단위입니다. 상대단위란, 말 그대로 상대적인 단위를 의미합니다. 고정되지 않고 기준에 따라서 바뀔 수 있는 길이를 나타내는 단위를 말합니다. 반대로, 절대 단위란 일상생활에서의 1cm와 같이 정해지면 절대 변하지 않는 단위를 말합니다. 상대단위: em, rem, %, vw, vh 절대단위: px(1px = 0.02645833cm) 픽셀(px)은 웹디자인이나 프론트엔드 개발을 하다보면 자주 사용하는 단위입니다. 하지만 px를 사용하는 것은 웹의 접근성(Accessibility)를 저해시킵니다. 브라우저마다 기본 font-size가 존재합니다.(보통 16px) 브라우저에는 사용자별로 기본 font-size를 지정하는 기능이 있고, 사..
HTTP와 HTTPS HTTP는 인터넷 상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜입니다. 클라이언트가 서버에게 요청을 보내면 서버는 응답을 보냄으로써, 데이터를 교환합니다. HTTP는 비연결성및 무상태성이라는 특징을 가집니다. HTTP는 요청에 대한 응답을 처리하게 되면 연결을 끊어 버립니다. 따라서 클라이언트에 대한 이전의 상태 정보 및 현재 통신의 상태가 남아있지 않습니다. 서버가 다수의 클라이언트와 연결을 계속 유지한다면, 이에따른 자원 낭비가 심해집니다. 비연결성및 무상태성의 특징을 가진다면 불필요한 자원낭비를 줄일 수 있다는 장점이 존재합니다. 그러나 서버는 클라이언트를 식별할 수 없다는 단점또한 존재합니다. 로그인을 하더라도 다음 요청에서는 해당 클라이언트를 기억하지 못해 또 로그인을 ..

티스토리툴바