즐코

쿠폰과 같이 사용자가 쿠폰 받기 버튼을 누름으로써 서버에서 응답으로 쿠폰을 받았을 때 그 후엔 쿠폰 버튼은 못누르게 막힌다. 이렇게 간단하게 생각하면 쉽지만 이때 미친듯이 클릭을 하면 요청이 여러 번가서 응답 또한 여러 번 오게 된다. 물론 서버 쪽에서 쿠폰과 같은 베네핏을 이미 한번 받은 사람은 못 받게끔 처리를 해놨겠지만, 클라이언트 단에선 성공 메시지와 실패 메시지를 여러 개 받는 케이스가 생길 수도 있기 때문에 이를 사전에 막아주는 게 사용자 경험 측면에서도 좋고 쓸데없는 요청을 보내는 걸 방지해주므로 서버 쪽에도 좋다고 생각한다. 아래 코드는 vue 기반의 코드이다. data는 상태를 정의하는 곳, methods는 한 컴포넌트에서 쓰는 함수를 정의하는 곳이다. 1. 최초 클릭 여부를 알려주는 f..

인풋창에 금액을 입력할 때 보통 천의 단위마다 콤마를 넣어주는 게 일반적이고 보기도 편하다. 목적 1/ 금액을 넣을 경우 숫자만 들어가게 하자 2/ 숫자를 넣을 때 천의 자리마다 콤마를 자동으로 넣어주자. 해결 과정 정규식에 익숙하지 않은 나.. 찾아서 아래와 같이 작성.. 1/ replace를 통해 숫자가 아닌 것들은 '' 공백으로 처리 2/ 두번째 정규식은 솔직히 이해가 안가서 공부를 해야할듯. 뭔가 3자리마다 콤마 로 대체해주는 느낌 ^^ (vue 관련 여담) 근데 해당 기능을 수정할때쯤은 vue 공부를 하기 전이라 watch를 썼는데.. 텍스트 형식을 포맷팅해서 렌더해야할 경우엔 아래 코드처럼 watch를 쓰는 것보단 computed가 낫다. 그리고 vue2에선 filters 라는 텍스트 포맷팅 ..

class 에 대해서 다시 짚고 넘어갈 필요할 것 같아 다시 개념정리를 해본다. 이 class는 객체지향적 프로그래밍과 관련있으므로 이 OOP도 한번 정리해본다. 객체지향적 프로그래밍 (OOP / Object-Oriented Programming) 1. 캡슐화 Encapsulation - 데이터와 그 데이터를 활용하는 함수를 한 캡슐, 컨테이너 안에 잘 정리하는 것을 의미한다. 여기서 그 캡슐 역할을 하는 게 class이며, 위에서 가리키는 데이터는 속성이고 그 속성을 쓰는 함수가 메소드이다. - 또한 캡슐화를 통해 공개할 데이터와 숨길 데이터에 대한 구분이 가능해진다. (public,protected,private 사용) ( https://yjleekr.tistory.com/73 : 타입스크립트 공부..

배열 메소드 예전부터 공부해야겠다 생각했는데 계속 미루다가 ㅎ 오늘 수업에서 배우게 되어서 정리해본다. 1/ forEach 배열 요소를 한개씩 꺼내면서 콜백함수 실행하기 / return값이 없다는 게 특징 (그래서 변수에 담는 게 안된다 ㅋ 변수에 담아서 출력해봤자 undefined 뜬다) 2/ filter 배열 요소 하나씩 꺼내서 조건문에 넣고, true인 값만 새로운 배열에 담아서 return 해준다. 3/ map 배열 요소를 하나씩 꺼내서 연산한 값을 새로운 배열에 담아서 return 해준다. 4/ reduce 배열 하나씩 돌면서 연산한 값 조합해서 return?!??!?! 초기값이 있냐 없냐에 따라서 반복횟수가 달라진다. .reduce(4개인자가진 콜백함수,초기값) 이전값 / 현재값 / 현재 인덱..

1. document.querySelector() 2. elementobj.addEventListener(event,function) 3. 콜백함수 HTML상의 button을 사용자가 눌렀을 때, 콘솔창에 클릭횟수와 메시지가 뜨도록 JS로 연결해보자 1. document.querySelector( ) 간단하다, 형태가 어디서 많이 봤다했더니 객체의 메소드를 불러올 때 썼던 syntax다! 객체.method( ) 즉, document라는 객체의 메서드 중에 querySelector를 쓰겠다는 뜻 이 객체메서드를 이해하기 위해서 하나하나 해석해본다. document : 문서 즉, 브라우저 상에서 HTML을 뜻한다! DOM / 즉 HTML문서를 파싱하여 객체화 시키고 HTML과 JS가 소통하게끔 인터페이스가 ..

DOM 이란? Document Object Model document인 html을 JavaScript가 이해할 수 있게, 컨트롤할 수 있게 object(객체)로 만들어 모델링 해주는 것 브라우저에 기본적으로 내장되어 있는 객체 즉, API다. API = Application Programming Interface 여기서 interface 란 말 자체가 프로그램 간의 소통, interact를 도와주는 의미가 묻어있다고 생각하면 쉽다. html 문서를 javascript와 상호작용하게끔 object 객체로 파싱하여 dom을 생성하는 것 this 객체 // 예약어에 가깝고, data type이 object이다 this = 이것, 여기.. => 뜻 그대로 사용하는 위치에 따라서 결과물이 달라진다. console..

배열 Array 1/ 배열 선언 (string - array) 2/ 배열의 반복문 3/ 더하고 빼고 복사하기 4/ 데이터 검색 배열 관련 method 공부를 미루다가 이제야 했다. method는 함수와 같이 데이터를 return하면서 데이터타입을 변형시켜주기도 한다. * 이런 API 공부는 키워드를 VSC에서 키워드를 치고 ctrl을 누른채 클릭하면 무슨 기능을 하는지, 어떤 인자들을 넣어야 하는지 자세히 설명이 나온다. 구글링도 좋은 방법이지만, 직관적으로 내장된 API 사용법을 보는 것도 좋다고 한다.. 1/ 배열 선언 #1. string을 array로 바꿔주는 방법 1. .split('separator') separator 구분자를 넣어주지 않으면 문자열이 뭉쳐서 4개 아니라 총 1개의 요소를 가진..

1. 깊은 복사 vs. 얕은 복사 2. 얕은 복사 연습해보기 다시 떠올려보는 비교연산자 https://yjleekr.tistory.com/17 Operators (연산자)에 대해서 - 1 1/ 증감 연산자 2/ 할당 연산자 3/ 논리 연산자 4/ 동등 연산자 연산자에 대해서 좀 더 공부해보았다. 산술/연결 연산자는 건너뛰고 헷갈리는 연산자에 대해서만 알아봄 1/ 증감 연산자 (Increment & dec yjleekr.tistory.com console.log({ } === { }) false가 출력된다. 왜냐하면 저번에 공부했던 object equality 에서 객체안에 같은 key:value값이 있어도 서로 다른 reference로 컴퓨터가 받아들이기 때문에 엄연히 따지면, 다른 아이들이다. 컴퓨터는..

1. 배열 array - property와 method 2. 객체 object 3. 익명함수 1. 배열 array 수많은 속성과 메소드가 있지만, 아직은 기초를 배우는 시기여서 우선은 속성 하나 메소드 하나만 배워보았다. 1/ 배열의 속성 중 하나인 length length : 배열의 길이 = 즉, 배열 안의 데이터 개수를 나타내준다. 2/ datatype 과 prototype array 자체를 출력하고 콘솔창에서 펼쳐보면, index# : value 이렇게 풀어서 볼수도 있는데, 어디서 많이 본 것 같다. => 객체 object의 형태와 같다! 즉, array는 데이터타입이 객체인 것이다. => 그렇기 때문에 객체의 속성 값을 불러올 때, 변수명.key 라는 키워드를 썼듯이, => length라는 속성..

1. 함수 (function) 2. 함수 (function) 의 사용법 1/ 함수 선언 2/ 함수 호출 3. Parameter 매개변수/인자에 대하여 4. Return에 대하여 **Return vs. console.log Function 개념 정리를 미루다미루다 이제야 써본다.. return이랑 console.log의 차이에서 좀 많이 헤맸다 ^^ 1. 함수(function) - JavaScript에서 이 function은 하나의 sub-program 역할을 한다고 보면 된다. - 프로그램이 input 을 받아서 잘 처리한 다음에 output을 내어주는 개념 - 바로 이 sub-program인 Function이 우리가 특정 task를 동일하게 반복 수행할 때, 우리가 반복적으로 코드를 적지 않아도 한 번..