developia.soye.log

개요_ 리액트 프로젝트를 하면서 DB를 mysql로 선택. RDBMS 관계형 데이터 베이스 중 하나인 Mysql를 통해 데이터를 생성, 저장, 수정, 삭제 등을 해보고자 한다. 일단 Mysql을 설치해보자 본인은 M1칩이 내장된 맥북을 사용중이므로 homebrew를 통해 설치한다. 내 컴퓨터에 homebrew가 설치되어있는지 확인하려면? 터미널에 brew - v 를 입력해 버전정보를 확인해보자. 1) homebrew 설치확인 2) mysql 설치 brew install mysql 3) mysql 시작 mysql.server start 4) mysql 기본설정 mysql_secure_installation 5. 설정하기 익명사용자를 삭제하겠습니까? Y 원격접속을 허용하지 않을 것인가? Y Test DB를 ..

DB 2024. 4. 9. 15:54

문제발생 개요 ) 멀쩡하게 돌아가던 데이터가 깃배포 이후 에러가 발생했다. WHY? SOP (Same Origin Policy, 동일 출처 정책)으로 인한 CORS 오류 발생이었다. SOP 정책이란? 자바스크립트 엔진 표준 스펙의 보안 규칙중, 하나의 출처 (Origin)에서 로드된 자원(문서나 스크립트)이 일치하지 않는 자원과 상호작용하지 못하도록 요청 발생을 제한하는 정책이다. 쉽게 말해, 본인의 경우 HTTPS 작업환경에서 HTTP 데이터를 끌어오려니 에러가 발생한 것이었다. 여기서 동일출처의 기준이란? Protocol, host, port 가 같아야 동일한 출처라 할 수 있다. ex. http(Protocol)//localhost(host):8000(port) 그렇다면 다른 출처의 리소스가 필요하..

React 2024. 4. 8. 15:05

Node.js 서버를 이용하면서 Promise 비동기처리 문제로 애를 먹었다 문제 _ node.js를 통해 데이터를 불러오는데 Promise 으로 인해 처리되지 않았다. 해결 _ async _ await 구문을 사용한 함수의 데이터 결과값을 가져올 때 똑같이 구문을 사용해주어야 한다 정상적으로 데이터가 들어온다

Node.js 2024. 3. 13. 18:01

만들어진 리액트 프로젝트를 깃에 배포를 시도했으나 번들링 된 웹팩이 해결되지 않아 2-3일째 난항을 겪었다. 겪은 난항은 세가지가 있었다. 1) 웹팩 번들링 문제 _ 이미지 로더의 문제 >> 이미지 파일이 형성되지 않음 2) 리액트 라우터 경로 이탈 >> 빈공백 화면이 뜨게 됨 3) react - build 에러 >> 이미지 및 json 파일 경로를 public에 두고 필요한 react-scripts 가 설치되지 않아서 발생 4) deploy 사용과 에러 첫번째 , 웹팩 번들링 문제 1. webpack을 번들링하는 파일명을 '/dist' 에서 '/docs' 로 변경시켜준다 >> 깃허브 배포가 목적이라면 처음부터 docs 로 만들어도 괜찮다 >> /docs 폴더만 깃에 업로드한 후 build 이후 main..

React 2024. 2. 22. 16:18

1. 웹팩이란? Webpack은 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. - (웹팩 문서 참고) 간단히 말하자면 html에 들어가는 다수의 js 파일들을 하나의 js 파일로 만들어 주는 것을 의미한다. 웹팩은 '모듈(module)'을 위한 '번들러(bundler)' 라고 명시되어있다. 번들러란? JS,CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고 작업의 결과물은 '번들(Bundle)'이라고 한다. 웹팩 자체는 묶어주는 역할을 하기 때문에 번들러(Bundler)라고 칭한다. 번들링 과정이 끝나면 기존 스크립트에서 import/export가 사라지기때문에 type="module"이 필요없어진다. 따라서 번들링 과정을 거친 스크립트는 일반 스크립트처럼 취..

React 2024. 1. 30. 14:17

**변수선언이 세 가지가 생긴 이유 ? ES6 버전 이전엔 변수명을 선언하는 키워드 var를 사용했으나 ES6버전 이후엔 사용을 지양하는 편이다 var의 단점을 보완하기 위해 등장한 키워드가 let , const 인데 이 세가지의 특징과 차이점을 알아보자. 1. var 1) 중복선언이 가능하다. var의 키워드는 중복으로 변수명 선언이 가능하다. 이는 자바스크립트의 무한한 확장의 장점이기도 하지만 의도치않게 변수명 중복을 인지하지 못해 값이 변화하는 결과를 초래하기도한다. 2)값의 재할당이 가능하다. ( let과의 공통점 ) 값의 재할당으로 자유롭게 값을 변경하기가 편하다. 그러나 의도치 않는 재할당의 경우가 생기기도 한다. 3)함수레벨스코프를 지향한다. (function-level-scope) / 전역..

Basic_Code 2023. 12. 13. 14:55

1. 오픈 API 연결 (Axios) 및 데이터 타입 명시 오픈 api URL 을 생성하고 axios를 통해 데이터를 가져오기로 함. 그러나 데이터가 object 타입이라 읽지 못해 오류 발생 -> 데이터가 object 인 경우, 가져올 데이터의 타입을 정확하게 명시해야함. axios의 경우, 기본값이 json을 포함하고 header, body등 따로 명시할 필요가 없지만 데이터가 불려지지 않으므로 body : JSON.stringfy(data) 를 명시, .then response 영역에도 한번 더 명시. 그리고 가져오는 데이터 형식에 key 명을 기재. JSON.stringfy(data.name) 등등 -> 구체적으로 가져오는 데이터 타입을 불러야함. 정상적으로 데이터를 끌고오는게 보여짐. 2. in..

Javascript 2023. 9. 5. 17:09

데이터 전송과 관련해 fetch 와 axios 차이에 대한 궁금증이 생겼다. 이 둘의 차이점을 알고 적절하게 사용해보자! # 알고가자 Axios 와 Fetch 는 모두 Promise 기반의 HTTP 클라이언트다. 즉, 이 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부 (reject) 할 수 있는 promise 가 반환된다. Fetch fetch Api 는 네트워크 요청을 위해 fetch() 라는 메서드를 제공하는 인터페이스다. 모던 브라우저에 내장되어있어 따로 설치할 필요가 없다. node.js의 실험적 기능을 활성화하여 사용할 수 있다. Axios 자바스크립트에는 fetch api 가 내장 되어 있는 반면 axios 의 경우, 서드파티 라이브러리로 CDN 혹은 npm 이나 y..

Javascript 2023. 8. 30. 14:57