토큰이나 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에 아래 문법을 추가한다.

SCSS 란? Sassy CSS 의 줄임말로 (문법적으로) 멋진 CSS 라는 뜻인듯.. 정확히는 CSS의 메타언어. (= CSS에 대해 기능을 확장한 언어) 코드의 재활용성을 올리고, 가독성을 올리는 등의 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념. 전처리기를 위한 도구가 필요함, 컴파일 시간 소요 등의 단점이 있지만 그 외의 장점이 명확한 편이어서 주로 사용됨. SASS 와 SCSS의 차이? SASS(Syntactically Awesome Style Sheets) 문법은 CSS와 형태가 달라 러닝 커브가 존재. (기존 CSS와는 달리 콜론이나 괄호 등이 생략된 부분이 많아 처음 접하면 익숙해지는 데에 시간이 소요됨. 기존 CSS 문법을 지원해주는 것도 아님.) SASS의..

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의 문법을 따라가..

Uncaught Error: Rendered more hooks than during the previous render 이전 렌더링에서 호출된 hooks보다 현재 렌더링에서 hooks가 더 많이 호출된 결과로 발생하는 에러 hooks는 매 렌더링마다 동일한 호출을 보장받아야만 함. - 이런 이유 때문에 hooks를 조건문 안에서 쓰는 것이 금지되어 있고, 컴포넌트 최상위에서 사용하라고 권장하는 것. hooks는 함수의 상태를 기반으로 동작된다. Hook의 규칙 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 원리와 관련된 이야기. 요약. 반복문이랑 html 안에서 state 를 만들면 안됨.

예를 들어 입력 폼에 있는 데이터를 저장해서 어떤 곳에 send 한다고 생각해보자. 물론 useref 를 사용하여 데이터를 저장하여 보내어도 된다. 만약 어떤 event 가 일어날 때마다 usestate 이전 값에 추가하여 어떤 이벤트가 일어나게 하고 싶다면... setUser((prev)=>([...prev, ...add1])) setUser((prev)=>([...prev, ...add2])) 이런 형식으로 구현해주면 된다. CASE 1) 특정 값 누적하여 계산하기 const [number, setNumber] = useState(0) function onClick() { setNumber(prev => prev + 1) // 상태값 변경 함수에 함수 전달 } CASE 2) 입력 폼에 있는 데이터 누..

소스코드를 zip 파일로 옮겨받을 때나, 혹은 git 으로 내려 받을 때에도 npm 모듈까지 포함하여 옮겨 받으면 업로드 하는데에도 시간이 많이 걸리고, 다운로드 내려 받을 때에도 시간이 많이 걸린다. 그래서 종종 해당 파일을 제외하고 소스 파일을 넘겨주는 경우가 발생하는데, 그때를 위한 방법을 작성해보도록 하겠다. 1. React 파일이 존재하는 디렉토리로 이동 터미널을 통해 지우고 싶은 node_modules 가 존재하는 디렉토리로 이동. 혹은 해당 폴더에서 마우스 우클릭하여 터미널 열어주기. 2. package-lock.json 삭제 rm -rf package-lock.json 3. node_modules 삭제 폴더 우클릭해서 지워도 되지만, 많은 패키지가 깔려있을수록 시간이 많이 지연된다. rm ..

빌드(Build) ? 컴파일(Compile)과 링크(Link)를 합쳐서 부르는 용어 - 컴파일(Compile) : 작성한 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업 - 링크: obj 파일들을 연결하여 하나의 exe 파일을 만드는 작업 소스코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정과 결과를 말함 빌드 관리 도구 소스코드에서 애플리케이션을 생성하면서 여러가지 외부 라이브러리를 사용하게 되는데, 빌드 관리도구는 사용자가 관리할 필요없이 필요한 라이브러리들을 자동으로 관리해주는 것 빌드 관리 도구가 동작하는 흐름 1. 소스코드(.java)를 컴파일하여 클래스 파일(.class) 생성 2. 코딩 규약에 맞게 작성했는지 확인 3. 코드를 정적으로 해석 4. test를 진..

모두 Java 의 jar 툴을 이용하여 생성된 압축(아카이브) 파일. 어플리케이션을 쉽게 배포하고 동작시킬 수 있도록 관력 파일(리소스, 속성 파일 등)들을 패키징해주는 것이 주 역할. 1. JAR (Java Archive) - Java 프로그램의 실행에 필요한 클래스 파일이나 설정 파일이 정리되어 있는 저장소 - Java로 작성한 어플리케이션을 배포할 때에 관련 파일을 1개에 패키징할 때 이용되고, 실제로는 많은 클래스 라이브러리는 이 형식으로 배포되고 있음. - 클래스 파일과 각 클래스들이 사용하는 관련 리소스 파일 및 메타 데이터를 압축한 파일 - 원하는 구조로 구성이 가능. - 플랫폼에 귀속되는 점을 제외하면 Win .zip 파일과 동일한 구조 - JRE(JAVA Runtime Environmen..