코딩하는 등산가

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. ES6 1. 객체 초기자 { const ellie1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; const ellie2 = { name: name, age: age, }; const ellie3 = { name, age, }; console.log(ellie1, ellie2, ellie3); } - 오브젝트를 선언하는 방식이 새로 추가 되었습니다. - 키와 값이 같은 경우에는 생략이 가능합니다. 2. 할당 { // object const student = { ..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. FlexBox - flexbox를 이용해서 박스의 배치가 수월해졌습니다. float : left center right 옵션 Container에 지정하는 속성 값 - display - flex-direction - flex-wrap - flex-flow - justify-content - align-items - align-content item에 지정하는 속성 값 - order - flex-grow - flex-shrink - flex - align-self 전체 코드 - index.html 코드 1 2 3 4 5 6 7 8 9 10 index.css 코드 .co..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 원하는 위치에 원하는 박스를 배치하는 것이 가장 중요합니다. 이를 하기 위해서 display와 position에 대해서 잘 이해해야 합니다. CSS 연습 코드 1. block, inline-block - html 코드 1 2 3 1 2 3 - CSS 코드 div, span { width: 80px; height: 80px; margin: 20px; } div { background: red; display: inline-block; } span { background: Blue; display: block; } - 여기서 display에서 inline-block의 ..

CSS 정리 - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. CSS란? Cascading Sytle Sheets의 약자 HTML 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어입니다. - 우리가 작성하는 스타일 - 사용자의 취향에 맞게 하는 스타일 - 브라우저 상에서 기본적으로 지정된 스타일 Selectors - 전체를 선택하는 경우 * - type을 선택하는 경우 Tag - ID를 선택하는 경우 #id - Class를 선택하는 경우 .class - State를 사용하는 경우 : - Attribute를 이용하는 경우 [ ] CSS 설정 연습해 보기 - index.html First Second Button 1 But..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. async & await Promise를 좀 더 간편하고, 간결하고, 또한 동기적으로 실행되는 것처럼 보이게 해줍니다. 1. async - Promise를 사용한 경우 function fetchUser() { return new Promise((resolve, reject) => { 'ellie'; }); } const user = fetchUser(); user.then(console.log); console.log(user); - resolve와 reject를 사용하지 않았기 때문에 pending 상태에 then으로 받지도 않았기 때문에, ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 프로미스(Promise) 자바스크립트에서 비동기를 간편하게 처리해주는 오브젝트입니다. - 자바스크립트에서 콜백함수 대신에 비동기적으로 사용할 때, 유용하게 쓸수 있는 오브젝트입니다. - state 프로세스가 기능을 수행하고 있는 중인지, 기능 수행이 성공했는지, 실패했는지를 이해하는 것이 중요함 - Producer Vs Consumer 필요한 데이터를 제공하는 것과 제공된 데이터를 쓰는 것에 대해서 차이점을 잘 이해해야 합니다. 1. Promise 만들기 새로운 Promise를 만들었을 때, executor 이 자동적으로 실행됩니다. - Pro..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 비동기 처리 및 콜백에 대한 이해 1. 동기와 비동기 - hoisting(호이스팅)은 함수 또는 var를 어디에 선언을 하든, 맨 위로 올라가는 것을 말합니다. console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3'); - 출력이 되는 순서는 setTimeout(() => console.log('2'), 1000); - 이 함수의 경우 브라우저에 보냈다가 1초 후에 콜백함수를 실행해달라고 하면 실행이 됩니다. setTimeout(() => console.log('2..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. JSON HTTP -> HyperText Transfer protocol의 약자로 서로 주고 받을지를 규약 한 프로토콜 - XMLHttpRequest 브라우저 api에서 제공하는 오브젝트중 하나로, 간단하게 서버에 데이터 요청 및 응답받을 수 있습니다. - fetch() API fetch() API를 통해서도 데이터를 주고받을 수 있습니다. 요즘에는 XML을 가독성 및 사이즈 크기 때문에 잘 사용되지 않고, JSON을 많이 사용합니다. - 데이터를 주고 받을 때, 가장 간단하게 쓰는 파일 포맷 - 텍스트를 기반으로 가볍다. - 쉽게 보기 편함 ..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 유용한 9가지 배열 함수들 1. Join { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(','); console.log(result); } - Join은 배열에 있는 모든 value를 더해서 string으로 반환해주는 것입니다. - 값을 중간자로 받아서 넣어주면, 배열 사이 사이에 구분자를 넣어주게 됩니다. { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(', and');..

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다. 비슷한 종류의 데이터들을 묶어서 한데에 보관하는 것을 자료구조라고 합니다. 자료구조에 대해서 검색, 삽입, 정렬, 삭제에 대해서 공부를 해두면 좋습니다. 배열의 경우는 인덱스로 접근이 가능하기 때문에 삽입과 삭제가 편합니다. 배열 배열의 정의 const arr1 = new Array(); const arr2 = [1, 2]; - 배열을 만들 때는 위와 같이 2가지로 만들어 주면 됩니다. 배열의 인덱스 const fruits = ['apple', 'banana']; console.log(fruits); console.log(fruits.leng..