이미지가 노출되는 웹페이지의 로딩 속도를 빠르게 해서 UX 향상 및 고객이탈률 감소를 위해 필요합니다. 웹페이지 로딩 속도 개선을 위해 웹컨텐츠 중 대표적으로 무거운 컨텐츠에 이미지, 비디오, 폰트가 있는데, 이 중 이미지 최적화는 프론트엔드에서 할 수 있는 웹 성능

타입스크립트를 사용하다보면 한번쯤 겪게 될 것 같은 이슈 4가지를 정리해 봅니다.자바스크립트에는 enum 타입의 코드 가독성 향상을 위해 아래와 같이 상수 열거형 타입인 enum 으로 객체를 만들어 사용하는 경우가 가끔 있다.하지만 타입스크립트에서는 enum 을 사용

React 나 React Native 프로젝트들을 경험하다보면 반복적인 코드를 줄이고 가독성을 높이는 API 코딩처리를 위해 axios.create로 만든 instance의 interceptors로 API 처리가 성공 했을 때 또는 실패 했을 때 API 요청한 컴포넌트

먼저 useQuery의 options 중 enabled에 대한 공식문서를 먼저 보는 것이 순서이다.boolean type을 넣어야 한다고 심플하게 쓰여 있다.사실 이렇게만 써있으면, 많은 주니어 개발자들은 혼동하기 쉽다. number 또는 string type의 변수가

왜 Flipper 인가? React로 웹 개발을 주로 하다가 React Native를 접하게 되면서 크롬 개발자 도구처럼 콘솔로그, Network, Local Storage, Redux 적어도 이렇게 4가지 정도는 확인할 수 있는 debugging Tool의 필요성을

npx react-native run-android 명령어로 앱 실행 시도 할 때 위와 같은 에러가 뜬다면, 아래 2가지 작업만 해주면 된다. 디렉터리 위치를 android 디렉터리 안으로 이동하여 ./gradlew clean 실행 에뮬레이터 또는 디바이스에서

MAC OS M1 Pro 로 Flutter 설치 과정을 공유합니다.공식문서에 다 나와있지만 조금 더 읽기 편하게 정리해 봤습니다.플러터 시작을 위해서는 IDE, XCode, Android Studio, 그리고 Flutter SDK 이렇게 총 4가지 소프트웨어의 설치 및

자바스크립트 코드가 실행되는 환경을 의미합니다.즉, script 태그를 만나면 콜스택에는 변수나 함수나 들어가기 전에 실행 컨텍스트가 가장 먼저 들어가서 코드를 실행할 수 있는 환경을 만들기 시작합니다.실행컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, v

‘인증’이란 어떤 정보가 어떤 자에게 유일하게 속한다는 사실을 확인하고 이를 증명하는 행위를 뜻합니다.기본적으로 웹 서버는 Stateless 프로토콜인 http를 이용하여 통신을 하기 때문에 별도의 기술을 도입하지 않으면 사용자는 로그인해서 서버에 요청을 할 때 마다

자바스크립트가 싱글스레드라 불리는 이유는 모든 변수나 함수의 실행구문은 하나의 콜스택에 차례대로 들어가서 순차적으로 하나씩 처리되기 때문입니다.하지만 브라우저나 Node.js와 같은 자바스크립트 런타임에는 자바스크립트의 엔진 안의 콜스택 뿐만 아니라 Web API, 콜

리액트는 SPA로 사용자와의 인터렉션이 일어났을 때 화면 깜빡임없이 변경 사항만 부드럽게 바뀌어 화면에 표시해주는 UI 프레임워크입니다.리액트가 변경사항만 바꿀 수 있게 하는 핵심 기술은 바로 Virtual DOM입니다.기본적으로 DOM에 변경 사항이 생기면 HTML

Modal 컴포넌트 밖에 해당하는 DarkBackGround 컴포넌트 클릭 시 닫히도록 onClick 이벤트 설정한다.Modal창에 해당하는 DialogBlock 에서는 부모 컴포넌트의 onClick 이벤트에 영향을 받지 않기 위해 onClick 이벤트로 e => e.

2주 프로젝트를 성공적으로 끝내고 4명의 멤버 그대로 팀 편성을 계획하면서 4주 프로젝트는 더 완성도 높고 재미있는 프로젝트를 할 수 있을 것으로 기대 했다. 아쉽게도 Back-End 담당인 팀원 한명이 다른 팀으로 가게 되면서 3명을 한팀으로 하게 되어서 개개인의 업

최대한 MySql을 삭제하지 않고 권한을 고치거나 하는 방향으로 시도해봤지만, 잘되지 않아 깔끔하게 MySql를 삭제하고 다시 설치했다.아래의 단계를 그대로 따라하면 간단하게 해결된다.현재 서비스 중인 mysql 서비스를 중지한다.$ brew services stop

4명을 한 팀으로 하는 2주 프로젝트를 처음 해보면서 정말 많은 것을 배우고 느꼈다.특히 개발에 온전히 집중해서 하나씩 일정대로 소화해 나가는 재미를 느꼈고, 프로젝트 결과 발표 전에 우리가 기획한 아이디어가 예쁘게 잘 동작하는 것을 보면서 보람차고 뿌듯함을 느꼈다.

https://programmingwithmosh.com/react/build-a-react-calendar-component-from-scratch/Class Component로 작성된 Calendar 코드를 React Hooks 형태로 리팩토링하는 중 이전

배포(Deployment)란? 개발한 서비스를 사용자가 이용 가능하게 하는 과정 AWS를 이용한 배포 1. 서버 배포 클라우드 가상서버인 EC2(Elastic Compute Cloud) 콘솔에서 인스턴스를 생성 인스턴스 생성 시 OS 선택 인스턴스 내에서 자동으로 만

클라이언트와 서버간의 연결 상태를 나타내는 개념적 용어어떤 정보가 어떤 자에게 유일하게 속한다는 것을 증명하는 행위서비스 제공자의 서비스를 이용하기 위한 조건을 만족시키는 행위회원가입을 해야 이용할 수 있는 웹사이트의 경우, 로그인 인증 절차를 거쳐야 서비스를 이용할

Model-View-Controller 의 약자로 각각의 역할에 맞게 프로젝트 구성 요소들을 구분하는 설계 방법론이라고 할 수 있다.Model : 애플리케이션에 필요한 모든 데이터를 관장하는 곳으로 스스로 데이터를 가지고 있거나 데이터베이스와 직접적인 상호작용하는 역할

단순히 React와 Redux만 가지고 In-memory 형식으로 데이터를 관리하면 새로고침하면 입력한 모든 데이터는 사라진다.Database가 있으면 영속성있게 데이터를 보관할 수 있다.File I/O 형식으로도 데이터를 보관할 수 있다. 하지만 데이터를 불러올 때