전체 글

2022.12.04 개발자 이야기 (원씽)

독서 어릴 때 부터 부모님은 항상 여유가 없이 바쁘셨고 그 어떤 선택도 대신 해주지 않으셨습니다. 저에게 인생은 늘 책보다는 몸으로 부딪히는 현실이었고 독서는 그저 바쁜 현실에서 여가시간을 보내는 수단으로 굳이 안해도 되는 것 일이거나 귀찮게 독후감을 써와야 하는 과제 정도로 여겼습니다. 그런데 요즘 책을 기반으로 한 모임에 나가서 사람들과 책의 주제에 대해 이런저런 이야기 해보며, 독서의 매력에 빠져들고 있습니다. 요즘은 책이 전통적인 데이터베이스의 형태로 데이터의 집합체로 느껴집니다. 나이가 어릴 때 처했던 곤란한 일들은 비교적 가벼운 수준이었으나, 나이가 들면 들 수록 처하게 되는 (결혼, 사업, 투자 등등...)일들은 감당할 수 없는 수준인 경우가 많더군요. 이제는 제 인생에 책의 도움이 필요할 ..

2022.11.16 개발자 이야기 (프로젝트 결과? 다음 프로젝트?)

근황 최근에 프로젝트가 끝나고 스터디도 끝나가서 겨우 여유가 생겼습니다. 다시 모임에도 나가면서 사람들을 만나고 있고, 헬스도 주 2~3회 정도 꾸준히 하고, 산책도 자주 하고 있습니다. 😁 그동안 너무 쉬지 않아서 그런지??? 요즘 가만히 있어도 기분이 좋네요. 아주 기운이 납니다. 11/10 로 끝난 넘블 프로젝트는 11/17 까지 내부 투표를 진행해서 심사위원 점수와 합산해 1,2,3등을 뽑는다고 합니다. 다른 팀 개발자 분들의 깃허브를 살펴 봤을때 제가 커밋수도 194개로 가장 많고, Native 까지 구현해서 APK 파일 까지 뽑은 사람은 저 밖에 없는 것 같습니다. 등수와 상관없이 저 스스로가 굉장히 만족스럽네요 👍 그런데 왜인지 모르겠지만... 한 3팀 정도? Vite + tailwind 사..

넘블 금융앱 리뷰얼 for 액티브 시니어 프로젝트 개발 회고록

[연계 챌린지] 액티브 시니어를 위한 금융 앱 온보딩 페이지 제작하기 (링크) 지난 6주 (09-30(금) ~ 11-10(목)) 간 진행된 프로젝트에 대한 개발 회고록 입니다. 미션 OO은행에서 재직하고 있는 당신은 어느날 액티브 시니어들을 주고객층으로 끌고 오라는 미션을 부여받습니다. 그들을 고객으로 끌고 오기에 매력적인 포인트들을 잡고 기존에 쓰고 있는 금융앱을 리뉴얼하여 온보딩페이지를 제작해주세요. 들어가는 내용에 대한 제약은 없습니다. 기획, 디자인, 기능 부분에서 리뉴얼할 부분이 있으면 포함하여 고려해주세요! 사용하고 계신 금융 앱 중 하나를 팀별로 골라 액티브 시니어를 겨냥하여 리뉴얼해주세요. 어떤 기능을 추가하거나, 어떤 컨셉을 담을지, 어떤 서비스를 추가할 것인지는 팀원들의 자율입니다. 온..

2022.10.26 개발자 이야기 (체력 고갈 후 회복, numble 프로젝트)

근황 요즘 날이 추워서 그런지 몸에 기력이 없고 아침에 일어나기가 너무나 힘들어서 운동도 한 주에 1~2번 밖에 안가게 되더군요.. 9~10월 넘어가면서 너무 무리를 한 탓인가 봅니다. 웬일로 오늘은 기운이 나서 밤에 산책을 나간겸 도림천을 한바퀴 뛰고 왔습니다. 뛰고나니 정말 개운하고 보람차더군요 ㅎㅎ 집에서 재택근무 하는 날에는 종종 밤마다 뛰어야 겠습니다. 프로젝트 근황 9월 부터 시작한 numble 금융앱 개발 프로젝트는 잘 진행하고 있습니다. 현재 기획자 2명, 디자이너 1명 그리고 개발자 저 1명 이렇게 4명이 한 팀으로 진행하고 있습니다. 주제는 기존 금융앱을 액티브 시니어를 대상으로 리뉴얼하여 온보딩 페이지를 개발하는 것 이고 프론트엔드 단 까지만 개발하면 됩니다. 처음에는 주최측인 num..

2022.09.26 개발자 이야기 (블로그 리모델링, 사내 스터디)

블로그 리모델링 정말 옛날 부터 계획하던 블로그 리모델링을 이제야 하게 되었습니다. 꼭 넣고싶었던 다크 모드 on/off 기능도 넣었습니다. 이제야 좀 보기도 좋고 예쁘네요. 사내 스터디 이번 주 부터 사내 스터디를 시작하게 되었습니다. 한 주에 알고리즘 스터디와 디자인 패턴 스터디를 각각 1회씩 진행하게 됩니다. 알고리즘 스터디 스터디 참여자 마다 한 주 씩 돌아가면서 알고리즘을 선택하고 이론 자료 및 발표 준비합니다. 그리고 세 문제를 정하면 다른 분들이 한 주동안 문제를 풀고, 서로서로 코드리뷰 합니다. 스터디 당일에는 발표자가 세 문제 중 한 문제를 풀이해주고 발표하는 식으로 진행 합니다. 첫 스터디가 바로 내일 이네요 ㅎㅎ 이번 주는 제가 발표자는 아니지만, 최대한 의미 있는 시간을 보낼 수 있..

파이썬(python) 백준 1966 : 프린터 큐

collections 라이브러리에서 deque 를 큐로 사용하였습니다. 첫번째 요소를 추가/제거 하는 appendLeft(), popLeft() 메소드 지원 마지막 요소를 추가/제거 하는 append(), pop() 메소드 지원 모든 요소를 왼쪽/오른쪽 으로 회전시키는 rotate() 메소드 지원 Target(인쇄되는 순번이 궁금한 문서)의 index를 기억하기 위하여 튜플(우선순위, 0또는1) 형태로 변환해주었습니다. Target 만 1입니다. zip() 함수를 이용하여 [1,2,3] [0,0,0] => [(1,0), (2,0), (3,0)] 형태로 묶을 수 있습니다. 이렇게 안하고 enumerate() 로 index 를 집어넣고 index가 m 인 요소인지로 판별해도 됩니다. 우선순위 오름차순 정렬 ..

파이썬 가변 인자 *, *

가변 인자를 받을 때 * : positional arguments 순서 기반으로 동작 합니다. a,b,c = 함수(1,2,3) 이면 a=1, b=2, c=3 c,b,a = 함수(1,2,3) 이면 a=3, b=2, c=1 ** : keyword arguments key 기반으로 동작 합니다. a,b,c = 함수(c="3", b="2", a="1") 이면 a=1, b=2, c=3 a,b,c = 함수(a="1", b="2", c="3") 이면 a=1, b=2, c=3 둘이 함께 사용도 가능하지만, * 이 ** 보다 와야 합니다. def test(*args, **kwargs): print(args) print(kwargs) test('1', '2', '3', fourth='4', fifth='5') # 결과 #..

2022.09.18 개발자 이야기 (백엔드 스터디 시작, numble)

백엔드 7월 부터 사내 백엔드 스터디를 청강했는데 백엔드를 많이 알면 알 수록 백엔드 분들과 소통도 편해지고, 이슈가 발생했을 때 백엔드 분들께 "이슈 발생했는데 봐주세요" 가 아니라 "백엔드 로그/코드 살펴보니 어느 부분이 의심이 된다. 혹은 어느어느 부분에서 문제가 있다." 라고 상세하게 말씀드리고 같이 이슈를 해결할 수 있게 되었습니다. 나는 최소한 프론트 2-3년 붙잡고 있다가 질릴때 쯤 백엔드를 하게 될 거라 생각했는데 백엔드에 전혀 무관심하면 안되겠다는 걸 느끼면서 동시에 프론트 시작한지 벌써 1년이 지났고, 너무 바쁘게 달리다보니 이러다가 성장 침체기? 번아웃? 이 빠르게 오지 않을까 라는 괜한 걱정이 들기 시작하면서 백엔드 스터디라는 큰 결심을 하게 되었습니다. 결심하고 결심하고 결심만 하..

2022.09.11 개발자 이야기 (8월은 재정비의 달)

7월 말 라이브 배포를 끝마치고, 8월은 공식적으로 재정비에 들어가는 달이었습니다. 일도 쉬엄쉬엄하고 몸도 마음도 회복하는 시기었죠. 운동 저는 7월 24일부터 아침 헬스를 시작하였고, 거의 일주일에 5~6번은 꾸준히 나가고 있습니다. 몸과 마음이 지치고 생각이 복잡할때 운동만한 것이 없더군요. 운동할 때만큼은 잡생각을 하지 않고 지금 이순간의 운동에만 집중할 수 있어서 참 좋은 것 같습니다. 끝나고 나면 정말 개운하기도 하고 성취감도 있고요. 이제 겨우 1달 하고도 조금 더 했는데 걸을 때나 계단 올라갈때 훨씬 힘이 나네요. 몸도 건강하고 좋아지니 더 당당해진 기분입니다. 운동은 3분할로 쪼개서 밀기/당기기/하체를 돌아가면서 하고 있고, 운동 기록이나 메모는 번핏 어플로 기록하고 있습니다. 저는 엄살이..

리액트 URL Hash기반의 서브페이지 관리 체계 도입

우연히 서핏에서 리액트 관련 블로그 글을 보다가 NHN의 TOAST 기술 블로그에서 Jotai 라이브러리에 있는 atomWithHash 로 모달 상태를 URL과 동기적으로 관리하는 방법에 대해 소개하는 글을 보았습니다. 회사에서 상태관리 라이브러리로 Redux Store를 사용하고 있어서 Jotai 를 같이 사용할 순 없을 것 같았지만, URL로 상태관리를 한다는 컨샙 자체가 저에겐 상당히 신선했습니다. 거미줄 처럼 엮여있는 지저분한 수 많은 상태 관리용 boolean 값을 모두 없애버릴 수 있는 절호의 기회라는 생각이 가장 크게 들었고, 기존의 라우터와는 독립적으로 동작하기 때문에 라우터나 기존의 코드 사이에 코드를 끼워넣지 않아도 된다는 점이 큰 매리트라고 생각이 되어서 당장 회사에 가서 도입해볼 마..

2022.08.04 사는 이야기 (근황: 웹 프론트엔드 신입)

정말 오랜만에 블로그에 글을 쓰게 되었습니다. 2월에 퇴사를 하고나서 3월 부터 바로 스타트업에서 웹 프론트엔드 개발자로 새 인생을 시작하였습니다. 제 인생에는 쉬는 기간이 없네요. 첫 회사도 대학 졸업하기도 전에 붙었고, 퇴사하고 일주일만에 새 회사로 ㅎㅎ... 하지만, 저는 바쁘게 빈틈없이 사는 게 좋습니다. 이직 소감 이제야 내가 있어야 할 곳으로 왔다. 라는 생각이 가장 컸던 것 같습니다. 고향에 돌아온 기분이었습니다. 우리집, 근무환경, 근무방식, 사람들, 업무... 모든 것이 바뀌었기 때문에 처음에는 쉽게 적응하기 어려웠지만, 분명한 것은 아침에 회사 가는것이 너무 행복했고 일하는 것이 너무 즐거웠습니다. 물론 그 마음은 지금도 동일합니다. 걱정스러웠던 부분은 회사에서 다루는 도메인에 대한 ..

redux persist : 새로 고침 시에도 상태 유지

요약 redux-persist 패키지 사용 자동로그인을 원하면 localStorage를 사용 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 사용 목적 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다. 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 이런 경우 사용될 수 있음 원리 App 이 불러와졌을 때 로컬스토리지에 있던 유저 정보 사용 서버에 현재 로그인 상태 재검증 서버가 응답한 로그인 정보로 업데이트 만약에 토큰이 만료되었을 시에는, 재로그인 요청 웹 스토리지 객체(web storage object) 개념 이해 종류 localStorage sessionStorage localStorage와 sessionStorage는 브라우저 내에 키..

React RTK Query 캐시

캐시 태그 시스템 여러 컴포넌트에서 Query Endpoint를 구독하여 Request하는 경우 동일한 요청이 여러 번 있을 때 한 번만 서버에 Request한 뒤 캐시 데이터를 돌려씀 컴포넌트1 : fetchData() → 서버로 데이터 Request 컴포넌트2 : fetchData() → 캐시 데이터 사용 컴포넌트3 : fetchData() → 캐시 데이터 사용 다른 Query여도 캐시 Tag값이 같다면 같은 데이터를 사용하는 것임 postData1(), providesTags=["Tag1"] postData2(), providesTags=["Tag1"] 무효화를 통해 캐시 데이터를 자동 refetch 받아오거나 제거할 수 있음 // 이 부분은 좀더 공부가 필요함!! postData1(), inval..

React Redux Tookit 사용 방법

본 게시물에서는 Redux Toolkit 을 사용한 버전으로 예시를 들어보겠다. 리덕스를 훨씬 편한 방법으로 사용할 수 있는 확장팩이라고 생각하면 된다. Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 리덕스에 관해서는 아래 게시물을 보고 이해하고 오면 된다. React Redux (리액트 리덕스) 리덕스란? 리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다. 리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데 나머지 Model, Controller..

리액트 이론 정리 (JSX, Component, Virtual DOM)

리액트의 3가지의 대표적인 특징 JSX 문법 Component 기반 Virtual DOM 1. JSX 문법 소개 HTML을 마치 JS처럼 편리하게 사용하기 위한 리액트 JS 확장 문법 HTML 문법을 JavaScript 코드 내부에 쓴 것이다. 빌드 시 Babel에 의해 자바스크립트로 변환된다. React 17릴리즈(대략 2020년 9월 22일) 이전버전은 React를 import 하지 않으면 JSX를 이해하지 못함 import React from 'react'; 규칙 속성은 따옴표로 감싼다. 반드시 태그를 닫는다. 모든 태그는 Self-closing 이 가능하다. 변수값은 중괄호로 감싸서 표현 반드시 div/Fragment태그로 감싸진 형태로 써야한다. return ... // did work cons..