profile
프론트엔드 개발자입니다 :)

Front-End 이미지 최적화 방법 3가지

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

어제
·
0개의 댓글
·
post-thumbnail

Typescript 활용팁 정리

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

2022년 7월 28일
·
0개의 댓글
·

React Native 토큰 만료 시 로그아웃 처리하기

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

2022년 7월 21일
·
0개의 댓글
·
post-thumbnail

React Query enabled 속성에 대해

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

2022년 5월 28일
·
0개의 댓글
·
post-thumbnail

React Native Flipper Debugger 설정

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

2022년 3월 28일
·
2개의 댓글
·

React Native 에러 로그 (Deprecated Gradle features)

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

2022년 3월 23일
·
0개의 댓글
·
post-thumbnail

(2021.12.13) MAC OS Flutter 설치 및 시작 Guide

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

2021년 12월 13일
·
0개의 댓글
·

Javascript의 this & Execution Context

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

2021년 7월 15일
·
0개의 댓글
·

브라우저 인증 기술(JWT, Session)

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

2021년 7월 15일
·
0개의 댓글
·

자바스크립트의 동작 원리

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

2021년 7월 14일
·
0개의 댓글
·
post-thumbnail

React 작동 원리

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

2021년 7월 12일
·
0개의 댓글
·

Modal 컴포넌트 밖 또는 X버튼 눌렀을 때 닫기

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

2021년 6월 27일
·
0개의 댓글
·
post-thumbnail

4주 Final Project 회고록

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

2021년 6월 8일
·
0개의 댓글
·

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

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

2021년 6월 4일
·
0개의 댓글
·
post-thumbnail

2주 Team Project 회고

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

2021년 5월 9일
·
0개의 댓글
·
post-thumbnail

삽질일기 01

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

2021년 4월 25일
·
0개의 댓글
·

TIL_040_210420

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

2021년 4월 21일
·
0개의 댓글
·
post-thumbnail

TIL_039_210417

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

2021년 4월 17일
·
0개의 댓글
·
post-thumbnail

TIL_038_210413

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

2021년 4월 12일
·
0개의 댓글
·
post-thumbnail

TIL_037_210409

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

2021년 4월 9일
·
0개의 댓글
·