ㄱ 부터 ㅎ 까지

◆ 변수의 선언 (모던 자바스크립트 Deep Dive 책을 통해 공부한 글입니다.) ES6가 나오기 이전에 변수를 선언하기 위해서는 var을 사용해야 했습니다. var로 선언한 변수는 어떠한 문제점이 있고 특징이 있는지 살펴보고 let 과 const에 대해서 설명합니다. ◆ var 변수의 선언 var은 다음과 같이 변수를 선언합니다. 여러 타입을 변수에 넣을 수 있는데, 다음 예제와 같이 function과 같은 자바스크립트에서 이미 사용되고 있는 키워드는 변수 이름으로써 사용이 불가합니다. var foo = 'this is foo'; var one = 1; // 다음과 같은 function 키워드는 자바스크립트에서 함수로써 사용되고 있는 // 키워드입니다. 따라서 변수 이름으로 지정할 수 없습니다. va..

Next js 에서의 스타일링은 리엑트에서와 같이 jsx 태그에 style={{ color:"#000000" }} 과 같이 작성을 할 수 있지만, module이라는 것을 사용할 수 있습니다. CSS Module 파일 생성 다음과 같이 NavBar.module.css라는 파일을 생성해주고 css를 작성합니다. 이때 앞의 NavBar의 이름은 중요하지 않지만 뒤의 .module.css는 Next js에서 css 모듈을 만들때엔 고정 패턴입니다. CSS Module 사용 그리고 css 모듈을 사용할 컴포넌트에서 다음과 같이 사용합니다. 먼저 생성한 module 파일을 styles로 import 해옵니다. nav에 className에 .nav로 css를 작성했으니 styles.nav를 작성합니다. import ..

HTML 삽입 미리보기할 수 없는 소스 위와 같이 마우스 클릭 또는 터치로 돌렸을때 돌아가는 인터랙션을 만들었습니다. 네이버 모바일 앱 브라우저의 그린닷이 위와 같은데 위와 같은 인터랙션을 구현해야할 일이 있어서 만들게 되었습니다. 방법 생각하기 1. 원형 중심의 좌표 구하기 2. 원형 중심을 기준으로 처음 클릭 지점과 포인트(마우스 움직임, 터치 움직임)의 사이 각도를 계산하기 3. 구한 각도를 바탕으로 원을 돌리고 마우스를 땔때 현재 돌아가 있는 각도 저장 4. 다시 돌릴때 이전에 저장되어 있는 각도를 더한 각도로 돌리기 5. 반대 방향으로 탭 네비게이션들의 각도를 돌리기 drag를 구현하려면? 우선 드래그와 함께 돌아가는 물체를 구현하기 이전에 드래그를 구현하는 방법에 대해서 생각해봅니다. 무언가를..

이번에 업무를 보면서 퍼블리셔분을 도와줄 일이 있었습니다. 문제는 input으로 연 파일 창(file dialog)을 열면 배경이 dimmed 처리 되고 아래 사진과 같이 파일을 선택할 때 말고 취소 버튼을 눌렀을때를 감지해 dimmed처리를 해제해야하는 상황이였습니다. 리액트로 프로젝트를 진행하고 있어서 취소 이벤트를 감지해 상태변화로 dimmed처리를 관리하면 될것 같아 쉬워 보였고, 열기를 통해 파일을 넣었을 때엔 파일 상태를 관리하는 state의 변화를 감지하거나 input의 onChange를 통해서 처리하면 되겠다고 판단했습니다. 파일 열기는 쉬웠지만 취소상태를 감지하기에는 어려움이 있었습니다. 인터넷에 검색을 통해 알게된 것은 window의 포커스를 감지해 취소인지를 판별하는 방법이 보편적이라..