ios 스크롤 바운스

다음과 같이 아이폰에서 흔들리는 현상을 ios 스크롤 바운스라고 한다. 해결방법 해결방법으로는 다음 css 를 적용시켜주는 것이다. 그리고 스크롤 되지 않길 원하는 부분을 .wrap css 로 감싸준다. html, body { position: fixed; overflow: hidden; } .wrap { width: 100vw; height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; } 다음 코드 처럼말이다. import Board from "./Board"; import "./App.css"; function App() { return ( ); } export default App; 참고자료 https://m.blog.naver.c..

따라하며 배우는 리액트 A-Z 넷플릭스

1. axios baseUrl import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org/3", params: { api_key: "e8a960ccca46e3b7c8974d7353cbfadc", language: "ko-KR", }, }); export default instance; 2. requests.js const requests = { fetchNowPlaying: "movie/now_playing", fetchNetflixOriginals: "/discover/tv?with_networks=213", fetchTrending: "/trending/all/week", fetchTopR..

첫 해커톤 참여후기 [놀다가는 앞마당 해커톤]

8월 13일 8월 14일에 부산대학생을 위한 해커톤이 개최되어서 참여하게 되었습니다. 장소가 너무 멋졌는데 사진을 많이 못찍었다.. 안돼~ 도착하다. 도착해서 한 15분 정도 기다렸다. 팀이 어떤분이 될까 궁금했다. 팀 매칭 팀발표가 딱 났는데 다른팀은 다 4명이였는데 저희팀만 유일하게 3명이었다. 안돼~ 코로나때문에 불참하셨다고 하시더라구요. 아이스 브레이킹, 주제 선정 20분동안 아이스브레이킹과 함께 주제를 정했어야했다. 주제는 팀원의 공통 관심사로 어플리케이션을 만드는 것이었다. 저는 해커톤에 가기전에 주제를 다음 2가지 정도 생각을 해봤었다. 모두 음악을 좋아하면 음악을 만들어보자. https://www.youtube.com/watch?v=UBXU2l_0eRw 이모지 쓰는 걸 좋아하시나요? 이모지..

동적 데이터요소 style 주기

갑자기 왜 이걸 하게 된거지? 어쩌다보니 데이터가 동적으로 5개 , 7개 몇개가 들어오는지 알 수 없을 경우 몇개가 들어올지 알수없는 데이터에 css 를 먹이고 싶었다. 그런 방법을 생각해보다가 다음과 같은 로직을 짰다. https://codesandbox.io/s/lively-currying-71lfgc?file=/src/App.js lively-currying-71lfgc - CodeSandbox lively-currying-71lfgc by ehddud1006 using react, react-dom, react-scripts codesandbox.io 데이터 배열에서 랜덤으로 3개 뽑은 배열을 map 함수 돌려서 index로 querySelector 로 DOM 을 얻어서 style을 먹이는 것이다..

리액트 새로고침 시 대응방법

현재 프로젝트에서 음성채팅을 할때 토큰을 발급을 받는데, 통화종료를 누르면 토큰이 반납되는 방식으로 구현이 되어있다. 그런데 사용자가 만약에 새로고침을 해버린다면 토큰이 반납이 되지않아 다시 음성채팅에 참여할 수 없게 되어버렸다. 이러한 문제를 해결하기 위해서 새로고침에 대한 대응을 마련해야했다. 초기에는 다음과 같이 생각했다. 그냥 새로고침 감지되면 무지성으로 요청 보내기. 하지만 이경우에는 문제가 발생했는데, 새로고침이 감지된 순간에 React state 값들이 처음 선언했던 값으로 바뀌어버렸다는 것이다. 따라서 이 방식은 사용할 수 없었다. const alertUser = (e: any) => { console.log('새로고침 테스트'); axios .post('/api/v1/webrtc/voic..

모달 fadeOut 효과주는 방법, 서서히 사라지는 모달

프로젝트가 거의 마무리 단계이다. 디테일을 잡고있다. 구현해야하는 것은 다음과 같은 모달인데 서서히 사라지게끔 하고 싶다. 구글링을 통해 코드샌드박스에 다음과 같은 hideEffec를 만들 수 있었다. https://codesandbox.io/s/heuristic-almeida-bt1ku9?file=/src/App.js heuristic-almeida-bt1ku9 - CodeSandbox heuristic-almeida-bt1ku9 by ehddud1006 using react, react-dom, react-scripts codesandbox.io 우선 만들던 중에 React 에서 바닐라 자바스크립트의 document.getElementById의 기능과 addEventListener를 사용하는 방법을 ..

모달 영역 밖 클릭시 닫기

방법은 간단하다. 다음 처럼 전체 영역을 가진 div 태그를 만들어준다. export const ModalBackgroundOutEvent = styled.div` position: fixed; top: 0; left: 0; bottom: 0; right: 0; `; 모달에는 z-index 속성을 주어 저 배경영역보다 위에 있게한다. 이를 주지 않는경우에 모달을 누를때 모달이 닫아지기 때문에 꼭 넣어주어야한다. 그러면 저 ModalBackgroundOutEvent 에 onClick 으로 모달을 닫게하는 state 를 변경하면 된다. 다음과 같은식으로 말이다. { dispatcher(setUsePointExcept({ value: false })); }}>

post 에러 몇번대 에러인지 체크하는 방법

요청을 보냈을때 다음 처럼 몇번 status 의 에러를 가지는지로 모달의 띄워줘야하는 상황이였다. 409 번 에러라면 포인트를 확인해주세요 라는 모달을 띄워야했는데, 한번보도록 하자. 다음처럼 catch 문에서 error.response.status 를 통해서 해당 값이 몇번대의 에러인지 알 수 있었다. .catch(function (error) { // handle error console.log(error); if (error.response.status === 409) { dispatcher(setCreatePointModalExcept({ value: true })); } 출처자료 https://stackoverflow.com/questions/39153080/how-can-i-get-the-st..

채팅 드로어 구현

글적다 한번 날려먹었다. 다시쓰려니까 넘나리 귀찮지만.. 기록 남기는 것이 중요한 걸 알기에.. 다음처럼 드로어를 구현했다. 뭐 굿 디자인은 아니지만 어물쩡 넘겨버릴 수도 있었다. 하지만 원래 디자인은 다음과 같이 카카오톡 처럼 채팅 input 과 함께 싸악 올라가는 모습이다. 다음처럼 말이다. 나는 그냥 기존에 있던 드로어를 재활용해서 만들었다. 하지만 실무에서 만약 디자인이 나에게 까지 왔다면, 그 디자인은 나보다 윗분들에게 컨펌을 받은 상태에서 내려온 디자인일 것이다. 그것대로 구현하지 못하거나, 귀찮다는 이유로 구현을 하지 않는다면 나는 그 회사에 존재할 이유가 없는 사람이다. 그냥 이런 생각이 갑자기 들었다. 그래서 저런식으로 구현을 하기로 다시 마음을 먹었다. 시간이 좀더 걸리더라도 퀄리티를 ..

모바일 모달 만들기

모바일 모달을 만들었습니다. 쉽지만 만들면서 레이아웃을 잡을 때 든 생각을 기록하기 위해서 글을 씁니다. 먼저 백그라운드를 잡아주어야합니다. 코드는 다음과 같습니다. const ModalBackground = styled.div` position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.8); `; 이제 모달의 위치를 잡아주어야하는데, 흔히 모달을 정중앙에 위치시키기 위해서는 transform 을 많이 사용합니다. 다음과 같이 말입니다. top:50%; left:50%; transform: translate(-50%,-50%); 하지만 이번에는 calc 를 사용해서 중앙을 계산했습니다. --vw 단위는 모바일 기기..