본문 바로가기

분류 전체보기

(127)
화살표 함수 사용법 익히기 함수 쓰기 const add = function (x,y) { return x + y } function 키워드를 생략하고 화살표 => 붙이기 const add = (x, y) => { return x + y } 한줄만 쓸 때는 리턴을 많이 생략해서 쓴다 const add = (x, y) => x + y 필요에 따라 소괄호를 붙인다 const add = (x, y) => (x + y) 파라미터가 하나인 경우 소괄호도 생략할 수 있다 const divideBy10 = x => x / 10 화살표 함수를 이용해 클로저 표현하기 const adder = x => { return y => { return x + y } } const subtractor = x => y => { return x - y } 아직 t..
변수 const 'const'로 선언된 변수에는 재할당(reassignment)이 금지되지만, 'const'로 선언된 배열과 객체의 경우 새로운 요소를 추가하거나 삭제할 수 있습니다. 하지만 여전히 재할당은 금지됩니다. 구글 스타일 가이드에서는 Declare all local variables with either const or let. 모든 지역 변수들을 const나 Let 으로 선언하세요. Use const by default, unless a variable needs to be reassigned. The var keyword must not be used. const를 default로 쓰세요. 재할당이 필요한 경우를 제외하고요. var 키워드는 절대 쓰지 마세요!! 라고 말하고 있다. 어딘가에서 본 기억으로는..
20210605_27 어제 새벽 두세시에 자서 일곱시에 알람을 맞춰놨지만, 아침여섯시반 부터 밥달라는 고양이의 발길질에 일어나서 밥을 주고 책상에 앉았다. 그리고 드디어 모니터가 와서 삶의질이 달라졌다.... 맥북에어는 너무 작고 덕분에 그 작은 화면을 들여다보느라 어깨가 아작났다. 작고 작은 맥북에어 화면에는 메신저랑 일정을 띄워놓고 모니터로 공부하니까 왠걸 집중이 더 잘됐다. 여러분... 모니터를 꼭 사세요... 크면 클 수록 좋고 다다익선입니다.... 후.... 다들 이렇게 편하게 코딩하고 있었다니... 저에게 신세계에 입문하게 조심스레 추천해주신 부산왕자님 감사합니다. 일하지말고 많이 버세요! 오늘 한 공부는... 배열 - 고차함수 코플릿 풀고 오답노트 못풀었던 금요일자 알고리즘 두문제 풀기 리액트 기초 복습 및 블로..
배열 arr.slice / arr.splice / arr.join 다시보기 배열 코플릿을 풀면서 헷갈렸던 것들을 다시 알아보는 시간 ! arr.slice() 어떤 배열의 처음부터 끝까지 (끝 미포함)에 대한 얕은 복사본을 새로운 배열로 반환한다. 원본 배열은 바뀌지 않는다. arr.slice(begin, end) arr.slice는 두가지 매개변수를 가질 수 있는데, 둘다 optional이다. begin 음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출한다. 배열에서 마지막 엘리먼트를 지우고 싶다면 slice(0, -1)을 하면 된다. 마지막 요소만 남기고 싶다면 slice(-1) 아예 똑같은 배열을 복사하고 싶다면, arr.slice() 혹은 arr.slice(0)을 하면 된다. 첫번째 매개변수가 undefine..
React 리액트(React)란? 리액트는 프론트앤드 개발을 위해 Facebook에서 만든 오픈소스 라이브러리 프론트앤드 개발은 웹 개발에서 유저에게 보이는 뷰에 대한 코드를 작성하고 개발하는 것 React를 배워야 하는 이유를 알 수 있는 리액트의 3가지 특징 리액트를 사용하면 프론트앤드 개발을 효율적이고 효과적으로 할 수 있다!! 1. 선언형(Declarative) 리액트는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향 명시적 방식 === 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식 2. 컴포넌트 기반(Component-Based) 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반함. 컴포넌트로 분리하면, 서로 독립적..
DOM(Document Object Model) 돔... 그것은... 프론트엔드 개발자가 되고싶다면 꼭 알아야할 요소... 돔에서 가장 유명하고 잘 쓰이는 것은 이벤트이지만 그것만이 중요한 것은 아니다.... DOM(Document Object Model - 문서 객체 모델) DOM은 쉽게 말하면 HTML과 자바스크립트를 연결해주는 다리같은 매개체입니다. 자세히 말하면, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. Window 객체의 document 프로퍼티를 통해 사용할 수 있습니다. DOM은 프로그래머 관점에서 바라본 HTML입니다. DOM을 활용하면 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작하고 단순한 문서에서 웹 앱으로 업그레이드 할 수 있습니다. HT..
Spread syntax/Rest parameter/Destructing Spread 문법 빵에 잼을 spread해서 바르는것 처럼... 물에 잉크 떨어트리면 spread 하는 것처럼.... 배열을 풀어서 인자로 전달하거나 배열을 풀어서 각각의 요소로 넣을 때 사용하는 문법 Spread 문법은 배열에서 강력한 힘을 발휘한다. 배열을 합치거나, 복사하거나, 여러 개의 배열을 이어붙이거나, 여러개의 객체를 병합하거나 하는데에 사용할 수 있다. 1. 배열 합치기 let fruits = ['kiwi', 'banana']; let fruitBasket = ['apple', ...fruits, 'watermelon', 'plum']; // fruitBasket의 값은 ['apple', 'kiwi', 'banana', 'watermelon', 'plum']; let arr1 = [1,2,..
객체, 배열 코딩앙마 유튜브 정리 Object - 접근, 추가, 삭제 const hamster = { name:'crybaby', age: 26, } 접근 hamster.name //'crybaby' hamster['age'] // 26 추가 hamster.gender ='nogender'; hamster['color']='black'; 삭제 delete hamster.color; 존재하지 않는 프로퍼티를 출력하면 undefined가 나온다. hamster.birthDay // undefined in 연산자를 사용하면 true, false로 존재여부를 알 수 있다. 'birthDay' in hamster; // false 'age' in hamster; // true for ... in 반복문을 사용하면 객체를 순회하면서 값을 얻을 수 ..

반응형