Tailwind CSS란?

 

Tailwind CSS는 오픈 소스 CSS 프레임워크입니다. 이 라이브러리의 주요 기능은 Bootstrap과 같은 다른 CSS 프레임워크와 달리 버튼이나 테이블과 같은 요소에 대해 미리 정의된 일련의 클래스를 제공하지 않는다는 것입니다.

Tailwind CSS는 ‘utility-first’라는 목적 하에 만들어진 CSS 프레임워크입니다. 별도의 CSS 파일이나 style 태그를 사용하지 않고 HTML의 class 속성에 입력되는 내용에 따라 스타일링이 적용되기 때문에 굉장히 간단하고 직관적으로 코드를 작성할 수 있습니다.

장점

  • HTML의 class 속성에 직접 입력되기 때문에 별도의 CSS 파일을 생성하여 임포트 하지 않아도 된다.
  • 작성해야 하는 코드의 길이가 확연하게 짧아진다.
  • 반응형 스타일링을 적용하기 용이하다.
  • 클래스 이름에 대해 고민하거나 중복을 걱정할 일이 없다.

단점

  • HTML 코드가 지저분해진다.
  • class 속성에 작성하는 코드들이 각각 어떤 동작을 하는지 익혀야 하고, 그 코드들의 이름을 외워야 하기 때문에 이 모든 것을 익히려면 시간이 오래 걸린다.
  • CSS에 익숙하지 않다면 각 코드들의 동작 방식을 이해하기 힘들다.
  • 완성형 컴포넌트가 다른 프레임워크들에 비해 적기 때문에 사용자가 대부분 직접 만들어야 한다.
  • CDN 사용 시 웹팩과 컴파일러를 통한 최적화가 이루어지지 않을 경우 기본적인 CSS 파일의 크기가 무거워진다.

https://brunch.co.kr/@taehyo/7

 

아키텍처 (Architecture)란 무엇인가

복잡성과 아키텍처 | 아키텍처 (Architecture)란 무엇인가 1) 아키텍처는 다양한 영역과 관련된 의사결정의 결과물이며, 이후 이어질 활동에 대한 기준이 된다. 아키텍처를 단순한 설계의 결과물로

brunch.co.kr

내용 참조 

https://velog.io/@jrl103/React%EB%8A%94-UMD-%EC%A0%84%EC%97%AD%EC%9D%84-%EC%B0%B8%EC%A1%B0%ED%95%98%EC%A7%80%EB%A7%8C-%ED%98%84%EC%9E%AC-%ED%8C%8C%EC%9D%BC%EC%9D%80-%EB%AA%A8%EB%93%88%EC%9E%85%EB%8B%88%EB%8B%A4

 

'React'는 UMD 전역을 참조하지만 현재 파일은 모듈입니다.

해결방법Create React App은 버전 4에서 즉시 사용 가능한 새로운 JSX 변환을 지원하지만 사용자 정의 설정을 사용하는 경우 작성 jsx하지 않고 TypeScript 오류를 제거하려면 필요하다.typescript버전 4.1 이

velog.io

참조해서

import React from "react"; 를 적용하면 되는듯하다.

Node.js 개념

간단히 말하면 

자바스크립트로 작성된 프로그램을 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다.

즉, Node.js는 실행기라고 생각하면 됩니다.( 자바스크립트를 실행할수 있는 하나의 방법이 노드)


Node.js 설치하는 이유

 

여러이유가 있겠지만 일단 간단히 vscode 에서 npm 을 실행하기 위해서 Node.js를 설치하기도 합니다.

 

설치는 

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

                                           --- 설치에 있어서 몇가지 자세한 작업은 생략하였습니다. ---

 

1. (설치)여기 들어가셔서 일반적으로 안정적이여서 lts를 많이 사용한다고 하니 lts를 눌러서 다운해주시면 됩니다. 

2. (과정) 앤터를 누르고 계속 그러다보면 

Node.js가 설치가 됩니다.

3. (설치된지 확인작업)  vscode 에서 버전및 설치 여부 확인을 위해서

node -v  

///

npm -v

각각 실행해주면 설치가 되었다는것을 확인하실수 있을것입니다. 

 

그러면 vscode로 돌아와서 저장후 종료뒤 vscode 재시작을해서 터미널창에 npm start 와 같이 입력해보면

실행되는것을 아실수 있습니다.

 

 

넷플릭스 구현영상 - 

chrome-extension://mmeijimgabbpbgpdklnllpncmdofkcpn/app.html#/files/48e1d25b-fd5d-4fb8-yf12-e4f6e5f8fa6a

 

 

 

위 넷플릭스 구현영상에서 글씨가 깨졌었는데 수정했었던 사진입니다.


다음은 React 에서 tailwind css 를 적용해서 만든 게시판 사진들입니다.

 

- 게시판 메인화면

 

- Edit 을 눌러서 모달창이 나오는 모습입니다.

- 모달창에 있는 수정창

- Delete를 눌러서 회원들이 삭제된 모습입니다.

- @를 포함하지 않았을시 에러문구가 나오는 모습입니다.

-새로 추가된 회원 

 


 

cgv 메인페이지 구현영상 -

chrome-extension://mmeijimgabbpbgpdklnllpncmdofkcpn/app.html#/files/6b8d5ec2-e2a4-4c2b-ydc1-3279c2e87d8c

 

소셜 로그인 구현영상(카카오 로그인)

- chrome-extension://mmeijimgabbpbgpdklnllpncmdofkcpn/app.html#/files/b5526ca3-ab3e-44d6-yb17-4884849469e8

 

카카오 맵 api 구현영상

-chrome-extension://mmeijimgabbpbgpdklnllpncmdofkcpn/app.html#/files/55e20a24-1e55-43ca-y9d5-7ed9a597bfe6

 


https://smileagain72.tistory.com/137

 

넷플릭스 클론코딩

넷플릭스 클론코딩 도중 로그인 안했을때 페이지의 맨밑부분 작업중 이부분을 어떻게 구현할까 하다가 이 사진은 원래 작업했던 html 코드인데 각각 일정간격을 떨어 트리기 힘들꺼 같아서 를 a

smileagain72.tistory.com

- 넷플릭스 클론코딩한 내용을 적어둔 제블로그 주소입니다.


https://smileagain72.tistory.com/156

 

CGV - 클론코딩 과제중

복붙해놓고 작업하는 도중 The `style` prop expects a mapping from style properties to values, not a string. For example, 라는 오류가 났는데 https://velog.io/@try_catch/React-%EC%98%A4%EB%A5%98%EB%93%A4 [React] 공부기록. Error: The sty

smileagain72.tistory.com

- cgv 클론코딩을 하면서 적어둔 기록들입니다.

https://www.ascentkorea.com/what-is-gnb/

 

GNB, LNB? 웹사이트 용어 알아보기

GNB는 Global Navigation Bar의 약자로, 웹사이트 전역에서 공통으로 적용되는 내비게이션 바입니다. 웹사이트는 모두 기본적으로 지켜야 할 구성 요소가 있습니다. GNB와 LNB, 그 외 웹사이트 용어에 대

www.ascentkorea.com

 

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-before-after-%EC%99%80-before-after%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%95%EB%A6%AC

 

[CSS] 📚 :before :after 와 ::before ::after 차이 정리

가상 선택자(pseudo selector) 가상 선택자(pseudo selector)에는 가상 클래스(pseudo class)와 가상 엘리먼트(pseudo element)가 존재한다. 둘이 비교하자면, 가상 클래스는 엘리먼트 전체나 엘리먼트 상태를 선

inpa.tistory.com

: vs :: 차이 

https://mainia.tistory.com/3705

 

HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법

HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 환경: Eclipse Mars 은 Definition List 의 약자로 용어 정의할 때 사용합니다. 내부에 2개의 태그를 포함해서 사용하게 되는데 와 가 있습니다. 는 Defini

mainia.tistory.com

 

+ Recent posts