본문 바로가기

전체 글82

개인 프로젝트 3 환경 변수 설정에서 통신 에러는 오타가 있었습니다... 역시 푹 쉬면서 해야 사소한 게 보이나 봅니다. (─‿─) 영웅 선택 및 카드 데이터 호출 다음과 같이 선택된 영웅의 카드들을 저장할 변수를 만들고 영웅 변경 시 데이터를 변경할 함수를 내려줍니다. const [currentHeroCard, setCurrentHeroCard] = useState([]); const currentHeroCardHandler = (card: CardStructure[]) => { setCurrentHeroCard(card); }; return ( {heroData.map((el) => { return ; })} ); import { CardStructure } from "../card.model"; // Props 구조.. 2023. 6. 20.
개인 프로젝트 2 개인 사정으로 오래 쉬고... 시작한다 시작한다 미루다 드디어 다시 개인 프로젝트에 손을 댔습니다. 코딩을 조금 쉬니 모든 게 초기화된 기분이지만 차근차근 해보겠습니다. !(•̀ᴗ•́)و 환경 변수 설정 링크를 통합해서 관리하고 Oauth 인증을 위한 Client Secret을 숨기기 위해 설정했습니다. 다음과 같이 env 파일을 만들고 아래와 같이 내용을 채웠습니다. REACT_APP_OAUTH=여기에 Client Secret 입력 그리고 App.tsx에 POST 요청을 통해 토큰을 받아 로컬스토리지에 저장했습니다. useEffect(() => { fetch("https://oauth.battle.net/token", { body: "grant_type=client_credentials", header.. 2023. 6. 19.
구조 분해 할당 구조 분해 할당(destructuring assignment)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다. 배열 구조 분해 할당 const number = [1, 2, 3]; const [one, two, three] = number; console.log(one, two, three); // 1 2 3 변수 one, two, three를 선언하고 number를 구조 분해하여 할당합니다. 이 때 할당 기준은 배열의 인덱스입니다. const [a, b] = [1]; console.log(a, b) // 1 undefined const [c, , d] = [1, 2, 3]; console.log(c, d); // 1 3 const [e, ... 2023. 6. 16.
프로토타입 프로토타입은 비유하자면 생명체의 유전자와 비슷하다는 개념을 가지고 접근하면 이해가 쉽습니다. 상속과 프로토타입 상속(inheritance)은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말합니다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거합니다. // 생성자 함수 function Cookie(chocolate) { this.chocolate = chocolate; } // 프로토타입 추가 Cookie.prototype.addChocolate = function () { return 'Cookie with ' + this.chocolate + ' Chocolates'; } // 인스턴스 생성 con.. 2023. 6. 15.
HTTP, HTTPS 프로토콜 프로토콜(Protocol)은 컴퓨터 네트워크에서 통신을 위한 규칙과 협약의 체계를 말합니다. 네트워크 상에서 데이터를 주고받기 위해선 송신자와 수신자 간에 약속된 규칙이 필요하며 이러한 규칙의 집합을 의미합니다. 데이터 송수신, 전송 방식, 오류 검출 및 복수, 인증, 암호화 등 다양한 측면을 다루며 통신할 때 데이터를 어떤 형식으로 구성할지 , 어떤 절차를 따를지 등도 규정합니다. 기본적으로 서버와 브라우저가 데이터를 주고받는 HTTP, 이메일 전송을 위한 SMTP(Simple Mail Transfer Protocol), 파일 전송을 위한 FTP(File Transfer Protocol), 네트워크 보안을 위한 SSL 등 다양한 프로토콜이 존재합니다. HTTP HTTP는 Hypertext Tr.. 2023. 6. 13.
클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. MDN 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아닌 함수를 어디에 정의했는지에 따라 상위 스코프를 결정합니다. 이를 렉시컬 스코프(정적 스코프)라 합니다. const x = 1; function outer() { const x = 10; inner(); } function inner() { console.log(x); } outer(); // 1 inner(); // 1 위 예시에서 outer 함수와 inner 함수 모두 전역에서 정의된 함수이며 어디서 호출하는지는 함수의 상위 스코프 결정에 어떠한 영향도 주지 못합니다. 즉, 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않습니다. 렉시컬 환경의.. 2023. 6. 9.
CORS SOP(Same Origin Policy) SOP는 다른 출처의 리소스를 사용하는 것을 제한하는 보안 방식이며 이는 URL의 프로토콜, 호스트, 포트가 같음을 의미합니다. 이 세 가지가 무엇이라도 하나가 다르면 다른 출처라고 판단을 하는 것입니다. 이는 토큰이 유출되어도 요청의 Origin을 확인하기고 다른 출처(cross origin)로 판단해 요청을 막을 수 있습니다. 그렇다면 다른 출처의 리소스가 필요하다면 어떻게 할까에서 CORS가 등장합니다. CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 체제입니다... 2023. 6. 8.
Virtual DOM 등장 배경 https://iltae.tistory.com/43 브라우저 구조와 렌더링 과정 브라우저 기본 구조 7가지 ◎ 사용자 인터페이스 주소 표시줄, 이전/다음/새로고침 버튼, 북마크 등 요청한 웹 페이지를 제외하고 사용자와 상호작용 하는 서비스들 ◎ 브라우저 엔진 사용자 인 iltae.tistory.com 브라우저가 어떤 인터렉션에 의해 DOM 변화가 발생한다면 렌더 트리가 그때마다 재생성됩니다. 이때 다시 모든 요소들의 스타일을 다시 계산하여 구조를 잡고 칠하는 과정이 반복되게 됩니다. 장바구니에 상품을 추가하거나 댓글을 다는 행동을 하면 다시 전체 노드가 처음부터 다시 그려지는 것이었습니다. 이는 불필요한 반복을 야기하고 시간이 많이 소모됩니다. 게다가 SPA를 사용하게 되면서 DOM을 조작할 .. 2023. 6. 1.
단축 평가 논리 연산자를 사용한 단축 평가 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됩니다. 'Red' && 'Blue' // 'Blue' 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환합니다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행됩니다. 첫 번째 피연산자 'Red'는 Truthy 값이므로 true로 평가됩니다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있기에 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정합니다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Blue'를 그대로 반환합니다. 'Red' || 'Blue' // 'Red' 논리합 연산자는 두.. 2023. 5. 30.

티스토리툴바