Today I Learned

리액트도 Spring Boot의 application-dev.properties, application-prod.properties 처럼 각각 실행 환경에서 다른 설정을 사용하고 싶을 때 하는 설정 방법이 있다. development 환경에서 http://localhost:8080을 production 환경에서 https://api.seogineer.com를 사용해서 동적으로 각 profile 마다 다른 URL을 사용하고 싶었다. 프로젝트의 root 경로에 .env.development, .env.production 파일을 생성하고 각 profile에 맞는 URL을 입력한다. 이때, 호출할 때 사용하는 이름은 접두사 REACT_APP_로 시작하여야 한다.# .env.developmentREACT_APP..

정규표현식(regular expression) 정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서 정규 표현식 또한 객체입니다. 사용 예 이메일, 주소, 전화번호 규칙 검증 textarea에 입력된 것 중 불필요한 입력값 추출 트랜스파일링 개발 도구에서의 문자열 치환 정규표현식 선언 1. 리터럴 let re = /abc/; 2. 생성자 함수 let re = new RegExp("abc"); 메소드 1. match() 문자열이 정규식과 매치되는 부분을 검색 문법 : str.match(regexp) 결과 값 : 문자열이 정규식과 일치하면, 결과 정보를 담은 Array를 반환하고 아니면 null을 반환 ex) [ '32', index: 3, input: 'a..

생성자패턴 객체지향적인 방법으로 객체에서 비슷한 속성과 행위를 묶어서 표현할 수 있다. 객체를 동적으로 생성해서 중복을 줄일 수 있다. prototype에 메서드를 속성으로 추가할 수 있다. 객체리터럴(Object literal) 코드의 중복이 발생한다. var healthObj = { name : "seogineer", lastTime : "PM 10:12", showHealth : function(){ console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요."); } } var healthObj2 = { name : "crong", lastTime : "AM 09:10", showHealth : function(){ console.log(th..

const, let은 자바스크립트 ES6(ECMA 2015)부터 생긴 구문이다. 익스플로러 호환성 문제 때문에 아직도 대다수 웹에서는 var 변수만 사용된다. const 선언할 때 바로 값을 넣어줘야 한다. 한번 넣은 값은 바꿀 수 없는 상수이다. const mouse_1 = '서울쥐'; mouse_1 = '귀촌쥐';//Error let 선언과 값 정의를 따로 할 수 있다. 넣은 값은 이후 얼마든 바꿀 수 있다. 대신 선언을 다시 할 수 없다. let mouse_2; mouse_2 = '시골쥐'; mouse_2 = '상경쥐'; let mouse_2 = '서울쥐';//Error var 값을 자유롭게 변경할 수 있다. 다시 선언할 수 있다. var mouse_3 = '청계천쥐'; mouse_3 = '잠적쥐'..

버블링이란? 클릭한 지점이 하위 엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트 리스너가 있는지 찾는 과정 설명 html div1 div2 div3 css #div1 { width: 150px; height: 150px; border: 1px solid blue; } #div2 { width: 100px; height: 100px; border: 1px solid blue; position: absolute; top: 30px; left: 30px; } #div3 { width: 50px; height: 50px; border: 1px solid blue; position: absolute; top: 25px; left: 25px; } javascript let div = d..

DOMContentLoaded 와 Load 차이 DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트 발생 모든 자원이 다 받아져서 브라우저에 화면 표시까지 다 끝나는 시점에 Load 발생 DOMContecLoaded 이후에 동작하도록 구현하는 것이 성능에 유리하다. DOMContentLoaded 이벤트를 사용하는 이유 a a 위와 같은 이유 때문에 script문을 body 태그를 닫기 전에 삽입한다. DOMContentLoaded 이벤트 이후에 동작하도록 구현 function init(){ ... } document.addEventListener("DOMContentLoaded", () => { let div = document.querySelector("div"); init(); });..

객체 선언 let obj = {name:"seogineer", age:20}; console.log(obj.name); //seogineer console.log(obj["name"]); //seogineer 객체 추가/삭제 obj["name"] = "seo"; console.log(obj); // { name: 'seo', age: 20 } obj.job = "developer" console.log(obj); // { name: 'seo', age: 20, job: 'developer' } 객체 탐색 //value값이 숫자인 key만 출력 const data = { "debug": "on", "window": { "title": "Sample Konfabul..

배열 선언 //배열 선언 let arr = [1, 2, 3, "hello", null, true, []]; 배열 길이 //배열의 길이 arr.length; //결과:7 원소 추가 //배열 원소 추가 arr[2] = 99; //[ 1, 2, 99, 'hello', null, true, [] ] arr.push(3); //[ 1, 2, 99, 'hello', null, true, [], 3 ] 배열과 관련된 함수들 //indexOf(): 배열에 특정 값이 있는지 확인 arr.indexOf(99); //2 //join(): 배열을 문자열로 반환 arr.join(); //1,2,99,hello,,true,,3 arr.join(''); //1299hellotrue3 ar..

appendChild(노드) 자식 노드의 뒤에 노드가 삽입됨. 소스코드 let el = document.getElementById('form'); let input = document.getElementById('param1'); el.appendChild(input); 결과 insertBefore(노드, 기준 노드) 기준 노드의 앞에 노드가 삽입됨. 소스코드 let el = document.getElementById('form'); let input = document.getElementById('param1'); el.insertBefore(input, el.childNodes[4]); // el.childNodes[4] 앞에 input이 삽입..

parentElement 부모 element를 가져온다. parentNode 부모 element를 가져온다. 소스코드 button let el = document.getElementById('param1').parentElement; console.log(el); let el2 = document.getElementById('param1').parentNode; console.log(el2); 결과 차이점 parentElement: 부모 element 노드를 반환. 부모 element 노드가 더이상 없을 경우 null 반환한다. parentNode: 종류에 상관없이 부모 노드를 반환. parentElement는 까지 거슬러 올라가고, document까지 가고 싶지 않을 때 사..