부모 컴포넌트에서 자식 컴포넌트에 있는 함수를 어떻게 호출 할 수 있을까?이를 위해서는 몇 가지 hooks가 필요하다.forwardRef는 부모 컴포넌트로부터 ref 속성을 받는 한 컴포넌트를 만든다. 그리고 그 속성을 받은 컴포넌트로부터 또 자식에게 그 속성을 또 전

Vuex 모듈화에 대해 이전에 공부를 했었지만 실제로 업무에 적용한 건 이번이 처음이였다. 작업을 하면서도 적용할까...말까..를 반복하던 찰나에 store가 비대해짐을 느끼고 모듈화 시키기로 결정했다. index.js

ArryaBuffer 와 Binary Arrays... 어쩌라는 걸까?ㅎㅎ

socket.io 란? socket.io는 서버와 클라이언트 간에 양방향 통신을 가능하게 해주는 모듈이다. 통신을 할때, 각 브라우저에 대해서 websocket, pooling, streaming, flash socket 등에서 가장 적절한 방법을 찾아 통신을 가능케

1. Content-Security-Policy CSP는 웹 브라우저에서 사용하는 컨텐츠 기반의 보안 정책이다. 주로, XSS나 Data Injection, Click Jacking 등 웹 페이지에 악성 스크립트를 삽입하는 공격기법들을 막기 위해 사용된다. 어떻게 보

1. 컴퓨터가 소리를 듣는 방법 소리란? 진동이다. 하지만 자연계에서 발생한 진동들은 이러한 연속적인 아날로그 형태로 나타난다. 그렇다면 컴퓨터는 어떻게 소리를 들을까?? 0과 1밖에 모르는 컴퓨터는 연속성을 가진 아날로그 신호를 이해할수 없기 때문에 디지털로 바꿔

지난 글에 이어 사용했던 코드를 그대로 들고와 선이 생성되면서 움직이는 애니메이션을 넣어보도록 하자!!animation 효과를 얻기 위해 svg의 stroke-dashoffset과 stroke-dasharray를 이용할 것이다. This is Trick!!아래를 살펴보

1. scale 함수 scale함수는 함수를 만드는 함수인데 domain() 범위의 입력값이 들어오면 range() 범위의 결과값으로 바꿔주는 함수를 만들어준다. (일반적으로 domain은 데이터의 최소, 최대값으로 설정하고, range는 표출할 범위의 너비, 높이 픽

그렇다. 갑자기 이걸 왜 구현해야하는가? 과제라 그렇다. 덕분에 라이브러리로만 쓰던 Date Picker를 직접 구현해보다니...ㅎㅎ 한번 구현해 봤으니 다음부터는 라이브러리로 써야겠다. 머리 터지는줄;;일단 들어가기 앞서 두 가지 선택권이 있다.1번: 자바스크립트의

자바스크립트의 Event Loop 구동방식 자바스크립트는 Single Thread 방식이며 이 말인 즉슨 Call Stak을 단 1개만 갖는다는 말이다. 즉, 한 번에 한 가지만 수행이 가능하다는 말이다. 그렇다면 이벤트가 발생하면 자바스크립트 내부에서는 어떤 식으로

Redux란? 리덕스는 (Flux 패턴을 활용) 전역상태를 관리하기 위한 라이브러리 (React, Vue, Angular에서 모두 사용 가능) 여기서 잠깐!!! Flux란? 기존에 많이 사용하던 MVC패턴의 문제점을 느끼고 페이스북에서 개발한 하나의 개발 패턴이다.

<구성>Store : 전역 상태 보관소Reducer : Store에 접근시킴Action : Reducer에 Action을 지시Subscription : Store에 보관된 상태를 가져옴<구성>Context : 전역 상태 보관소Provider : 전역 상태를

외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.자신의 생성된 시점의 환경을 기억하는 함수<예제>Closure는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연결하는 데 있어서 유용하다. (객체지향 프로그래밍의 정

웹에 존재하는 모든 자원(이미지, 동영상, DB자원)에 고유한 URI를 부여해 활용하는 것 = 자원을 정의하고 자원에 대한 주소를 지정하는 방법론을 의미응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를

Wecode 6기 졸업생들의 사이드 프로젝트프론트엔드와 백엔드 중에 당신에 성향에 맞는 포지션이 무엇인지 알아보는 테스트 사이트인원: Front-End 4명, Back-End 3명기간: 2020/4/20 ~ 2020/4/28 (정식 배포일: 4/29)BF-TESTFro

향후에 언젠가 사용하게 될 값을 생산해내는 객체이며, 비동기 동작이 완료된 이후 그 성공, 실패한 결과를 처리하기 위한 handler이다. 현재는 값이 존재하지 않으니까 가져오게 되면 어떻게 처리를 해준다는 일종의 약속이다.전 명령의 수행이 끝나지 않아도 다음 명령을

reduce는 배열의 method중 하나로 강력한 기능을 가지고 있는 method이다. 보통 배열을 순회하며 인덱스 데이터를 줄여가며 어떠한 기능을 수행 할 때 사용한다.형태는 이와 같다.첫 번째 인자로 콜백함수가 들어오고, (생략가능한) 두 번째 인자는 콜백의 첫 호

wecode 1주년 기념 이벤트 투표 웹사이트 만들기인원: 5 프론트엔드, 5 백엔드기간: 1일목표: wecode 1주년 기념으로 시, 삼행시, 그림 부문 참여작에 대한 투표 기능 및 결과 창 만들기Front-end: React JS, Styled-Component,

jest란 Facebook에서 개발한 단위 테스트가 가능한 테스트 라이브러리이다.설치 방법jest 개발의존성으로 설치package.json에 script 부분 수정npm test 라고 치면 jest가 실행 되어 테스트를 해볼 수 있다.Jest는 기본적으로 test.js

이벤트 버블링이란 이벤트가 발생했을 때 그 요소로부터 상위 요소들로 이벤트가 전달되는 것을 의미한다.<예시><결과값><div class="three"></div> 를 클릭하면 이벤트 버블링이 발생하면서 이와 같은 결과를 나타낸다.이벤트 캡쳐란 이벤