require / exports 와 import / export 키워드 자바스크립트 개발을 하다보면 모듈을 불러오는 문법 두가지를 접하게 된다. 이 둘은 비슷하며내서도 달라서 혼돌을 줄 수 있다. 둘 다 외부의 파일이나 라이브러리의 코드를 불러온다는 같은 목적을 가지고 있지만, 전혀 다른 문법 구조를 가지고 있다. require / exports : Node.js에서 사용되고 있는 CommonJS 키워드이고 Ruby 언어 스카일과 비슷하다고 할 수 있다. /* CommonJS */ const name = require('./module.js'); /* CommonJS */ const name = '고양이'; module.exports = name; import / export : ES6에서 새롭게 도입된..

브라우저 저장소 웹 스토리지 : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소 쿠키 : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 | 웹 스토리지 로컬 스토리지 세션 스토리지 데이터 유지 브라우저 종료시 보관 브라우저 종료시 삭제 데이터 범위 동일한 도메인 전역 공유 브라우저간 공유 안됨 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있다. * 도메인이 같더라도 브라우저가 다르면(탭 브라우저, 다른 브라우저) 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않는다 | 쿠키 우리가 HTTP 요청을 보낼때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸 것인지 알 수 없..

this 사용 규칙 JavaScript에서 가장 난해하게 쓰이는 곳 마다 바뀌는 this 이다. | this 는 4가지 규칙으로 쓰이고 그 공식을 바탕으로 정해진 결과를 가져온다. 함수안에서 this를 쓰면 함수의 내용만으로는 this가 어떤 값을 가져오는 지 알 수 없다. 함수가 어떤 방식으로 실행하느냐에 따라 this 결정된다. 1. 일반 함수 실행 방식 아래 있는 strict mode가 아닌 이상 무조건 글로벌 객체를 가리킵니다. var age = 1; // global object function foo() { console.log(this.age); //this === global object : 브라우저에서는 window를 가리킨다. } foo(); // 1 (글로벌 객체 실행) new foo..

문제 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예 arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,2,6] 10 [-1] 내가 푼 문제 function solution(arr, divisor) { var answer = [];..

state? State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. JS에서 let으로 선언한다고 배웠는데 왜 State일까? 우리가 배운 component에서는 Lifecycle이라는 것이 있고 Lifecycle을 따라서 화면의 값이 변했을때 그 변화된 값을 화면에 다시 리렌더링 시켜주는 조건들이 있다. 그 조건들 중 하나라 State가 변경되었을 때이다. let으로 변경 해줄 수도 있지만 그렇게 되면 리액트가 인식하지 못하기 때문에 리액트에서 변화를 인지하기 위해서는 State를 변경해 줘야한다고 한다. 변수를 생성해야할 때는 state로 생성을 해야하는데, state를 사용할때는 useState를 사용한다고 한다. useState는 리액트에서 state를 만들기 위해서 있는 기능인데, 리액트에..

Props : 부모 컴포넌트로부터 받아온 데이터 // src/App.js import React from "react"; function App() { return ; } function GrandFather() { return ; } function Mother() { const name = '홍부인'; return ; } function Child() { return 연결 성공; } export default App; 위와 같은 코드에서 자식 컴포넌트가 마더 컴포넌트로 부터 데이터를 받을 때 아래 코드와 같이 적용하면 된다. // src/App.js import React from "react"; function App() { return ; } function GrandFather() { retur..