FE (31) 썸네일형 리스트형 뿌-듯 Refactor[2] - 비동기 렌더링 원래 코드 구조는 다음과 같았다. const Main = () => { const [contents, setContents] = useState(''); fetch().then((res) => { setContents( {res.data.title} {res.data.subTitle} {res.data.contents} }); return ( {contents} ); } 아무튼 이런 구조였다. 페이지 첫 진입 시에는 빈 페이지이고, fetch가 끝난 이후에 contents 를 렌더하는 방식이었다. 막상 생각해보니 fetch 소요시간 + fetch 이후 DOM 생성 시간 + 리렌더 비용이 정말 비효율적이라고 느꼈고, 기본 값과 기본 틀을 만들어 주고 fetch 이후에 값만 바꿔주는 것이 훨씬 효율적이라 생.. Refactor[1] - Typescript 올해 1월에 MVP로 만들었던 코드들 .. 몇 개월이 지나고 나니 이거저거 달라붙어서 이상한 코드가 되어있었다. 그리 대단한 페이지도 아닌데, 1000줄 가까이 되는 코드고 읽다보면 속이 울렁거린다. 약 1주 정도의 시간을 갖게 되어 9월에 리팩토링의 시간을 갖게 되었다. 처음 진행한 것은 타입스크립트 도입이다. 왜? 사실 누군가로부터 타입스크립트 좋다, 써봐라 이런 얘기를 들었을 때에 썩 와닿지 않았다. 학생 때 C와 Java를 조금 공부하다가 Javascript를 통해 동적 타입으로 작성해보니 너무 편했고 굳이 필요하다고 느낀 적이 잘 없었다. 도입의 필요성을 느낀 순간은 다음과 같았다. 1. 백엔드 통신 fetch(~~~).then((res) => { const { price } = res.data.. 자바스크립트에서 네이티브 웹뷰가 닫혔을 때 감지 프로덕트에서 다음과 같은 이슈가 있었다. --- 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'];// .. 개발팀 동료평가/셀프피드백 문항 과정이 있기에 결과가 있지만 과정이 있지만 결과가 없으면 무엇도 되지 못한다는 생각 하에 과정/결과를 구분하여 작성하였습니다 (윗줄이 과정 아랫줄이 결과) 각 문항에 대해 점수를 매기는 방식으로 동료평가 혹은 셀프 피드백으로 활용할 수 있을 것 같습니다 학습 & 자기계발 학습과 자기계발에 주도적이며 성장 가능성이 있나요? 제가 눈에 띄는 성장을 이루었나요? 위기 & 이슈 대처능력 이슈가 발생했을 때에 신속하고 정확하게 처리하였나요? 추후에 같은 위기&이슈가 발생하지는 않았나요? 일정/스프린트 관리 일정과 스프린트 관리의 필요성을 알고, 노력하는 모습을 보였나요? 제 실수로 인해 일정이 지연되어 프로덕트의 성장에 방해가 된 적이 있나요? 자신감 & 실력 자신감과 실력을 위해 노력하는 모습을 보였나요? 자신.. 이전 1 2 3 4 다음
