코딩하는 등산가

시간&메모리 제한 문제 입력&출력 문제풀이 package com.Back; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.util.StringTokenizer; public class Back_18310 { public static void main(String[] args) throws NumberFormatException, IOException { BufferedReader br = new BufferedReader(new InputStreamReader(S..

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..

시간&메모리 제한 문제 입력&출력 문제풀이 package com.Back; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.StringTokenizer; public class Back_19941 { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); StringTokenizer st = new StringTokenizer(..

자바스크립트 기초 강의(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');..