우당탕탕

Array arr.splice(n, m) : 특정 요소 지움 arr.splice(n, m, x) : 특정 요소 지우고 추가 arr.splice() : 삭제된 요소를 반환한다. let arr = [1,2,3,4,5]; ler result = arr.splice(1,2); console.log(arr); //[1,4,5] console.log(result); //[2,3] arr.slice(n, m) : n부터 m까지 반환. m은 포함하지 않고 바로 앞자리를 의미한다. 만일 숫자를 쓰지 않는다면 배열 끝까지를 의미한다. arr.concat(arr2, arr3 ..) : 합쳐서 새배열 반환 arr.forEach(fn) : 배열반복. 함수를 인수로 받는다. 보통 첫번째와 두번째까지만 사용한다. let users..

유트브 코딩앙마 강의를 보고 작성한 글입니다. Symbol const a = Symbol(); //new를 붙이지 않는다. 객체 property key는 문자형과 symbol형으로 나타내는것이 가능하다. 심볼은 유일한 식별자를 만들때 사용한다. const a = Symbol(); const b = Symbol(); console.log(a) //Symbol() console.log(b) //Symbol() 둘다 같은 Symbol()로 보이지만 일치연산자(a === b; false, a == b; false)를 했을때 다르게 나온다. Symbol은 '유일성'을 보장한다. property key 심볼형 const id = Symbol('id'); const user = { name : 'Mike', age ..

유튜브 코딩앙마를 기반으로 쓰여진 글입니다. 생성자 함수 객체리터럴 let user = { name : 'Mike', age : 30 } 비슷한 객체를 여러개 만들어야하는 상황이 생긴다. 회원이나 상품등등 일때. 이럴때 생성자 함수를 쓴다. 생성자 함수는 보통 첫글자를 대문자로 만들어준다. 생성자 함수. (User라는 함수를 만들고 name과 age를 인자로 받아준다. ) funciton User(name, age){ this.game = name; this.age = age; } let user1 = new User('Mike', 30); let user2 = new User('Jane', 22); let user3 = new User('Tom', 17); new 연산자로 이용해서 호출한다. 이렇게 비..

기본기 너무 부족해서 javascript공부해야지 했는데 고맙게도 스터디가 결성되어 시작하는 공부 (이 글의 내용은 유튜브 코딩앙마의 영상을 보고 정리한것입니다.) 변수 var let const var는 한번 선언된 변수를 다시 선언할 수 있다. 또한 선언하기 전에 사용이 가능하다. var, let은 비슷한데 다른것을 아래에서 알아보자. var는 한번 선언된 변수를 다시 선언할 수 있다. var name = 'Mike'; console.log(name); //Mike var name = 'Jane'; console.log(name); //Jane 참고) 같은 상황에서 let은 오류가 뜬다. 또한 var는 선언하기 전에 사용가능 var name; console.log(name); name = ‘Mike’;..

유데미 강의를 바탕으로 정리한 글이며, 한글이 어색한경우는 괄호에 영어표현을 넣었다. + 부족한 부분들은 구글링하여 추가하였다. MVC Model View Controller의 약자. Model : 객체나 데이터를 나타내는 코드의 한부분. 데이터를 저장하거나 파일로부터 데이터를 주고받는 등. 데이터 관련 작업을(saving, fetching..etc) 할 수 있도록한다. View: 사용자가 보게 되는 화면을 책임진다. html 자료에 올바른 내용을 렌더링해서 사용자에게 보내는 역할을 한다. 애플리케이션 코드와 분리되어있으며 view를 생성하기 위해서 템플릿 엔진에 주입하는 데이터와 약간만 통합되어있다. Controllers: Model과 View사이의 연결점이다. view는 애플리케이션 논리와 상관이 없..

Embedded JavaScript, ejs는 자바스크립트가 내장되어있는 html 파일이다. html의 태그처럼 자바스크립트 내용을 삽입할 수 있다. 따라서 새싹에서 공부할때도 ejs로 배웠다. 또한 ejs는 서버에서 보낸 변수를 가져와서 사용할 수 있다. 0) { %> My Products List of all the products... No Product Found! 직접 값을 출력한다면 , 그리고 값을 직접 출력하지 않는다면 으로 =없이 사용한다. 또한 pug와 달리 완전한 html구문을 사용하고, vanilla js처럼 if문도 필요시 사용할 수 있다. { }괄호를 ejs문을 안에 넣어주면 된다. (위의 코드 참고.) 다른거에비해 짧았는데, html의 연장선이라는 느낌이라서 사용하기에 어렵지 않..

면접을 다녀왔고, 이론들에대해서 정리하고 머릿속에 정립하는시간이 필요함을 느꼈다. 공부를 진행하면서 복습을 하고, 그걸 바탕으로 글을 작성하고자한다. HTTP 메서드 1. 클라이언트와 서버와의 관계 : 서버와 클라이언트가 소통을 하기 위해서 보통 http를 사용한다. 2. REST(Reepresentational State Transfer) : 자원(Resource) - URL / 행위(Verb) : HTTP Method / 표현(Representiations) HTTP가 설계의 우수성에 비해 제대로 사용되지 못하자, 활용가능한 아키텍처로 rest발표함. REST를 지키면서 행위를 전달하는 방법이라 생각하면 된다. 3. 주요 method 정리 GET : 리소스를 조회할때 사용. query를 사용해서 서버..

Component 종류 ⊙ 함수형 component : 짧고 직관적이다. vanilla js 와 같은 기본적인 function 구조를 이용해 직관적이며 추상적이다. 메모리 자원을 덜 사용한다. ⊙ 클래스형 component : State와 라이프 사이클 기능 이용가능하다. Render함수 필수이다. 클래스형 component 구조 암기해주자 render하는 함수는 무조건 사용한다. 그안에 있는 함수를 return하는 것이기 때문이다. import React, { Component } from 'react'; class ClassComponent extends Component { render() { return( ClassComponent ); } } export default ClassComponent..

이 글은 코딩온의 김규리선생님의 수업을 바탕으로 작성하였습니다. React JS 동적사용자 인터페이스를 만들기 위해서 페이스북에서 나온것이다. 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합하다. 화면을 만들기위한 자바스크립트 라이브러리이며, 싱글페이지 어플리케이션이나 모바일 어플리케이션 개발시 많이 사용된다. 사용자와 상호 작용이 가능한 동적 UI 제작이 가능하다. react외에도 angular와 vue.js도 있다. 그중 react.js 에대해서 배우게 되었다. vue.js가 쉽다고하지만 레퍼런스를 찾기 쉽지 않고, 아직도 react가 더 많이 쓰이기 때문이다 참고로 react는 library이고 next는 react를 기반으로 하는 프레임워크이다. React특징 1. Date Flow 2..

Dynamic content & Templates - Rendering more than Static HTML 요청, 및 사용자 간의 데이터 공유 submit시 사용자가 입력한 키 title과 값이 있는 객체가 나온다. 이 객체를 어떻게 저장할 것인가. //상수이긴하나, 배열자체는 같은 객체이기에 새로운 요소를 받을 수 있다. const products = []; // /admin/add-product => POST router.post('/add-product', (req, res, next) => { products.push({ title: req.body.title }); res.redirect('/'); }); //products배열을 내보내는 것이다. exports.products = produ..