개발자 도담씨

create-react-app을 사용하여 리액트 앱을 만들어 볼려고 하는데..! yarn global add create-react-app create-react-app 음 마치 css나 js 라이브러리 처럼 한번 다운받아놓으면 업데이트 되었어도 업데이트가 되지 않고 계속 그때 다운 파일만 남아있다는 단점이 있지. 맨 처름 프로젝트를 만들고 사용하지 않을 명령어지만 매번 프로젝트를 생성할때 해당 패키지를 업데이트 해주고 다시 설치한다? 너무 불편할 수 밖에...🙄 그래서 우리는 npx라는 친구를 사용하기로 한다 :) yarn global add npx npx create-react-app {project name} 앱이 만들어졌는지 확인하고! prop-types 친구도 설치 ( 변수 확인 해주는 친구 ...

리액트 매번 혼자 끄적이다가 생각보다 감이 잘 안오고 게을러서 그런지 매번 시작을 안하고 있다가 이번에 강좌를 구매했다 :) 리액트 시작전 알면 좋은 Javascript 개념 몇가지를 정리해 놓으려고한다 🙂 화살표 함수 [ 기존 ] function sayHello ( name ) { return name; } [ 화살표 함수 ] const sayHello = ( name ) => { return name; } * 매개변수가 하나일 경우 괄호 생략 가능 ex) name => { return name; } * 중괄호 생략시 자동 return ex) name => name; Template Literals [ 기존 ] const sayHello = name => { return "Hello " + name; ..

노마드코더 개발자 분의 리액트 강좌를 듣다가 정리해놓으면 추후에 좋을 것 같아 오랜만에 끄적여 본다. React Component의 Life Cycle에 관한 이야기다. 크게 어렵진 않았다 사실 vue랑 같아서... 크게 3가지 단계로 나뉘어진다 :) 1. Mounting 2. Updating 3. Unmounting Mounting @ constructor() - JavaScript에서 Class를 만들 때 호출 - Coponent가 Mount될 때 || 화면에 표시 될 때 호출 @ render () @ componentDidMount() - Component가 처음 render될 때 호출 Updating : state를 변경할 때! @ render() @ compontnetDidUpdate() Unm..

예전에 업무를 하면서 Vue를 이용해 우선 만들었던 기능을 순수 JavaScript로 만들 기회가 또 생겨 확장성을 더 생각해서 구현해 보았다. jQuery에 익숙해져있다가 순수 JavaScript로만 하려니 생각보다 힘들었다😥 내가 만들고자 한건 우리가 일반적으로 쓰는 select box를 사용하면 아래와 같이 검색 선택 박스로 바뀌는 것이다. 마우스 이벤트로도 구현을 했고 아래, 위 키를 눌러서 엔터를 누르면 선택 되도록 키이벤트도 구현했다! 코드 리뷰 function setCustomSelect (instance, list, width){ var box = document.createElement("span"); var input = document.createElement("input"); var..

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 참고1 : sujinlee.me/webpack-react-tutorial/ 참고2 : 3트째 참고한 블로그 저번에 혼자 맨땅에 헤딩으로 리액트를 하면서 DB붙이고 하려니 구조를 어떻게 해야하는지 혼동이 오면서 접었었는데... 해당 참고글을 보고 2트해본다! 1트는 버전 문제 때문에 잘 안됐는데 오늘은 다시 해결해보는걸로 😥 준비사항에 있는 node와 yarn을 설치해주고 React Route는 또 몰라서 공부해왔다... 살펴보고 역시 이렇게 있었어 라고 생각이 들었다. 나 역시도 이 친구를 모를때 다른 주소에 따라 다른 뷰를 보여주고싶은데 어떻게 하는지 몰라서 조건문으로 1번을..

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :) 호옥시 잘못된 정보를 공부하고있다면 알려주세요! 참고1: beomy.github.io/tech/javascript/javascript-runtime/ 참고2: geonlee.tistory.com/92 참고3: velog.io/@stampid/React%EB%9E%80 React 기초를 다시 한번 공부하려니 Node를 다시 알아야 했고 Javacript 런타임 기반이다보니 해당 부분까지 공부하게 됐다. 매번 1화만 보다가 끝나는 기분이야..😢 자바스크립트는 싱글쓰레드-논블로킹 언어로 쉽게 말해서 쓰레드 하나에 비동기식으로 작동한다. 하긴 단일쓰레드인데 동기식(블로킹) 형식이였으면..

Vue.js를 사용하면서 jQuery Ui인 Timepicker을 사용했어야 했는데 같이 사용해보니 발생했던 이슈가 있어 정리하고자 한다 🤔 input태그를 클릭시 timepicker가 나타날텐데 input태그에 값이 들어가있는것 처럼 보이지만 실제로 v-model의 변수값이 변경되고 있지 않았다. 코드를 보면서 자세히 설명해보겠다 :) 📋 기존코드 vue를 사용한다면 기본적으로 아래와같이 적어줄 것이다. 여기서 문제가 timepicker가 선택됐을때 time이라는 변수의 값이 변경되지 않는다는거다. vue객체안에서 timepicker을 설정해주고 onSelect 함수를 추가해줘도 똑같은... 그래서 열심히 구글링하다가 vue의 component를 사용해보기로 했다. 📋 수정코드 Vue.component..

"selectbox 꾸미기"라고 검색하니까 대부분 음... 말을 안해도 다들 아실 것 같지만 내가 생각하는 그런 이쁜 ui로써의 꾸미기가 아니었다. ( 물론 지원안해줘서 그런 것일 테지 음음..! ) 보통 이렇게 까지 selectbox와 option의 ui를 신경쓸 경우가 잘 없었지만 앞으로 내가 만드는 페이지엔 이렇게 이쁘게 할 것이다 😠! 구글링을 하던 도중 js로 나와 비슷하게 하신분 포스팅을 봤는데 나는 최근에 접한 vue의 template기능을 통해 구현하였다. ( name속성 및 value까지 정상 작동! ) 완성작✨ ( 이거 혹시 실제 작동하도록 넣는 방법 아시는분... html로 저장하니까 깨져용...😥 ) HTML코드에 딱히 볼건 없다. 일반 select사용하듯이 사용하면 된다. sele..

처음엔 스크립트로 직접 카운터 효과를 주었었는데 부드럽게 올라가지 않는 느낌이 없지 않아 있어서 TweenMax를 사용하기로 했다. 그리고 스크롤 할 때 마다 효과를 주기 위해 ScrollMagic이라는 친구도 사용했다 :) 먼저 결과물 부터! 움짤엔 찍히지 않았지만 다시 위로 갔다가 해당 카운터가 있는 위치로 오면 카운터가 재시작 된다. [ HTML ] data-count는 최대 카운트 숫자로 사용했다. 국내 프랜차이즈 지점 0개 해외 직영점 0개 [ JS ] const controller = new ScrollMagic.Controller(); $(".branch dd span").each(function(i) { let max_count = $(this).data("count"); // 카운트 될 ..

회사에서 로딩화면 애니메이션으로 텍스트에 차오르는 느낌을 줄 수 있냐기에 알겠다하고 구현한 애니메이션... 물결로 하려니 조콤 힘들었다 😭 방법이 두가지가 있었는데 1. 물결 배경을 넣어 배경을 움직이는 방법 2. clip path를 이용한 방법 이중에서 나는 1번 방법을 택했다. 이유는 1번, 2번 다 해봤는데 2번을 이용해 차오르는 느낌을 주려니 중간에 애니메이션이 끊어지는 느낌이 강해서 택하지 않았다. 아래 참고한 영상을 첨부할테니 2번 방법을 해보시고 싶으신 분은 한번 도전해 보시길 :) [ HTML ] 크게 복잡할 것 없다. 아래부분이 끝! EXAMPLE [ CSS ] body { margin: 0; padding: 0; } .loader { position:fixed; top: 50%; lef..