나는 오늘도 멋있다

오늘은 일찍부터 프로젝트부터 시작을했다. 조금씩 밖에 할수없지만.... 아직 데이터에 따라 처리해주는것이아닌 기본적인 ui를 잡아 놨다. 그런데 문제는 코드가 말도 못하게 더럽다... Tailwind 때문도 있지만 컴포넌트를 분리하지 않아서 그런것도 있다. 빠르게 컴포넌트를 분리해야겠다.

프로젝트를 진행하는 텀이 길어지고있다... 다른 부트캠프를 시작했더니 준비할게 있다보니 늦었다. 이외에도 여러가지가 있었지만 핑계.. ? 여전히 Tailwind는 적응 되지않는다. 있는 그대로를 사용해야하는데 적시모드를 사용하다보니 Tailwind를 잘활용하지 못하는거 같아서 공식홈을 보고 css속성을 여러번 바꾸기도 했더. 이왕이면 존재하는 유틸리스 클래스를 사용하기위해서... 또한 flexbox만 사용하다보니 간단한것도 코드가 길어지는 부분을 수정하고자 Grid를 공부하면서 적용해보는중이다. 좀더 분발하자

이전 글에서는 Home component를 다루는 page.tsx에서 nav의 기능을 다루도록 하였다. 하지만 나의 프로젝트 특성상 nav기능은 모든페이지에서 적용되므로 다시 Layout.tsx에서 그리도록 변경하였다. next.js의 파일구조를 명확하게 파악하지 못하여 발생한일이다. 사진과 보다시피 사이드에서 nav가 위치하고 있고 모든 내용들이 가운데에서 렌더링 되도록 하려는 구조였다. next.js 페이지 단위로 로드가 이루어진다는 생각에 메인 page.tsx에 nav기능을 넣은거 였다. 코드는 변경된것이 없다. 다만 코드의 위치변경을 해주었다. 이러한 점은 Login창을 구현하려할때 발견하였다. 기본적으로 유지되어야하는 Layout이 적용되지 않아서 알게 되었다. 아마 React의 영향이 아닌가 ..

4 ~ 8 일사이에 많은 일들이 있었다. 당연히 아르바이트 때문에 조금만 작업한 날도 있었지만.... Tailwind가 속을 썩있는 바람에... css 프레임워크는 처음써본다. 기본적으로 React에서는 styled-component를 사용했었고, css파일에 클래스를 정의하여 사용도 해봤다. 그래서 그런지 가독성이 떨어지는 부분이 있긴하다. 또한 유틸리스 클래스를 모르니 공식홈페이지를 보면서 적용하는것도 시간이 들어갔다. 초기작업이라 기본적인 css설정을 해놓고 추가로 설정들을 넣어볼예정이다. 태그 초기화는 할게 많지만 그때그때 필요한 부분만 하는게 좋을것같아서 아직 다하지는 않았다. router-button 클래스는 기본적으로 페이지를 이동하는 Link 태그의 css인데 많이 사용할거 같아 따로 빼두..

ERD를 작성한 후 github를 좀더 깔끔하게 관리해보려고 다른 프로젝트를 참고했다. 1. Labels 설정하기 2. issues Template 협업시에는 issues를 잘활용 하는것 같다. issues는 기획, 작업, 개선사항, 버그수정, 추가될 기능등 여러가지를 포함하여 이슈를 등록하고 해당 이슈를 기반으로 작업을 진행하는 것 같다. 위처럼 label을 설정하고 이슈 템플릿을 설정해놓으면 해당처럼 바로 작성할수있고 라벨을 설정할수있다. Projects는 칸반보드로 해놓고 쓰긴하는데 issues를 한눈에 볼수있기도하다. milestone은 아직 쓸생각은 없다. branch와 issues만 잘이용해도 git을 깔끔하게 관리할수 있을것 같다. 노력하자

이틀동안 면접을 준비하면서 redux를 다시 공부하느라 ERD작성이 늦어졌다. 처음 작성해보는 ERD인 만큼 많이 조잡하지만 내가 테이블을 짤때 도움되기 위해 작성해본다 관계의 표현 해당표현방식처럼 테이블과의 관계도를 나타탤수 있다. 말그대로 작대기 하나면 1개, 동그라미는 0개, 분포작대기는 N개로 이해하면 간단했다. Figma or FigJam으로 그려보려했지만 관계도 그래프가 작성되지않아서 루시드차트를 이용했다. 하지만 루시드 차트도 무료 버전으로 쓰기에는 한계가 있었다(그리다보면 더이상 도형 추가되지않음) 그래서 다른게 뭐가 없을까 하다가 dbdiagram이란것을 찾게 되어 작업은 여기서 진행했다. 간단하게 왼쪽에다가 쿼리문가 비슷하게 작성해주면 오른쪽에서 표시가 되어 편하긴 하다. 조금은 공부는..

작성계기 오전에 FlowChart를 그리고 해당 차트의 기능에 맞도록 화면정의서를 그렸다. 배치,색상,등 생각할게 너무많아서 시간이 오래걸렸다. 적다보니 플로차트도 다시 수정하게 되고, 이기능은 있어야 하지않을까하니 몇개가 더늘어나기는 했다. 이후 피그마를 이용해 와이어프레임을 그렸는데... 생각보다 어려웠다. 많이 다르지 않았던 툴이기도 했고.. 무엇보다 디자인을 어떻게 해야하나도 고민을 많이했다. 유튜브를 보고 다른 사람 블로그를 보면서 컴포넌트 기능을 많이 활용해보려 했지만 그냥 노가다를 했다. 홈화면이나 다른 화면이 너무 비어보인다. 추후에 페이지 소개나 다른기능들을 넣어보려한다. 다른데이터들과 영향을 받지않는 정적인 데이터로 말이다. 프로젝트는 내일부터 시작할것 같다. ERD를 작성하고, 이력서..

[작성계기] 항상 솔로 프로젝트를 진행할떄 내가 해보고싶은 기능을 구현했다. 하지만 너무 많은 경우의 수를 생각하다보니, 원래목적의 기능 개발에서 변질되는 경우가 많았다. 그러다보니 작업한것을 여러번 수정하는 일이 발생했고, 작업의 속도는 늦어졌다. 이러한이유로 플로우차트를 적용하여 수정이 많아지는것을 방지하고, 좀도 시각화하여 보고 싶기 하기위해 작성해봤다. 플로우차트란 ? 어떤 프로세스나 작업의 단계적인 진행 과정을 도식화하고, 시각적으로 표현한 다이어그램이다. 도형구분 순서도 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 제 기능을 하지 않는 전구를 다루기 위한 단순 순서도. C 언어의 for 루프 순서도 순서도(영어: flowchart)는 워크플로 혹은 프로세스를 보여주는 ..