익명의 개발노트

지난 시간에 이어 메뉴버튼을 클릭하면 팝업식으로 뜨고, 메뉴버튼을 닫으려고 다시 클릭하면, 메뉴창이 안꺼지는 현상. 코드를 보면 state값에 설정한 isClickMenu가 false false true 순으로 찍힌다.(한번클릭시) 문제는 보이지않는 DIV를 버튼 위에 올렸음에도 불구하고 DIV이벤트가 웹버전은 먹히는데, 모바일로 하면 먹히지 않음.. 부모자식관계는 game.js(부모, 메뉴버튼 있는 컴포넌트), Settings.js(자식) 1. componentDidUpdate 와 shouldComponentUpdate로도 해결이 안됨. 2. 이벤트 버블링인줄 알았으나, 이벤트 막히지 않음. preventDefault()도 되질 않음. 3. setTimeout으로 클릭이벤트 안에 false 값으로 넣을..

1. 음악파일 초기화 관련이슈 게임시작버튼을 누르면 배경음이 로딩 후 2초 뒤에 작동하게 끔, 러시아 형님이 만들어 놓으셨다. 다만 게임화면에서 로그아웃을 하면 로그인 화면으로 넘어가고, EXIT버튼을 누르면 게임 시작화면으로 넘어가는데, 이때 음악이 안꺼지게 설정을 해놓았다. 음악 실행부분은 리덕스로 해놓았기에, 소스를 확인했다. 음악은 일시정지만 있을 뿐, 정지는 아예없었다. 그리고 음악이 꺼지지 않은 상태에서 게임을 재시작하면, 음악이 기존음악이 멈췄다가 다시 첨부터 배경음이 다시 나온다. 해결방법 1. 기존에 이미 소스코드가 어지럽게 꼬여있기에, 손수 풀어서 사용하기엔 공수가 너무 많이 든다고 판단 2. 로그인화면이나 게임시작화면으로 이동시 볼륨 0으로 낮추고, 게임시작버튼 클릭하면 볼륨 올려주고..

1. 리액트에서 직접적으로 DOM을 건들고자할때 ref를 사용한다. 만약에 ref 사용하지 않고, document.getElementById 같은 함수를 사용한다면, 리액트 함수를 이용할 수 없는 단점이 있다. 버튼을 눌렀을때, 팝업창이 나오고, 팝업창을 제외한 다른 부분을 눌렀을때 닫아지는 것을 구현하고자 한다. 먼저 ref는 props로 넘길 수 없다. webframeworks.kr/tutorials/react/react-dataflow 우선 game.js 라는 메인화면 안에 setting이라는 자식 커스텀 컴포넌트가 있다고 하자. 팝업(셋팅창) 버튼은 부모컴포넌트(game.js)에 있다. 버튼 클릭 시 부모의 state값이 바뀐다고했을때, ref는 어디에 달아야하는가? 실제로 팝업창(셋팅창)의 ht..

1. 반응형을 제작했을때, 실제 모바일 환경하고 화면이 다를 수 있다. 예를 들면, 웹에서는 잘보이는데, 모바일에서 깨져보이면, 이상해보이는 태그의 부모에 flex가 걸려있거나, 아니면 부모태그나 자식태그에 너비가 정확하게 주어졌는지 확인을 해야한다.

1. 버튼 아이콘을 세로 가운데 정렬로 하고 싶은데, 방법을 찾던 도중 괜찮은 방법이 있어서 적는다. 통상 vertical-align : middle 이나, 다른 빈 DIV를 넣고 정렬하는 방법도 있지만, .className { position : absolute; margin : auto; top : 0; bottom : 0; left : 0; right : 0 } 정렬하고자 하는 태그 클래스명에다가 위와 같이 설정하면 끝. 2. 재사용성 없는 곳도 컴포넌트로! 1) 리액트를 사용할때 재사용성이 없더라도 소스코드를 분리해 놓으면 특정부분 수정하고 싶을때 한번에 찾아가기가 쉽다. 2) 재사용성이 없다면 Components 폴더보다는 Pages/부모 폴더 밑에 두면 된다. 3. 주석보다 조건문 사용해서 주..

1. 파이어베이스 데이터베이스를 이용해서 삽입, 삭제하기는 매우 쉽다. 삽입은 똑같이 fetch로 post 방식을 통해 백엔드로 던지는 방식처럼 보내면 되고, fetch(`${databaseURL}/words.json`,{ method :"POST", body : JSON.stringify(word) }).then(res => res.json()).then(data => ~~~) 삭제는 method : DELETE 방식을 주면 알아서 삭제한다 fetch(`${databaseURL}/words/${id}.json`,{ method :"DELETE", }).then(res => res.json()).then(data => ~~~)

1. 팝업창 떠서 들어가게 하기 일단 진행은 바닐라 자바스크립트에서 진행한다. var auth = firebase.auth(); var authProvider = new firebase.auth.GoogleAuthProvider(); auth.signInWithRedirect(authProvider); signInWithRedirect 이부분은 원래 signInWithPopup으로 했다가 아래와 같은 에러 발생 검색결과 위와 같은 경우 signInWithRedirect 이걸로 사용하라고 하여, 변경해서 진행하거나, 브라우져 설정에서 팝업 허용으로 변경하면 됨. var auth = firebase.auth(); var authProvider = new firebase.auth.GoogleAuthProvid..

1.로컬 개발환경설정 파이어베이스를 사용하려면 노드js와 firebase cli(컴터와 파이어 베이스 연결)를 설치해야한다, 프로젝트 디렉토리 초기화 후 웹경로 를 설정한다.(os별로 노드만 설치 약간 다름.) 1) 설치하기 npm install firebase-tools -g 2. firebase-cli firebase login 입력 후 Y firebase list 에 프로젝트 뜨면 연동성공 공식문서 : https://firebase.google.com/docs/web/setup?authuser=0 3. 프로젝트 초기화 프로젝트 폴더 만들고 들어가서 npm init하듯, 아래와 같이 입력하면 된다. firebase init DB, hosting 선택 후 엔터. 기본값주고 엔터치면 아래와 같은 폴더구조..

1. 로그인 인증방법을 선택할 수 있다. 2. 템플릿에 가면 이메일 기능을 활용할 수 있다. 이렇게 본인 인증을 이메일로 하게하는 등 기능을 사용할 수 있음.

1. Firebase란? 파이어베이스는 14년도에 구글에서 인수한 모바일, 웹 애플리케이션 개발플랫폼이다. 16년도 부터 구글에서 서비스를 대폭 강화한 Baas(Backend as a service) 서비스 이므로, 백엔드를 대신해 줘서 프론트엔드에 집중할 수 있게 서비스를 지원해준다. 2. 대표 서비스내용 1) 실시간데이터베이스 : 오프라인에도 실시간 데이터 통신을 하면서 최신상태 유지, api까지 지원해줌, 잠금모드와 테스트 모드가 있는데, 개발할때는 누구나 읽고, 쓸수있도록 테스트 모드로 하는 것을 추천한다. 기본적으로 json 형식으로 지원해준다. 2) 인증기능(Oauth, 일반로그인) : 이메일 템플릿을 이용하여 유효한 이메일인지 확인해서 인증하는 것도 있음. 3) 호스팅기능 4) 스토리지 3...