도팍 개발공부 도팍 개발공부

Button 컴포넌트 만들고자 하는 Button 컴포넌트가 활용되는 방식은 아래와 같습니다.. 일반적인 button element form의 submit a tag를 이용한 페이지 라우팅 (next/link 사용) Button Component를 만들면서 저는 a tag를 이용한 페이지 라우팅 기능을 포함시키도록 하는 것이 엄청 어려웠습니다. 아래의 코드와 같이 저는 as prop을 통해 as prop에 "div"를 작성하면 div 엘리먼트로 변환이 가능하고, as prop으로 "a"를 주입하면 a tag가 되도록 변환하길 원했습니다. 이런 기능이 가능한 component를 polymorphic component라 하는 것을 이번에 처음 배웠습니다.ㅎㅎ 그런데 타입스크립트와 같이 사용하는 경우 까다로워져..

아래의 AuthService 클래스는 인증 관련 비즈니스 로직들을 다루는 모듈입니다. 기능적으로 문제없지만 리팩토링할 수 있는 부분들은 있습니다. class AuthService { /** refreshToken을 이용해 새로운 토큰을 발급받습니다. */ async refresh() { const refreshToken = cookies.get("refreshToken"); if (!refreshToken) { return; } const { data } = await axios.post( process.env.NEXT_PUBLIC_API_HOST + "/auth/refresh", null, { headers: { Authorization: `Bearer ${refreshToken}`, }, } ); c..

게임을 만들며 했던 고민들 - 컴포넌트를 어떻게 나눌 것인가? 색깔 찾기 게임을 만들며 핵심 state를 제어하기 위해서는 컴포넌트마다 여기저기 놓여있는 것보다 한 곳에서 제어하는 것이 편할 것이라고 생각하여 핵심 state 제어 관련 기능은 App.tsx에서 구현했습니다. 컴포넌트는 Block, Section, Header로 나누었습니다. Header은 게임 상단의 스테이지, 남은 시간, 점수를 포함하는 컨테이너입니다. Section은 실제 게임을 담은 컨테이너며, Block은 각 색깔이 담아있는 컨테이너입니다. 모두 논리 관련이 아닌 아래의 Section 컴포넌트의 코드와 같이 스타일 관련 코드로 이루어져 있습니다. // Section Component import styled from "styled..

클래스101 클론 Github: https://github.com/dohpark/class101clone Page: https://class101clone.herokuapp.com/ # 0 세팅 및 라이브러리 세팅은 cra(create-react-app)을 사용했습니다. class 101 디자인 시스템 라이브러리를 사용할까 생각했지만 결국 사용 안했습니다... # 1 아토믹 디자인 폴더는 크게 atoms, molecules, oranganism으로 나누었습니다. atoms에는 Badge, Button, Icon, IconButton, Image, TextButton 등 재활용할 수 있는 가장 작은 단위로 나누었습니다. Icon의 경우 svg파일을 직접 사용하기 보다는 컴포넌트로 사용할 수 있도록 했습니다..

웹접근성이란 웹 접근성이란 많은 사람들이 웹 사이트의 콘텐츠를 활용 할 수 있도록 하는 방법입니다. 신체적인 원인으로 웹 이용에 불편함을 느끼는 사용자들을 포함하여 느린 네트워크 문제 등의 원인으로 웹 콘텐츠에 제한이 있는 이용자들에게 좀 더 편의를 제공하기 위해 웹접근성은 지켜야 합니다. 웹 접근성을 좀 더 직접 느끼기 위해 보조 도구를 활용하여 웹 사이트를 사용해보겠습니다. 저는 스크린 리더기를 사용해보겠습니다. 스크린 리더기는 웹 사이트 내의 콘텐츠를 읽어가며 어떤 콘텐츠가 있는지 사용자에게 설명을 해줍니다. 맥의 경우 기본적으로 보이스 오버라는 유틸리티가 있습니다. 이를 활용하면 스크린 리더기로 사용할 수 있습니다. 맥에서 보이스 오버를 킨 후 웹접근성이 좋은 웹사이트와 웹 접근성이 낮은 웹사이트..

위와 같이 vertex(정점)과 edge(정점간의 연결하는 선)으로 구성되어 있는 자료구조를 그래프라고 부릅니다. 그래프 자료구조는 방향성 유무, 무게 유무, 그래프 모양 등에 따라 달라지기 때문에 여러 종류가 있습니다. 또한 다양한 모습의 그래프 자료구조 덕분에 최단거리를 통해 목적을 도달하기 위한 알고리즘, 최소한의 가중치로 목적에 이동하는 알고리즘 등 필요한 목적에 따라 구현한 알고리즘들도 많습니다. 이번 글을 통해 그래프의 기본용어, 자바스크립트를 통한 그래프 구현을 정리해보았습니다. 그래프 기본용어 vertex (정점) : 위 그림의 a, b, c 등의 노드를 부름 edge (간선): 노드 a와 노드 b를 연결하는 선을 부름 degree of vertex (차수): 노드의 간선 개수. 노드 a의..

내 풀이법 문제해석 게임 캐릭터의 이동거리를 구하라! 제한사항 위 그림의 좌표면을 넘어설 수가 없음! (최대 5 최소 -5) 처음 걸어본 거리만 이동거리로 해당됨! 내가 생각한 풀이법 각 이동(up, down, left, right)마다 값을 변경하는 함수를 작성한다 [제한사항1] 이동한 루트가 중복 안됨 set객체를 사용해야겠다고 생각함 [0, 0] 좌표에서 [0, 1] 좌표로 이동을 "0001"로 string으로 값을 주고 이를 set 객체에 넣음 [0, 0] 좌표에서 [0, 1] 좌표로 이동 ("0001")과 [0, 1] 좌표에서 [0, 0] 좌표로 이동함 ("0100")은 루트 상 똑같기에 두 값 모두 set 객체에 넣어야함. (그러므로 마지막에 set.size()를 2로 나누어야함) [제한사항2..

리액트는 안타깝게도 라우팅 기능을 내장 되어있지 않아 이를 도와줄 수 있는 라이브러리를 사용해야 합니다. 많고많은 리액트 라우터 라이브러리 중에 사람들이 가장 많이 사용하는 react-router-dom에 대하여 알아보겠습니다. 설치 먼저 새로운 프로젝트 생성 후 해당 프로젝트 디렉토리로 이동하겠습니다. npx create-react-app router-practice cd router-practice 그 후 react-router-dom 라이브러리를 설치하겠습니다. npm install react-router-dom 예시 1 : 기본 라우팅 import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "re..