profile
사진촬영을 좋아하는 프론트엔드 개발자입니다.
post-thumbnail

d3.js line animation 해보자!

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

7일 전
·
0개의 댓글
post-thumbnail

d3.js 기초 다지기 헛둘!

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

2020년 7월 1일
·
0개의 댓글

Date Picker 직접 구현 해보기!

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

2020년 6월 7일
·
0개의 댓글

자바스크립트 구동방식

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

2020년 5월 25일
·
0개의 댓글

Redux

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

2020년 5월 18일
·
1개의 댓글

React Hooks Redux 와 ContextAPI 비교

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

2020년 5월 14일
·
0개의 댓글

클로져(Closure)

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

2020년 5월 11일
·
0개의 댓글
post-thumbnail

REST API란??

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

2020년 5월 10일
·
0개의 댓글

사이드 프로젝트 후기: BF-TEST

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

2020년 5월 2일
·
3개의 댓글

TIL - Promise, async & await

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

2020년 4월 12일
·
0개의 댓글

TIL - Array.reduce()

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

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

3차 미니 프로젝트 후기 - wecode 해커톤?

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

2020년 4월 11일
·
2개의 댓글

TIL - Jest 간단소개

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

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

TIL - Event Bubbling (이벤트 버블링)

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

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

TIL - Unit Test

Unit Test Unit Test 란? 메서드를 테스트하는 또 다른 메서드이다. Unit Test 하는 이유 연관 컴포넌트의 제작이 완료되지 않더라도 코드 푸쉬 가능 단위 테스트 스위트를 이용하여 새로운 기능의 추가 및 기존 기능의 수정에 대해 이전

2020년 3월 30일
·
0개의 댓글

TIL - Typescript의 Interface

Typescript 하면서 중요하다고 느꼈던 Interface를 정리해보고자 한다. Interface Typescript의 핵심 기능 중 하나가 type-checking이다. Interface는 이러한 타입의 이름을 지정하는 역할을 한다. 지정한 type대로 값이 들

2020년 3월 28일
·
0개의 댓글

TIL - Next.js 구동 방식

\_app.js 와 \_document.js 은 Next.js의 자체 로직에 의해서 기본적으로 만들어주지 않아도 실행되는 server only file파일이다. 그렇기에 두 파일에서는 client에서 사용하는 로직(ex. eventlistener 등의 window /

2020년 3월 28일
·
0개의 댓글
post-thumbnail

TIL - Next.js 간단 소개

Next.js는 React의 SSR(Server Side Rendering)을 도와주는 프레임워크이다.React - CSR(Clinet Side Rendering) : 일반적인 React 렌더링 방식은 render() 함수가 먼저 실행되고, 그다음에 ComponentD

2020년 3월 28일
·
0개의 댓글

React + TypeScript + Styled-Components 초기 세팅하기

설치하면 이와 같은 화면 상태를 볼 수 있다.없어도 되는 파일 리스트setupTests.tslogo.svgserviceWorker.tsApp.test.tsx"baseUrl": "src" 스타일 리셋 패키지 설치하기 및 styles 폴더 만들기styles 폴더 내부에 G

2020년 3월 21일
·
0개의 댓글
post-thumbnail

2차 프로젝트 후기 : HI-VIBE

Naver VIBE 웹사이트 클론인원: 3 프론트엔드, 1 리액트네이티브,2 백엔드목표: 디자인, 인터페이스를 최대한 비슷하게 만들어 보기. 다양한 기능 사용해보기하이바이브Front-end: React JS, TypeScript, Redux, Styled-Compone

2020년 3월 21일
·
2개의 댓글