당연한 개발자가 되자

PWA 란 PC 는 바탕화면에, 모바일은 앱을 설치한 것과 같이 메뉴에 웹사이트 바로가기 아이콘이 생성되서 웹사이트를 앱처럼 설치해서 사용할 수 있도록 해주는 기술입니다. 장점 설치 마케팅 비용이 적습니다. 아날로그 유저들( 나이가 많으신 분들 ) 이 url 로 접속하고 이용하려면 어려울 수 있는데 PWA 를 이용해서 그 점을 해소해줄 수 있습니다. html, css, js 만으로 앱까지 대응할 수 있습니다. 푸시알림, 센서 등도 웹브라우저로 처리할 수 있어서 일반 앱에 비해서 기능적 하자가 적습니다. 단점 설치과정이 조금 이질적입니다. ( 앱스토어에 방문하지 않고 설치하기 때문 ) HTTPS 사이트여야만 합니다. PWA 사용법 먼저 PWA 가 세팅된 react 프로젝트를 생성해야합니다. create-r..

이번에 사용해 볼 기능들은 리액트가 업데이트되고나서 나온 신기능들 입니다. batch 기능 업데이트 사항 원래 batch 기능이란 state 변경 함수가 여러개 모여있을 경우에 state 변경함수마다 재랜더링이 되는게 아니라 맨 마지막 state 변경함수가 실행되고나서 한번만 재랜더링되는 기능을 말합니다. 이 batch 기능이 리액트 18버전 전까지는 ajax, setTimeout 같이 조금 늦게 동작하는 기능들의 내부라면 batch 기능이 작동을 안해서 모든 state 변경함수가 실행될 때마다 재랜더링 되었던게 18버전부터는 state 변경함수가 어디에 있던간에 상관없이 batch 기능이 잘 작동되도록 수정되었습니다. 즉, 이제는 어디에 state 변경함수가 있어도 맨 마지막 state 변경함수가 실행..

memo 를 사용한 자식 컴포넌트 재랜더링 막기 먼저 실험을 위해 자식 컴포넌트와 재랜더링 시키기 위한 state 를 만들어주고, 버튼도 하나 만들어줍니다. Cart.js 이렇게 만들면 실험용버튼 이라는 버튼을 누르면 Cart 라는 컴포넌트가 재랜더링이 될겁니다. 근데 이렇게 부모 컴포넌트가 재랜더링되면 모든 자식 컴포넌트도 같이 재랜더링 됩니다. 그런데 이렇게 모든 자식 컴포넌트가 같이 재랜더링되면 성능저하를 일으킬 수 있습니다. 이런 성능 저하를 막기위해서는 아래와 같이 코드를 작성해줘서 자식 컴포넌트가 재랜더링 되지 않도록 해주면 됩니다. ( 정확히는 자식 컴포넌트를 꼭 필요할 때만 재랜더링 시켜줘라 라는 의미입니다. ) 아래의 코드와 같이 컴포넌트를 생성할 때 memo 함수안에 생성해주시면 됩니다..

개발자 도구 React Developer Tools react 로 짠 코드인데 html 코드를 보면서 디버깅하는 것이 불편할 수 있는데 React Developer Tools 을 사용하면 Component 로 볼 수 있어서 디버깅을 편리하게 할 수 있습니다. 크롬 웹 스토어에 들어가서 React Developer Tools 를 설치합니다. 설치하고 나면 개발자 도구에 Componet 라고 보일겁니다. 이 기능을 사용하면 해당 컴포넌트의 구조, props, state, hooks 등 여러가지 정보를 한눈에 볼 수 있어서 편리합니다. 또 하나의 기능으로 profiler 라고 있습니다. 이 기능은 성능이 저하되는 컴포넌트를 찾을 때 사용합니다. 왼쪽 상단에 녹화 버튼을 누르고 이 페이지 저 페이지 막 이동을 ..

localStorage 란? DB, 서버 없이 브라우저에 데이터를 반영구적으로 저장할 수 있는 기능입니다. localStorage 의 특징 key: value 형태로 저장할 수 있습니다. ( 이미 존재하는 key 값과 중복되는 key 값으로 데이터를 저장하면 덮어쓰기 됩니다. ) 문자 데이터만 저장할 수 있습니다.( 최대 5MB 까지 저장이 가능합니다. ) 사이트 재접속을해도 남아있습니다. ( 유저가 브라우저를 청소하기 전까지 남아있습니다. ) 지원하는 데이터 타입은 문자열, 숫자, 불린, null, undefined 이고, 모두 문자열 형식으로 저장됩니다. ( JSON 데이터도 저장이 가능합니다. ) 만약에 array, object 자료를 저장하고 싶다면 편법을 사용하면 됩니다. array 나 obje..

리액트의 단점은 component 끼리 state 전송이 어렵다는 점입니다. 만약에 손자 component 에 최상위 부모가 가진 state 를 props 로 전송하려면 다이렉트로 전송은 안되고 그 사이에 자식들을 전부 거쳐야 전송할 수 있습니다. 그래서 만약에 component 가 10중첩 같이 뎁스가 많이 깊어지면 props 전송을 9번이나 해야하는 문제점이 있습니다.(props drilling 이슈) props 의 단점 해결방법 Context API ( 리액트 기본문법 ) Context API 를 사용하면 props 전송없이 state 를 공유할 수 있습니다. 그러나 두가지 단점 때문에 실무에서는 많이 사용하지는 않습니다. 첫번째 단점은 성능이슈가 있습니다. state 변경시에 쓸데없는 것까지 재랜..

전환애니메이션 만드는 법 애니메이션 동작 전 css 를 만들어서 className 을 붙여줍니다. 애니메이션 동작 후 css 를 만들어서 className 을 붙여줍니다. 둘 중 하나의 className 에 transition 속성을 추가해줍니다. 원할 때 두번째( 동작 후 css ) className 을 붙여주면 됩니다. 애니메이션 사용하는법 위에서 만든 애니메이션을 사용하려면 className end 를 태그에 붙였다가 땠다가 해야합니다. 그러기 위해서는 아래처럼 코드를 작성하면 변경이 되는 것이 맞지만 리액트 18 버전부터 추가된 automatic batching 기능 때문에 근처에 있는 state 변경 함수들이 실행될 때마다 재랜더링 해주는 것이 아니라 state 들이 전부 다 변경되고나서 마지막..

tab UI 란 tab UI 쇼핑몰에 보면 상품 사진 아래쪽에 상세정보, 리뷰, q&a, 반품/교환 정보 등 화면의 일부만 바꾸어서 여러가지 정보를 보여줄 때 사용합니다. 구현 먼저 부트스트랩을 이용해서 버튼의 html, css 를 먼저 완성합니다. 그 다음에 tab 의 상태를 저장할 state 를 만들어줍니다. 그리고나서 JSX 부분에는 if 문 같은걸 사용할 수 없으므로 component 를 하나 만들어서 아래와 같이 구현해 줍니다. 여기서 또 다른 방법으로 배열안에 html 을 전부 넣어두고 배열에서 자료를 꺼내는 문법을 사용해서 처리하는 것도 가능합니다.( 배열에서 자료꺼내는 문법: 배열[] ) 마지막으로 버튼을 눌렀을 때 state 를 바꿔줘서 누를 때마다 해당하는 화면을 보여주도록 구현합니다.

ajax 란 비동기 방식으로 서버에 데이터를 요청할 때 사용합니다. 서버에 어떤 방법으로 어떤 데이터를 요청할지를 적어서 요청하는 방식입니다. 요청하는 방식에는 GET 방식과 POST 방식이 있고, 어떤 데이터를 요청할지는 url 을 이용해서 작성해줍니다. ajax 사용법 XMLHttpRequest ( 옛날 방식 ) fetch() ( 요즘 방식 ) fetch 를 사용하면 아래와 같이 가져온 json 데이터를 변환해주는 과정이 필요합니다. fetch 는 기본 설정이 get 방식이기 때문에 post 방식으로 사용하고 싶으면 아래와 같이 설정이 필요합니다. axios ( 외부라이브러리 ) ( 많이 사용 ) 먼저 터미널에 아래의 명령어를 입력해서 axios 를 설치해줍니다. npm install axios 상단..

스크립트에서 console.log 를 찍으면 가끔 두번씩 찍히는 경우가 있는데 이것은 디버깅을 위해서 이렇게 설정되어 있는 것입니다. 실제 사이트로 배포할 때는 한번만 동작하도록 될 것입니다. 그래도 한번만 동작하게 만들고 싶다면 index.js 파일로 가서 ‘’ 태그를 없애면 됩니다.