react20 tailwind(tailwind css란 ? tailwind를 도입한 이유) 이번에 새로운 프로젝트를 진행하면서 tailwind를 처음 접하고 사용해보게 되었다. 이전에는 SCSS와 styled-component를 이용하여 css 작업을 주로 했었는데 이번엔 tailwind를 도입해보기로 했다. tailwind란? 먼저 tailwind는 CSS 프레임워크로써 HTML 요소에 빠르고 간편하게 스타일을 적용할 수 있도록 도와주는 도구이다. example 위와 같이 classname을 통해 스타일을 지정한다. 우리가 아는 css 형태와 약간 다르게 생겼다. width:2px;이런 형태로 적혀져 있어야 하는데 w-2라니..?? https://tailwindcss.com/ 아래 홈페이지에서 tailwind의 언어로 변환하여 사용할 수 있다. tailwind를 도입한 이유 먼저 크게 아래와.. 2023. 9. 2. [React]SPA란?_Single Page Application SPA(Single Page Application)란 단일페이지로 구현한 사이트이다. 즉, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경해 표시하는 기술이다. SPA 프레임워크인 React, Angular, Vue는 대표적으로 virtual Dom을 이용해 SPA를 구현하는 기술들이다. 이와 반대되는 개념은 MPA(Multi Page Application)이다. 새로운 페이지로 이동할 때마다 새로운 HTML을 받아와 페이지를 로드하는 방식이고, 새로운 화면을 보여주기 위해 매번 서버에 요청하기 때문에 성능상의 문제가 생길 수 있다는 단점이 존재한다. (ex. header, footer 등은 화면이 바뀌어도 그대로이면서 내용만 바뀌는 경우가 있다. 그 때 새로운 html을 받아오는 .. 2023. 7. 28. [React] 함수형 컴포넌트 vs 클래스형 컴포넌트 react에서 컴포넌트를 만드는 방법에는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 현재는 나도 그렇고 많은 개발자들이 함수형 컴포넌트로 개발을 진행하지만 리엑트의 기본원리나 라이프사이클을 알기 위해서는 클래스형 컴포넌트에 대해서도 알고 있어야 하기에 오늘 정리해보려고 한다. 클래스형 컴포넌트 1. class 키워드가 반드시 필요하다 (class로 컴포넌트 정의) 2. render() 메소드가 반드시 필요하다 3. Component를 상속(extends)받아야 한다. 4. props를 받아올 때 this.props로 값을 불러올 수 있다 클래스형 컴포넌트는 기본적으로 state, lifeCycle 관련 기능 사용이 가능하다. 하지만 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다는 특징이 있다. .. 2023. 7. 24. [react] aws S3 이용하여 이미지 업로드(presigned URL/프론트) 이번 프로젝트에서 상품 이미지를 업로드 해야할 일이 있었는데, 이미지 업로드의 방법으로 aws S3 버킷에 presigned URL을 이용하여 업로드를 하기로 결정되었다. 프론트엔드에서만 업로드 하는 방법도 있지만, 보안 상의 이유로 presigned URL을 백엔드에서 발급받아 관리 하는 것이 더 좋다고 생각했기 때문이다. presigned URL의 경우 S3에 파일을 업로드 하기 위해 필요한 권한을 보유한 URL이다. 모든 객체 및 버킷은 기본적으로 비공개 상태인데, 객체를 업로드하기 위해 미리 서명된 URL을 수신하는 경우 미리 서명된 URL의 생성자가 해당 객체를 업로드 하는데 필요한 권한을 보유하는 경우에만 객체를 업로드 할 수 있다. 즉, 해당 S3에 대한 접근 권한을 인증해 주는 URL이라고.. 2023. 6. 12. 이전 1 2 3 4 5 다음 728x90 반응형
