내가 보기 위해 쓰는 것
-
JavaScript - 쓰로틀링(Throttling)내가 보기 위해 쓰는 것/Javascript 2019. 10. 23. 10:41
쓰로틀링은 주로 이벤트에 사용하는 기능이다. 흔한 경우로 웹이 인터렉션 효과를 넣다 보면 쓰로틀링이 필요한 시점이 생긴다. 예를 들어보자면 scroll 이벤트가 있다. box가 scroll 될 때마다 display none~block으로 토글되는 이벤트가 있다고 가정해보자. let target_state = true; function event_scroll() { const target = document.querySelector('.box') target_state = !target_state if(target_state){ target.style.display = 'block' }else{ target.style.display = 'none' } console.log('scroll!!') } 클라이언..
-
CRA의 한계를 풀어보자 (eject)내가 보기 위해 쓰는 것/React.js 2019. 10. 22. 16:35
Create React App이 편리하긴한데 나는 내 포트폴리오에 내 서버를 만드는게 목표니까 기본 제공 기능 말고 서버를 직접 만들어서 연동시키고 싶었다. 근데 이 CRA의 구조가 어떻게 되어있는지도 모르고 어떻게 연동해야하는지도 몰라서 한참 해맸는데 eject라는 기능을 이용하여 숨겨진 구조를 푸는? 그런 행동이 가능했다. 사실 내가 잘 하는 분야도 아니니... 내가 찾아낸 정말 잘 설명된 글의 링크로 대체한다. https://m.blog.naver.com/PostView.nhn?blogId=93immm&logNo=221306747644&proxyReferer=https%3A%2F%2Fwww.google.com%2F 개X같은 windows에서 하는 react.js 개발 (1) / create-reac..
-
React.js - state와 component life cycle내가 보기 위해 쓰는 것/React.js 2019. 10. 22. 10:51
저번에 React에서 가장 중요한 개념이었던 component와 props에 대해 썼다. 그리고 항상 세트로 따라다니는 state와 component life cycle에 대해서 정리해보고자 한다. state는 기본적으로 변수와 비슷한 개념이다. 변수인데 특별한 기능이 주어진 변수라고 생각해도 좋다. 기본적으로 state를 선언하는 법은 아래와 같다. import React, { Component } from 'react' export default class App extends Component { state = { myName: 'I am state!' } render() { return ( Nothing... ) } } 이렇게 state를 생성하고, state를 사용하는 방법은 아래와 같다. im..
-
React.js - component와 props내가 보기 위해 쓰는 것/React.js 2019. 10. 21. 11:09
리액트는 컴포넌트단위로 개발한다. (JSP가 익숙하다면 include의 개념과 비슷하다) 즉 Header, Section, Footer ~ Section의 자식 mainVisual~ 등을 파일을 나눠서 작업할 수 있다. 블럭 여러개를 만들고 조합해서 웹을 완성시키는 방식이라고 보면 된다. 이런 방식에는 여러 장점이 있다. 나중에 다루게 될 component lifecycle에 대해서 분리하여 사고할 수 있다. 단방향 tree구조로 컴포넌트 별로 분리하여 개발이 가능하다. 컴포넌트 방식은 팀단위 작업을 할 때 범위를 명확하게 한다. JSX 를 이용한 Virtual DOM방식이기 때문에 변화되는 Component 빼고는 그대로 둬서 더 효율적이다. 따라서 동적인 웹 페이지일 때 상황에 따라 render가 많..
-
Bulma를 맛 보고내가 보기 위해 쓰는 것/CSS 2019. 10. 16. 20:02
프로젝트에서 선택한 CSS 프레임워크 Bulma를 맛보기 처럼 써보고 느낀 점이다. 긍정적인 면과 부정적인 면이 있는데 사실 부정적인 면이 더 크게 느껴진다. 우선 가장 대중적이고 안정성이 확실한 Bootstrap을 사용하지 않은 이유는 너무 무겁다. 기능이 불필요하게 너무 많다. 부트스트랩을 사용한 토이프로젝트를 해봐서 부트스트랩틱한 디자인도 벗어날 겸 새로운 프레임워크를 써보고 싶었다. 그리고 Bulma를 선택한 이유는 Bulma는 css파일 하나만으로 적용하는 가벼운 프레임워크다 모든 것이 class 기반이기 때문에 tag에 디자인이 들어가지 않아 내가 직접 만지고 싶은 부분을 간섭하지 않는다. Flex 기반이기 때문이다. Flex를 거의 사용하지 않았고 잘 몰랐다. 우선 내 나름으론 큰 프로젝트에..
-
Javascript - Closure내가 보기 위해 쓰는 것/Javascript 2019. 10. 7. 15:04
생활코딩에서 쭉 봤는데 거기서 나오는 마지막 예제가 하이라이트 인 것 같다.. 내가 쓴 예제를 이해하려면 호이스팅과 IIFE 개념이 필요하다. Closure의 개념은 내부함수가 외부함수의 변수등에 접근할 수 있다는 것이다. block scope의 관점에서 봤을 때 당연해 보이기도 하는데 중요한건 외부함수가 소멸하거나 호출되지 않은 경우에도 참조 할 수 있다는 것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var arr; var i; var index; arr = []; for(i = 0; i
-
Javascript - 호이스팅개념내가 보기 위해 쓰는 것/Javascript 2019. 10. 7. 11:53
우선 아래와 같은 코드를 보고, 어떻게 작동할지 예측해보자 1 2 3 4 5 if(true){ var hey = 'hello'; } console.log(hey); cs 일반적인 경우 hey는 if문안에 {} 영역에서 선언되었으므로 그 밖의 영역에 있는 console.log 에서는 호출할 수 없어야 한다. 그런데 이 소스는 작동한다. 그 이유는 var hey가 호이스팅 되었기 때문이다. 위 소스는 아래처럼 호이스팅 된다. 1 2 3 4 5 6 7 var hey; if(true){ hey = 'hello'; } console.log(hey); cs 즉 호이스팅이란 선언과 할당이 분리되는 현상을 말한다. 선언은 선언된 block의 최상단으로 옮겨진다. 위 예시에서는 var를 사용하였다. 그리고 var는 fu..