Jaeilit

// 모달 오버레이에서 스크롤 방지 useEffect(() => { document.body.style.cssText = ` position: fixed; top: -${window.scrollY}px; overflow-y: scroll; width: 100%;` return () => { const scrollY = document.body.style.top document.body.style.cssText = "" window.scrollTo(0, parseInt(scrollY || "0", 10) * -1) } }, []) Modal 컴포넌트에 넣어주면 됨 원리는 모달이 띄워졌을 시 position fixed 와 overflow-y가 핵심

아 커스텀 훅... 가끔 들려왔지만 가볍게 듣고 흘려들었는데 지금은 너무 좋은 기능이라고 생각합니다. 반복적인 코드를 줄일 수 있는 방법! 사용방법 항상 use 가 이름 앞에 붙은 js 파일을 만들어주고, 파라미터로 넘겨받을 값을 설정합니다. 저는 + - 버튼을 커스텀 훅으로 만들어서 사용했습니다. 초기 값을 0으로 받고 useState를 활용해서 버튼 클릭마다 state 에 값을 담아두고 그 값을 return 으로 훅 밖으로 내보내줬습니다. 주의사항 : 항상 return 값을 줘야지 밑에 사진처럼 return 받아서 해당 컴포넌트에서 사용이 가능합니다. 커스텀 훅을 검색하면 input 값을 받아오는 커스텀훅이 튜토리얼처럼 글 들이 많지만 저도 이 글에는 없지만 input커스텀훅을 먼저 만들고 인용해서 ..

대한민국 야구 팬들을 위한 모임 웹/앱어플리케이션 Meet Ball 링크 : http://meetball.shop/ http://meetball.shop/ meetball.shop 중간발표 회고 백엔드 대해서는 아키텍처 위주로 피드백을 주셨습니다. 저는 잘 모르는 용어들이기에 피드백 내용들이 기억에 남지는 않습니다. 더보기 프론트에 대해서는 개인적 느끼기에 발표때에는 피드백이나 질문이 많이 없었습니다. 음 그래서 발표 이후에 멘토님 스케줄이 끝나신 후에 개인적으로 찾아뵈서 피드백을 다시 받아보고싶다고 말씀을 드리고 양해를 구한 뒤 피드백을 다시 받아봤습니다. 일단 저희에게 피드백이나 질문이 많이 없었던 이유는.. 발표에서 어필을 안한 부분도 있지만 디자인적으로 많이 단순하다 컴포넌트 다 돌려쓰고 그냥 리..

https://www.next-t.co.kr/blog/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94-SEO-%ED%85%8C%ED%81%AC%EB%8B%88%EC%BB%ACSEO-%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-OpenGraph-metaogtag-%ED%8A%B8%EC%9C%84%ED%84%B0%EC%B9%B4%EB%93%9C-TwitterCards

1. env 등록을 했다. 2. 어라? 왜 자꾸 undefined 가 찍히지? 3. 구글링 결과 서버를 재실행 해야한다. 제가 환경변수로 등록한 것은 백엔드 서버 주소와, 이미지를 뿌려줄 때 서버의 저장소/ 경로인데 서버주소를 노출시키고 싶지 않아서 설정했습니다. REACT_APP_ 이라는 이름이 들어가지 않으면 인식이 안됩니다. 그리고 꼭 재실행해야함

공식문서 https://formik.org/ Formik React hooks and components for hassle-free form validation. The world's leading companies use Formik to build forms and surveys in React and React Native. formik.org 기존코드 export const Login = (props) => { const { history } = props const [loginOther, setLoginOther] = useState(false) const [inputValue, setInputValue] = useState({ userid: "", password: "", }) const {..

1. 이미지 미리보기 위 사진 inputValue 는 입력 값에 대한 state 이고, preview useState가 미리보기에 관한 state 입니다. imgPreview : state에 img file에 관한 정보들을 넣어둡니다. (미리보기를 위해서) deletePreview : delete를 누를시 setPreview 를 초기화 해줍니다. (삭제) 2. formDate 로 백엔드에 전송하기 백엔드에 axios 로 전송해야합니다. formData.append("key", value) 로 만들어준 뒤에, Axios post 요청 하면 됨, 주의사항 header에는 multipart/form-data 로 전송을 해야한다.

카카오 로그인 구현 로직 프론트엔드 기준 카카오에서 인가코드를 받아온다. 받아 온 인가 코드를 백엔드에 넘겨주고, 토큰을 념겨받는다. 1. 카카오 디벨러퍼에서 콜백URL을 설정 2. 받아 올 데이터들을 설정.. 3. 인가코드 받기 4. 인가코드 받기 (코드) 5. 인가코드 5. 인가코드

변경 전에는 useState를 반복적으로 인풋만큼 4개를 사용했다. 하지만 여러개를 하나로 압축시키는 법을 알고 나서는 하나로 썼다. 하나로 하는 방법 useState 하나에 값을 userid, username, password 등 나열한다. 이 값들은 input 의 name 속성과 일치해야 할 것이다. 그 inputvalue 들을 비구조화 할당으로 하나씩 까놓고 onChange 함수에 e.target.value 를 이용해서 e.target 또 한 까놓는다. name과 value로 지금 그 name은 아까 인풋의 name과 일치해놓은 그 부분이고 value는 값이 된다. 바뀐 값을 받아 올 setInputValue({}) 안의 불변성을 위해서 ...inputValue를 한번 불러온 뒤에 해당 값만 덮어씌..

const getCookie = (name) => { // 쿠키 값을 가져옵니다. let value = "; " + document.cookie // 키 값을 기준으로 파싱합니다. let parts = value.split("; " + name + "=") // value를 return! if (parts.length === 2) { return parts.pop().split(";").shift() } else if (parts === "; ") { return undefined } else { return parts.pop().split("=")[1] } } // 쿠키에 저장하는 함수 const setCookie = (name, value, exp = 1) => { let date = new Date..