어제보다 더 나은 오늘

프로젝트를 진행하면서 공통 UI 컴포넌트를 제작해서 사용했고, 그 중 대표적인 UI 컴포넌트가 버튼이었다. 먼저 프로젝트 진행 과정 중 버튼 컴포넌트의 변천사를 간단하게 정리한 다음, 프로젝트가 끝난 후 새로 알게 된 스타일 컴포넌트의 theming 기능을 적용해 보는 과정까지 기록하고자 한다. 1. styled-components로만 만든 버튼 프론트 팀원 중에서 한 분이 공통 ui 컴포넌트 제작을 맡아주셨다. 처음 만든 공통 ui 버튼 컴포넌트는 활성화/비활성화 느낌으로 두 종류의 다른 색상의 버튼을 컴포넌트명을 달리 해서 사용하는 방식이었다. 이후 다음의 두 가지 이유에서 해당 컴포넌트의 리팩토링 필요성을 느꼈다. 기본 파란색 버튼과 회색 버튼이 아닌 다른 색상의 버튼이 필요해졌다. (카카오톡 로그..

1편과 2편에 이어 최종편으로 마무리해보려 한다. 프로젝트를 하면서 만난 에러 모음 및 회고는 언제 포스팅할 수 있으려나..🥲 1. 비밀번호 유효성 검사 필요한 유효성 검사: 최소 8자, 하나 이상의 문자와 하나의 숫자 // 8~20 글자 let regExp = /^[a-zA-Z0-9]{8,20}$/ // 8 글자만 검사 통과 let regExp = /^[a-zA-Z0-9]{8}$/ // 8 글자 이상 let regExp = /^[a-zA-Z0-9]{8,}$/ 🔽 최종적으로 작성한 checkPassword 함수 2. request header의 Authorization 인증 토큰을 서버에 보낼 때 요청 헤더의 authorization에 실어서 보냈다. 여러 곳에서 post 요청을 보내야 했기에 먼저 다음..

지난 1편에 이어 이틀 전 사전 프로젝트를 마무리한 시점에서 2편을 작성해 본다. 배운게 너무 많아서 어떻게 정리를 해야할지 모르겠지만 일단 하나씩 짧게라도 기록을 남겨본다. 최종편이 몇 편이 될 지는 나도 모름...😇 서버 쪽 배포 환경 유지가 아마 내일까지 밖에 안 될 거 같지만 그래도 남겨보는 배포 링크 https://seb42-pre-025-seb42-pre-025.vercel.app/questions 뉴진스의 Ditto요 seb42-pre-025-seb42-pre-025.vercel.app 클릭하자마자 시선을 강탈하는 빨간 화면이 떠서 깜짝 놀라실 텐데요. 이에 대한 원인은 현재까지 파악하기로는 클론을 너무 똑같이 해서... 구글이 사기성 사이트로 필터링을 하고 있는 것으로 짐작 중입니다. (아..

context 설명: create-react-app을 사용해 프로젝트를 진행 중입니다. 1. 컬러 팔레트 사용 App.css 에 컬러 팔레트를 만들어두고 css 변수를 불러와서 색상을 지정하고 있다. 혼자 과제를 할 때는 색상 팔레트의 편리함을 크게 느끼지 못했는데 여러 명이서 같이 작업할 때 훨씬 더 빛을 발하는 것 같다. App.css가 아닌 index.css 에 컬러 팔레트를 지정하면 var()로 불러올 수가 없던데 왜 안 되는건지 잘 모르겠다. (아직 안 찾아봄..🥲) 📚 참고자료: - CSS 변수 합성의 강력함 - CSS 변수와 웹사이트 테마 2. 공통 ui 컴포넌트 (버튼) 작성 위와 같이 버튼 컴포넌트를 생성하고, 버튼이 필요한 곳에 아래와 같이 컴포넌트를 호출해서 사용하면 된다. 기본 버튼..

to do 앱 만들기 과제를 하면서 axios로 fetch를 하게끔 코드를 작성했다. 이번 기회에 crud 요청 관련한 부분들을 정리해 보았다. axios 공식문서에서 요청 메소드 명령어는 다음과 같이 나와있다. 1. Read axios.get(url[, config]) 🔽 코드 예제 const { REACT_APP_SERVER_URL: URL } = process.env; const [todos, setTodos] = useState([]); useEffect(() => { async function getData() { try { const res = await axios.get(URL); setTodos(res.data); // (*) } catch (error) { console.error(err..

삼항 연산자, 특히 flag 변수를 이용해서 조건부 렌더링을 쓸 때가 많은데 그러다보면 값이 없을 때에는 빈자리를 채워주기 위해서 null이나 빈 문자열('')을 써주는 경우가 가끔 있다. 빨간색으로 표시한 부분은 포스팅에 대한 답변이 있으면 말풍선 이모티콘 옆에 숫자 1을 표시해주고, 그렇지 않으면 빈 공란으로 두려고 했다. 이제까지 이럴 때 다음과 같이 코드를 작성했다. {answer ? 1 : null} 똑같은 코드를 && 연산자를 써서 처리할 수도 있다. JavaScript에서 true && expression은 항상 expression으로 평가되기 때문이다. 이때 answer가 falsy한 값이면 리액트는 무시하고 건너뛴다. {answer && 1} 이걸 이용해서 아래와 같이 답변이 있는 경우 ..

📍문제 상황 Login 컴포넌트에서 로그인 버튼을 누르면 GitHub OAuth 인증을 통해 Github resource server에서 사용자 정보를 받아와 Mypage 컴포넌트에서 사용자 정보를 이용해 화면을 그려줘야 했다. 이 과정에서 Mypage 컴포넌트에서 useEffect hook를 이용해 의존성 배열 자리에 빈 배열을 넣어서 Mypage 컴포넌트가 처음 렌더링 될 때 hook의 callback 함수에 axios post 요청을 해서 사용자 정보를 받아오려고 했다. useEffect(async () => { const res = await axios.post("http://localhost:4000/userinfo", { accessToken, }); setGithubUser(res.data...

axios 라이브러리는 편의를 위해 다음과 같이 http 메소드의 별칭을 제공한다. axios.get(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) axios.delete(url[, config]) 여기에서 마지막 delete 요청을 보면 post 요청과 달리 두번째 인자가 data가 아닌 config이다. 하지만 config 설정 옵션을 통해서도 서버에 data를 실어 보내는 방법이 있다. 다음은 Oauth 구현 과제에서 클라이언트 화면에 있는 로그아웃 버튼을 눌렀을 때 로컬 서버에 accessToken을 같이 보낸 다음, 로컬 서버에서 re..

요며칠 node.js와 함께 인증의 세계에 다녀왔다. 그러면서 .env 파일에 환경 변수를 설정해서 쓰는 법을 알게 되었다. 이번 포스팅의 주제는 아니지만 node.js에서는 dotenv 모듈을 사용하면 쉽게 처리할 수 있다. 1. .env 파일에 필요한 key를 다음과 같이 설정해준다. ACCESS_SECRET= YourSecretKeyForAccessToken REFRESH_SECRET= YourSecretKeyForRefreshToken 2. 환경 변수를 불러와야 하는 파일에서 dotenv 모듈을 불러온다. require("dotenv").config(); 3. .env 파일에 저장했던 환경 변수 앞에 process.env.를 붙여서 사용한다. const generateToken = (user, c..

props로 조건부 렌더링이 가능하다. 📍 검색 창 입력값 존재 여부에 따라 해당 요소의 border-radius 값을 다르게 주고 싶을 때: 1. 검색 창 입력값 존재 여부에 따라 ture, false를 가지는 hasText 라는 변수로 상태 관리를 해준다. 2. 컴포넌트에 hasText를 props로 내려보낸다. 3. 다음과 같이 border-radius 값을 조건부 렌더링으로 걸어준다. border-radius: ${(props) => props.hasText ? activeBorderRadius : inactiveBorderRadius}; 이렇게 하면 입력값이 있을 때, 즉 hasText가 true일 때 컴포넌트의 class명을 삼항연산자로 다르게 줘서 css 코드를 별도로 적어주는 것보다 더 간..