일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- javascript
- grid-row-start
- createElement
- CSS
- grid-column-start
- className
- relative
- grid-template-areas
- css#cascading#display#block#inline
- classList
- variables
- prompt()
- border-style
- localStorage
- grid-column-end
- collapsing-margins
- React
- gird-row-end
- mongodb
- scope
- Grid
- box-shadow
- confirm()
- foreach()
- react-hook-form
- var
- python #qqplot #qq-plot #code
- valuable
- javascipt
- package.json
- Today
- Total
목록Front-end (51)
data life
프로토타입 1️⃣ 생성자 2️⃣ 프로토타입 3️⃣ 프로토타입 생성 4️⃣ 프로토타입 체인 1️⃣ 생성자 생성자란? - 객체를 생성하는 함수 - 함수명의 첫글자는 대문자 - new / this 키워드를 이용한다. 변수타입 변수명 = new 생성자함수(); 구조를 정해놓을 수 있어서 편리하며 생성자 하나로 여러 객체 생성이 가능합니다. const Info(name, age){ this.name = name; this.age = age; } var info1 = new Info("사람1", 20); var info2 = new Info("사람2", 21); var info3 = new Info("사람3", 22); 2️⃣ 프로토타입 프로토타입(prototype)이란? - 어떠한 객체가 만들어지기 위한 객체의 ..
Fetch promise기반으로 구성 자바스크립트의 기본 기능으로 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. Ajax와 같이 비동기적 방식으로 정보를 가져올 수 있다. 그렇다면 fetch 기본 문법에 대해서 알아보도록 하자 fetch(url, option) .then(res=>res.text()) .then(text=>console.log(text)); ✔️ url : 요청할 url ✔️option - http method, headers, body 정의 - default GET 방식 http 상태는 응답 프로퍼티를 사용해서 확인이 가능하다 status : HTTP 상태 코드 ok : HTTP 상태 코드가 200~299 사이일 경우 true 반환 let response = ..
HTTP Hyper Text Transfer Protocol로 텍스트 기반의 통신 규약 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜 웹에서 이루어지는 모든 데이터 교환의 기초 클라이언트-서버 프로토콜이라고도 한다. 클라이언트-서버 프로토콜 '클라이언트'는 사용자를 대신해서 동작하는 도구로 브라우저에 의해 수행되는데 이때, 브라우저는 항상 요청을 보내주는 개체로써 사용자에게 웹페이지를 표시해줍니다. 클라이언트에 의한 요청에 대한 문서를 제공해주는 '서버'가 존재하며 웹 브라우저와 서버 사이에는 여러 계층으로 이루어져있는데 그 중 애플리케이션 계층에서 동작하는 것들을 일반적으로 프록시(proxy)라고 합니다. * Https : Http를 ssl로 암호화한 것 웹 동작원리는 크게 다음과 ..
스코프(Scope) 1️⃣ 전역 스코프 vs 전역 스코프 2️⃣ 전역 객체 3️⃣ 호이스팅 4️⃣ IIFE 1️⃣ 전역 스코프 vs 전역 스코프 전역 스코프 (Global Scope) let foo = 'foo'; { console.log(foo); //foo } function func(){ console.log(foo); //foo } if (true) { console.log(foo); //foo } 어디서나 쓸 수 있지만 동작 결과는 예측하기 어렵다 즉, 전역 스코프의 큰 단점은 런타임 시점(프로그래밍 실행시점)을 알지 못한다는 것 지역 스코프 (Local Scope) - 함수 스코프 - 블록 스코프 { } var let const 전역 스코프 ⭕️ ❌ ❌ 함수 스코프 ⭕️ ⭕️ ⭕️ 블록 스코프..
setTimeout() 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행하도록 도와주는 함수입니다. - 첫번째 인자 : 실행할 코드 - 두번째 인자 : 지연 시간(ms) setTimeout(() => console.log("5초 후에 실행됨"), 5000); 예시로 5초 후에 위와 같은 문자열을 콘솔에 출력해보는 setTimeout()함수를 작성하였습니다. 추가로 setTimeout() 함수는 세번째 인자로 가변 인자를 받는데요. 첫번째 인자로 받은 실행코드 함수에 들어갈 인자를 명시해주기 위해서 사용합니다. 두 개의 수(num1, num2)를 인자로 받아 더한 값을 출력해주는 sum() 함수에 인자로 3과 4를 넘겨 5초를 기다린 후에 호출해보겠습니다. const sum(num1, num2) { c..
함수 (Function) 1️⃣ 함수 선언과 표현식 2️⃣ 인수(arguments)와 전달 방식 3️⃣ 매개변수(parameters) 4️⃣ 화살표 함수 (arrow function) 5️⃣ 내부 함수 1️⃣ 함수 선언과 표현식 ❓ 함수란? - 어떠한 기능(function)을 코드로 표현한 집합 - 독립적으로 설계되어 있다. - 반복적인 코드 작성 피할 수 있다. (코드 간결화) - 쉬운 유지보수 함수 호출 (function call) // 함수 선언 function sum(num1, num2){ return num1 + num2; } // 함수 호출 sum(1,2) 2️⃣ 인수(arguments)와 전달 방식 ❓ 인수란? - 함수 호출 시에 전달하는 값 또는 데이터 // 함수 선언 function su..
Pagination GET /posts?_page=7 GET /posts?_page=7&_limit=20 //20개씩 나뉜 데이터에서 페이지7을 가져오라는 의미 >> 만일 limit이 존재하지 않을 경우 기본값(default)는 10임 currentPage: 현재 페이지 totalCount: 총 데이터의 갯수 pageCount: 화면에 나타날 페이지 갯수 limit: 한 페이지 당 나타낼 데이터의 갯수 ✅ 총 페이지 갯수 계산하기 //총 페이지 갯수 계산하기 let totalPage = Math.ceil(totalCount / limit) 예시 > const totalCount = 53 const limit = 5 let totalPage = Math.ceil(totalCount / limit) // 1..
json-server 란? 사실 우리가 무엇인가 개발하기 위해서는 백엔드의 구현이 필요합니다. 프론트엔드 개발자들에게 있어서 직접 백엔드 기능을 구현하는 것은 상당한 시간이 걸리기 때문에 짧은 시간에 가짜 API 서버를 구축해줄 도구인 json-sever를 이용해보도록 하겠습니다. npm을 통해 설치 가능하며 이름과 같이 json 파일 하나로 연습용 서버를 쉽게 구성 할 수 있으나 실제 프로덕션에서 사용하지는 않기 때문에 이 서버를 이용해서 실제 프로젝트를 개발 하면 안된다는 점!!! 유의바랍니다. 실제 프로젝트 개발 시에는 백엔드 공부를 통해 서버를 직접 준비하거나 Firebase 를 사용해서 구현을 하도록 합시다! json-server 설치 npm install -g json-server db.jso..
let user = { name : "홍길동", age : 20, } let newUser = user; 위와 같이 user 이름을 가진 객체를 가져와 새로운 객체를 생성하기 위해 복사를 진행해보도록 하자. 만일, 위의 데이터 값을 변경해주면 기존의 객체는 그대로일까? newUser.age = 30; console.log(newUser.age) //30 console.log(user.age) //30 기존 객체도 새로운 객체와 동시에 변경된 것을 확인할 수 있다. 이러한 문제점이 일어난 이유에 대해 알아보도록 하겠다. 자바스크립트 변수의 개념과 마찬가지로 객체는 전체를 복사하는 것이 아니라 객체 내의 주소값만 복사하기 때문에 문제점이 발생할 수 밖에 없다. 이를 해결하기 위해 '얕은 복사' 와 '깊은 복..
배열 (Array) 1️⃣ 배열의 특성 2️⃣ length 3️⃣ 배열 순회 4️⃣ 배열 다루기 5️⃣ 배열 고차 함수로 조작 6️⃣ 배열 요소 정렬 4️⃣ 배열 다루기 const members = ['기훈', '상우', '일남', '준호', '새벽', '알리']; - 배열 끝에 요소 추가 .push() members.push('덕수'); //['기훈', '상우', '일남', '준호', '새벽', '알리', '덕수'] - 배열 앞에 요소 추가 .unshift() members.unshift('미녀'); //['미녀', '기훈', '상우', '일남', '준호', '새벽', '알리', '덕수'] - 배열 요소 인덱스 찾기 .indexOf() members.indexOf('상우') // 2 members.in..