profile
<h1>시간을 내편으로 만들어 하루하루 꾸준하게 🧑🏻‍💻 </h1> 안녕하세요 🙏 행사 기획자에서 부터 퍼스널 트레이너 그리고 지금은 웹 프론트엔드 개발에 빠진 개발자 꿈나무 입니다!🔥
post-thumbnail

[Type script] 제네릭 (Generics)

Java같은 정적 타입 언어는 함수 및 클래스를 정의하는 시점에 매개변수나 리턴 값의 타입을 선언해줘야 하는데, 이처럼 어떠한 클래스 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법을 제네릭이라 한다. TypeScript에서의 제네릭

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

[Type script] CRA 프로젝트에 타입 스크립트 와 eslint & prettier 끼얹기

가장 빠르고 손쉽게 리액트 프로젝트를 시작할 수 있는 방법인 CRA를 통해 프로젝트를 생성해준다. 타입스크립트 환경에서 개발하기 위해선 cra 생성 시 --template typescript를 붙여주면 된다.npx create-react-app . --template

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

[협업 프로젝트] '내일의 집'을 마치며 📝

부트캠프 동기들과 함께한 2주 협업 프로젝트가 어제부로 마무리되었다. 지금껏 항상 혼자 사이드 프로젝트를 진행 해오다가 팀의 팀장이 되어 사람들과 의논하며 포지션을 나누고, 각종 사전 설계, 문서작업 및 깃 관련 규정들을 정해보며 프로젝트를 진행해보니 느낀점도 참 많았

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

[React] Create-React-App에 Prettier & ES Lint 적용하기

협업을 진행하다보면 각기 다른 코드 스타일 때문에 코드의 통일성과 가독성이 떨어지거나, 잠재적으로 여러 문제를 일으킬 수 있는 위험이 있다. 그렇기에 협업시엔 코드 스타일을 합일화 할 필요성이 있는데, Prettier와 ES Lint를 적절히 사용한다면 협업시의 코드스

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

[ Team Project ] Redux-Saga 간단 사용 가이드

❗️ 해당 게시물은 팀 프로젝트 팀원 배포용 문서 입니다.

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

[WEB] 세션(Session) in Express

현대의 웹은 HTTP 프로토콜로 이루어져있고, HTTP가 가지는 비연결성(Connectionless)과 비상태성(Stateless) 특성 때문에 사용자와의 연결이 유지되지않고, 연결 해제 후에도 상태 정보를 저장하지않는다. 물론 서버의 자원 절약이라는 장점도 있지만,

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

[WEB] 쿠키(Cookie) in Express

현대의 웹은 HTTP 프로토콜로 이루어져있고, HTTP가 가지는 비연결성(Connectionless)과 비상태성(Stateless) 특성 때문에 사용자와의 연결이 유지되지않고, 연결 해제 후에도 상태 정보를 저장하지않는다. 물론 서버의 자원 절약이라는 장점도 있지만,

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

[React] react-reveal을 이용해서 스크롤 애니메이션 만들기

얼마전 개인 포트폴리오 페이지 제작때 아주 유용하게 사용했던 라이브러리 하나를 소개해보려한다. react-reveal는 몇줄의 코드만으로 손쉽게 스크롤 애니메이션을 구현할 수 있게끔 만들어져 있으며, 특히 공식 홈페이지에 가이드가 깔끔하게 잘되어 있기에 누구나 손쉽게

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

리액트 Life cycle 과 Redux & JWT 기반의 사용자 인증에 대한 고찰

최근 리액트와 Redux를 이용한 사이드 프로젝트를 진행하다가 좋은 아이디어가 생겨서 프로젝트의 전반적인 구조를 바꾸게되면서 사용자 인증 관련 로직들 또한 재구성해야 했고, 그 과정에서 겪었던 여러가지 문제들과 새로 배웠던 것들을 기록해보려한다. API를 사용하는 웹

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

[Algorithm] 퀵 정렬 (Quick-sort)

퀵 정렬이란 찰스 앤터니 리처드 호어가 개발한 분할 정복 알고리즘의 하나로, 평균적으로 타 정렬 방식에 비해 빠른 수행 속도를 자랑하는 정렬 방법이다. 여기서 분할 정복이란 문제를 작은 2개의 문제로 분리하고 각각을 해결한 다음, 결과를 모아서 원래의 문제를 해결하는

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

[Algorithm] 너비 우선 탐색 (Breadth-First Search)

너비 우선 탐색 (Breadth-First Search)이란 그래프 탐색 방법 중 하나로서 루트 노트를 시작으로 인접한 노드 순으로 차례대로 탐색하는 탐색법이다. 즉 루트 노드를 시작으로 최대한 깊이 내려간 뒤 옆으로 이동하는 깊이 우선 탐색(DFS)와는 다르게 가까

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

[사이드 프로젝트] 리액트에서 페이스북 로그인 구현 하기

카카오 로그인 기능에 이어서 페이스북 로그인 기능도 추가했다. 페이스북 로그인 기능 또한 리액트용 라이브러리를 사용하면 빠르게 구현할 수 있었고,클라이언트에 컴포넌트 추가 이후의 후처리는 카카오 로그인 때문에 수정해 뒀던 서버 단의 로그인 관련 API를 그대로 사용하면

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

[사이드 프로젝트] 리액트에서 카카오 로그인 구현 하기

진행중인 사이드 프로젝트 'Tindux'에 소셜 로그인 기능을 추가했다. 리액트 관련 라이브러리와 카카오 개발자 사이트의 공식문서 덕분에 카카오 API를 통한 카카오계정 인증까지는 빠르게 구현 했지만, 인증 후 사이드 프로젝트 앱 의 계정 및 JWT 인증 시스템과 어떻

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

[Algorithm] 이진 탐색 (Binary Search)

이진 탐색이란 정렬되어있는 데이터가 담긴 배열에서 특정한 값을 효과적으로 찾아낼 수 있는 알고리즘이다. 배열 중간에 있는 값을 기준으로 찾고자 하는 값과 비교한뒤 해당 값이 중간 값보다 작으면 중간 값을 기준으로 좌측의 원소들을 대상으로, 중간 값보다 크면 우측의 원소

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

[Algorithm] 버블 정렬(bubble sort)

버블 정렬이란 정렬 알고리즘 중 가장 기본적이고 간단한 알고리즘이며, 배열 원소의 이동이 거품이 수면으로 올라오는 듯한 모습을 보이기 때문에 지어진 이름이라고한다. 버블 정렬은 두 인접한 원소를 검사하여 서로의 값을 교환하며 정렬하는 방법인데, 오름차순 정렬의 경우

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

[사이드 프로젝트] Redux-Saga 를 이용한 하위 컴포넌트들의 데이터 흐름 관리

요즘 부트캠프의 바쁜 일정 덕분에 새로운 지식들을 빠르게 습득하고 있다는 기분이 들지만, 한편으론 개인 프로젝트를 진행할 시간이 점점 부족해져서 그런지 한편으론 아쉽다. 그래도 나름 시간을 내서 틈틈히 개인프로젝트를 진행중이며, 최근엔 기존의 회원가입 및 로그인 관련

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

[TIL] Pseudo classical을 이용한 상속 패턴

자바스크립트는 프로토타입 기반의 언어이다. 이는 자바나 c++의 클래스 기반의 객체 지향과 비슷하나 사뭇 다른데, 시간이 지나면서 자바 스크립트에서 상속을 구현하는 방식에 여러 변화가 생겼다. 그렇기에 이번 포스팅을 통해 프로토타입 체이닝을 통한 상속과 ES6의 클래스

2020년 10월 29일
·
0개의 댓글
post-thumbnail

[TIL] OOP with Java Script before ES6

객체 지향 프로그래밍의 원초적 개념과 프로토타입 기반 언어인 자바 스크립트에서 객체 지향 프로그래밍의 패러다임을 구현하기위해 사용되는 여러 문법들이나, 개념들을 다시 한번 되짚고자 작성해본다.OOP (Object-Oriented Programming)란 컴퓨터 프로그래

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

[Data Structure] 자바스크립트로 그래프 Graph 구현하기

그래프란 노드(또는 vertex라고도 부른다.)와 그 노드를 연결하는 간선(edge)을 하나로 모아 놓은 비선형 자료 구조이다. 그래프는 방향성에 따라 무방향(undirected) 그래프와 단방향(directed) 그래프로 나뉘며 간선에 가중치를 할당하는 가중치(wei

2020년 10월 26일
·
0개의 댓글
post-thumbnail

[Data Structure] 자바스크립트로 Linked List & Hash Table 구현하기

연결리스트란 데이터를 저장된 데이터의 메모리가 연결되어있는 자료구조적 형태를 뜻한다. 연결 방식에 따라 단일 연결리스트와 이중 연결리스트로 나뉘어지지만, 이 포스팅에서는 단일 연결 리스트를 다룰것이며, 단일 연결리스트란 전체 리스트의 각 데이터마다 다음번째에 위치한 데

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