Enjoy Programming

간만에 html tag 를 기록한다. 기존 개발시에 게이지 바 같은 폼을 만드려면 주로 input tag를 custom 해서 쓰거나 빈태그 두개를 css만 주고 채워질 게이지의 width만 prop으로 전달해서 눈속임의 게이지 바를 만들었었다. 오늘 새로운 태그를 하나 알게 되었는데 혁명이다... https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress - HTML: Hypertext Markup Language | MDN HTML 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다. developer.mozilla.org 바로 progress tag! 작업의 완료 정도를 value로 전달하고 max치만 조절 해주면 알아서..

프론트에서 비동기로 조회수를 올리기 코드를 짜는데 가물가물한 ajax를 리마인드 해본다. 우선 fetch를 이용해 내가 원하는 url을 가져오고 백엔드에서는 url의 video id를 보내주기위해 잠시 포스팅했던 data-attribute를 사용한다. data-attr를 이용해서 html에 데이터를 저장하고 프론트에서 그 정보를 가져오게 한다. 니코 왈 data-attr는 백엔드와 프론트간에 정보교환을 하는데 있어 가장 쉬운 방법이라고 한다. https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 데이터 속성 사용하기 - Web 개발 학습하기 | MDN HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 ..

기본적으로 클래스는 blueprint이다. 클래스는 화려한 object라고 한다. 먼저 클래스를 만들면서 이해해 보자. 클래스는 생성자(constructor)를 가지고 있다. User 라는 클래스를 만들고 constructor를 만들어 준다. this에 관한것은 차후 다루기로 하고 일단 class는 this도 가지고 있다. this.username 은 lee라고 명명해주고 console.log해주면 undefiend로 뜬다. 이제 할 일은 leeUser라는 User클래스의 instance를 생성해주겠다. 이렇게 instance를 생성해주고 나니 username에 대한 정보가 보인다. 그럼 instance는 무엇일까... 영어 사전을 보면 instance: 경우, 사례라고 뜬다. 직역해서 생각해보면 Use..

react 에서 component는 HTML을 반환하는 함수이다. 위 react.StrictMode라고 되어있는 태그형태안의 가 컴포넌트의 형태이다. App은 다른 자바스크립트 파일에서 만든 export된 function형태의 html을 반환하는 함수인 것이다. 반드시 HTML처럼 작성해야한다. 이렇게 처럼 자바스크립트와 html사이의 조합을 jsx라고 한다. react에서 나온 매우 custom한 유일한 개념이다. 자 새로운 컴포넌트를 한번 만들어보자. src 폴더에 BlueBerry라는 자바스크립트 파일을 하나 만들고 중요한 건 컴포넌트에는 반드시 react를 import해줘야 리액트가 인식 할 수있다. 안에 블루베리 함수를 하나 만들어 리턴해준다. 그리고 모듈을 export해주면 사용가능한 comp..

오늘은 나에게 휴식을 준날이다~ 요 몇일 하루 두~세시간 잤더니 머리도 멍하고 다리도 풀리는거 같고 ㅋㅋㅋ 휴식을 준 김에 우리 세 가족 가까운 바닷가 가서 모래 놀이도 하고 좀 쉬다 왔다 마냥 쉬긴 그래서 간단히 자바스크립트를 이용해서 시계를 만들어 보았다. 먼저 html은 초침 시침 분침으로 나눈 박스 그리고 전체를 감싸는 시계 테두리 박스 요렇게 구성되어있다 css는 특이점이라면 transform-origin인데~!~! transform-origin으로 시게바늘 세개의 시작점을 바꿔준? 것이다 이건css 포스팅에서 따로 다루자 자바스크립트는 우선 세계의 시계바늘이 될 태그를 쿼리셀렉터로 선택해주고 시간을 적용해줄 함수를 만든다. crretnDate에 new Date()로 시간을 담아주고 각각 get..

자바스크립트가 es6로 넘어오면서 기본값 함수 매개변수(default function parameter)를 사용하면 값이 없거나 undefined일 경우 이름 붙은 매개변수를 기본값으로 초기화 할 수 있게 되었다. mutiply라는 함수에 a, b 두개를 매개변수로 주고 함수를 실행시 인자가 하나만 들어가거나 아에 안들어가는 상황이 생기면 NaN이 리턴되었다 default값이 없었던 시절에는 저걸 해결할 방법이 있었나 모르겠지만 es6에서는 위처럼 a= 2, b= 3이라는 기본값을 주고 만약 인자가 정상적으로 두개가 들어온다면 들어온 인자값으로 return 구문을 실행하지만 만약 위처럼 5하나만 들어온다면 b의 default값인 3이 기본 인자로 전달 되어 5 * 3이 리턴된다. mdn을 살펴보자 jav..