나는 오늘도 멋있다

목적 부트캠프 과정의 두번째 과제로 HTML과 CSS 만으로 Youtube의 홈부분을 flex로 구조를 잡는 과제였다. Flex는 항상 써왔다. 그래도 Flex의 각 속성에 대해 좀더 깊이이해하고 쓰자는 생각으로 이글을 작성한다. Flex란? 주로 CSS Flexbox 레이아웃을 만들때 사용되는 속성으로, 웹페이지의 레이아웃을 효율적으로 설계하고, 요소들을 유연하게 배치하기 위한 CSS 기술이다. Flex의 속성들 Flex의 Container는 부모요소를 뜻하고, Item은 자식요소를 뜻한다. Container 속성 속성명 설명 단위 속성 dispaly 부모요소를 Flexbox 컨테이너로 만든다. flex, inline-flex justify-content 주축의 요소들을 정렬한다. flex-start,..

useEffect란? React의 함수형 컴포넌트에서 부수효과(side effects)를 다루기 위한 hook이다 부수효과(side effects): 컴포넌트의 렌더링과는 직접적으로 관련이 없는작업(네트워크 요청,DOM 조작 등) useEffect 왜 사용해야 할까? React의 함수형 컴포넌트에서는 일부 구성요소가 외부 시스템과의 동기화가 필요할 수 있다. 예를들자면 네트워크요청, DOM조작, 구독설정, 타이머 설정들등 컴포넌트의 렌더링과 직접적인 관련이 없는 경우에 사용한다. useEffect 구문 useEffect(callback,[dependencies]) callback: 부수효과를 수행하는 함수로, 컴포넌트 렌더링 후에 비동기적으로 실행된다. 필요에 따라 Clean-up함수를 반환할 수 있다...

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

Container 속성 속성 의미 grid-template-columns 명시적으로 아이템들의 열(가로) 크기를 지정 grid-temaplte-rows 명시적으로 아이템들의 행(세로) 크기를 지정 gird-template 명시적 행(세로), 열(가로)의 단축속성 grid-auto-columns 암시적으로 아이템의 열(가로) 크기를 정의 grid-auto-rows 암시적으로 아이템의 행(세로) 크기를 정의 grid-template-areas 영역(Area)이름을 참조해 템플릿 생성 column-gap 아이템들 열(가로)셀 간격설정 row-gap 아이템들 행(세로)셀 간격설정 gap 열(가로), 행(세로) 셀간격의 단축속성 justify-items 아이템들의 가로방향 정렬 aligin-items 아이템들의 ..

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. 반응형 디자인에 유용한 클래스들..

하루를 꼬박 작성한글이 날아갔다... 임시저장을 해뒀는데 다른글을 보고오니 날라가버렸다 .... ㅠㅠ 다시썻다. Next.js란?NextJS는 React 기반의 웹 프레임워크이다. React 애플리케이션을 더쉽게 구축하고 서버 측 렌더링(SSR), 정적 사이트 생성(SSG), API라우팅 등의 기능을 제공며, 여러 빌딩 블록을 제공한다. 페이지 시스템페이지 기반의 라우팅 시스템을 가지고 있다. pages 디렉토리에 있는 각 파일은 하나의 페이지를 나타낸다.(파일 경로 및 파일 이름)서버측 렌더링(SSR)기본적으로 서버측 렌더링을 제공하며, 페이지를 서버 측에서 사전렌더링 할 수 있다.정적 사이트 생성(SSG)빌드 시간에 페이지를 미리 생성하여 정적 파일로 제공할 수 있다.클라이언트 측 라우팅클라이언측 라..