어제보다 더 나은 오늘

지난 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 코드를 별도로 적어주는 것보다 더 간..

1. event.key 사용 const handleKeyUp = (e) => { // codes to execute } { if (e.key === "Enter") handleKeyUp(e); } } /> 2. event.keyCode 사용 const handleKeyUp = (e) => { // codes to execute } { if (e.keyCode === 13) handleKeyUp(e); } } /> 📚 참고자료: https://ungdoli0916.tistory.com/446

Tab 컴포넌트 구현 중 현재 어떤 탭이 선택되었는지 알기 위해 클릭 이벤트 핸들러에 index를 전달해야 했다. 이벤트 핸들러에 인자를 전달할 때는 화살표 함수를 이용해 이벤트 핸들러를 감싸고, 전달하고자 하는 인자를 첫번째 인자로 넣어서 호출해 준다. event 객체가 필요한 경우 두번째 인자 자리에 넣어주면 된다. [2022. 12. 27. 추가 수정] event 객체와 전달하고자 하는 인자를 같이 사용하고 싶은 경우, 전달인자의 순서는 크게 중요하지 않다. 가령 click 이벤트의 경우 onClick={(e) => handlerFunc(e, 전달하고싶은값)} 으로 event 객체를 먼저 넣어줘도 핸들러 함수의 파라미터와 핸들러 함수를 호출하는 위치에서 파라미터에 따른 인자의 순서만 잘 지키면 상관..