HTML 파일 안에서 선언된 값이다.ex) 여기서 id 값이 container로 되어있는데, 이 것이 어트리뷰트이다.DOM안에서 가지고 있는 값이다.어트리뷰트의 경우 HTML에 적혀있는 값이라 변경할 수 없지만,프로퍼티는 DOM안의 값이기 때문에 변경할 수 있다.예를들

오랜만에 React가 아닌 Vanilla JS 프로젝트를 하면서기능 구현에만 집중하는 것보다 디자인 패턴에 대해 공부하고 만들어 보는 것을 목표로 삼았다.MVC, MVP, MVVM 등 다양한 패턴이 있는데 글로 적힌 설명을 봐도 잘 와닿지 않았다.그래서 Js를 배울때

갑작스럽게 Jest를 사용할 일이 생겼다.급하게 공부하며 적용한 내용을 정리해 보았다. (설명 추가 예정)jest와 babel-jest를 함께 설치한다.jest로 테스트할 때 ES6이상의 문법을 사용하기 위해선 babel의 도움이 필요하다.(babel 처리를 하지 않으

얼마전 VanillaJS로 IE10까지 지원하는 작은 프로젝트를 진행했다.처음에는 웹팩과 바벨이 IE 지원에 대한 모든것을 해결해 줄것이라고 생각했다.그래서 마음 편하게 코드를 짜고 있었는데...작업 중간에 IE 테스트를 해보니 fetch가 동작하지 않았다.분명 bab

모든 블럭을 체크하여 0인 경우 상하좌우 네 방향으로 재귀 함수를 돌려 1 값으로 만든다.이렇게 처리한 후 결과 값을 하나씩 올린다.단 없는 좌표일 경우와 이미 1인 경우 바로 리턴한다.

만약 아래 두 코드의 차이점을 답 할 수 있다면 제대로 useSelector를 사용하고 있는 것이다.코드1코드2코드 1과 2의 차이는 useSelector를 한 번 사용했지 여러번 사용했는지의 차이가 있다.위 코드를 실행시키면 결과는 똑같이 출려된다.그럼 어떠한 차이가

처음 내 욕심은 D3를 이용하여 직접 구현하는 것이었다.정확히는 html, css, js만으로 구현하려다 실패하고 D3를 활용하여 만드려고 했다.다행히 캔들 차트를 만드는데 성공했으나 차트를 좌우로 움직이거나 확대/축소 기능을 만들지 못했다.그래서 타협을 좀 해서 D3

결제 기능을 구현할 때, 나는 사업자가 아니기 때문에 PG사에 신청하여 결제 테스트 모듈을 쓸 수 없었다.따라서 부트페이나 아임포트같은 서비스를 이용해야 했다.두 서비스 모두 문서화가 잘 돼있었다.다만 결제기능은 BammPlayer를 만들 당시 예정되어있던 기능이 아니

React를 공부할 때 중요하게 배우는 개념 중 하나는 상태관리다.React는 상태를 바탕으로 View를 그리기 때문에 일반 변수로 사용하지 않고 setState로 상태를 할당한다고 배운다.하지만 JavaScript를 공부할 때 처럼 console.log로 상태 변화를

스마트폰이 생긴 이후, 모바일 웹 수요가 늘어났다.처음에는 모바일용 웹페이지를 따로 만들었지만 점차 반응형이라는 개념이 생겼고 결국 하나의 웹사이트로 모든 경우를 대응할 수 있는 반응형이 대세가 되었다.구글은 모바일 친화적인 웹사이트에 SEO 우선순위를 더 주기 떄문에

git을 처음 배웠을 때, 커밋을 어떻게 나눠야 할지 난감했다.그런데 나만 그런게 아닌 모양이다.커밋 단위에 대한 견해는 사람마다 다른것 같다.소스 커밋 시점은 언제가 바람직하나요?나는 커밋 단위를 최대한 작게 나누기로 마음먹고 실천하고 있다.그 이유는 다음과 같다.혹

프로젝트의 끝은 배포!배포를 하려면 서버를 사용해야 하는데, 요즘에는 클라우드 서비스를 많이 이용한다.그래서 어떤 클라우드 서비스를 선택할지 비교해보았다.AWS 클라우드 플랫폼 3사 완벽 비교나에게 가장 중요한 것은 학습 자료가 많은지, 무료 제공 서비스가 많은지,

현재 많은 웹이 JS 프레임워크를 이용하여 개발된다.SPA의 다양한 장점이 부각되면서 이러한 현상이 생겼는데,JS 프레임워크 3대장 중 어떠한 것을 학습할지 비교하며 고민해봤다.참고자료React: 3가지 중 중간 수준의 러닝커브Angular : TypeScript 등의

선택 정렬(selection sort)은 배열의 최소값을 검색하여 배열의 왼쪽부터 순차적으로 정렬을 반복하는 정렬 알고리즘이다.배열이 미정렬 상태이므로 최소값 검색에는 이진 검색이 아닌 선형 검색 알고리즘을 사용한다.선택 정렬은 버블 정렬보다 빠르다.시간 복잡도: O(

yarn 전역 설치https://create-react-app.dev/git 초기 설정도 자동으로 해줌단 git 설정이 되어 있는 폴더에서 실행시 깃 설정 안함3000번 포트로 개발 서버를 열고 리엑트 코드를 번들링(최적화) 하기 전에 바로 띄워서 확인 할 수

기존 블로그에 작성한 내용을 velog로 이전한 글입니다HTML 문서를 표현하는 트리 자료구조HTML 구조를 제어할 수 있는 APIHTML을 구성하는 개별적인 요소문서 노드 : document 객체, HTML당 유일함.요소 노드 : HTML 요소를 가리키는 객체.어트리

기존 블로그에 작성한 내용을 velog로 이전한 글입니다Set 객체: 중복되지 않는 유일한 값들의 집합Map 객체: 중복되지 않는 키, 중복 가능한 값의 쌍으로 이루어진 컬렉션다음과 같이 교집합을 구할 수 있다.다음과 같이 합집합을 구현할 수 있다.차집합(A-B)은 집

기존 블로그에 작성한 내용을 velog로 이전한 글입니다HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.랜더링 과정주소창에 URL 입력서버에서 주소/index.html 응답HTML 파싱 시작, HTML DOM 생성HT

기존 블로그에 작성한 내용을 velog로 이전한 글입니다아래 배열을 사용하여 html을 생성하는 함수를 작성하라.해답:요소의 프로퍼티(id, content, completed)를 문자열 인수로 전달하면 todos의 각 요소 중, 해당 프로퍼티의 값만을 추출한 배열을 반

기존 블로그에 작성한 내용을 velog로 이전한 글입니다하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것.값을 만드는게 아니기 때문에 변수에 할당할 수 없다.따라서 단독으로 사용될 수 없고 다음과 같이 사용될 수 있다.함수 호출문의 인수