profile
DFF (Development For Fun)
post-thumbnail

Compound Components Pattern 을 이용해서, Form Component 리펙토링 하기

Form 컴포넌트를 Compound Component Pattern을 사용해서 리펙토링 해보자 리펙토링을 하는 이유 예시) 예를 들어, form 을 만들면서 disabled 값을 input 에 넣었을 때, input 과 관련된 label button 들도 모두

2022년 8월 17일
·
0개의 댓글
·
post-thumbnail

[회고] 달다 MVP 를 만들면서

회고를 작성 하는 이유 만들었지만, 서비스를 릴리즈 하기전에 폐기 하기로 결정 하였다 달다 MVP 를 만들면서, 실제 달다 프로젝트의 기능, DB 구조 및 디자인등을 회의하고 계속해서 기획을 하면서 몇가지 생각이 들었다. > 해당 페이지 View 들을 2달 안에

2022년 8월 14일
·
0개의 댓글
·
post-thumbnail

나는 서버가 없어도 개발해 - MSW

Mock Service Worker 는 말 그대로 가짜 서버 역할을 해서 네트워크 레벨에서 가짜 데이터를 주고 받을 수 있는 라이브러리 입니다. 최신 브라우저 WEB API 중 하나인 `service worker` 를 이용하여 가짜 서버를 사용하도록 돕습니다.

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

React Compound Component Pattern 을 이용해서 Masonry UI 만들기 [2]

작성중참고: https://velog.io/@bbumjun/masonry-레이아웃으로-갤러리-구현하기

2022년 7월 23일
·
0개의 댓글
·

React Compound Component Pattern 을 이용해서 Masonry UI 만들기 [1]

먼저 버튼을 누르면 숫자가 올라가는 버튼을 만들고 다른 컴포넌트에서 사용 한다고 하였을 때,처럼 불러와 사용하게 된다면, 버튼의 스타일과 얼마나 많이 숫자를 증가 시킬지를 고려하기 어려울 것 입니다. 이에 따라 개발자들은 Props 를 통해 재사용성을 높일 수 있습니다

2022년 7월 23일
·
0개의 댓글
·
post-thumbnail

React + Ts Project With Vite

yarn create viteset project name select framework reactselect variant react-tscd vite-projectyarneslintyarn add -D eslint eslint-config-airbnb eslint-

2022년 7월 17일
·
0개의 댓글
·
post-thumbnail

[회고] DX 가 좋은 Custom Hook (useModal) 만들기 feat. 함수 오버로딩

해당 라이브러리는 https://www.npmjs.com/package/@jaewoong2/modal 에서 확인 할 수 있습니다.DX란, Developer Experience 의 약자 입니다. @jaewoong2/modal은, 자바스크립트 라이브러리 로서 개발

2022년 7월 15일
·
0개의 댓글
·
post-thumbnail

[작성 중] Modal Library 제작 - 0

2022년 7월 11일
·
0개의 댓글
·

타입스크립트 설정

2022년 6월 14일
·
0개의 댓글
·
post-thumbnail

React 18, Suspense 한눈에 알아보기

이전에는 React.lazy와 함께 사용 되었으나, 현재는 이외에도 선언적으로, 데이터 비동기 렌더링 처리를 도와준다.Suspense 로 감싸여진 컴포넌트가 비동기 데이터 처리를 하고 있음을 알 수 있다.비동기 데이터 처리를 하고 있는 컴포넌트의 코드가 짧아진다. \

2022년 5월 29일
·
0개의 댓글
·

실습준비2

외부에서 private 네트워크 내에 생성한 vm에 접속 하기 위해서 floating ip 및 주소를 할당하고 해당 vm에 nginx를 설치 후, 웹페이지 를 수정private 네트워크 생성1\. 네트워크탭의 네트워크 - 네트워크 생성2\. 네트워크 이름 private

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

실습준비

안녕하세요 본 영상은 OPEN VPN 접속 이후 OPENSTACK 에서 생성한 VM 에 PUTTY로 원격 접속하는 방법에 대한 영상PUTTY 는 서버, VM에 PC 를 통해 원격으로 접속 할 때 운영체제 에서도 서버 OR VM 에 접속 할 수 있도록 한다. (SSH 접

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

넘블 챌린지 [다른 색깔 찾기 게임]

상태관리 라이브러리 사용하지 않고 구현 하기

2022년 2월 7일
·
0개의 댓글
·
post-thumbnail

넘블 프론트엔드 디자인 시스템 기반 클론 코딩 챌린지

클래스101 의 메인페이지를 클론 코딩하는 챌린지를 하였다. 처음 봤을 때는, 서버와의 통신 및 다른 요구조건 없이 퍼블리싱과 반응형 디자인 위주로 하면 되기 때문에 시간이 많이 걸리지 않을 것이라고 예상 하였다. 하지 세분화된 반응형 디자인, 디자인 시스템 기반으로

2022년 1월 16일
·
0개의 댓글
·

CPP) 상속 Class 강의 준비

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

vanilla javascript 로 spa 만들기 (2) (component, props 사용)

이번에는 실제 프로젝트를 만들면서 알아보도록 하겠습니다.App : 전체 컴포넌트 및 Router 등을 제어하는 역할Main : <main> Router에 따라서 main 에 views 중 1가지 Component 가 들어옴Nav : <nav> 클릭시 이동Vi

2021년 9월 12일
·
0개의 댓글
·

vanilla javascript 로 spa 만들기 (1) (component, props 사용)

영상에서는 router 함수에서 직접 routes 들을 설정해서 관리를 했는데, 직접 router 파일에서 관리를 하는 것보다 Component들을 관리하는 app.js 에서 router,routes 등을 설정해줘서 좀더 관리에 용이하도록 수정 하였다.potential

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

[프로그래머스 LV3] 가장 긴 팰린드롬

문제설명 S의 길이가 n이라고 할 때, 0부터 N - 1 까지 의 문자열 이 가장 긴 문자열이다. 즉, 0부터 N-1, N-2, N-3, ... , 0 까지, 1부터 N-1, N-2, ... , 1 까지 ⋯⋯ N부터 N까지 이런 식으로 반복하며, 각각의 문자열이 펠린

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

[프로그래머스 LV3] 가장 먼 노드[프로그래머스 LV3] 가장 먼 노드

문제설명가장 먼 노드란, 자신밑에 하위노드가 없는 노드가 아니라 1 에서 가장 먼 노드 를 의미한다.각 노드가 1로부터 얼마나 떨어져 있는지 알면 쉬움.BFS 를 사용해서 각 노드가 얼마나 떨어져 있는지 확인하자. (현재 노드까지의 거리 = 이전 노드의 거리 + 1)

2021년 3월 25일
·
0개의 댓글
·

[알고리즘 Python]- Dijkstra, 다익스트라 알고리즘, 우선순위 큐 사용

Graph에서 원하는 노드 start node 에서, 특정 노드 target node 까지 가는 최소비용 찾는 알고리즘우선순위 큐우선순위 큐를 이용하면 가장 작은 비용의 값만 pop() 할 수 있다.이를 이용해서 작은 비용의 값만을 비교해서 traget node 까지

2021년 3월 18일
·
0개의 댓글
·