vision_ing.log https://velog.io/ 나를 위한 업그레이드 아자아자 Fri, 29 Dec 2023 16:35:18 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed vision_ing.log https://images.velog.io/images/vision_ing/profile/0c73a3ab-0df8-42bb-a318-509f7c91b164/KakaoTalk_20220313_161019117.jpg https://velog.io/ Copyright (C) 2019. vision_ing.log. All rights reserved. <![CDATA[elice track ep.22]]> https://velog.io/@vision_ing/elice-track-ep.22-cob7olfy https://velog.io/@vision_ing/elice-track-ep.22-cob7olfy Fri, 29 Dec 2023 16:35:18 GMT

HTTP Methods

클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단

이 Method중 Axios 통신하면서 가장 많이 사용되는 메소드를 정리해보았다.

  1. GET GET : 입력한 url에 존재하는 자원에 요청을 한다.

문법 axios.get(url,[,config]) Q) Get이 데이터를 받아오는 것이라고 했는데, 저는 로그인을 구현할때 GET을 사용했는데요?

GET으로 로그인을 구현했을때 웹 사이트 주소창의 형태를 잘 보면 이러한 형태가 나온다.

www.server.com/login?id=Hnk&pw=1234 // 실제로 없는 사이트이다, 이해를 돕기 위해서 추가했다. 오해하지 말자. 웹 사이트 뒤에 쿼리스트링이 붙여진 것을 확인할 수 있다.

✅ GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이다. 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다.

예제 코드

//가상으로 보여주는 코드와 response 형태이다. 참고만 하길 바란다.
import axios from 'axios';

axios.get('https://localgost:3000/sewon/user')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})
[
  { id: 1, pw: '1234', name: 'sewon' },
  { id: 2, pw: '1234', name: 'hongil' },
  { id: 3, pw: '1234', name: 'daeyeon' }
]

응답은 json 형태로 넘어온다.

  1. POST POST : 새로운 리소스를 생성(create)할 때 사용한다.

문법

axios.post("url주소",{
  data객체
    },[,config])

POST 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

Q) Post는 새로운 리소스를 생성할 때 사용되는데 그러면 언제 POST를 사용하나요?

✅ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드할때 사용한다. Post를 사용하면 주소창에 쿼리스트링이 남지 않기때문에 GET보다 안전하다.

예제 코드


axios.post( 'url', 
  { 
   contact: 'Sewon', 
   email: 'sewon@gmail.com' 
   }, 
  { 
   headers:{ 
    'Content-type': 'application/json', 
    'Accept': 'application/json' 
      } 
    } 
)

.then((response) => { console.log(response.data); }) .catch((response) => { console.log('Error!) }); 3. Delete REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

문법 axios.delete(url,[,config]); ✅ Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

예제 코드


axios.delete("/thisisExample/list/30").then(function(response){
    console.log(response);
      }).catch(function(ex){
      throw new Error(ex)
}
  1. PUT REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.

문법 axios.put(url[, data[, config]]) ✅ PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

마지막 회고~ 2차 프로젝트가 마무리 되었다. 사실 마무리는 좋지 않았다... 개인적인 생각은 결과가 어떻든 발표는 마무리 하는게 좋다고 생각하지만 팀원들 대부분이 발표를 안하는걸로 의견이 모아져서 나도 따를 수 밖에 없었다. 이 부분은 요즘은 비전공자들이 많은 추세이고, 우리 팀 역시 비전공자들이 대부분이었다. 비전공자 자체가 문제가 아니라, 경험이 있는 사람이 진도가 빠른 편이다. 전공자 혹은 현직자 한명이 이끌고 가는 팀도 분명히 있을 것이다. 3주라는 시간이 길지 않다고 생각을 하는데, 완성이 되어도 되지않아도 포기하지 않고 달려왔다는 증거가 되는게 발표라고 생각했는데, 다른 사람이 많이 부끄럽다면... 그렇게 생각한다면 어쩔 수 없는 거다. 나는 부끄럽지 않기 때문에.. 완성 못하면 뭐 어때.. 다른 프로젝트 또 하면 되지.. ㅎ

솔직히 말하자면 나는 적극적인 사람이 아니다. 답답하면 의견을 제시하지만 따르는걸 좋아하고, 몸을 맡기고 물 흐르듯 흘러가는 걸 좋아하는 사람이다. 그니까 나도 잘한건 없다는 얘기다.

팀에서 적극적인 사람이 많으면 도움이 된다.

각자 할 일을 나눌 때, 하고 싶은 것을 맡는 것 보다 일의 우선 순위를 정하고 억지로라도 정하는 것이 좋다.

우리팀은 각자 하고싶은 파트를 맡아 했는데 시간관리에도 실패했고 각자 맡은 파트를 끝까지 붙잡고 있었다.

감을 못잡고 있는 나에게 언니가 mui를 활용해서 대충이라도 css를 만들면서 기능을 만들라고 했는데, 나에겐 도움이 많이 되었다. 내가 잘 모르는 탓에 joy를 써버려서 ㅎ 조금 당황했지만 그래도 그나마 진도가 빨리 나갔던 것 같다.

로그인 회원가입 구현을 처음 해보았는데 생각보다 여러가지 구현할게 많아서 힘들었다. 형식검사, 중복검사, 형식검사를 못하면 중복검사를 못하게하는 로직 등 겨우 구현을 완료했을 땐 백엔드 쪽에서 오류가 나서 서로 소통을 오랫동안 하면서 고쳐나갔는데 오류 없이 완료되었을 땐 기분이 좋았다.

솔직히 말하자면, 1차 프로젝트 때는 잘하시는 분이 하드캐리해주셔서 괴로운 마음이 컸는데, 이번에는 괴로운 마음은 많이 없었다 ㅎ

그래도 이번 프로젝트로 나는 기획을 할 때 더 재밌고 즐거운 사람인걸 깨달았다. 오히려 사람들과 소통하고, 내 의견이 되지 않아도 이걸 추진해나가는 재미도 있었고 이런걸 재밌어하는구나 라는걸 많이 느꼈다.

링크

]]> <![CDATA[elice track ep.21]]> https://velog.io/@vision_ing/elice-track-ep.21-9x6zyu9e https://velog.io/@vision_ing/elice-track-ep.21-9x6zyu9e Fri, 29 Dec 2023 16:13:48 GMT

Intro

리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게, 리액트는 따로 내장 클래스가 존재하지 않는다.

따라서 리액트에서 AJAX를 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다.

그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까? 리액트와 함께 쓰면 좋은 HTTP Client 라이브러리가 많지만, 여기에선 리액트에서 많이 쓰이는 것 중에 하나인 Fetch API를 비교하며 axios 라이브러리를 알아볼 것이다.

#짚고 넘어가기 AJAX (Asynchronous Javascript And XML) AJAX란, Javascript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며, JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 정리하자면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

비동기 방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.

비동기 방식의 장점 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

axios VS Fetch API

우리는 일반적으로 자바스크립트에서 API를 연동하기 위해서 보통 Fetch API를 사용하곤 했다. 리액트도 자바스크립트 built-in 라이브러리중 하나인 Fetch API라는 훌륭한 API 연동 모듈을 사용한다. 하지만 Fetch API는 자바스크립트의 built-in 라이브러리라는 특성 때문인지 많은 사람들이 리액트에서 axios를 사용하는 것을 선호한다

//fetch
const url ='http://localhost3000/test`
const option ={
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  body:JSON.stringify({
      name:'sewon',
        age:20
  })

  fetch(url,options)
      .then(response => console.log(response))
//axios
const option ={
  url ='http://localhost3000/test`
   method:'POST',
   header:{
     'Accept':'application/json',
     'Content-Type':'application/json';charset=UTP-8'
  },
  data:{
      name:'sewon',
        age:20
  }

  axios(options)
      .then(response => console.log(response))

동일한 기능을 수행하는 코드이며, 간단한 코드이다.

위 코드에서 차이점을 찾아보자.

Fetch()는 body 프로퍼티를 사용하고,axios는 data 프로퍼티를 사용한다. Fetch의 url이 Fetch()함수의 인자로 들어가고, axios에서는 url이 option객체로 들어간다. Fetch에서 body부분은 stringify()로 되어진다. 이처럼 axios는 HTTP 통신의 요구사항을 컴팩트한 패키지로써 사용하기 쉽게 설계 되었다.

위와 같은 내용들을 보며, 이제 우리가 왜 axios를 배워야 하는지 알게 되었을거라 생각했고, 이제 진짜 axios에 대해 알아보도록 하자.

Axios란?

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. (백엔드와 프론트엔드와 통신을 쉽게하기 위해 AJAX도 더불어 사용하기도 한다.)

axios 특징

운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경

Axios 사용법

Axios 다운로드 HTTP Methods Axios 사용해보기 GET POST PUT DELETE

Axios 다운로드

yarn add axios

npm i axios

//자신이 진행중인 프로젝트 상위에 import 시켜주기 import axios from 'axios'

출처 - https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API

링크

]]> <![CDATA[elice track ep.20]]> https://velog.io/@vision_ing/elice-track-ep.20 https://velog.io/@vision_ing/elice-track-ep.20 Wed, 27 Dec 2023 18:15:47 GMT

리덕스는 리액트에서 상태를 더 효율적으로 관리하는데 사용하는 상태 관리 라이브러리이다.

예시로 프로젝트가 복잡할 때, handleSomethin은 value를 업데이트하는 함수이다. 이 함수는 컴포넌트 두 개를 거쳐서 왼쪽 A 컴포넌트로 전달한다. 이 함수가 호출되면 맨 위에 있는 app 컴포넌트의 value 값을 바꾸고, 이 value 값을 b 컴포넌트로 전달하여 b 컴포넌트 안에서 렌더링된다.

이런식으로 특정 작업을 하려고 여러 컴포넌트를 거쳐서 props를 전달하는 것은 비효율적이다. 작업을 하면서 헷갈릴 수도 있고, 실제로 컴포넌트 자기 자신은 필요하지 않은데 자식 컴포넌트 때문에 필요한 props 개수가 너무 많아질 수도 있기 때문이다. 추가로 형제 컴포넌트에서 불필요한 렌더링이 일어나기 때문에 이 역시 상황에 따라 방지해 주어야 한다. 또 최상위 컴포넌트인 app에 상태 관리 로직이 너무 많아 컴포넌트의 코드 길이가 너무 길어지는 현상도 발생할 수 있다. 이런 문제점들은 리덕스라는 상태관리 도구를 사용하면 매끄럽게 해결가능하다.

리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리하는 것이다. 리덕스를 사용하면 store라는 객체 내부에 상태를 담게 된다. 리덕스를 사용하면 스토어에서 모든 상태관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 액션이라는 것을 스토어에 전달한다. 액션은 객체 형태로 되어있으며, 상태를 변화 시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정은 디스패치라고 한다. 스토어가 액션을 받으면 리듀서(reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야할지 정한다. 액션을 처리하면 새 상태를 스토어에 저장한다. 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컼포넌트에 바로 전달한다. 부모컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다.

  • 스토어 : 애플리케이션의 상태 값들을 내장하고 있다.
  • 액션 : 상태 변화를 일으킬 때 참조하는 객체이다.
  • 디스패치 : 액션을 스토어에 전달하는 것을 의미한다.
  • 리듀서 : 상태를 변화시키는 로직이 있는 함수이다.
  • 구독 : 스토어 값이 필요한 컴포넌트는 스토어를 구독한다.

ESLint

Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미한다.

코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다.

###

0. token, 왜 필요한가?

HTTP는 단기기억상실과 같은 stateless 특성을 가지고 있기 때문에 한 번 로그인을 한다고 그 사실을 계속 기억하지 못한다. 따라서 원래대로라면 로그인을 했더라도 마이페이지 등 로그인이 필요한 사이트에 접속할 때마다 로그인을 진행해야 한다. 이러한 상황을 막기 위한 것이 token이다 ! 먼저 로그인을 완료하면 인증 스티커와 같은 token을 전달받고, 마이페이지 등 로그인이 필요한 사이트를 접속할 때마다 서버에 token을 보내며 로그인을 한 유저인지, 권한이 있는지 알려줌으로써 다시 로그인을 할 필요가 없다.

1. JWT란 무엇인가?

JWT는 Jason Web Token의 약자이다. 모바일 앱이나 웹에서 사용자 인증(Authentication)을 수행할 때 사용하는 암호화된 토큰이다. 사용자의 정보 등을 암호화하여 사용자 정보가 필요한 API를 호출할 때, 해당 토큰을 보내주면 백엔드에서 그 토큰을 검증(verity)하는 과정을 거친다. 그 후 response를 해주는 것이다.

2. Local Storage ? Session Storage?

둘 다 HTML5에 추가된 '저장소'이다. 로컬 스토리지(Local Storage)에 들어간 데이터는 유저가 지우지 않는 이상 브라우저에 계속 남아있게 된다.  하지만, 세션 스토리지(Session Storage)에 들어간 데이터는 브라우저 탭을 닫을 경우에 사라지게 된다.  이를 통해 '로그인을 유지'시키기 위해서는 세션 스토리지가 아닌 로컬 스토리지에 token을 넣어주면 된다는걸 알 수 있다. 

3. 로그인 과정

  1. 최초 회원가입 시 비밀번호를 DB에 바로 저장하지 않고 Bcrypt를 이용해 암호화를 한 후 비밀번호를 DB에 저장한다.    * Bcrypt: 현업에서 많이 사용하고 있는 패스워드 암호화 알고리즘/Bcrypt 모듈을 설치해서 사용가능하다.  
  2. 유저 정보를 저장한 후에 로그인을 할 때 암호화된 비밀번호화 비교하는 검증 과정을 거친 후 일치하게 되면 로그인을 한다.  
  3. 로그인을 할 때 JWT token을 생성하고 token을 localStorage에 저장하여 로그인을 유지시킨다.  
  4. 로그아웃을 할 때엔 localStorage에 있는 토큰을 지운다. 

4. 어떻게 저장하고, 서버에 보내는가?

  1. 로그인 성공시 localStorage에 token 저장 1) 백엔드 측에서 설정한 로그인 성공시 response.MESSAGE와 2) 토큰의 발급 유무에 따라 로그인 성공 여부를 알 수 있다.   token이 true이면(있으면) localStorage에 login-token이라는 키 값으로 token을 저장한다. (localStorage에 저장할 경우 해당 도메인에 영구저장된다.)
  2. 인가(Authorization)가 필요한 사이트에서 token 전달 이제 마이페이지, 장바구니 등 인가 과정이 필요한 사이트에서 데이터를 요청할 때,  아래의 방법으로 localStorage에 저장해두었던 token을 꺼내 함께 전달하면 된다. fetch 함수의 두 번째 인자는 조건 부분이므로, 이 부분을 headers에 아래 부분을 작성한다.  
  • 'Content-Type': 'application/json': 데이터를 json 형태로 전송
  • Authorization: localStorage.getItem('login-token'): localStorage에 login-token key로 저장한 값을 HTTP Authorization 요청 헤더로 전달

출처: https://bo5mi.tistory.com/188 [대범하게:티스토리]

링크

]]> <![CDATA[elice track ep.19]]> https://velog.io/@vision_ing/elice-track-ep.19 https://velog.io/@vision_ing/elice-track-ep.19 Tue, 12 Dec 2023 15:01:35 GMT

2차 프로젝트가 시작되었다. 1차 프로젝트에서는 프론트엔드를 맡고 싶어하시는 분들이 많으셔서 똑같이 2차 프로젝트에도 그런 일이 일어나 백엔드 포지션을 맡게 되면 어쩌지 하는 걱정이 많았는데 다행히도 이번에는 백엔드 포지션을 맡고 싶어하는 분이 두분이나 계셨고, 두 포지션 다 상관 없다는 분이 한분 계셔서 코치님 추천으로 총 3:3 으로 백엔드, 프론트엔드 포지션을 나누게 되었다.

1차 프로젝트에서는 이끌어가시는 분이 계셔서 팀이 운영하는 배에 이것저것 짐을 껴안아 탑승했다면,

이번엔 팀장 한명만을 정하지 않고 모두가 팀장 역할을 하기로 해서 이번엔 배에 노를 가지고 탑승을 하게 되었다.

이번에는 피그마도 쓰게 되었다. 사실 피그마 처음 써봄.. 피그마 예쁘게 쓰는 분들 많던데 도대췌 어떻게 쓰는겅ㅇ임???? 암턴 이젠 기획 쪽에 부쩍 관심이 생겼는데 화면 구현에 많은 일을 하게 되어 기쁘다.

그리고 아무리 살펴봐도 없었던 하자가 내일 발견하고, 또 내일 발견하게 되는건 참.. 참 힘든것 같다..

원래는 쉽게 웹으로 생각을 했는데, 코치님께서 모바일쪽 화면을 생각하라 하셔서 사실 갈아엎고 다시 만든 화면들이다.

백엔드 코치님과 프론트엔드 코치님께서 공통적으로 하시는 말씀이 백엔드 일이 적고 프론트엔드 일이 많을것이었다. 그래서 백엔드분들에게도 일이 될만한 기획이 없을까 생각중인데 아무래도 혼자 생각하기는 어려운것 같다.

디자인이 참 어려운 것 같다. 음. 사실 단순하게 디자인해서 깔끔해보일뿐. 색깔을 입히고 디자인을 하게 되야 좀 있어보이는 홈페이지가 나올텐데, 쓰기 쉬운 직관적인 것을 생각하면서 동시에 요구해야 되니까 어려운 것 같다.

구현이 목적으로 잡고 쉬운 것부터 할까요? -> 너무너무 좋아요 ! 였는데 사실 기간이 긴건 아니지만 그래도 사용자 입장에서 다시 생각하게 되었다. 이 홈페이지의 목적은 무엇인가? 홈페이지에 들어온 사용자는 편하게 사용하고 원하는 목적을 이룰 수 있는가?

흔하지 않은 아이디어를 생각하다보니 그쪽에만 너무 치우친것 같아서 아쉽기도 하다. 좀 더 사용자 입장과 흥미, 목적 등 여러가지를 생각해야겠다.

다음 시간에는 깃 브랜치 방법도 다시 복습해야겠다.

링크

]]> <![CDATA[elice track ep.18 (13-3)]]> https://velog.io/@vision_ing/elice-track-ep.17-13-3 https://velog.io/@vision_ing/elice-track-ep.17-13-3 Tue, 12 Dec 2023 14:44:19 GMT

Styled Components Styled Components에 대해 이해하기 위해서는 CSS in JS 개념에 대해 알아야 한다. 이는 말 그대로 CSS를 JS 파일 안에 작성하는 것이다. 대두되면서 탄생한 라이브러리이다. HTML+JS+CSS를 묶어서 하나의 JS파일에 넣은 뒤 컴포넌트 단위로 개발할 수 있게 만들어준다.

styled-components는 이러한 라이브러리 중 가장 인기있다. 설치하기

# with npm
$ npm install --save styled-components

# 버전이 안 맞아서 에러가 날 경우 가장 최신 버전으로 설치
$ npm install styled-components@latest

# with yarn
$ yarn add styled-components

Styled Components는 pakage.json에 다음 코드를 추가하도록 권장한다.

여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.


{
  "resolutions": {
    "styled-components": "^5"
  }
}

그리고 Styled Components를 사용할 파일에 아래와 같이 import하면 준비는 끝난다.

import styled from "styled-components"
  1. 컴포넌트 만들기
    import styled from "styled-components";

//Styled Components로 컴포넌트를 만든다. const BlueButton = styled.buttonbackground-color: blue; color: white;;

export default function App() { // React 컴포넌트를 사용하듯이 사용하면 된다. return Blue Button; }



Styled Component 또한 컴포넌트이기 때문에 첫글자를 무조건 대문자로 시작해야 한다



템블릿 리터럴(백틱)안에 작성을 하느라 문자열처럼 표시 돼 자동완성도 안 되고 구분이 힘들 수 있는데,  vscode-styled-components 익스텐션을 설치하면 편리해진다

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기

//만들어진 컴포넌트를 재활용한다. const BigBlueButton = styled(BlueButton)padding: 10px; margin-top: 10px;;

//재활용한 컴포넌트를 재활용할 수도 있다. const BigRedButton = styled(BigBlueButton)background-color: red;;

export default function App() { return ( <> Blue Button
Big Blue Button
Big Red Button </> ); }


이렇게 사용하면 코드 중복을 줄여준다.
3. Props 사용하기
Styled Component로 만든 컴포넌트 또한 React Component처럼 props를 내려줄 수 있다.



내려준 props 값에 따라서 컴포넌트를 조건부 렌더링하는 식으로 사용한다.
이렇게 props를 줄 수도, 안 줄 수도 있다.

const Button1 = styled.buttonbackground: ${(props) => (props.skyblue ? "skyblue" : "white")};;

export default function App() { return ( <> Button1 Button1 </> ); }


혹은 이렇게 활용하는 방법도 있다.

const Button = styled.buttonbackground: ${(props)=> props.color ? props.color : "white"} /* background: ${(props) => props.color || "white"}; */;

4. 전역 스타일 설정하기
UI를 구현하기 전, margin:0, padding:0 같은 전역 스타일을 세팅하곤 한다. styled-components에서도 이러한 전역 스타일을 지원한다.



우선 전역 스타일 설정을 위한 createGlobalStyle 함수를 불러온다.

import { createGlobalStyle } from "styled-components";



그리고 css파일에서 작성하는 것처럼 설정하고 시싶은 스타일을 작성한다.

const GlobalStyle = createGlobalStylebutton { padding : 0; margin : 0; }



이렇게 만든 <GlobalStyle> 컴포넌트를 최상위에 사용해주면 전역에 Global 컴포넌트의 스타일이 적용된다.

function App() { return ( <> </> ); }


  5. 조건부 CSS 보여주기
조건에 따라 CSS를 다르게 보여주고 싶다면 styled-components 라이브러리에서 css 를 사용하면 된다.

import { css, styled } from 'styled-components';

const Button = styled.buttonwidth: 50px; background-color: white; ${(props) => props.isClicked ? css background-color: purple; ; };



위 코드는 인자로 받은 props에 따른 background-color 조건부 렌더링을 구현한 모습이다.







6. 자주 사용하는 css 따로 관리하기
아까와 같이 css 를 사용하면 된다. 아래와 같이 자주 사용하는 CSS를 변수로 관리하면 코드 중복을 줄이는 데 용이하다.

cosnt FlexCenter = cssdisplay: flex; justify-content: center; align-items: center;

const Flexbox = div${FlexCenter};

// 이렇게 인자를 주고 작성하면 가독성이 더 좋다 const RingVariant = (radius, stroke = "10") => cssheight: ${radius * 2}px; width: ${radius * 2}px; border: ${stroke}px solid black;;






7. CSS 셀렉터 사용하기
styled-component 에서 셀렉터 사용은 다음과 같다. & 는 현재 요소를 뜻한다.

// 컴포넌트 위에 마우스가 올라갈때 &:hover { color: red; }

// 바로 옆은 아니지만 형제요소일 때 & ~ & { background: tomato; }

// 현재 요소 바로 옆에 현재 요소가 붙어있을 때 & + & { background: lime; }

// 현재 요소가 something이라는 클래스를 갖고있을 때 &.something { background: orange; }

// something-else라는 클래스를 가진 부모안에 있을 때 .something-else & { border: 1px solid; }

```

링크

]]> <![CDATA[elice track ep.17 (13-2)]]> https://velog.io/@vision_ing/elice-track-ep.17-13-2 https://velog.io/@vision_ing/elice-track-ep.17-13-2 Mon, 11 Dec 2023 14:58:26 GMT

CSS Module

  • class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음
  • 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 css 설계가 가능
  • 스타일링 직접 하나하나 해야 함

UI framework (ex. Ant Design, Material UI)

  • 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음
  • 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천
  • 해당 framework의 디자인 철학을 벗어나기 쉽지 않음
  • 컴포넌트들을 커스터마이징 하기 어려움

CSS framework (ex. W3CSS, TailwindCSS)

  • 거대한 CSS 파일 하나를 가져오는 것임
  • 개발자가 따로 CSS 파일을 작성하지 않아도 html에 클래스만 적어주면 정해진 규칙대로 스타일링이 적용됨
  • css에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습을 또다시 해야 함
  • 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천

CSS-in-JS library (ex. styled component, emotion)

  • 따로 css 파일 만들 것 없이 jsx 파일 안에서 스타일링까지 해결 가능함
  • 컴포넌트 재사용성이 쉬워짐
  • js 값들을 props로 넘겨줘서 해당 js 값에 의도된 styling을 바로 적용 할 수 있음
  • class이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음
  • 스타일링을 직접 개발자가 하나하나 해야함

JavaScript template literal

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.

`string text ${expressiion} string text`

쉽게 말해 문자열 안에서 js 표현식을 사용할 수 있게 하는 문법이다.

CSS와 SCSS 비교

SCSS에서는 선택자 중복 회피 가능 이외에도 SCSS variable 등 여러 추가 기능 가능

Styled Components

패키지 설치 Styled Components는 styled-components라는 NPM 패키지명을 가지고 있습니다. 따라서 React 프로젝트에 다음과 같이 npm 커맨드로 간단히 설치할 수 있습니다.

$ npm i styled-components

설치 후에 package.json에 styled-components가 추가된 것을 확인할 수 있습니다.

  "dependencies": {
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "styled-components": "5.3.5"
  },

기본 문법 먼저 위에서 설치한 styled-components 패키지에서 styled 함수를 임포트합니다. styled는 Styled Components의 근간이 되는 가장 중요한 녀석인데요. HTML 엘리먼트나 React 컴포넌트에 원하는 스타일을 적용하기 위해서 사용됩니다.

기본 문법은 HTML 엘리먼트나 React 컴포넌트 중 어떤 것을 스타일링 하느냐에 따라 살짝 다릅니다.

HTML 엘리먼트를 스타일링 할 때는 모든 알려진 HTML 태그에 대해서 이미 속성이 정의되어 있기 때문에 해당 태그명의 속성에 접근합니다.

import styled from "styled-components";

styled.button`
  // <button> HTML 엘리먼트에 대한 스타일 정의
`;

React 컴포넌트를 스타일링 할 때는 해당 컴포넌트를 임포트 후 인자로 해당 컴포넌트를 넘기면 됩니다.

import styled from "styled-components";
import Button from "./Button";

styled(Button)`
  // <Button> React 컴포넌트에 스타일 정의
`;

두가지 문법 모두 ES6의 Tagged Template Literals을 사용해서 스타일을 정의합니다. 그리고 styled 함수는 결국 해당 스타일이 적용된 HTML 엘리먼트나 React 컴포넌트를 리턴합니다.

예를 들어, 다음과 같이 Styled Components로 작성된 JavaScript 코드는

import styled from "styled-components";

styled.button`
  font-size: 1rem;
`;

아래 CSS 코드가 적용된