전체 150

[Python] 프로그래머스 Lv2 오픈 채팅방

풀이 def solution(record): answer = [] user_data = {} for i in record: temp = i.split() command = temp[0] if command == 'Enter' or command == 'Change': user_data[temp[1]] = temp[2] for i in record: temp = i.split() command = temp[0] if command == 'Enter': answer.append(f'{user_data[temp[1]]}님이 들어왔습니다.') elif command == 'Leave': answer.append(f'{user_data[temp[1]]}님이 나갔습니다.') return answer # 1. 아이디..

개발/PS 2021.12.31

[HTML , JS] data- 속성을 이용해 (기본 event로) 처리하기

HTML의 태그에는 data- 라는 속성이 존재한다. 이는 미리 선언해두면 함수의 기본 event 인자에서 뽑아 쓸 수 있는데 데이터를 선별할 때 사용할 수가 있다. 먼저 속성의 선언을 살펴보자 // data- 이후에 key는 임의로 정한것 이렇게 선언해두면 JS에서 함수의 기본 event로 불러올 수 있다. event.target.dataset 안에 들어있고 (임의의 이름)으로 data 속성의 값을 가지고 올 수 있다. ​ 다음은 배열에서 선별을 위한 함수이다. function onButtonClick(event, items) { const dataset = event.target.dataset; const key = dataset.key; const value = dataset.value; if (k..

개발/Web 2021.12.31

[JS] async 와 await

async async는 promise 처럼 함수를 만들어준다. // 1. async 사용하기 // promise 라면! function a(){ // 데이터를 받아오는데 시간이 걸리는 함수. // promise라면 return new Promise((resolve, reject) => { resolve("a"); }) } const exA = a(); // async나 promise를 사용하지 않으면 여기서 시간을 잡아먹는다. console.log(exA); // ---------------------------------------------------------------- // async 라면! // 함수 앞에 async를 붙인다. 그러면 함수 안의 내용을 promise로 바꿔준다. async fu..

개발/Web 2021.12.31

[JS] 비동기 처리 promise( )

promise는 동작을 비동기적으로 처리할 수 있도록 도와주는 역할을 한다. promise를 사용할 때는 producer 와 consumer로 나뉘는데 먼저 producer를 만들어보자. // promise는 클래스로 new를 이용해 선언해 사용할 수 있다. const ex1 = new promise((resolve, reject) => { // 콜백함수로 성공과 실패시의 함수를 인자로 전달한다. // 이 부분은 바로 실행 resolve(value); // 성공시 reject(new Error(“에러 메세지”)); // 실패시 }) consumer는 값을 받아오는데 then / catch / finally를 이용해 받아올 수 있다. // ex1이 정상적으로 수행된다면~ 이라는 뜻의 then // chai..

개발/Web 2021.12.31

[JS] 자바스크립트에서의 class - get, set, 상속

CLASS 자바 스크립트에서 class라는 object를 사용할 수 있는데 유효성 검사를 위해 get과 set을 사용하게 된다. 이 부분은 c++의 class와 유사하다고 생각된다. class User{ constructor(P1,P2,P3){ // 생성자를 이용해 class에 값 할당이 가능하다. } // 예를 들어 c의 유효성 검사를 위해 get, set 키워드를 사용한다. get c(){ return this._c; // 언더바를 사용하는 이유는 계속해서 자신을 부르기 때문이다. } set c(value){ if(value < 0 ){ // value가 0보다 작으면 에러 메세지를 출력하고 싶음. throw Error(“0보다 큰 값이 아닙니다.”) } this._c = value; } } 상속 e..

개발/Web 2021.12.31

[JS] hoisting과 var let const

Hoisting hoisting은 변수를 선언하기 전에 사용하고 후에 변수를 선언해도 순서상 변수 선언을 위로 끌어올리는 것을 말한다. 간단하지만 중요한 개념이니 꼭 알고 넘어가야 한다고 생각한다. a = 10; consoel.log(a); // 10 let a =0 이런게 가능하다는 것 호이스팅은 함수에서도 일어난다. ​ var VS let​ 전에는 var만 사용했지만 let을 사용하는 것이 코드에 더 좋다. 그 이유는 아래에서 설명되지만 코드를 더 정확히 짤 수있기 때문이다. 지금까지 var를 사용했던 곳이 많은 만큼 두가지 모두 잘 알 필요가 있다. var는 {block scope}를 무시하고 변수를 사용 할 수 있다. let은 { } 안에서 선언되어 진 것은 밖에서 볼 수 없다는 특징을 가지고 있..

개발/Web 2021.12.31

[JS] "use strict"; 와 async,defer 자바 스크립트의 효율성

"use strict"; "use strict";은 자바 스크립트를 작성할 때 가장 먼저 작성해주면 좋다. 선언하지 않은 변수를 사용하는 것과 같이 다른 언어에서는 비상식적인 코드를 제어하는 역할을 하고 더 효율적인 작동을 하도록 해준다. “use strict”; // 이렇게만 선언해주고 하던대로 하면 된다. // c++ 에서 # progma once 하는 것 처럼 사용 async 와 defer - html 에서 자바스크립트를 불러오는 방법 이렇게 선언하면 js를 병렬적으로 fetch하고 html parsing이 끝난 후에 js를 실행시켜 속도도 빠르고 오류도 없다. 그냥 태그에 넣고 defer 옵션 주자.

개발/Web 2021.12.31

[JS] JSON.stringify() 와 JSON.parse()

localStorage는 배열을 저장할 수 없다. 그래서 string으로 만들어 저장하고 그 string을 다시 배열로 변환해 사용해야 하는데 그 역할을 이 두 내장 함수가 아주 쉽게 하도록 도와주는 역할을 한다. JSON.stringify() 먼저 JSON.stringify()는 배열을 string으로 변환해 주는 역할을 한다. localStorage.setItem(KEY, JSON.stringify(VALUE)); // 배열 모양의 string이 저장됨. => ['a', 'b', 'c'] 자체의 string value가 배열이라면 이런 식으로 저장할 수 있다. 하지만 localStorage.getItem(Key);처럼 사용한다면 배열을 다시 사용할 수 없는 문제가 있다. 그래서 사용하는 것이 다음과 ..

개발/Web 2021.12.31

[JS] createElement 와 appendChild + 속성 꿀팁

노드 추가 createElement는 요소를 만드는 메서드이고 appendChild는 요소를 연결해주는 메서드이다. 아래 예시 통해 보자 img 태그를 html에 추가하고 싶다면 다음과 같다. const image = document.createElement("img"); document.body.appendChild(image); 하지만 img엔 src와 alt 등의 값이 필요한데 이는 원래 다음과 같지만 const imgSrc = document.createAttribute("src"); imgSrc.value = `./~` ; 더 간단한 방법이 있다. imgSrc.src = `이미지 주소`; 같은 방식으로 가능하다. 그리고 div 나 p 태그 같은 경우는 text 내용이 필요한데 이는 const a..

개발/Web 2021.12.31