Light Dev

목차 개요 일반적으로 널리 사용되는 워드프로세서는 마이크로소프트 오피스의 워드(Word)이다. 하지만 이런 워드 파일을 복사 (Ctrl + C) 해서 텍스트(일반적인 메모장) 문서에 붙여넣기 (Ctrl + V) 하게 되면 기존에 적용된 서식 등이 모두 사라지게 되는 문제가 있다. 하지만 이 마크다운을 사용하여 작성을 하게 되면 일반적인 텍스트 기호를 사용하여 서식 등이 적용되기 때문에 플랫폼간 가공이 매우 용이하다는 장점이 있으며, .md 확장자로 저장하면 보관도 매우 쉬운 편이다. 마크다운 장점 단순하고 간결한 편이다. 에디터 없이 어디서든 작성이 가능하다. 텍스트 기반으로 사용할 수 있다. 용량이 작고 백업이 간편 합니다. 버전 관리 시스템(Git, svn 등)에서 사용이 용이 합니다. 마크다운으로 ..

목차 마크다운 Emoji 이모티콘 마크다운 문서에서 이모티콘을 이모지를 이용하여 표현할 수 있다. 깃허브 문서에도 문제없이 사용이 가능하다. 마크다운 문법에 : : 사이에 이모티콘명을 넣으면 자동으로 인식된다. 마크다운 이모지 종류 표 밑의 작성된 표들을 참고하거나, 아래 사이트에서 이모지를 참고해 사용해도 된다. Emoji Cheat Sheet Emoji codes used by GitHub, Basecamp, Slack and other services. Searchable. With emoji meanings. www.webfx.com People :bowtie: 😄 :smile: 😆 :laughing: 😊 :blush: 😃 :smiley: ☺️ :relaxed: 😏 :smirk: 😍 :heart_..

목차 마우스 휠 & 스크롤 멈춤 감지 방법 사용자가 문서를 스크롤 하면 이벤트를 발생시키는데, 스크롤을 멈추면 이를 감지하여 스크립트 처리를 하고 싶은 상황이 있다. 마우스 스크롤을 감지하는 이벤트는 두가지가 있는데, 문서를 스크롤하면 발생하는 "scroll" 이벤트와 그냥 마우스 가운데 휠 버튼을 내리면 발생하는 "wheel" 이벤트가 있다. 이 이벤트들에 setTimeout() 메서드와 조합해서 종단 지점을 감지하는 로직을 구현 할수가 있다. JavaScript let scrolling; // setTimeout() 메서드를 할당하는 전역 변수 window.addEventListener('scroll', (e) => { if (!scrolling) { console.log('start scrollin..

목차 스크롤 맨 아래 맨 위 감지하기 스크롤 맨 아래와 맨 위를 감지하는 이유는, 사용자가 웹 페이지를 다 읽었는지를 판단하여 다른 액션을 이어가고자 할 때. 또는 꼭 읽어야 하는 글이 있을 경우에 글의 맨 아래에서 버튼 상태를 활성화 시킬 때 유용하게 사용할 수 있다. 이를 구현하기 위해서는 "스크롤 되어 내려온 위치"와 "브라우저에 표시된 높이"를 더한 값이 "페이지의 전체 높이 값"과 같거나 클 경우를 비교하여 코드를 짜면 된다. 맨 아래까지 왔다고 판단하는 로직 "스크롤 되어 내려온 위치"와 "브라우저에 표시된 높이"를 더한 값이 "페이지 전체 높이 값"과 같거나 크면 맨 아래까지 왔다고 판단하는 코드이다. JavaScript function detectBottom() { var scrollTop..

목차 Sleep, Wait 함수 만들기 코딩을 하다 보면 여러 가지 이유로 프로그램의 실행을 잠시 멈추거나 일정 시간동안 실행을 지연시키고 싶을 때가 있다. 예를 들어, 자바에서는 Thread.sleep() 함수를 사용하고 파이썬에서는 time.sleep() 함수를 사용하여 의도된 지연 효과를 줄 수가 있다. 다른 프로그래밍 언어들에서는 이러한 API를 쉽게 찾아볼 수 있지만 자바스크립트에선 따로 sleep()함수가 존재하지 않기 때문에, 직접 개발자가 구현해주어야 한다. 이를 구현하기 위해서는 while 문과 Promise 를 사용해야 하는데, 프로그램의 실행을 일정 시간동안 지연시키는 코드는 다음과 같다. while문 활용 시간날짜를 얻는 함수 Date() 와 while문 조건으로 3초 지난걸 확인하..

목차 insertAdjacentHTML와 innerHTML 차이점 insertAdjacentHTML와 innerHTML은 둘 다 JS를 사용해서 HTML 코드를 DOM에 넣어 조작하는 메서드다. 그럼 이 두가지 함수를 어떻게 사용하는지에 대해서 포스팅해보겠다. innerHTML 사용법 innerHTML 속성은 JavaScript를 통해서 html의 content를 가져와서 그 값을 화면상에 보여주거나 직접 변경하여 보여주는 것을 뜻한다. 로 둘러쌓인 텍스트를 클릭 시 태그로 바꾸는 JS를 작성해보자. HTML click 안녕하세요, 지금은 'span' 태그입니다. 라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나오는 것을 확인할 수 있다. JavaScript const btn = documen..

목차 Redux 문법 Redux 문법 TypeScript import { Provider } from 'react-redux'; import { createStore } from 'redux'; interface Counter { count : number } const initialState :Counter = { count: 0 }; function reducer(state = initialState, action :any) { if (action.type === 'increase') { return { count : state.count + 1 } } else if (action.type === 'decrease'){ return { count : state.count - 1 } } else { r..

목차 React의 LifeCycle은 무엇인가 React로 웹개발을 하다 보면 컴포넌트에 Lifecycle이라는 개념이 있다. 컴포넌트는 생성이 될 수도 있고 (전문용어로 mount), 재렌더링이 될 수도 있고 (전문용어로 update), 삭제가 될 수도 있습니다. (전문용어로 unmount) 컴포넌트의 Lifecycle을 알아야 하는 이유는, 이걸 알아야 "컴포넌트의 인생 중간중간에 실행할 코드"를 삽입할 수 있기 때문이다. 컴포넌트가 장착이 될 때 특정 코드를 실행할 수도 있고 컴포넌트가 업데이트될 때 특정 코드를 실행할 수 있는 것이다. Class 문법에서의 LifeCycle hook 사용법 주로 사용되는 LifeCycle hook TypeScript class App extends React.Co..