sharingStorage

vite + yarn 환경에서 배포 전 모바일로 개발환경을 보고싶을 때의 방법을 기록해두려고 합니다. 많은 참고 링크가 있었지만 결국 너무 기초적인 부분을 해결을 안했어서 이 글이 누군가에게 도움이 되길 바라며,,, 0. 데스크탑과 모바일 같은 와이파이 연결 우선 기본적으로 모바일과 데스크탑이 같은 와이파이에 연결돼있어야 합니다. 제일 먼저 yarn dev로 로컬환경을 실행했을 때 이렇게 나오는데 이걸 무시하고 별짓을 다하고 돌아보니 --host 옵션을 사용해야 한다는 것이였습니다. 아마 이걸 놓치지 않았다면 아래에 과정들을 아무것도 안해도 됐을텐데 오히려 좋네요 1. yarn dev --host 명령어 사용 2. cmd 창을 켜서 ipconfig 명령어 사용 3. 모바일로 IPv4 주소 + :5173 ..

styled-components를 사용하다보면 너무 많은 컴포넌트가 생성하면서 아래와같이 classname으로 구분이 힘들어질 때가 생깁니다. 이때마다 안의 CSS 내용을 보고 파일을 찾아갔었는데 그래서 좋은 방법이 없을까 하고 찾아보다가 이에 해당하는 bable plugin이 존재한다는 것을 찾게 되었고 적용하는 방법을 기록해볼까 합니다. Create-react-app 환경 create-react-app에는 다음과 같이 import하면 끝 import styled from 'styled-components/macro'; 이번에 vite를 사용하며 초기세팅해본 결과 cra와는 다르게 vite.config에도 동시에 설정해야되는 것이 많음 (ex: tsconfig baseUrl ) 설정과정 vite-plu..

들어가며 현재 모던 프론트엔드에서 대부분의 리액트 코드는 서버와의 통신 상태에 따라 View를 나누어 보여주어야하기 때문에 아래와 같이 작성하는 경우가 빈번합니다. /** React */ return ( {isLoading && } {apiError && } {data && } ) 기본적으로 React 17에서의 Suspense는 Data Fetching을 위한 Pending Handler가 아니라, 기존의 워터폴 방식으로 이루어져있는 Render방식을 개선해주는 역할이기때문에, 위의 상황에서 활용하기에는 문제가 있으나, React-Query나 Recoil에서 React 18부터 정식 릴리즈되는 Suspense를 활용해 명령형이 아닌 선언형으로 서버와의 통신 상태에 따라 View를 나누어 보여줄 수 있게..

Package Manager 패키지 매니저란? 패키지를 관리하는 작업을 자동화, 안전처리 하기 위해 사용되는 도구 패키지 관리란 ? 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 관리, 갱신, 삭제하는 작업 패키지 매니저가 필요한 이유 ? 어떤 패키지가 동작하기 위해서 필수적으로 필요한 다른 패키지를 의존성(dependency)라고 하는데 이는 수동으로 관리하기 불가능하기 때문에 각각 패키지가 자신의 의존성 정보를 가지게 하여 패키지 매니저가 자동으로 설치해준다. 패키지는 코드의 배포를 위해서 사용되는 코드 묶음이며 일반적으로 라이브러리, 실행파일, 컴파일한 binary, 환경설정(configuration)정보, 의존성 정보 등을 포함한다. 자바스크립트 패키지 매니저 프론트엔드 개발자가 가장 흔히 ..

label 태그와 그 역할 태그사이에 위치한 text, checkbox, radio 등 클릭 가능 영역이 텍스트로 확장됩니다 label for 속성을 통해 다른 요소와 결합할 수 있으며, 이때 요소의 for속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. 이러한 요소는 브라우저에 의해 일반적인 텍스트로 렌더링 되지만 사용자가 마우스로 해당 텍스트를 클릭할 경우 과 연결된 요소를 곧 바로 선택할 수 있어서 사용자의 편의성을 높일 수 있습니다. 사용예시 label의 for 속성이 input의 id속성과 일치하므로 “분” 텍스트를 클릭해도 input에 focus가 맞춰지는 것을 볼 수 있습니다. 분/시 변환기 분: setMinute(e.target.value)} /> 사용예시 2 label 태그의..

팀 프로젝트를 진행하는 도중 매일 9시부터 10분씩 데일리 스크럼을 하는데 팀원 한분이 저에게 왜 proccess.env.PUBLIC_URL을 사용하냐고 여쭤보시더군요. 일반 public/asstes/ ,,, 으로 사용해도 되는데 말이죠 분명 저는 전자로 배우고 사용했었는데 막상 질문 받으니 한마디도 할 수 없었어요. 그래서 CRA(create-react-app)의 문서를 뒤져보고, stack overflow와 github의 create-react-app/issue 도 참고하여 이해한 것을 바탕으로 글을 적어봅니다. create-react-app은 CRA로 명칭해서 글을 작성하겠습니다. 1. public폴더와 src폴더 이 문제를 시작하기 앞서 CRA을 통해 만들어진 파일 구조와 쓰임을 확인해보겠습니다...

React API 연동하기 1번 과정에서 상태관리를 위해 사용했던 useState대신에 useReducer를 사용해보겠습니다. useReducer를 사용했을 때의 좋은 점 1. useState의 setState 함수를 여러번 사용하지 않아도 돼서 코드의 길이가 짧아진다. 2. reducer로 로직을 분리하면 재사용이 용이하다. 결과 User.js import React, { useEffect, useReducer } from 'react'; import axios from 'axios'; const reducer = (state, action) => { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: nul..

1.React에서 API를 사용해보기 1.1 API 연동의 기본 API연동을 위해서 우선 새 프로젝트를 만들어야 한다. npx create-react-app react-api-use API를 호출하기 위해서 axios 라는 라이브러리를 설치한다. cd react-api-use npm install yarn // yarn add axios axios를 사용하여 GET, PUT, POST, DELETE 등의 메서드로 API요청을 할 수 있다. API연동 실습에는 JSONPlaceholder 에 있는 연습용 API를 사용해볼 것이며 API는 https://jsonplaceholder.typicode.com/users 주소이다. 결과물 [ { "id": 1, "name": "Leanne Graham", "use..

모던 자바스크립트 완독 회고 책을 읽게된 계기 Angular로 프로젝트를 해보면서도, React 기초를 공부하면서도, Svelte 코드를 수정할 때도 가장 많이 느낀점은 자바스크립트 기초 지식에 대한 부족이였다. 생각해보면 내가 js를 공부하게된 것은 학교 수업 웹프로그래밍을 이수하고 나서부터인데 그땐 HTML과 CSS를 주로 다뤘고 JS도 jQuery를 다뤘던 기억이 있다. 그리고 생활코딩, 10강정도 되는 유튜브 기본강의, 인프런 타입스크립트 강의등을 들었던 것이 끝이다. Angular나 React를 공부할 때 모르는 부분은 대부분 자바스크립트에서 있는 기본 개념을 조금 발전시킨 것들이 많았는데 기초가 튼튼하지 않으니 시간도 많이 소모되고 뭔가 중간이 빈 느낌이 계속 들었다. 또 컴퓨터공학 전공생이라..

크롬, 사파리 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%지만 IE 11의 지원율은 약 11%다. 그리고 매년 새롭게 도입되는 ES6이상의 버전과 제안 단계에 있는 ES제안 사양은 브라우저에 따라 지원율이 제각각이다. 따라서 ES6+와 ES.NEXT의 최신 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요한다. 또한 대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다. ES6모듈은 대부분의 브라우저에서 사용가능하지만 다음과 같은 이유로 아직 별도의 모듈 로더를 사용하는 것이 일반적이다 IE를 포함한 구형 브라우저는 ESM을 지원하지 않는다. ESM을 사용..