react

[react] 계산기/새로고침해도 선택값 유지하기

토큰을 선택했을 때 새로고침을 해도 초기값으로 바뀌지 않게 해보기!!! 리액트에서 상태(state)가 새로고침될 때마다 초기값으로 돌아가는 것은 정상적인 동작이다. 페이지를 다시 로드할 때마다 새로운 인스턴스를 만들고 상태를 초기화한다. 그럼 값을 유지하려면? 그 값들을 컴포넌트 외부에 저장하기 setTokenModalOpen(true)}> 지금 코드는 이렇다... 에 token data를 넘기고 안에선 이름만 출력해주는 식이다. const [token, setToken] = useState(tokens[0]); const [token2, setToken2] = useState(tokens[1]); ... {isTokenModalOpen && ( )} Select라는 컴포넌트에 setToken을 전달해서..

[react] 리액트 리렌더링

학원 다닐 때 올린 ssr과 csr의 차이, ==와 === .. .등은 약간 의무적으로 올린 거였다. 단어에 익숙해진 건 좋았지만 실제로 머리에 남아있지 않았다. 그래서 이번엔 1시간 정도는 공부를 하고 그것에 대해 쓰려한다. 리액트에서 리렌더링이 일어나는 경우는? 1. props나 state가 업데이트 될 때 2. 부모 컴포넌트가 리렌더링 될 때 부모 컴포넌트가 리렌더링 되면 해당 컴포넌트와 그 하위 컴포넌트가 리렌더링 된다. 3. context가 변경될 때 4. hook을 사용하여 상태를 관리할 때 useState, useReducer 같은 훅을 사용할 때, 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트가 리렌더링 된다. 5. ForceUpdate() 함수가 호출될 때 ForceUpdate() 함..

카카오 로그인 🎃🎃🎃

카카오 로그인 도전~! https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 내 애플리케이션에 들어간다. 룸인어스는 뒤에 배경 없애주고 싶다... 플랫폼 등록에서 도메인 등록 일단은 로컬3000으로 ! 활성화 설정 ON ~~~~ 왼쪽 햄버거를 눌러서 동의 항목 설정에 들어오면 설정 후 내 애플리케이션 > 앱 설정 > 앱 키에서 JavaScript 키를 복사한다. .env 파일에 이렇게 적었는데 이렇게 적는게 맞는건가? process.env.NEXT_PUBLIC_KAKAO_JS_KEY = "복사한 키..

[css] grid는 어려월... repeat(auto-fill, minmax(285px, 1fr));

export const BoxWrapper = styled.div` display: grid; flex-direction: row; gap: 25px; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); @media ${breakPoints.screen4} { grid-template-columns: repeat(3, minmax(285px, 1fr)); } `; export const SearchWrapper = styled.div` display: grid; flex-direction: row; gap: 25px; grid-template-columns: repeat(auto-fill, minmax(285px, auto)); @media ${..

[react, query] 좋아요의 상태가 이상했던 이유

리패치하는 시점의 문제였다. async await 문제인가??? 엄청 헤맸는데... // 게임 좋아요 api const likeMutation = useMutation(gameLike, { onSuccess: (data) => { console.log(data); if (data?.nolike === "not user") { let alertModal: any = { onoff: true, title: null, text: "로그인 후 이용해주세요.", }; dispatch(set_alert_modal(alertModal)); } else { gameRefetch(); //

[styled-component] 마우스 hover effect

export const GameTitle = styled.span` // 게임 이름 ${font.h3_medium}; width: max-content; // 글자가 있는 만큼만 width를 갖게 된다. (!!!) transition: all 0.8s; &::after { // 게임 이름에 밑줄, 원래는 투명한 상태 display: block; content: ""; border-bottom: solid 1px white; opacity: 0; } `; export const GameVideo = styled.div` // 이미지랑 버튼 등 넣는 틀(?) position: relative; width: 285px; height: 180px; overflow: hidden; border-radius: 4p..

[react] Modal 스크롤 막기

Modal창이 fixed면 스크롤이 있을 때 맨 상단으로 올라간다고 한다... position도 바꿔보고, body의 overflow를 hidden으로도 해봤는데 그래도 계속 맨 위에서 떴다. 구글링해서 가져온 코드에서 조금(이라고 썼지만 오래 걸렸다..) 수정했다. Modal 이 켜질 때, 없어질 때에 body.style과 scroll을 바꾸는 식이다. const body = document.querySelector("body") as HTMLElement; const [scrollPositions, setScrollPositions] = useState(window.scrollY); window.addEventListener("scroll", () => { if (window.scrollY !== 0..

[redux] props지옥 벗어나기,,, - 도전

하는 방법이 아니라 내 시행착오들을 썼음 store에 어떻게 변형시킬지를 다 때려넣음. 이걸 변형시킬 수 있는 법은 그 변형을 나타내는 액션을 보내는 것 뿐! 어떻게 변형시킬지에 대해 명시하는 것은 reducers를 작성한다-라고 함. function manduing(state = 0, action) { if(action.type === "hot") { return state + 1 } else if(action.type === "cool" { return state -1 } else { return state } } } let mandu = createStore(manduing); mandu.dispatch({type:"hot"}); // 만두 데피기 # NPM npm install redux # Ya..

220630 프론트엔드 부트캠프 51일차 : 동적 배포 마무리, Docker

Docker에 대한 내용은 아래에 적었다. https://hani-honey.tistory.com/129 도커(Docker) 고래 모양 그거 도커 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 그리고 그 저장한 이미지를 클라우드에 올리고 그 이미지들이 서로 연결돼서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 hani-honey.tistory.com 동적 배포 (2) 어제 하던 것 이어서... 인스턴스 컴퓨터(EC2)안에서 curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash sudo npm install -g yarn sudo yum install git yarn install yarn build yarn start 해줍니다...

도커(Docker) 고래 모양 그거

도커 개발 환경 요소들이 설치된 모습을 이미지로 저장합니다. 그리고 그 저장한 이미지를 클라우드에 올리고 그 이미지들이 서로 연결돼서 동작하는 설정을 문서(Dockerfile)로 저장합니다. 새 컴퓨터에서 도커만 설치하면 이 문서의 내용대로 이미지를 다운받아 설치합니다. 가상머신과 비슷하지만 그것보다 훨씬 빠르고 자원을 효율적으로 사용합니다! 불필요한 추가적 운영체제 설치가 필요 없습니다. 도커를 쓰는 이유? 서버를 돌리기 위해선 환경이 갖춰져야 합니다. 예를 들어 회사에 각각 윈도우와 맥을 쓰는 개발자가 있었고, 리눅스를 쓰는 개발자가 신입으로 들어왔다고 해봅시다. 그럼 신입의 컴퓨터에 Node 등 버전을 똑같이해서 깔아야겠죠. 깔았는데 실행이 안돼요! 왜냐면 운영체제에 따라서 환경이 달라지기 때문입니..

[문제...] react-hook-form, 엔터치면 뮤테이션이 날아감

태그 컴포넌트를 가져와서 붙였는데, 태그를 입력하고 엔터칠 때마다 이 오류창이 떴다. 근데 다른 input창에서도 그랬던 것 같아서 엔터를 쳐보니까 역시나 오류가 떴음. 네트워크탭에서 보면 mutation이 요청되어 있다. 아무리 생각해도 의심스러운건 form 뿐..... enter를 치면 자동으로 submit이 되는 거 아닌가하고 독스를 찾아봤는데 "enter"키워드로만 찾아서 그런가? 그런 내용은 없었다... 알고보니 HTML에선 submit 태그 고유동작 중에 하나라고 한다. const checkKeyDown = (e) => { if (e.code === "Enter") e.preventDefault(); }; ... checkKeyDown(e)} > 출처 : https://www.codegrepp..

220616 프론트엔드 부트캠프 37일차 : 결제를 해보자!, 토스트와의 다툼, ...

꽤나 신기해.. 사 실 많 이 지금 생각해보니 이거 너무 귀엽지 않나? 목차를 이런식으로 써서 보여주시는데 진짜.... 나 그냥 이미 너무 정들었나봐 모든 것에.. 1. 결제 API 테스트할 신용/체크카드 준비됐지?! (>_ { console.log("안녕"); console.log(editorRef.current.getInstance().getHTML()); }; // 함수 이름 변경 안 해서 handleClick이고 실제론 onChange에 바인딩해놨다. return ( ); } 이제 이 데이터를 위로 올리고 잘 포장해서 보내서 디테일에서 받아오는 건 화장실 다녀와서 해야겠다. 다들 점심 먹으러가고,,, 혼자 남아있는데 짱 좋다... 아침에 일찍 오면 이런 기분 느낄 수 있을텐데 왜 일찍을 못올까,,..