profile
뚝딱뚝딱 FE

CodeSandbox 상단 메뉴 appearance 설정.

"Ctrl+Shift+P" or click "Show Opened Editors""> toggle menu bar" 짠! 다시 나타난 menu bar참고 https://github.com/codesandbox/codesandbox-client/issues/19

2021년 4월 23일
·
0개의 댓글

[Android] dialog 화면 밖 터치시 종료막기 .setCancelable()

뒤로가기 버튼 & 배경 터치시, dialog 꺼짐 막기.참고 alertDialog.setCancelable(false);

2021년 4월 21일
·
0개의 댓글
post-thumbnail

이벤트 위임 (event delegation)

: 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용함.이벤트 위임을 사용하면 요소마다 handler를 할당하지 않고, 요소의 공통 부모 요소에 event handler를 한번만 할당해도 여러 요소를 한번에 다룰수 있음. (feat. 반복문, ...): 클릭한 부분의 요

2021년 4월 20일
·
0개의 댓글
post-thumbnail

[Git] Commit Message Convention

기본적으로 제목/본문/꼬리말 으로 구성됨.feat: 새로운 기능 추가fix: 버그 수정docs: 문서 수정style: 코드 포맷팅, 세미콜론 누락, 코드 변경없는 경우refactor: 코드 리팩토링test: 테스트 코드, 리펙토링 테스트 코드 추가chore: 빌드 업무

2021년 4월 20일
·
0개의 댓글
post-thumbnail

onClick vs addListener("click")

https://jess2.github.io/2018/05/15/JavaScript/JS-onclick%EA%B3%BC-addEventListener-%EB%B9%84%EA%B5%90/

2021년 4월 20일
·
0개의 댓글
post-thumbnail

NodeList to Array

document.querySelectorAll()를 통해 1개 이상의 dom 객체가 존재할 경우, 노드의 콜렉션으로 리턴됨. NodeList는 .map, .reduce, .filter 함수 사용이 불가능 함.이런 경우에는 NodeList를 Array 로 변환 후 작업하

2021년 4월 18일
·
0개의 댓글
post-thumbnail

event.preventDefault()

: 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.submit 버튼 클릭시, 화면전환하는 기존 이벤트를 취소하기 위해서 사용함.참고 https://developer.mozilla.org/ko/docs/Web/API/Event/

2021년 4월 18일
·
0개의 댓글
post-thumbnail

[TDD] Cypress 설치하기

npx cypress open시,npx cypress install --force

2021년 4월 11일
·
0개의 댓글
post-thumbnail

[Vanilla JS] DOM내 요소 검색하기

idclasselement name...forEach 또는 for반복문 으로 addEvent 처리.Id로 element 찾기. DOM 내 ID가 없으면 return null.요소들 중 하나의 클래스를 포함하고 있는 요소를 검색하기 위해서, 클래스명 입력.

2021년 4월 11일
·
0개의 댓글
post-thumbnail

:nth-child() / :nth-of-type()

구조적 가상 클래스: 문서구조에서 위치나, 다른 요소와의 관계에 따라 요소를 선택하게 해주는 선택자.:nth-child() 가상 클래스는 부모의 n번째 위치에 있는 자식을 선택 합니다.키워드숫자수식(an+b)even : 짝수 번 째에 있는 요소odd : 홀수 번 째에

2021년 4월 4일
·
0개의 댓글
post-thumbnail

📝Event Method의 바인딩

새 메서드를 만들때 마다 constructor를 수정해야 하는 번거러움을 덜기 위함.babel의 transform-class-properties문법을 사용해 화살표 함수로 메서드를 정의한다.p.130 - 132

2021년 4월 4일
·
0개의 댓글
post-thumbnail

함수형 컴포넌트에서 useState 사용하기

리액트 v 16.8 이전에는 함수형 컴포넌트에서 state를 사용할 수 없었지만리액트 v 16.8 부터는 Hooks을 사용해서, 사용할 수 있게 됬다.state 값을 바꿀때는 setState나 useState를 사용해야 한다.배열이나 객체를 수정해야 한다면, 객체를 복

2021년 4월 4일
·
0개의 댓글
post-thumbnail

State

내부 컴포넌트에서 바뀔 수 있는 값.클래스형 컴포넌트가 지니고 있는 state함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state props는 부모 컴포넌트가 설정하는 값, 컴포는트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.수정을 하려

2021년 4월 4일
·
0개의 댓글
post-thumbnail

Props

컴포넌트가 속성을 설정할 때 사용하는 요소. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할 수 있다.이제 name은 무조건 문자열(String) 형태로 전달 해야 된다. 만약 지정 타입과 다른 타입으로 보낸다면, 화면에서 데이터 확인은 할

2021년 4월 4일
·
0개의 댓글
post-thumbnail

비구조화 할당(destructing assignment)

ES6의 비구조화 할당문법을 사용해, 내부값을 바로 추출하는 방법. props 값을 조회 할 때마다, props.[변수].. 이런식으로 키워드를 앞에 붙여주는 방식보다 편리하게 값조회가 가능함. > 함수의 파라미터가 객체라면 그 값을 비구조화해서 사용. 구조 분해 문

2021년 4월 4일
·
0개의 댓글

함수형 컴포넌트와 클래스형 컴포넌트

리액트에서 컴포넌트를 선언 하는 방식은 두가지 이다.함수형 컴포넌트클래스형 컴포넌트state 기능 및 라이프사이클 기능을 사용할 수 있다.임의 메서드를 정의할 수 있다.JSX를 반환해 주는 render 함수가 꼭 있어야 한다.

2021년 4월 3일
·
0개의 댓글
post-thumbnail

JSX

자바스크립트의 확장 문법으로 XML과 유사하게 생겼음.HTML 태그를 사용하듯이 작성하면 됨.JSX로 작성한 코드는 브라우저에서 실행되기 전, 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 JS 형태의 코드로 변환된다.보기 쉽고 익숙하다. 가독성 이즈 굿.활용도가

2021년 4월 3일
·
0개의 댓글
post-thumbnail

웹팩 로더(loader)

css-loader : CSS 파일 불러오기file-loader: 웹폰트, 미디어 파일 불러오기babel-loader: JS 파일 불러오면서, 최신 자바스크립트 문법으로 작성된 코드를 babel 을 사용하여 ES5 문법으로 변환.

2021년 4월 3일
·
0개의 댓글
post-thumbnail

Storybook 환경구축

설치하기 Run App 확인해 볼까요? Storybook이 실행되었습니다. 이제 컴포넌트를 만들면 되겠네요 :) CSS degit을 사용해 font를 다운로드 했습니다. degit을 사용하면, Github에 있는 파일과 폴더를 간단하고 쉽게 다운받을 수 있다는 장

2021년 4월 1일
·
0개의 댓글