on your mark

타사에 ajax 요청했는데 자꾸 결과창이 두번 뜨는 오류 발생 함수가 2번 호출되는 것도 아니고 응답값이 2번 오는 것도 아님 (구조 상 1번 요청하면 결과 창이 뜨는 구조) 뭐가 문제일까 네트워크 탭 뒤져보다가 OPTIONS 요청 메소드가 한번 찍혀있고 그 다음에 원래 요청이 가네,,,? https://devolive.tistory.com/10 [HTTP] CORS 프론트 공부하면서 제일...은 아니고 머리 아프게 했던 여러 가지 문제 중 하나인 SOP/CORS CORS (Cross-Origin Resource Sharing) SOP에 위배되어도 XHR에 의해 resource를 사용할 수 있는 것을 의미 SOP SOP는 s.. devolive.tistory.com CORS 정리한 내용은 여기 CORS ..

프론트 공부하면서 제일...은 아니고 머리 아프게 했던 여러 가지 문제 중 하나인 SOP/CORS CORS (Cross-Origin Resource Sharing) SOP에 위배되어도 XHR에 의해 resource를 사용할 수 있는 것을 의미 SOP SOP는 same origin policy의 약자로 하나의 origin의 document나 script에서 다른 origin의 resoucr를 ajax를 이용하여 가져오는 것을 제한하는 것을 의미한다. 두 URL의 프로토콜, 포트(명시한 경우), 호스트 (en-US)가 모두 같아야 동일한 출처 아래 표는 URL http://store.company.com/dir/page.html의 출처를 비교한 예시이다. http://store.company.com/dir2..

클로저 클로저란? 클로저는 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.... ? 이해가 되지 않는다. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 간단하게 정리하면 함수밖에서 선언된 변수를 함수 내부에서 사용할 때 클로저가 생성된다. 클로저를 이해하기 위해서는 lexical scoping규칙을 알고 있어야 한다. lexical scoping은 함수가 정의된 시점의 스코프 체인을 사용하여 함수가 실행된다는 뜻이다.(호출된 시점이 아님) var name = "kim"; function outer(){ var name = "olive"; function inner(){ return name; } return inner; } var innerFunc = outer(); var myNa..

호이스팅(Hoisting) 호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미한다. 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효범위: 함수 블록 {} 안에서 유효 함수 내에서 아래 쪽에 존재하는 내용 중에서 필요한 값들을 자바스크립트 Parser 내부적으로 끌어올리는 것 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문에 호이스팅이 발생한다. 호이스팅의 대상 var 변수 선언과 함수..

styled-components 컴포넌트가 많은 경우 css 스타일링 하기 어려운 점이 있다. 컴포넌트 제작 시 스타일을 바로 입혀서 컴포넌트를 만들 수 있는데, (styled-components)를 이용하면 된다. import React, { useState } from 'react'; import styled from 'styled-components'; //padding이 20px인 div를 만들자 let Box = styled.div` padding : 20px; `; function Detail(){ return ( ) } props로 스타일링도 가능하다. let title = styled.h4` font-size: 25px; color: ${props => props.colors} `; .....

리액트 기초1 react bootstrap에서 react전용 bootstrap 사용가능하다. 그 외 다른 css프레임워크도 많으니 필요하면 찾아보는 걸 추천한다. Import & export export default 문법 (data.js) var name = 'Kim'; var name2 = 'Park'; export default name; //여러개의 변수를 내보내고 싶다면 //export {name, name2}; App.js와 별개로 data.js 파일을 생성한다. 이 파일에서 중요한 변수를 export하고 싶을 땐 export default 변수명 으로 사용 가능하다. 변수명, 함수명, 자료형 전부 배출 가능하다. 파일마다 export default 라는 키워드는 하나만 사용가능하다. expo..

Component component 들어가기 앞서 return 안에는 2개의 html 태그를 나란히 적을 수 없다. 하나의로 감싸거나 로 감싸자 function App(){ return( ) }Component 만들기 긴 HTML은 함수화 할 수 있다. function App(){ return( ) } function Comp(){ return( ... ) }component를 만들 때 유의할 점 component안에 component를 만들지 않는다. (App도 하나의 컴포넌트) 로 사용해도 되고 로 사용해도 됨 arrow function 사용 가능 function Comp(){ return (...) } let Comp = () => { return (...) } Component는 언제 쓸까 사이트..

리액트 입문 인강들으면서 필요한 부분 및 복습하고자 하는 부분만 작성한 것이기에 전체 내용을 알고 싶으면 인강 수강 권장 최대한 쉬운 표현을 사용하려고 한다. 리액트 입문 독학하면서 느낀 점 인강 수강하면 훨씬 이해가 빠르다. 리액트 가이드문서 읽으면 좋긴한데, 구버전이라 초보는 참고하기 어려울 수 있다. 인강 수강하고-> To do app 등 기초 앱 제작을 따라하는 것도 좋다. 개인 프로젝트 아무거나 하면서 체득하자 기타 참고 자료는 업데이트 할 예정 개발환경 setting download plz nodejs vsc 시작하기 작업용 폴더 생성 후 해당 폴더에 npx create-react-app [프로젝트명] 으로 프로젝트 생성해준다. vsc 에서 file-open folder 후 [프로젝트명] 폴더..