익명의 개발노트

1.SEO 검색엔진 최적화, 웹사이트를 만들때 사용자로 하여금 검색이 잘 되게 노출하는 것이 중요하다. 프론트엔드 개발자의 중요한 임무중 하나이다. 검색엔진 최적화 효과를 보려면, 변경시작한 시점을 기준으로 성과가 나타날때까지 보통 4개월에서 1년 정도 소요된다. 핵심은 2가지. 1. 잘노출되게 한다. 1) 우리사이트 주소가 여기저기서 링크되고 있어야 한다. 2) 헤더에 페이지 정보(title, 주소, description)를 잘 작성한다. 참고로 CRA는 SEO가 좋지 않다. 왜?? index.html이 하나뿐이어서, 이 부분을 보완하기위해서 gatsby.js가 나온 것이다. CRA를 사용하려면 react-helmet을 설치하고 import해서 아래와 같이 필요한 페이지에 helmet 태그로 감싸서 넣..

1. 반응형으로 모바일 화면을 꾸미다 보면, 모바일 창 넓이, 높이를 알고 싶을때 사용하는방법 모바일에서는 콘솔창이 의미가 없다. 따라서, alert(window.innerWidth) or alert(window.innerHeight)로 값을 확인하면 아주아주 좋다. 2. 유지보수하기 좋은 코드란?? 오늘 대표님께서 코드 리뷰를 해주시면서 여쭤보셨다. 눈에 보기에 좋은 코드일 수도 있지만, 객체지향적으로 나누고 분리해서 필요할때 간단하게 가져다 쓰거나, 수정할 수 있게 하는 코드가 유지보수하기에 좋다고 답변드렸다. 추가적으로 내가 자바와 자바스크립트로 게임을 만들어보면서 클래스나 함수형으로 만들었더니 유지보수하기에 좋았다고도 같이 말씀드렸더니, 만족해하셨다. 시스템을 만들때 가장 중요한 요소는 뭐라고 생..

지난 시간에 이어 메뉴버튼을 클릭하면 팝업식으로 뜨고, 메뉴버튼을 닫으려고 다시 클릭하면, 메뉴창이 안꺼지는 현상. 코드를 보면 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. fieldset과 legend Tag 기업협업간 러시아 형님께서 사용하신 코드임. 내가 리팩토링간 지워버림. 아주 강력한 기능이다. fieldset을 사용하면 그 안에 있는 html을 그룹핑 시켜버리는 기능이다. 조절하기 매우 힘듬. legend는 fieldset의 제목을 달아주는 것이고, 고정되서 움직이기 매우 힘듬. position : absolute로 옮길 수 있으나, 그래봤자 fieldset 내부에서 움직인다. 좀더 빨리 검색해볼껄.... 하....처음보이면 무조건 검색 ㄱㄱ! 2. key pad 리팩토링 이미지 넣는 것은 문제안됨. 다만 우측 하단 00과 DONE으로 된부분은 관계설정을 잘해주어야 둘다 클릭이 된다. 맨첨에 DONE의 z-index를 -1로 해서 맨 아래 깔았다가 클릭안되는..

1. fullscreen 시 esc키 눌렀을 경우 무한루프 + 이벤트 적용안되는 현상 const supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; console.log("orientationEvent",orientationEvent) window.addEventListener(orientationEvent, () => this.toggleFullScreenBtn(), false); document.addEventListener("fullscreenchange",(e) => this.onFullScreenCh..