본문 바로가기

전체 글

(55)
자바스크립트에서 네이티브 웹뷰가 닫혔을 때 감지 프로덕트에서 다음과 같은 이슈가 있었다. --- Webview Stack --- B Webview A Webview ----------------------- A, B Webview 는 별개의 영역 (크롬으로 치면 다른 탭) 이므로, 최상단 B Webview 에서 행동한 결과에 대해 A Webview 가 인지할 수 없었다. 전에는 이런 상황에서 WebSocket 으로 시도를 하거나, 네이티브 개발자분들께 화이트리스트를 추가하는 방식을 말씀을 드렸었다. (네이티브에서는 웹뷰가 닫히는 것에 대해 감지가 가능) 이번 경우는 B Webview 에서의 행동은 POST 였고, 좋은 API 를 알게되어 적용하게 되었다. window.addEventListener('visibilitychange', () => { wi..
useState 가 아무튼 안될 때 import { useState, useRef, useEffect } from "react"; function Main() { const [testState, setTestState] = useState(0); const testRef = useRef(null); function clickHandler(event) { event.preventDefault(); setTestState(testState + 1); } useEffect(() => { if (!testRef) return; testRef.current.addEventListener('contextmenu', (event) => { clickHandler(event) }); console.log('event added'); return () =..
배열을 useState에서 사용할 때 const Main = () => { const [test, setTest] = useState([1, 2, 3]); function TestFunction({state, setState}): JSX.Element { return ( { const qwer = state; qwer[2] -= 1; setState(qwer); console.log('clicked', state); }} >{test} ); } return ( ); } div 영역을 클릭하면 test 배열의 2번값이 -1 되어, 클릭할 때마다 -1이 감소된 값이 리렌더될 것으로 생각되지만 .. 작동하지 않는다. spread operator 를 사용하여 const asdf = [...state]; 이렇게 바꿔주어야한다는데 .. 원리는 시간나면..
배열을 const 로 선언했을 때, 왜 push와 pop이 가능할까 (state 배열) 갑자기 궁금해짐 조만간 알아보도록 하자 대체 언제 옴? 알아보러 왔다. 우선 const 가 무엇인지에 대해 알아보자 const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 간단한 답변은 push 와 pop 행위가 재할당/재선언이 아니기 때문이다. (not re-assigning or re-declaring) [ https://stackoverflow.com/questions/23436437/why-can-i-change-a-constant-object-in-javascript ] const a = []; a.push('hihi');// works const b = []; b = ['hihi'];// error const b = ['hihi'];// ..
개발팀 동료평가/셀프피드백 문항 과정이 있기에 결과가 있지만 과정이 있지만 결과가 없으면 무엇도 되지 못한다는 생각 하에 과정/결과를 구분하여 작성하였습니다 (윗줄이 과정 아랫줄이 결과) 각 문항에 대해 점수를 매기는 방식으로 동료평가 혹은 셀프 피드백으로 활용할 수 있을 것 같습니다 학습 & 자기계발 학습과 자기계발에 주도적이며 성장 가능성이 있나요? 제가 눈에 띄는 성장을 이루었나요? 위기 & 이슈 대처능력 이슈가 발생했을 때에 신속하고 정확하게 처리하였나요? 추후에 같은 위기&이슈가 발생하지는 않았나요? 일정/스프린트 관리 일정과 스프린트 관리의 필요성을 알고, 노력하는 모습을 보였나요? 제 실수로 인해 일정이 지연되어 프로덕트의 성장에 방해가 된 적이 있나요? 자신감 & 실력 자신감과 실력을 위해 노력하는 모습을 보였나요? 자신..
(React.js + Next.js) Skeleton 적용 프로덕트에서 UX 개선 항목으로 SkeletonUI 와 ProgressBar 요청사항이 들어왔다. 처음 진행해보는 작업이라 많은 검색을 해봤고, 절대 다수의 기술 블로그에서는 다음과 같이 설명하고 있었다. 1. 페이지 이동 시에 state 를 통해서 content 영역에 skeletonUI 를 렌더링한다. 2. fetch 이후 state 를 통해서 content 영역에 정상 데이터를 렌더링한다. 대충 코드로 나타내면 이렇게 되겠다. const [content, setContent] = useState(); request('url', (resData) => { setContent(~~~~); }); 유명한 스타트업의 기술블로그도 위와 같은 방식을 사용하고 있었다. 하지만 몇 가지 이유로 사뭇 다른 방식으로..
자바스크립트와 자바의 차이
webstorm 전체검색이 되지 않는 현상 왼쪽에 보이다시피 파일 디렉토리 배경색이 노랗게 되고 전체검색 기능, esLint, highLighting 이 고장나는 이슈가 있었다 나도 고장났다 개빡치낟 .idea 파일 삭제 webStorm 재설치 로컬 삭제 후 remote 재설치 원인은 .idea 내의 파일을 푸시한 것 . . 아무튼 해결방법은 어이없었다 전에 thymeleaf 를 사용하던 프로젝트가 있었어서 intelij 로 실행했다가 웹스톰을 다시 켜니까 원래대로 돌아왔다 ?