🔯 다형성 컴포넌트 시리즈 1. 태그에 따라 바뀌는 React 컴포넌트 만들기(with TypeScript) 2. 태그에 따라 바뀌는 React 컴포넌트 만들기 2 - As 속성 제한하기 3. 태그에 따라 바뀌는 React 컴포넌트 만들기 3 - 컴포넌트 별칭 정하기 부록. 다형성 컴포넌트 개발에 대한 고민 기록 ✅ 다형성 컴포넌트, 어떻게 만들 수 있을까? 다형성 컴포넌트 만들기 게시글은 이미 작성되어 올라가 있는 상태지만, 고민에 대한 기록을 남기는 것이 프로젝트에서 해야할 일이라 생각이 들어 다형성 컴포넌트를 만들면서 했던 고민들을 적어본다. 다형성 컴포넌트를 만들 때 고려했던 사항들은 아래와 같았다. 1. as라는 props를 직접 받아서 해당 태그로 렌더링될 것 2. 렌더링 될 수 있는 태그의 ..
엉망진창인 컬러 체계를 개편해보자. 디자인 시스템을 실제 개발에 적용하면서 기존 컬러 체계에 큰 문제가 있다는 것을 깨달았다. 더 문제가 커지기 전에 이를 한 번 다듬고 가야겠다는 생각으로 컬러 체계를 다시 정립하기로 했다. 기존 컬러 체계의 문제점 기존에 사용하고 있던 컬러 체계는 위와 같다. 이 컬러 체계는 크게 베이직 컬러의 모음인 컬러 팔레트와 베이직 컬러 중 자주 사용되고 핵심적인 컬러들을 모아 의미를 부여한 시멘틱 컬러로 구분된다. 시멘틱 컬러는 각 컬러마다 라이트/다크 모드 쌍을 가지고 있다. 이를 통해서 tailwind에서 dark:와 같은 속성을 사용하지 않고 편하게 개발할 수 있을 것이라 기대했었다. 그런데, 실제 개발에 들어가보니 이 컬러 체계에는 여러가지 문제점이 있었다. 1. 시멘..
프로젝트에 아토믹 디자인 도입하기 치스톡 프로젝트를 재개하면서 가져가려했던 목적 3가지가 있었다. 그 중 하나가 바로 디자인 시스템을 통한 효율적인 프론트엔드 개발이었는데 이의 연장 선상으로 아토믹 디자인을 치스톡에 적용해보려한다. 이전에 진행했던 프로젝트에서 야심차게 CDD를 도입했다가 야심차게(?) 실패했던 적이 있다. CDD는 작은 컴포넌트부터 만들기 시작해서 이를 조립해 하나의 커다란 페이지를 만드는 상향식 개발 방법론이다. 때문에 먼저 디자인이 나오고, 이를 바탕으로 컴포넌트를 분류한 뒤에 개발해서 짜올리는 방식으로 진행해야하는 것이 쉬운데 당시에는 이를 모르기도 했고 개발자가 디자인과 개발을 병행하다보니 너무 혼란스러워 제대로 진행되지 못했었다. (그래서 이번에는 디자인부터 차근차근 체계적으로..
디자인 완료 디자인 작업이 드디어 끝났다. 사실 남은 부분이 있긴 한데, 그런 부분들은 구현 우선순위가 낮은 편이고 또 디자인만 하다가 개발에 못 들어갈 것 같아서 마무리하려한다. 포트폴리오 화면을 따로 만들려고 했었는데 너무 힘들어서 홈화면의 자산 부분을 최근 조회한 종목으로 바꾸고 포트폴리오 화면을 아에 삭제했다. 이 프로젝트에 존재하는 화면은 단 두 개, 홈 화면과 개별 종목 화면이다. 포트폴리오는 나중에 기회가 되면..........먼 훗날에.......... 또, Secondary 색상과 Tertiary 색상이 바뀌었다. 원래 분홍색과 주황색으로 가져가려 했으나 빨간색도 있고 분홍색도 있고 주황색도 있고 하는게 너무 혼잡스러웠고, 주식이라는 도메인 특성상 그래프를 빨/파로 그리는 경우가 많기 때..
먼저, 디자인 현재 치스톡 프로젝트 디자인 작업 중이다. 8px 그리드 기반으로는 처음 작업해보는데 신경써야 할 것도 많고 재밌긴한데 어렵다. 그래도 지금이 꿈과 희망이 가득할 시점이니까.........기능 구현 생각 안하고 디자인 마구 그리는........... 모바일 대응도 하고 싶은데, 일단 PC 디자인이 빨리 끝나고 모바일 디자인을 호다닥 해봐야겠다. PC는 12 Column, Gutter 16px로 작업 중..... 모바일은 4 Column, 8px Gutter로 작업 예정.... 여러 레퍼런스에서 디자인 틀을 조금씩 가져왔다. 모방은 창조의 어머니라 하지 않던가.... 네이버 증권, 토스 증권, 인베스트 인포, 매일경제 증권, 기타 컨셉 디자인 등등등등 감사합니다... 그래도 전체적인 색 톤이..
2022년 6월 10일에 시작한다 선언해놓고 퍼블리싱 끝나고 손도 안 댄 치스톡 프로젝트. 변명을 하자면 부스트캠프 참가 같은 일들 때문에 2.0 개편을 시작하기도 전에 엎어져 버렸다...는 변명을 들 수 있겠다. 그리고 2023년 초복을 맞아(?) 무덤에서 꺼내와 프로젝트 개편을 다시 시작해보려고 한다. 왜 새 프로젝트를 안하고 기존 프로젝트를 다시 하는지? 그렇게 부스트캠프를 수료하고 졸업 후에 공고들을 많이 보는데, Next.js와 데이터 시각화와 관련된 요구사항이 많이 보였다. 치스톡 프로젝트에서 주식 대시보드 프로젝트로 실시간 주식 차트를 보여준다는 점에서 데이터 시각화를 차트 컴포넌트만 React Server Component를 적용한다면 뉴스나 회사 정보에는 Next.js를 사용해볼 수 있지..
GDSC 1차 팀프로젝트였던 투표 SNS, Boat-Vote. 배포까지 완료되었지만 해결하지 못했던 문제가 몇 가지 있어 차례차례 해결해보려 한다. 먼저, input 비동기 문제이다. 문제 상황 위 화면은 투표 게시글 작성 팝업에서 투표 항목을 4개 모두 작성한 화면이다. 이 상황에서 세번째 투표 항목을 지울 경우 1, 2, 3, 4에서 1, 2, 4가 되어야 마땅하지만, 1, 2, 3으로 표시되는 문제가 발생하였다. 그와중에 state는 1, 2, 4로 정상적으로 들어가있어 게시글 등록 시에는 1, 2, 4로 정상적으로 나왔다. 즉, state가 변해도 input의 값이 갱신되지 않는 문제가 발생하였다. 원인 파악 원인을 파악하기 위해 3번째 input box의 디자인만 변경한 채로 3번째 input을..
GDSC에서 프론트앤드 스터디에서 리액트를 처음 학습할 때 진행했던 팀 프로젝트인 치스톡. 지금이라고 많이 성장한 건 아니지만 (기말고사에 치어서 학부 공부하기도 바쁘고) 첫 프로젝트이기도 하고 로고도 직접 만들었고 리드미도 못 적힌 채 남겨두기가 아쉬워서 개인적으로 공부도 할 겸 퍼블리싱을 다시 하고 기능을 추가하며 업그레이드를 진행해보려한다. 시작은 좀 전에 했지만.....진행 도중에 글을 작성하는 이유는, 혼자서 꼬물꼬물 해봐야 아무도 안 알아주기 때문에......... 프로젝트를 발전시켜가며 공부하는 과정을 기록하고자 뒤늦게 글을 적는다. 스터디에서 팀으로 진행했던 버전을 1.0으로, 개인적으로 진행하는 버전을 2.0으로 명명한다. 더보기 치스톡 2.0 현재 퍼블리싱이 진행 중인 치스톡 2.0의 ..
다운로드 개요 이걸 왜 만들었냐면 2021년에 정보처리기사 공부하다가 파일이 전부 hwp 확장자였다. hwp나 pptx는 어플에서 불러오지 못하거나 깨지는 경우가 많아서 전부 pdf로 바꿔주어야 했는데 2011년부터 2021년까지 10년치 기출문제를 전부........바꿔주기엔 너무 귀찮았다. (무엇보다 동기부여가 안됐다) 한글과 컴퓨터 API는 링크를 참고 (좀 불친절하다) 이 역시 동영상 프레임 추출 프로그램처럼 GUI에는 tkinter 라이브러리를 사용했고, exe 파일로 만드는데에는 pyinstaller 라이브러리를 사용하였다. 사용 라이브러리 pywin32 : 한글 프로그램을 다루기 위해 설치해야하는 라이브러리 코드 from glob import glob import win32com.client..
다운로드 학교에서 졸업 프로젝트를 진행하면서 영상의 프레임을 추출해야하는 일이 생겨서 만든 프로그램이다. 이 작업 하나 때문에 프로그램 깔기도 좀 뭐하고 파이썬을 막 시작했을 때라 뭔가 만들어보면 좋을 것 같아서 만들었었다. gui는 tkinter 라이브러리로, 동영상 프레임은 opencv 추출하도록 짰고, exe파일화는 pyinstaller 라이브러리를 깔아서 만들었다. 지금도 그렇긴하지만 파이썬의 기초조차도 아에 모를 때라서 검색에 의존해서 마구자비로 만들었는데 꽤 최근까지도 나름 잘 썼었다.(그런데 폴더나 이름이 한글이면 관련 처리를 안해줘서 추출이 안됬던걸로 기억) import os desktop = os.path.join(os.path.expanduser('~'),'Desktop') def fi..
GDSC KNU 활동을 하면서 FE 1팀에 속해 React 스터디 진행 중에 만든 과제이다. 이런 것도 토이 프로젝트일까 싶다만은 딱히 분류 게시판이 없어성....... 제한 조건은 다음과 같았다. - React를 이용할 것 - 휴대폰처럼 '-' 등장하도록 할 것 - 일정 글자 이상 시 제출 버튼 활성화 및 색상 변경 - 제출 버튼 클릭 시 페이지가 이동하고 입력한 값을 띄울 것 - Container-Presenter 패턴 사용할 것 Container-Presenter 패턴 화면에 보여지는 UI인 Presenter와 데이터를 처리하거나 실질적인 처리를 하는 Container를 분리하여 만드는 패턴 src │ App.js │ index.js │ ├─components │ BottomButton.js │ B..
