리액트바오

CORS는 무슨 뜻인가 CORS는 Cross-Origin Resource Sharing의 줄임말인데 구글 번역기로 돌려보니 '교차 출처 리소스 공유'라고 한다. 위의 빨간 에러는 CORS 정책을 위반할 때 나타나는 에러인데 왜 뜨는것이며 어떻게 해결해야할지 알아보자. CORS를 알기 위해서는 먼저, SOP에 대해서 먼저 알아야 한다. CORS가 필요하게 된 배경에는 SOP이 있었기 때문이다. SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻한다. MDN에선 다음과 같이 정의한다. 동일 출처 정책(same-origin policy)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 한 마디로 ‘같은 출처의 ..

Javascript 2022. 11. 2. 17:31

프로토타입이 언급될때 나는 디자인에서 사용되는 것을 가리키는줄로만 알았다. 그런데 개발에서의 프로토타입이라는것이 있다는것도 알게 되었다. 개발에서의 프로토타입은 무엇일까? 또 프로토타입을 왜 사용할까? 그리고 프로토타입 체인이란 무엇인지 한번 공부해보자. 먼저 프로토타입을 왜 사용하는지 알기전 개발에서의 프로토타입이란 무엇인지 알아보자. 프로토타입이란? JavaScript는 흔히 프로토 타입 기반 언어라고 불린다. 쉽게 말하자면 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다는 것이다. 모든 객체는 그들의 프로토타입으로부터 속성(프로퍼티)과 메소드를 상속받는다. 이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제..

Javascript 2022. 10. 27. 19:54

콜백 함수란 콜백 함수는 일반적으로 다른 함수의 인자(argument)로 전달되는 함수를 callback 함수라고 한다. 비동기와 콜백 함수 브라우저, node.js는 비동기 작업을 처리하기 위해서 callback 함수를 자주 사용하는데, 비동기 작업을 해결하기에는 이미 충분했지만, 콜백함수에는 한계가 있었다. 무슨 한계가 있었을까? 콜백 함수의 한계 코드 가독성 측면에서 문제가 많았다. callback은 함수에 담아서 사용해야 하기 때문에, 함수가 연속적으로 반복되어 직관적이지 않은 단점이 있는데 이를 "callback hell"이라고 부른다. 또한, callback이 인자로 전달되는 특성 때문에, 이게 callback인지 아닌지 눈으로 확인하기가 쉽지 않아서 개발자가 코드를 오작성할 확률이 높았다. ..

Javascript 2022. 10. 19. 13:19

rem rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환된다. 보통 HTML tag에서 지정된 font-size가 기준이 되는데, 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정되어 있는값을 상속받게 된다. html { font-size : 10px; } div { margin: 1.5em; /*대략 15px*/ } em rem은 기준이 되는 폰트 크기 하나로 고정되어 있는데, em은 어디서라도 기준이 바뀔 수 있기 때문에 복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다. html { font-size : 15px } div .content { margin-left : 2em; /* 15px * 2 = 30px */ }..

기타 2022. 10. 6. 11:03

usestate 컴포넌트의 상태(state)를 관리 하는 함수로 상태가 변경되면 React에서 이를 감지하고 바뀐 정보에 따라 화면을 보여준다. 하나의 usestate함수는 하나의 상태값만 관리 할 수 있으며 만약 컴포넌트에서 관리해야 할 상태가 여러개라면 usestate를 여러번 호출해야한다. useEffect 컴포넌트가 랜더링 될 때마다, 특정기능이 작동하도록 하는 hook이다. useEffect(() => { console.log('마운트 될 때 실행된다.') }, []) 마운트란? Mount란 DOM객체가 생성되고 브라우저에 나타나게 되는것을 뜻한다. useEffect(() => { console.log('리렌더링 될 때 마다 실행된다.') }) 뒤에 배열을 생략하게 된다면 리렌더링 될 때마다 실..

react 2022. 10. 4. 21:15

localstorage는 자바스크립트를 통해 데이터를 저장 할 수 있는데 데이터를 브라우저에 저장하면 브라우저를 종료 후 재시작해도 데이터가 여전히 남아있다는 특징이 있다. 데이터 저장하는 방법 localStorage.setItem(‘Key’,’Value’) key값와 value값을 localStorage.setItem을 이용하여 저장해준다. 저장된 데이터 가져오기 localStorage.getItem(‘Key’) 데이터를 가져올땐 getItem을로 Key값을 입력하면 된다. 데이터 삭제하기 localStorage.removeItem(‘name’) localStorage vs sessionStorage 웹 스토리지에는 localStorage뿐 아니라 sessionStorage도 존재한다. localSto..

react 2022. 9. 22. 16:31

리액트를 사용하면서도 이 key의 역할을 잘 몰랐다. 역할을 잘 모르니 프로젝트를 할때마다 밑에 콘솔창의 에러를 자주 보곤 했다. Warning: Each child in a list should have a unique "key" prop 이상하게 이 에러는 콘솔창에는 떠도 화면에는 이상없이 잘 작동했기에 무시하곤 했는데, 대체 이 key라는 것은 어떤 역할을 하는 것인지 궁금해서 알아보기로 했다. 번역기를 돌려보니 경고: 목록의 각 자식에는 고유한 "키" 소품이 있어야 합니다. 라고 한다. 한마디로 각 요소는 key라는 고유한 prop값을 가져야 한다는 경고이다. key 값을 넣어주지 않아도 화면에 렌더링은 되지만 key가 없을때 리액트는 자식 요소의 변동을 감지하고 렌더링 할 때 비효율적으로 작동하..

react 2022. 9. 20. 23:00

css작업중 box shadow효과를 주고 싶을때 얼만큼 줘야할지 잘 모르겠을때 유용한 사이트가 있다. https://cssgenerator.org/box-shadow-css-generator.html Box Shadow CSS Generator A box-shadow CSS Generator tool to quickly generate box-shadow CSS declarations. cssgenerator.org Box shadow css Generator라는 사이트로 들어가면 시각적으로 확인하고 코드를 copy하여 값을 가져올 수 있다. 이 막대기의 수치를 잘 조절하고 조절됨에따라 그림자가 얼만큼 적용이 되는지 눈으로 확인할 수 있을 것이다. 마음에 드는 각도와 그림자 크기 색상 등 골랐으면 그림..

기타 2022. 9. 20. 22:47