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

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 ..

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

일반 function 사용 문법 // 1 function 함수이름(){ // 기능 } // 2 var 함수이름 = function(){ // 기능 } Arrow Function 사용 문법 var 함수이름 = () => { // 기능 } 왜 쓰는 걸까? = 이걸 알면 언제 쓰면 좋을지가 나온다. 1. 함수 본연의 기능을 아주 잘 표현해주는 문법 우선 function은 언제 주로 사용하는가..에 대해 생각해보면 1) 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때. (이후 재사용도 고려..) 2) 입출력기능을 만들 때 var 두배만들기 = (x) => {return x * 2 } console.log( 두배만들기(4) ); console.log( 두배만들기(8) ); 이런 식으로 사용하면 직관적으로 보..

예를 들어.. 아래와 같은 코드를 작성했다고 해보자. module.exports = React.createClass({ render: function(){ var taskNodes = this.props.todoTasks.map(function(todo){ return ( {todo.task} Submit ); }, this); return ( {taskNodes} ); } }); onclick event 로 map 함수에 표시된 어떤 것들을 삭제하는 기능을 하는 function 을 구현한다. 이때 delete 기능은 버튼 클릭 시에만 발생하여야 한다. 근데 해당 function 안에서 console을 찍어보면 화면이 렌더링 될 때 function 안의 console 이 찍히는 것을 볼 수 있을 것이다...

copy and paste excel ... 임시 데이터를 넣어주는 data.js 아래와 같이 구성 // data.js export const employees = [{ 'ID': 1, 'FirstName': 'John', 'LastName': 'Heart', 'Prefix': 'Mr.', 'Position': 'CEO', 'BirthDate': '1964/03/16', 'HireDate': '1995/01/15', 'Notes': 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf..

React-Query 란? 리액트 애플리케이션에서 서버의 데이터를 조회하거나 캐싱, 업데이트, 에러 처리와 같은 비동기 로직을 지원하는 data fetching 라이브러리. Server-side 와 Client-side 사이에서 비동기 로직을 보다 쉽게 다루게 해주며 Server State를 관리해준다. React Query 내에서의 Server State 정의 Client가 제어하거나 소유하지 않는 위치에서 원격으로 유지됨. fetching 및 updating을 위한 비동기 API를 필요로 함. 상태가 공유되며 사용자 모르게 변결될 수 있음. 주의하지 않으면 애플리케이션이 잠재적으로 "out of date" 상태가 될 수 있음. React Query의 특징 (Server State 제외) Caching..

TypeScript 쓰는 이유 1. Javascript는 Dynamic Typing 이 가능하다. : 코드를 길게 짤 때는 자유도와 유연성이 독이 된다. // Javascript 5 - '3' // 연산 가능 // 원래는 숫자-숫자만 가능하지만 JS가 알아서 '3'을 숫자로 바꿔준다. // 프로젝트 규모가 커지면 단점. 관리하기 힘듬. ts 는 type 을 엄격하게 검사해준다. // Typescript 5 - '3' // TS Error : 문자랑 숫자를 빼는게 이상하다. 수정 요망. 2. TypeScript 는 에러메세지를 자세하게 뿌려준다. TypeScript 는 Javascript 와 문법이 거의 동일하기 때문에 코드 에디터 부가 기능 역할로 봐도 충분하다. Typescript 필수 문법 1. 간단..