c# 개발을 해본 사람들은 방대해지는 코드를 깔끔하게 정리해서 보기 위해 Region 이라는 기능을 쓴다.리액트에서도 코드가 길어지니 문단별 접기 말고 내가 지정한 Region 만큼만 접고 펴고를 하고 싶은데..React 에서는 어떤 식으로 진행해야 할까? 개발 환경(intelliJ, vsCode) 에 따른 사용 방법에 대해 알아보도록 하겠다. 우선..#region 이란?내가 코드를 접고 펴고 싶은 부분의 영역을 지정해주는 것!#region 을 사용하게 되면 #endregion 으로 지시문을 종료 해야하며, visual studio 에서 #region에서 바로 다음으로 나오는 #endregion까지의 코드를 확대, 축소하며 작업을 진행할 수 있게 해준다. 1. intelliJ에서 사용하는 방법  //re..

React 19 Beta – ReactThe library for web and native user interfacesreact.dev 일부 해석 발췌 React 19의 새로운 기능Action리액트 앱의 일반적인 사용 사례는 데이터 변화를 수행한 다음 응답으로 상태를 업데이트하는 것입니다. 예를 들어, 사용자가 이름을 변경하기 위해 양식을 제출하면 API 요청을 한 다음 응답을 처리합니다. 과거에는 보류 상태, 오류, 낙관적 업데이트 및 순차적 요청을 수동으로 처리해야 했습니다. 예를 들어 usestate에서 보류 및 오류 상태를 처리할 수 있습니다.// Before Actionsfunction UpdateName({}) { const [name, setName] = useState(""); con..

예를 들어보자. 어떤 값을 입력할 때 해당 단어가 포함된 단어를 제공하는 기능을 구현하는 상황. = 검색엔진 검색어 추천 결과 같은 기능. 이럴 때 글자가 변할 때마다, 어떤 function 이나 API를 호출하여야 하는데.. 너무 잦은 함수 호출이 일어난다. 물론 프론트엔드와 백엔드에서 성능 최적화가 되어 있으면 문제가 덜 일어날 수도 있으나.. 그래도 만일의 문제를 제거해주는 것이 중요할 것이다. 이때 보통 디바운스 Debounce 와 쓰로틀링 Throttling 의 개념을 적용하게 되는데 이 두가지의 공통점과 차이점에 대해 적어보고자 한다. 공통점 디바운스와 쓰로틀링의 공통점은.. 1. 함수가 너무 많이 호출되지 않도록 제어하는 테크닉의 종류이며, 2. 성능 최적화와 리소스 관리에 많이 사용되는 개..

개발하다보면 분기 처리를 하는게 필수적이어진다. 이때 switch를 사용하는 게 나은지 else if 의 사용이 나은지 고민이 될 때가 있다. 보통 코드 정리는 switch가 한 눈에 보기 쉬운 편이고, 개인적으로 사용하기에는 if~else 문이 처리하기가 쉬운 것 같다. 그래도 코드 가시성 및 개발자 편의성을 고려하지 않을 수는 없지만... 제일 중요한 건 프로그램 성능이라... 두 가지의 로직적인 차이를 정리해보고자 한다. switch문 변수를 미리 입력 받아 두고, 미리 정해놓은 값들과 일치 여부를 판단하여 control flow를 처리 if~else문 boolean으로 결과 값이 나오는 조건문의 결과에 따라 true, false 두가지 control flow를 가진다. 그러므로 . . . if~e..

리액트에서 number 형태의 숫자를 회계 단위 형태로 나타내고 싶었다. ex) 1000 일 경우 1,000 로 나타내고 555666777 일 경우 555,666,777 나타냄. case 를 두가지로 구별하여 개발해보았다. input 값이 "1000" 일수도 있고 1000 일수도 있으니.. CASE1. 숫자 타입의 데이터를 가공하는 경우 Number.prototype.format = function () { if (this == 0) return 0; var reg = /(^[+-]?\d+)(\d{3})/; var n = this + ""; while (reg.test(n)) n = n.replace(reg, "$1" + "," + "$2"); return n; }; // test var num = 12..

React 프로젝트를 개발하다보면, 배포 환경?에 따라 다르게 환경 변수를 셋팅해야하는 case가 발생한다. 예를 들면, 보통 API 주소를 환경 변수로 많이 셋팅해두고는 하는데.. 운영 API 주소와 개발 API 주소를 배포 환경에 따라 다르게 셋팅해두고 싶은 case가 딱 이에 해당한다. React :: 환경변수(.env) 셋팅하기 토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다. 이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다. bornatnoon.tistory.com 우선 기초 셋팅 방법을 첨부해본다. (.env 파일을 하나만 쓰는 케이스) 케이스에 따른 .env 설정 방법 ※ 참고. 리액트 프로젝트 생..

토큰이나 API 키 같은 것은 하드코딩으로 집어 넣으면 배포 시 개발자 도구에 모두 드러나기 때문에 최대한 숨겨서 코딩을 진행해야 한다. 이때 사용할 수 있는 방법 중 하나가 "환경변수" 이다. 그럼에도.. CRA 공식 문서에서는 다음과 같은 주의 사항을 전달한다. WARNING : Do not store any secrets (such as private API keys) in your React App 비공개 API 키 같은 값을 저장하는 것을 지양하는 이유는 환경 변수가 '빌드'에 내장되어 누구든지 이를 확인할 수 있기 때문. 1. .env 파일 생성 최상단 루트에 .env 파일을 생성해주도록 하자. .env 파일은 꼭 프로젝트 파일 최상단에 있어야 함. 2. .gitignore 설정 .env .e..

응용 프로그램에서 하던 "메뉴관리"의 개념을 웹에도 도입하는 것이 목적이었음. 사용자(관리자)는 프로그램 내에서 메뉴와 관련된 데이터를 DB에 insert 할 수 있고, 이렇게 만들어진 Data 로 라우팅에도 적용되고, 메뉴바에도 적용되는.. 그런 형태가 최종이었음. React 생명주기 특성 상 어렵다는 답변을 받기만 하던 찰나.. 정 안되면 이 라우팅 시스템을 정리하거나 쉽게 만들어보자는 마음으로 시작하게 되었다. 첫 아이디어 는 react-router-dom v5 문법으로 구현한 아래의 모습 2023.11.03 - [FRONTEND/React] - React :: (Next.js 사용 없이) 해당 폴더의 파일을 동적 라우팅. 아무래도 가장 최신 버전을 써야한다는 생각도 있었고, 외주업체에서 만들어준 ..

매번 생성되는 파일을 App.js에 수작업으로 라우팅하기에는 쉬운 일이 아니다. 그래서.. 페이지로 라우팅되어야하는 파일을 임시의 ./pages 라는 폴더에 몰아 넣고 해당 폴더에 있는 파일을 전부 하겠다는 문법을 작성해보았다. 아마 동적 라우팅을 검색하면 같은 템플릿에 props 만 바뀌는 (상품 상세 이미지 ..) 형태가 다수 나와 원하는 정보를 얻기 힘들것이다. Next.js 를 사용하여 개발하게 되면 우리가 구현하고자 하는 기능을 더 손쉽게 구현할 수 있으나 순수 React (React-create-APP) 기반으로 App.js 를 동적으로 라우팅 하려면 아래와 같은 문법 조작이 필요하다. Code. 23.11 기준으로 위의 코드를 현재 프로젝트에 이식하려고 하면 에러 메세지가 발생할 것이다. E..

참고 글 원문 Making Sense of React Server Components This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the server. This is a significant paradigm shift, and it's caused a whole lot of confusion in the React communit www.joshwcomeau.com (이번 글의 경우 해당 글에 덧붙혀 설명이 부족하다고 느껴지는 것들은 다수 서칭하여 작성하여.. 참고 글이라고 하기에도 머쓱하다.)..

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure resource ''. This request has been blocked; the content must be served over HTTPS. Mixed Content 문제는 https 사이트에서 http 사이트로 요청을 보낼 시에 발생하는 보안 문제 중 하나. https 사이트에서 ajax를 사용하여 비동기로 http 사이트에 요청을 보내어 문제가 발생한 것인데.. 암호화된 https 기반의 사이트에서 암호화되지 않은 http 사이트로 요청을 보내니.. 문제가 발생한 것. 해결 방법 index.html 파일 head에 아래 문법을 추가한다.

JSX JavaScript XML 의 약자로 자바스크립트와 XML이 합쳐진 문법. XML 이란? - eXtensible Markup Language - HTML과 같은 마크업 언어이지만, HTML은 데이터를 "표현"라는 마크업 언어인 반면, XML은 데이터를 "기술"하는 언어 - 엄밀히 말하자면 XML은 마크업 언어라기 보다 마크업 언어를 정의하기 위한 언어 .JS 와 .JSX의 문법 차이 1. JSX는 class가 아닌 className을 사용. 2. JSX에서는 변수를 사용할 때, {}를 사용함. 3. JSX : HTML 안에 스타일을 지정할 때 style={{style}} 의 형태 4. JSX : 하나의 div 태그로 감싸야함. 나의 경우 .js로 파일을 선언하였었지만 문법은 jsx의 문법을 따라가..