728x90 반응형 TIL147 http 란? How do we communicate? http 는 통신 규약을 말한다. hyper Text : 문서와 문서가 링크로 연결되어 있음 transfer : 문서를 보냄 protocal : 프로토콜(규약), 어떻게 html 파일을 주고 받을지에 대한 방식 how works? Request : client가 서버에 요청하는 것 Response : server 가 응답 한번 요청하면 한번 응답한다 http 특징 소통의 핵심은 요청과 응답이다. 인간의 소통방식이 컴퓨터끼리의 소통방식에도 적용되는 것. 말이 아닌 메세지의 형식으로 요청과 응답이 이루어진다. stateless와 stateful stateless (state + less) : 개별 통신은 모두 독립이며 과거의 http 통신의 상태를 보존하지 않는다. .. 2022. 7. 28. class -instance와 object의 차이- class 클래스는 객체지향 프로그래밍의 핵심이다. 프로그램을 객체로 구성하고 객체들 간에 서로상호 작용하도록 하는 방법이다. js는 객체지향 중심 언어는 아니지만 (prototype 타입 기반 객체 지향 언어이다) class, 객체, 객체 지향은 중요한 주제이다. class는 객체(object)를 찍어내는 틀을 의미하고 object는 말 그대로 사물을 뜻한다. 이때 객체는 특정 로직을 갖고 있는 행동(method(메서드, 객체 안의 함수))과 변경 가능한 상태(변수)를 가진다. 원하는 구조의 객체 틀을 짜놓고 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다. (css 와의 class는 전혀 다른 개념!) instance와 object의 차이 class 는 object 를 찍는 틀이다. 그렇다면 insta.. 2022. 7. 24. js 용어 정리, forEach, object js 용어 정리 자료를 찾다보면 헷갈릴 수 있는 개념들! 특히 augument(인자)와 paramter(매개변수)는 잘 기억해두기 augument(인자)는 할당될 값 paramter(매개변수)는 함수 자체의 매개변수 forEach : 배열의 반복문, 배열에서만 사용 : 인자로 콜백함수를 받아옴, 배열 요소 각각 실행 arrow 함수 표현법 a.forEach((ele, index) => console.log(ele, index)) forEach vs map 함수 forEach 는 단순 루프를 돌면 끝나지만 map 은 루프를 돌며 원본 배열을 새로운 배열로 만듦 for (i=0; i>a.length; i++) 같이 긴 for문을 쓰지 않아도 새로운 배열을 만들 수 있다는 장점이 있다. 👇 개념 mapping.. 2022. 7. 24. arrow function es 란? ecma의 줄임말입니다. ECMA Script는 js를 표준화 시키려고 탄생했습니다. js의 문법이 보안이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔습니다. ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것! 현재는 ES10 버전 까지 나왔습니다. 주로 쓰이는 것은 ES6인데, 6은 버전 이름이고 ES 2015라고도 합니다. ES6에는 정말 편리한 함수들이 많이 생겼고 처음보는 문법들도 많이 생겼습니다.그 중에 arrow function은 전에 알고있던 function을 표현하는 방법과 완전히 달라졌습니다. arrow function //ES5 function getName() {} //E.. 2022. 7. 23. js Event관련 addEventListener 이벤트를 달 때 사용하는 함수 이름은 addEventListener 입니다. 특정 이벤트가 발생하면 인자로 받은 함수를 실행시켜줍니다. 요소.addEventListener(이벤트종류, function() { //이벤트가 일어났을 때 실행할 내용 }); 로그인 버튼 클릭 -> 로그인 api 호출 상품 사진 클릭 -> 상품 상세 화면으로 이동 자세히 보기 버튼 클릭 -> 팝업화면 출력 const thisIsButton = document.getElementsByClassName('login-btn')[0]; // login-btn 라는 클래스 이름이 있는 요소를 찾음(클래스 이름은 여러 요소에 중복해서 이름을 줄 수 있어서 // 배열로 반환, [0]을 붙임) thisIsButt.. 2022. 7. 23. object 1 👆요 표를 js 언어로 데이터 구현시 아래와 같이 데이터 저장이 필요하다 let plan1Name = "Basic"; let plan1Price = 3.99; let plan1Space = 100; let plan1Data = 1000; let plan1Pages = 10; let plan2Name = "Professional"; let plan2Price = 5.99; let plan2Space = 500; let plan2Data = 5000; let plan2Pages = 50; let plan3Name = "Ultimate"; let plan3Price = 9.99; let plan3Space = 2000; let plan3Data = 20000; let plan3Pages = 500; plan[.. 2022. 7. 22. js 변수 종류와 TDZ, hoisting let, const js는 그 동안 var만 존재했기 때문에 이미 만들어진 변수이름으로 재선언해도 아무런 문제가 발생하지 않았다. 그로 인해 변수 재선언 불가능한 const, let이 ES 2015 에서 추가 되었다. const : 변수 재할당, 재선언 불가능 let : 변수 재할당 가능, 재선언 불가능 but 블록이 다를 경우 가능 let a =5 //선언 let a =7 //재선언 불가능 a = 6 //재할당 가능 let vs var let은 볼록 명령문이나 let을 사용한 표현식 내로 쓸 수 있는 변수를 선언할 수 있다. var은 블록을 고려하지 않고 어디에서나 접근 가능하다 (전역 범위) let a = 6; if (true) {let a =7; console.log(a); //7 } console.. 2022. 7. 21. js string "", '' 안에 텍스트가 들어가면 string 형입니다. string 대소문자 바꾸기 let lastName = 'Yeri Kim'; let upperLastName = lastName.toUpperCase(); let lowerLastName = lastName.toLowerCase(); console.log(lastName); // Yeri Kim console.log(upperLastName); // YERI KIM console.log(lowerLastName); // yeri kim toUpperCase() 와 toLowerCase()를 활용 문자 길이 if (phoneNumber.length !== 10 && phoneNumber.length !== 11) { alert("폰 번호 제대로 입.. 2022. 7. 21. 검색창 만들기 (html, css) 👆 위 검색창을 만들기까지 정말 오랜 시간이 걸렸다 🥹 그 과정을 기록한 블로그 html 블록 결정하기 1. weelgle 이미지 2. input 창과 3개의 아이콘 3. 2개 button 4. 태그 이렇게 4개로 크게 블록 설정을 했다. css를 최대한 간단히 하기 위해 모두 div class로 묶었다. html ※ 2번 묶음 class things 를 보면 [돋보기-input박스-마이크-키보드] 순으로 넣었는데 이는 flex 값을 주었을 때 css 지정하기 편하게 하기 위함이다. 최대한 위치에 가깝게 넣어주었다. ( 돋보기가 맨 왼쪽에 위치해 있음) body 안에 있는 div 태그들 (4묶음)들에게 한꺼번에 설정을 주기 위해 전체를 감싸는 를 주었다. 굳이 body를 쓰지 않는 이유는 body보다 더.. 2022. 7. 21. 이전 1 ··· 13 14 15 16 17 다음 728x90 반응형
