본문 바로가기

전체 글58

Input을 구현하는 다양한 방법(Input, Textarea, ContentEditable) (프로젝트 앞광고) https://mandalart.ddongule.com/ 이번에 만다라트라는 작은 프로젝트를 사브작 사브작 만들면서 사용자 입력을 받는 Input에 대한 고민을 하게 되었다. 내가 원래 만들고자 한 내용은 아래와 같은 모양이었다. 1. 정사각형 모양 (contentEditable, Textarea, Input) 2. 글씨가 vertically, horizontally centered (contentEditable, Input) / Textarea도 가능하긴 한 것 같은데 아직 답을 찾지 못했다ㅠ 3. multi line이 가능 (contentEditable, Textarea) 처음에는 단순히 Input으로 구현했지만, 내가 원하는 multi line을 만드려면 textarea로 바꾸어.. 2021. 5. 10.
Javascript This This란 무엇일까!? 1. This가 나온 이유 객체는 State를 나타내는 property와 behavior를 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 그니까 현재 나의 '상태'와 그 '상태'를 바꿔줄 수 있는 '행동'을 함께 가지고 있다고 이해하면 된다. 동작, 즉 behavior를 나타내는 메서드는 자신이 속한 객체의 Status, 즉 property를 참조하고 변경해줄 수 있어야 한다. '행동'이 '상태'를 변경할 수 있어야 한다는 거다! 보통 객체 리터럴 방식으로 생성한 객체의 경우, 내부 메서드에서 자신이 속한 객체를 가리키는 변수를 재귀적으로 사용할 수 있다. 아래와 같이 circle을 circle 내부에서 사용할 수 있다는 것이다. const circle = {.. 2021. 4. 27.
Create React App(CRA) 없이 React 시작하기 보통 처음 React App을 시작하려고 하면, Create React App(CRA)을 많이 사용한다. 귀찮은 설정들 없이도 CRA를 사용하면 React에만 집중해 개발할 수 있기 때문이다. 하지만 CRA 없이도 React를 사용해 Application을 충분히 잘 만들 수 있다. 약간의 노력이 더 들어가면 ^^.. 되니깐.. 어차피 사용할 꺼 내부가 어떻게 돌아가고 있는지 한번 확인하고싶을 때 이렇게 만들어 보는 것도 좋은 것 같다. 그리고 CRA는 우리가 사용하지 않는 모듈들도 많이 담고 있기 때문에, 앱 자체가 무거워진다는 단점이 있다. 그래서 Snowpack 같은 가벼운 빌드 도구가 나오기도 했지만.. 어쨌든! 우리는 이런 도구들 없이 밑바닥부터 React를 시작해보자! 서론은 여기까지! 아래부.. 2021. 4. 16.
Javascript 콜백 함수(Callback Function) [ 용어 정리 ] 동기(Synchronous) - real-time communication where each party receives messages instantly. - 요청과 그 응답이 즉시 이루어지는 것 - 뭔가 헷갈리는 말인 것 같은데, 어떤 A(요청) - A(응답) - B(요청) - B(응답) - C(요청) - C(응답) 이렇게 요청과 응답이 일렬로 이루어지고 이루어짐과 동시에 즉시 다음 요청이 실행되고 .. 이렇게 이해하면 조금 덜 헷갈리는 것 같다. 비동기(Asynchronous) - two or more objects or events not existing or happening at the same time. - 2개 이상의 요청과 그 응답이 같은 시간에 이루어질 수 있는 것 -.. 2021. 4. 12.
CSS Animation - Rotate(빙글빙글 돌기) 한 자리에서 infinite하게 도는 animation을 만들고 싶어서 찾아봤다. 애니메이션은 아래와 같이 사용할 수 있는데, 보통 두번째나 세번째처럼 많이 사용하는 것 같다. 일단 keyframes에 대해 알아보자면, 어떤 모양에서 어떤 모양으로, 혹은 어디에서 어디로 이동할 지에 대해 정해줄 수 있는 메소드(?)다. 나는 360도 도는 동작을 원해서 아래와 같이 적어주었다. from-to 말고도 0% - 100% 이렇게 작성할 수 있다. @keyframes rotate { from { -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360.. 2021. 4. 6.
Throttle, Debounce Event Handler가 많은 연산을 수행할 때, 제약을 걸어 제어할 수 있는 수준으로 Event를 발생시킬 수 있다. DOM API 중, onmousemove, onmouseover, onscroll 등 혹은 input event의 change, keyup 등을 사용할 때에 자칫하면 정말 많은 이벤트가 호출이 될 수 있다. 이런 이벤트들을 많이 사용하다보면 웹 사이트의 성능이 떨어질 수밖에 없다. 그렇기 때문에 우리는 Throttle과 Debounce를 사용한다. Throttle은 언제 쓸까? When we want to limit the amount a function is invoked. 로또라면, 공이 매 5초마다 나와야 할 때, 술집에 가서 술을 마시는데 45분마다 1잔씩 시켜야 하는 룰이 있.. 2021. 4. 1.
[GIT] 자주쓰는 GIT 명령어 정리 내가 자주 쓰는 GIT 명령어들을 소소하게 정리해놓는 공간! 누적해서 적어놓으려고 한다. 후후 Commit 순서 변경, 합치기 등 commit의 순서가 잘못되었거나, 잘못된 커밋을 했을 때, 수작업으로 변경할 수 있다. git rebase -i HEAD~개수 rebase를 잘못했을 때 stop할 수 있다. git rebase --abort rebase가 잘 되고 있다면 continue 해준다. git rebase --continue cherry-pick 다른 브랜치에 있는 커밋을 선택적으로 내 브랜치에 적용시킬 때 사용하는 명령어 git cherry-pick 처럼 사용한다. cherry-pick하려는 commit과 내 branch 사이에 conflict가 났을 때 -continue 나 -abort 를 사.. 2021. 3. 24.
Javascript 네임스페이스 패턴(Namespace Pattern) 네임 스페이스 패턴이란? "전역을 피하는 코딩 기법!" 어플리케이션이나 라이브러리를 위해 전역 유효 범위에 많은 변수, 함수, 객체 등으로 어지럽히지 않도록 하기 위해 전역 객체를 하나만 만들고, 모든 기능을 이 객체에 추가하는 패턴을 네임스페이스 패턴이라고 한다. 스크립트가 실행되는 환경을 항상 일정하게 만들어 관리하기 쉽게 만드는 일이다. 단순히 기능을 한데 묶기 위해 사용하는 객체를 네임스페이스라고 한다. // 생성자 함수 2개 function a() {} function b() {} // 변수 1개 var variable = 0; // 객체 1개 var module_object = {}; 이렇게 엄청 많은 함수와 변수등을 전역으로 만들면 안티패턴이 된다. 그렇기 때문에 아래와 같이 바꿔주는 것이 .. 2021. 3. 10.
Javascript 모듈(Module) 모듈이란? 개발하는 웹의 크기가 커지면 언젠가 파일을 여러개로 분리해야하는데, 이때 분리된 파일 각각을 "Module"이라고 부른다. 모듈에 export, import를 적용하면 다른 모듈을 불러와 함수를 호출할 수 있게 해준다. // hi.js export function sayHi(user) { alert(`hello, ${user}!`) } // main.js import { sayHi } from "./hi.js" alert(sayHi('John')) //alert가 뜸 이렇게 모듈을 사용하려면, HTML에서 Script를 불러올 때에 type="module"와 일반 스크립트의 다른 점 항상 지연 실행된다. 모듈 스크립트는 HTML 문서가 완전히 준비될 때까지 대기 상태에 있다가 HTML이 다 만.. 2021. 3. 10.

티스토리툴바