상용 서비스를 하고있는데 과도한 이미지들이 있었습니다. 서비스 같은 경우 홈이 가장 중요하다는 생각이 있었는데 홈 불러오는 속도 자체가 느려 유저 유입이 줄어들 수 있으다는 생각으로 이미지 최적화를 하였고 그 후 파격적인 속도 개선 + 데이터 사용량이 줄었습니다. 14

Project https://github.com/tmdckszm/24-2nd-FX-frontend Project overview 첫 프로젝트가 끝난 후 하루 이틀 정도 재정비 시간을 가지고 두 번째 프로젝트를 시작하게 되었다. 이번 사이트는 저번 블로그 글에서 소개

useRef우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다.리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있

Optional chaining사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다.?.이 추가되기 전엔 이런 문제들을 해결하기 위해

styled component본질적으로, Styled-component 는 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으면 javascript 코드 내에서 일반 css로 구성 요소의 스타일을 지정할 수 있다.설치 npm install --save style

index.js 혹은 App.js등 각 파일에서 다른 파일들을 import할때 기본적으로 상대경로로 잡혀있는 것을 볼 수 있다. 나중에 프로젝트 규모가 커지고 복잡해지면 상대경로에 의한 관리시 다른 파일들을 import할 때 굉장히 번거로워지기 때문에 절대경로로 세팅을

세계적으로 엄청난 양의 동영상 콘텐츠가 손비되고 있다. 대부분 동영상 서비스는 HTML5 기반으로 서비스 되고 있다. 네트워크 환경에 따른 최적의 동영상 품질을 스트리밍해 버퍼링 없는 서비스를 제공하기 위해 여러 방법들이 있는데 그중 하나가 HTTP Streaming

AWS는 Amazon Web Service의 줄임말 입니다. AWS는 소위 클라우드 서비스라고도 합니다. 클라우드 서비스는 서버 등의 인프라스트럭쳐를 필요한대로 on demand로 사용할 수 있는 서비스 입니다. 즉, 유저가 직접 서버를 구입하고 설치할 필요 없이 AW

컴포넌트가 불필요하게 리렌더링 된다면 앱의 성능을 떨어뜨리는 주 원인이 될 것이다. 따라서 컴포넌트의 리렌더링을 방지해주는 것이 필요한데, 그것이 바로 React.memo 함수이다. React.meomo 함수는 컴포넌트 props가 바뀌지 않았다면 리렌더링을 방지해준다

(사이트 클론 gif) Project Overview 내 인생에 첫 web프로젝트를 시작하게 되었다. 사이트는 마켓컬리였는데 이 사이트를 이용하지 않는 나에게는 생소한 부분이 많았지만 사이트를 하나하나 보면서 식품을 판매하는 커머스 사이트라는 것을 알았다. 마켓컬리

state 값을 바꿔줄때 push 와 concat의 차이를 알아보자push 기존 배열에 값을 추가하여 원본을 바꾼다. 위의 코드를 확인해 보면 arr 배열의 push(3)를 하고 arr 결과를 확인해보면 arr 자체가 변경된 걸 확인할 수 있다.concat은 기존 배열

API & fetch에 대해 알아보자.React 애플리 케이션에서 API를 사용하는 방법은 Axios 와 Fetch API 가 있다. API는 React 애플리케이션에 사용되는 데이터를 의미한다. 클라이언트 측에서 수행 할 수 없는 특정 작업이 있으므로 이러한 작업은

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다. 밑에 코드를 보며 설명을 하겠습니다.true 는 자바스크립트 값이기 때문에 중괄호로 감싸주었습니다. 그리고, Hello 컴포넌트에서는 isSpecial이 true 이냐 false 이냐에

ES6에서 배열과 object를 조금 더 쉽게 다루는 방식이 추가됐다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별

key의 중요성 & 의미리액트를 사용할때 key 값을 사용할 때 index를 사용하면 위험하다고는 알지만 어떠한 이유때문에 위험하고 key값이 왜 필요한지는 정확히 모르고있다. 그러한 의미에서 포스팅을 써보려고 한다. 이렇게 코드를 작성하면 콘솔창에는 unique "k

git 처음사용하면 어렵지만 알고보면 쉬운 git 가이드 ! 자신의 github에 파일 repository 생성 맥북의 경우 터미널을 처음 실행하면 가장 상위 폴더로 열린다. 자신이 만들고 싶은 경로로 이동하여 파일을 만들어 준다. mkdir로 파일을 생성후 cd로 생

Lifecycle에 대해 이해해보자 ! render, componentDidMount, componentDidUpdate, componentWillUnmount등의 함수는 class에서 제공하는 메서드이다. 컴포넌트를 만들때 class로 생성하면 위의 메서드를 이용할

state란 컴포넌트의 상태 값이다. state와 props는 둘 다 화면에 보여줄 정보를 가지고 있다는 점에서 서로 비슷한 역활을 한다. props는 컴포넌트는 사용하는 부모쪽에서 전달해야만 사용할 수 있고, state는 컴포넌트 내에서 정의하고 사용한다. click

React 시작해보려고 한다! 리액트란 무엇일까? React는 사용자 인터 페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리 입니다. "컴포넌트"라고 불리는 코드의 파편을 이용하여 복잡한 UI를 구성한다. 이것을 보고 마치 레고 블럭이라고

일주일간 인스타그램 메이펜이지 그리고 로그인 페이지를 만들어 보았다. 기업에 남는 코드들이 있어 리뷰해 보겠다. 인스타그램 메인 페이지를 HTML,CSS 클론코딩을 진행하였고 그 외 요소에는 자바스크립트로 구현하였다. HTML코드와 CSS 코드는 생략 하겠다. 만약 보