react 4

TS + React + webpack 기반의 개발 환경 구성(feat. loader, HMR)

지난 webpack 핵심 컨셉 포스트에 이어서 프로젝트에 사용할 webpack 설정 파일을 작성한 과정에 대해 담아 보려 합니다. 목차는 다음과 같습니다. webpack 설정 babel-loader 적용 ts-loader 적용 react 설정 HMR 적용 위 키워드 외 eslint, prettier, jest 등 기타 설정에 대한 내용은 추가로 포스팅하겠습니다. React + TS 환경을 구성하는 각 과정을 패키지별로 나누어 설명하기에는 패키지 간 의존이 다소 깊습니다. 개연성이 다소 떨어질 수 있어요. 꼬리의 꼬리를 무는 구조이다 보니 전체 설정이 끝나기 전까지 설정에 대한 피드백을 받기 어렵습니다. 차근히 따라 해 보는 용도로 봐주시면 감사하겠습니다 (모든 설정이 끝나고 로컬에서 띄워지는 화면을 보면..

개발 환경 2023.07.25

react - key props(feat. 공식문서)

이번 포스팅에서는 react의 key props에 대해 탐구하는 시간을 가져보겠습니다. 1. Key란 ? React 구 공식문서에는 이렇게 나와 있습니다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. React 신 공식문서에는 이렇게 나와있구요. key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 합니다. 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해집니다. 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다..

Frontend/React 2023.06.14

react - public폴더 이미지 절대경로로 사용하는 법

하위요~ 요즘 혼자 만들고있는 쇼핑몰에 이것저것 개발한다고 뜸합디다. 어느정도만 만들어두고 또 새로운것을 배우고 싶은데... 하나 만들면 또 하나가 눈에 보이니... 멈출수가 읍쒀부러잉~~ 각설하고 쇼핑몰 프로젝트 진행중 여러 상품들의 Component를 수정하는 과정에서 이미지의 경로에 대한 문제가 생겼숨다. 자~ 오느룬 public폴더 이미지 절대경로로 사용하는 법을 알아보겠숨다. 기억하면 좋을 내용임과 동시에 구글에 검색해도 몇개 나오지 않는 주제라서 한번 써봅니다. 1. 무지성 import를 사용할 때 .ssul 평상시 저는 src 폴더에 img 폴더를 만들어서 모든 이미지 파일을 import로 때려박아서 사용했습니다. 이런 식으로여~ 그러다가~~~ 어느날 쇼핑몰 가다를 잡아가면서 "오늘은 상품 ..

Frontend/React 2021.08.07

react - favicon, 타이틀 변경

안녕하세유~! 쇼핑몰 가다 잡는다고 벌써 3주 잠수를 탔군요 오늘의 집을 보면서 클론코딩 하듯 웹페이지에 모양이나 기능을 구현해가고 있슴다. css에 대해서도 따로 카테고리를 만들어서 써봐야 겠어요. 꽤나 흥미로운 주제들이 많더군용 favicon 변경하기 ! 여튼 ! 본론으로 들어가서 오늘은 웹페이지 상단바 아이콘과 타이틀을 바꿔봅시다. 너무 초라하더라구요 상단바 싸악 바꿔봅시다. 1. 아이콘 구하기! https://www.favicon-generator.org 아묻따 위 링크로 들어갑니다. 이곳에 자신이 가진 이미지파일을 넣으면 .ico 이라는 확장자를 가진 아이콘 파일을 퉤 뱉어줍니다. 탸단~~~ 벌써 아이콘을 얻었습니다. 2. 올바른 경로에 넣어주기! 대체 favicon.ico의 경로가 어딘가~~ ..

Frontend/React 2021.08.01