오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

HTTP (HyperText Transfer Protocol) 하이퍼텍스트 전송 프로토콜 하이퍼텍스트는 웹사이트에서 이용되어지는 Rink들만 얘기하는 것이 아니라 모든 리소스(문서, 이미지 파일 등)를 포함한다 브라우저 위에서 동작하고 있는 웹사이트나 웹APP 같은 Client들이 어떻게 Server와 통신할수 있는지를 정의 한 것을 HTTP라 한다 HTTP를 이용해서 Sever에서 Data를 요청해서 받아올 수 있는 방법으로는 AJAX라는 것이 있다. AJAX (Asynchronous Javascript And XML) 비동기 Javascript, XML 웹페이지에서 동적으로 Sever에게 Data를 주고 받을 수 있는 기술을 의미 대표적인 브라우저 API로는 XMLHttpRequest, fetch 가..

Q1. 배열에서 문자열 만들기 join const fruits1 = ['apple', 'banana', 'orange']; { // My let result = ``; fruits1.forEach((item, index) => { result += item; if (index apple, banana, orange } { // Solution const result = fruits1.join(`, `); console.log(result); // > apple, banana, orange } Q2. 문자열로 배열 만들기 split const fruits2 = '🍎, 🥝, 🍌, 🍒'; { ..

자료구조 비슷한 타입의 데이터(object)들을 묶어서 한곳에 보관해 놓는 것 대부분의 프로그래밍 언어들은 동일한 타입의 object만 담을 수 있는데 JS는 동적타입언어라 이것저것 담을 수 있음, 그러나 동일한 타입만 담는 것을 규칙으로함. 어떤 방식/형식으로 데이터를 담냐에 따라서 굉장히 많은 타입이 존재 객체는 서로 연관된 특징과 행동들을 묶어 놓은것들을 의미함 (자료구조와 다름) 삽입, 검색, 정렬, 삭제를 고려해서 자료구조중 가장 효율적인 것을 사용하는것이 중요 자료구조중 하나가 배열이다. 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다. Array.isArray 1. Declaration (선언) const arr1 = new Array(); const arr2 = [1, 2]..

Object (객체)의 사본 JS의 데이터 타입 중 하나 관련 데이터/함수 집합체 JS의 거의 모든 객체는 Object의 인스턴스 입니다 객체 는 key와 value의 집합체 (object = { key : value };) 하나의 properties는 key:vlaue로 구성됨 object의 key값 호출방법 1. Literals and properties const obj1 = {}; // 'obect literal' 문법 const obj2 = new Object(); // 'object constructor' 문법 function print(person) { console.log(person.name); console.log(person.age); } const ellie = { name: `el..

5. Class 객체지향언어 class는 object(인스턴스)를 만들 수 있는 틀이다 class 자체에는 data가 들어있지 않음 틀(template)을 정의해서 한 번만 선언 한다 class는 정의만 한 것이라서 실재 메모리에 올라가지 않음 class를 이용해서 data를 넣어서 만드는 것이 object다 class를 이용해서 새로운 instance를 생성하면 그게 바로 object가 되는 것 object는 class를 이용해서 무수히 많이 만들 수 있다 class를 이용해 만든 object는 실재 메모리에 올라간다 ES6에 도입 prototype-based 기반으로 그 위에 문법만 class가 추가됨 (문법적 설탕) Object-oriented programming (객체 지향 프로그래밍) clas..

defer 옵션을 사용하게 되면 html이 전부 파싱된 다음 분석이 완료된 다음에 contentLoaded가 출력되기 이전에 호출 이미지나 폰트를 쓰지 않는 이상 load보다 COMContentLoaded를 쓰는 것이 더 빠르게 사용자가 볼 수 있다.

브라우저 좌표에 있어 중요한 API인 Element.getBoundingClientRect()를 기억하자 Element.getBoundingClientRect: Width와 Height, 요소의 너비와 높이가 얼마인지 그리고 top과 left의 표지션에 대해서도 얻어올 수 있습니다. ※주의 CSS에서의 absolute를 이용해 right와 bottom을 줄때와 다르다는 것을 생각하자 absolute rigth을 주게되면 브라우저에서 제일 오른쪽부터 떨어져 있는 거리를 계산한다. Client x, y vs Page x, y 사용자가 조금 스크롤링한 상태에서 click 을하게 되면 Client X,Y와 Page X,Y의 값이 달라집니다.Page x,y는 페이지 자체에서 문서 자체에서 떨어져 있는 X와 Y를 ..

📌WebAPIs APIs란 Application Programming Interfaces로 쉽게 설명하면 자판기와 같습니다. 우리가 자판기의 로직을 몰라도 동전을 넣어 사용하면 된다는 것을 알고 있습니다. 그리고 APIs중에는 HTTPS의 상태에서만 작동하는 API가 있는데 이는 사용자의 정보를 보호할 의무가 있기 때문입니다. HTTPS는 HTTP에 request와 response를 보완 처리가 잘 된 아이를 말하는 것입니다. 📌Window size window.screen: 모니터의 해상도, 사이즈를 이야기 하는 것입니다.window.inner: 보고있는 웹페이지뿐만 아니라 수직에 스크롤바가 있다면 그 스크롤바가 표기되는 모든 것을 합한 페이지가 표기되는 이 부분 전체를 얘기하는 겁니다. documen..

📌정렬 첫번째는 margin: auto로 div는 block level이라 한줄에 하나씩만 들어올 수 있어서 가능합니다.(단 margin이 수평적으로만 주어지기 때문에 수평 정렬만 가능하다는 점) 두번째로는 text-align: center은 이름만 보면 text만 정렬 가능할 것 같지만 block level이아닌곳에도 사용 가능합니다.(단 div는 상자이기 때문에 불가능하고 auto처럼 수평정렬만 가능합니다.) 세번째로는 transform: translate(50%, 50%);를 사용하여 이동해주는 기능입니다. 네번째로는 text를 가운데 정렬하는 방법인데 line-height를 사용한 방법인데 이 방법의 단점은 원래는 작은 막대기 만큼의 높이였던 아이를 큰 막대기 만큼의 막대기로 바꾸어서 가운데 정렬..

다양한 사이즈의 태블릿과 휴대폰이 출시됨으로 인해 많은 사용자들이 태블릿과 핸드폰으로 content를 소비하기 때문에 반응형으로 만드는 것이 당연시 되었다. CONTENT IS LIKE WATER: 컨텐츠를 물과 같이 유동적으로 만들어서 어떤 병에 담아도 유연하게 컨텐츠를 담아야한다. 📌Unit em: 타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위입니다. rem: root에 지정된 크기에 따라서 크기가 결정되는 아이 어떤한 폰트를 사용하느냐에 따라 같은 값을 주더라도 다르게 보입니다. 1vw는 viewport의 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 viewport의 크기와 관련이 있다는 것을 의미합니다. margine: auto