본문 바로가기

Front-End25

[React Native] CodePush 설정 및 유의사항 CodePush란?CodePush는 React Native를 통해 개발한 모바일 앱을 추가적인 심사 과정 없이 기존 버전에서 사용자의 디바이스에 직접 업데이트할 수 있도록 하는 잠수함 패치 App Center 클라우드 서비스이다. 무려 마이크로 소프트에서 지원하는 서비스로, 단순 CodePush 서비스만 사용한다면 무료다.  모바일 앱 개발이 익숙지 않은 사람이라면 CodePush의 편의성이 크게 와닿지 않을 수 있으니 예를 들어보겠다.  잠시 식당을 운영하는 자영업자가 되어보자. 자영업자는 메뉴를 선정해 재료를 조달받고 음식을 만들어 손님들에게 판매한다. 하지만 계절, 경제적 상황, 새로운 시도 등 다양한 요인에 의해 메뉴를 바꿀 때도 있다. 최근 신메뉴를 개발해 손님들에게 호평받고 있는데, 오늘 조달.. 2023. 9. 24.
MongoDB 데이터베이스 globalThis 타입 지정 최근 TypeScript를 기반으로 한 Next.js를 공부하고 있는데, 기본적인 부분에서 겪었던 의외의 어려움이 있어 간략하게 포스팅을 작성하려고 한다. Next.js 개발 시 파일을 저장할 때마다 JS 파일들이 재실행되기 때문에 MongoClient.connect() 코드가 동시에 여러 번 실행될 수 있고, 이로 인해 DB입출력이 매우 느려지는 것을 방지하기 위해 다음과 같은 코드를 구성했다. import { MongoClient } from "mongodb"; const DB_URI = process.env.DB_CONN_STRING || ""; let connectToDB; if (process.env.NODE_ENV === "development") { if (!global._mongo) { g.. 2023. 8. 3.
React(SPA)에서 Next.js(SSR)를 써야하는 이유 원티드에서 주관하는 7월 프리온보딩 프론트엔드 챌린지에 참가하게 되었다. 참가하기에 앞서 직접 해보길 권장하는 사전 과제가 있었다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. 과제를 진행하면서 유익한 공부가 되었기에 해당 과제와 관련된 지식들을 정리하고, 이후에도 참.. 2023. 7. 21.
최적화(Optimization)와 Lighthouse 최적화(Optimization)란? 우리는 어떠한 일을 할 때 "효율적"으로 하길 원한다. 같은 노력을 들여도 덜 힘들고 더 좋은 결과를 얻길 바라는 모습은 어찌보면 당연한 것이 아닐까 싶다. 이러한 특징이 유독 눈에 띄는 것이 한국인이지만, 세계 어디에서도 효율적인 일처리 방식을 싫어하는 사람은 없다고 생각한다. 최적화(Optimization)란, 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 의미할 수 있고, 수학과 관련되서는 특정의 집합 위에서 정의된 실수값, 함수, 정수에 대해 그 값이 최대나 최소가 되는 상태를 해석하는 방법이 될 수 있다. 이렇듯 "최적화"라는 개념은 다양한 분야와 때에 따라 다르게 .. 2022. 12. 5.
[Web] 웹 표준과 접근성 매일 인터넷을 통해 웹 페이지들을 방문하고, 사용하다보면 문득 드는 의문점이 있다. 사람마다 쓰는 기기도 다르고 브라우저도 다른데, 어떻게 모든 웹 사이트가 똑같이 보여질 수 있는걸까? 이는 대부분의 웹 페이지들이 "웹 표준"이라는 것을 잘 지키고 있기 때문이다. 그렇다면 웹 표준이란 정확히 무엇을 말하는걸까? 인터넷과 웹 표준 다음 문구를 살펴보자. 웹이란 인터넷을 포함하는 개념이다. 틀린 말이다. 인터넷은 컴퓨터로 연결하여 TCP/IP라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크이다. 반면 웹은 월드 와이드 웹(World Wide Web, WWW)의 약자로 인터넷을 통해 사람들이 문서, 이미지, 영상 등 다양한 정보를 공유할 수 있는 전 세계적인 정보 공간이다. 따라서 위 문구는 아래와.. 2022. 11. 20.
[HTTP/네트워크] REST API 앞선 포스팅을 통해 우리는 웹 브라우저의 작동 원리와 HTTP 프로토콜에 대해 배웠다. 여기서 한 가지 의문이 든다. 웹 페이지 구성 시 필요한 리소스를 가져올 수 있는 더 간단한 방법이 없을까? 이에 대한 해답으로 API가 있다. API와 REST API API (Application Programming Interface)란 "응용 프로그램 프로그래밍 인터페이스"로, 클라이언트에게 리소스를 잘 활용할 수 있도록 서버에서 제공하는 인터페이스다. 좀 더 은유적으로 표현하자면 고객(사용자)이 식당(서버)에서 음식(리소스)을 주문하기 위해 필요한 메뉴판과 같다. 하지만 만약 메뉴판이 위와 같다면 어떨까? 사용자가 메뉴판을 읽을 수 없으니 주문을 할 수 없을 것이다. 물론 인내심이 많은 고객은 위 메뉴판을 천.. 2022. 11. 5.