모든 컴포넌트는 Lifecylce을 갖고 있습니다. 몇몇 함수를 통해 Lifecycle마다 실행할 코드를 작성할 수 있습니다.onMount는 컴포넌트가 DOM에 처음 랜더된 후 넘겨진 콜백함수를 실행합니다.Data를 fetch할 때 Server-Side-Renderin

Svelte에서 데이터 흐름이 보통 Top-Down으로 부모 컴포넌트가 자식 컴포넌트에게 props로 데이터를 넘겨주는 방식인데, bind를 통해 다른 데이터 흐름을 구현할 수 있습니다.이런 코드에서 name의 변화에 따라 input의 내용이 변하게 됩니다. (App

Svelte에서 Event를 어떻게 사용할 수 있는지 알아봅니다.앞에서 얘기했듯 on:을 통해 이벤트를 처리할 수 있습니니다.on:뒤에 HTML Element에 추가하고 싶은 이벤트 핸들러의 이름을 지정해주고 함수를 넣어줍니다.5-1의 예제의 함수를 inline에서도

원래 HTML에서 조건문이나 반복문같은 Logic을 표현할 수 없지만, Svelte에서는 가능합니다.위의 예시처럼 {2. HTML에서 if문을 활용해서 조건부 랜더링을 할 수 있습니다.반복문으로 List의 Data를 보여주고 싶을 때, HTML에서 each\` bloc

그동안 주어진 컴포넌트 안에서만 사용 가능한 내부 변수만 다뤘는데 'props'로 외부에서 데이터를 받아서 사용할 수 있습니다.export를 통해 외부에서 받아올 props를 선언할 수 있습니다.사실 JS에서는 export를 이런식으로 사용하지는 않습니다.export할

2. Reactivity 2-1. Assignments Svelte의 핵심은 이벤트에 반응하는 것처럼 DOM과 변수의 동기화 상태를 유지하기 위한 강력한 반응형 시스템입니다. 위의 코드처럼 Svelte는 DOM이 업데이트해야 함을 알려주는 코드를 갖고 이 할당을 수행

Svelte를 사용할 일이 생겨서 학습을 위해 Svelte 공식 사이트의 Tutorial을 진행하면서 학습한 내용을 정리한 시리즈 입니다.이런 식으로 공식 사이트 옆에 학습하면서 실습해볼 수 있는 좋은 환경이 구성되어 있지만 내가 글을 쓰면서 한번 더 기억하기 위한 글

커머스 프로젝트에서 버튼에 중복 클릭을 방지하는 기능이 없다는 것을 깨달았다.특히 API를 호출할 때는 중복 클릭을 방지하는 것이 필요하겠다 생각이 들어서 React에서는 어떻게 중복 클릭 방지 기능을 구현하는지 알아보고 직접 구현해보았다.일반적인 방식으로 Flag를

Introduce 전에 Next로 구현했던 커머스 프로젝트에서 에러 페이지를 설정하지 않았다는 것을 알게되었다. 그래서 Next에서는 어떻게

n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 1, 1, 1, 1, 1로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다.사용할 수 있는 숫자가 담긴 배열 numbers, 타겟

수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ...2번 수포자가 찍는

최소 직사각형 문제설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로 길

프로그래머스 고득점 Kit - 정렬 문제집 중 H-Index 문제

진행하던 프론트엔드 프로젝트의 백엔드 지원을 받을 수 없게 되어서 다른 분이 제작했던 백엔드가 Django를 사용한다고 알고있어서 나도 Django를 사용해서 백엔드를 구현해보기로 마음먹었다. 라이브러리 Django에서는 RESTful API를 쉽게 구축할 수 있도

가상환경을 설정하기 위해 pipenv를 설치하고 실행했더니 오류가 났다.구글링을 해봤더니 virtualenv와 pipenv가 버전 충돌이 나서 그런거고 재설치하면 될거라고 했다. 그런데도 해결이 되지 않았다.왜그럴까 생각해봤는데 pip install을 하던 중 경고 에

클로저는 자바스크립트의 문법이 아니라 함수형 프로그래밍 언어에서 등장하는 어떤 특성입니다. 그래서 ECMASCript 명세에서도 클로저의 정의를 다루지 않으며 여러 곳에서 클로저를 다양하게 설명하고 있습니다.MDN에서는 클로저에 대해라고 설명하는데, 직역해보면 클로저는

개발하기에 앞서 디자인도 없이 무턱대고 개발하면 방향을 잡기 어려울 것 같아서 Figma로 간단하게 디자인을 했다. 할 일 리스트를 보여주는 페이지와 할 일을 추가하는 페이지로 구성해봤다.할 일 아이템은 제목과 아래에 간단하게 설명 할 부가설명, 시작시간과 끝나는시간,

Q. 콜백 지옥이 뭐에요? 콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기가 계속되는 현상으로 주로 비동기적인 작업을 수행할 때 자주 등장하는데, 가독성도 떨어지고 코드를 수정하기도 어렵습니다. 위 코드는 0.5초마다 커피 목록을 수집하

리액트 강의를 듣다보니 예제만으로 공부하기에는 너무 한정적인 실습이라 개념들을 내가 잘 알고 넘어갔는지 어려웠고 수동적으로만 하게되어서 아쉬웠다. 그래서 토이프로젝트를 해봐야겠다 했는데 그 중 만만한게 To Do List라 들어서 To Do List를 만들기로 결정했다

 화살표 함수란 ES6에 새롭게 도입된 함수 표현 방식입니다. 화살표 함수를 사용하는 이유는 두 가지를 꼽을 수 있는데코드 간소화 위의 코드는 원소이름을 요소로 갖고있는 배열에서 원소이름의 길이를 담은 배열을 리턴하는 코드를 화살표 함수를 통해 줄이는 과정을 보여줍니다