일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- FIGMA
- webpack
- hook
- git
- CSS
- HTML
- TAILWIND
- 프로그래머스
- EC2
- react
- 자료구조
- docker
- SSR
- Taillwind
- github
- 피그마
- Javascript
- TypeScript
- useMemo
- FigJam
- grid
- express
- 해시
- Next.js
- 코딩테스트
- render
- Stack
- axios
- useCallback
- Babel
- Today
- Total
목록분류 전체보기 (50)
나는 오늘도 멋있다
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mCPac/btsBKl8vuCg/JeKuNUuJLwYCvBKEKNcDF0/img.png)
4 ~ 8 일사이에 많은 일들이 있었다. 당연히 아르바이트 때문에 조금만 작업한 날도 있었지만.... Tailwind가 속을 썩있는 바람에... css 프레임워크는 처음써본다. 기본적으로 React에서는 styled-component를 사용했었고, css파일에 클래스를 정의하여 사용도 해봤다. 그래서 그런지 가독성이 떨어지는 부분이 있긴하다. 또한 유틸리스 클래스를 모르니 공식홈페이지를 보면서 적용하는것도 시간이 들어갔다. 초기작업이라 기본적인 css설정을 해놓고 추가로 설정들을 넣어볼예정이다. 태그 초기화는 할게 많지만 그때그때 필요한 부분만 하는게 좋을것같아서 아직 다하지는 않았다. router-button 클래스는 기본적으로 페이지를 이동하는 Link 태그의 css인데 많이 사용할거 같아 따로 빼두..
@tailwind base; - Tailwind css에서 기본 스타일을 주입하는 부분으로, 기본 스타일 및 글로벌 스타일을 정의하는 부분 - ex) 기본태그들의 초기화 or 프로젝트 전체적으로 사용될 css등(font 등) @tailwind components; - Tailwind css에서 컴포넌트 클래스를 주입하는 부분으로, 컴포넌트 단위의 스타일을 정하는 역할 - ex) 버튼,모달,카드 등의 UI컴포넌트 관련 @tailwind utilities; - Tailwind css의 다양한 유틸리스 클래스를 사용하기 위한 역할 - ex) 레이아웃, 텍스트, 색상, 간격 등 @tailwind variants; - Tailwind css의 가상클래스를 쓰기 위한 역할 우선순위는 utilities > compo..
학습계기 Css파일에 클래스를 정의해서 사용하는 기본사용법, React의 styled-component등 사용해 봤다. 하지만 사용하다보면 이것 또한 불편하다. 그래서 Css 프레임워크를 찾아보다가 Tailwind를 접하게되었고, 많은기업에서도 사용하는 거 같아서 요번 프로젝트에 도입하기위함 tailwind는 Utility-First 컨셉을 가진 css의 프레임워크 이다. [장점] 1. Utility-First 컨셉으로 빠르게 원하는 디자인 개발을 할 수 있다. 2. 클래스 작명을 고민할 필요가 없다. 3. HTML-CSS를 왔다갔다 할 필요가 없다. 4. 클래스명의 속성을 변경하기위해 CSS파일에서 클래스를 찾을 필요가 없다. 5. 기본 스타일 값을 자유롭게 커스텀 6. 반응형 디자인에 유용한 클래스들..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bOmZwA/btsBFMx5x1c/YwT4pzbk3X02F91xDqhEtK/img.png)
ERD를 작성한 후 github를 좀더 깔끔하게 관리해보려고 다른 프로젝트를 참고했다. 1. Labels 설정하기 2. issues Template 협업시에는 issues를 잘활용 하는것 같다. issues는 기획, 작업, 개선사항, 버그수정, 추가될 기능등 여러가지를 포함하여 이슈를 등록하고 해당 이슈를 기반으로 작업을 진행하는 것 같다. 위처럼 label을 설정하고 이슈 템플릿을 설정해놓으면 해당처럼 바로 작성할수있고 라벨을 설정할수있다. Projects는 칸반보드로 해놓고 쓰긴하는데 issues를 한눈에 볼수있기도하다. milestone은 아직 쓸생각은 없다. branch와 issues만 잘이용해도 git을 깔끔하게 관리할수 있을것 같다. 노력하자
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2i3pd/btsBC13oqES/XEk501mRWV7WOoDZRUT9mK/img.png)
이틀동안 면접을 준비하면서 redux를 다시 공부하느라 ERD작성이 늦어졌다. 처음 작성해보는 ERD인 만큼 많이 조잡하지만 내가 테이블을 짤때 도움되기 위해 작성해본다 관계의 표현 해당표현방식처럼 테이블과의 관계도를 나타탤수 있다. 말그대로 작대기 하나면 1개, 동그라미는 0개, 분포작대기는 N개로 이해하면 간단했다. Figma or FigJam으로 그려보려했지만 관계도 그래프가 작성되지않아서 루시드차트를 이용했다. 하지만 루시드 차트도 무료 버전으로 쓰기에는 한계가 있었다(그리다보면 더이상 도형 추가되지않음) 그래서 다른게 뭐가 없을까 하다가 dbdiagram이란것을 찾게 되어 작업은 여기서 진행했다. 간단하게 왼쪽에다가 쿼리문가 비슷하게 작성해주면 오른쪽에서 표시가 되어 편하긴 하다. 조금은 공부는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/SMSWt/btsBvSZBImt/kcIUx6aLYNasfxV8D7kFz0/img.png)
CORS란? 웹브라우저에서 다른출처(프로토콜,도메인,포트)의 리소스를 공유하는것을 가능하게 하는 메커니즘이다. 출처(Origin)란? URL: HTTPS://www.domain.com:3000/user?query=name&page=1#first 프로토콜(Protocol): http, https 호스트(Host): 도메인 포트(Port): 포트번호 패치(Path): 사이트내부경로 쿼리스트링(Query string): 요청 key 와 value값 프래그먼트(Fragment): 해시태그 출처(Origin): 프로토콜 + 호스트 + 포트 동일 출처 정책 (Same-Origin Policy) SOP는 동일한 출처에서만 리소스를 공유할수 있는것을 말한다. 즉 웹 브라우저에서 실행되는 스크립트가 한 출처에서 불러온 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/E8QXh/btsBr5LqTRS/mJ6im4Ugnj19wixyKDqC10/img.png)
작성계기 오전에 FlowChart를 그리고 해당 차트의 기능에 맞도록 화면정의서를 그렸다. 배치,색상,등 생각할게 너무많아서 시간이 오래걸렸다. 적다보니 플로차트도 다시 수정하게 되고, 이기능은 있어야 하지않을까하니 몇개가 더늘어나기는 했다. 이후 피그마를 이용해 와이어프레임을 그렸는데... 생각보다 어려웠다. 많이 다르지 않았던 툴이기도 했고.. 무엇보다 디자인을 어떻게 해야하나도 고민을 많이했다. 유튜브를 보고 다른 사람 블로그를 보면서 컴포넌트 기능을 많이 활용해보려 했지만 그냥 노가다를 했다. 홈화면이나 다른 화면이 너무 비어보인다. 추후에 페이지 소개나 다른기능들을 넣어보려한다. 다른데이터들과 영향을 받지않는 정적인 데이터로 말이다. 프로젝트는 내일부터 시작할것 같다. ERD를 작성하고, 이력서..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/d9xxcF/btsBrc4FGMc/GGkZb7YnHe67kNyN2aJ5y0/img.png)
[작성계기] 항상 솔로 프로젝트를 진행할떄 내가 해보고싶은 기능을 구현했다. 하지만 너무 많은 경우의 수를 생각하다보니, 원래목적의 기능 개발에서 변질되는 경우가 많았다. 그러다보니 작업한것을 여러번 수정하는 일이 발생했고, 작업의 속도는 늦어졌다. 이러한이유로 플로우차트를 적용하여 수정이 많아지는것을 방지하고, 좀도 시각화하여 보고 싶기 하기위해 작성해봤다. 플로우차트란 ? 어떤 프로세스나 작업의 단계적인 진행 과정을 도식화하고, 시각적으로 표현한 다이어그램이다. 도형구분 순서도 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 제 기능을 하지 않는 전구를 다루기 위한 단순 순서도. C 언어의 for 루프 순서도 순서도(영어: flowchart)는 워크플로 혹은 프로세스를 보여주는 ..