인문학적 공학도

Superb-ai의 비디오 어노테이션 앱 배포 전 성능 최적화 작업의 기록입니다. 웹 서비스를 완성하고 배포하기에 앞서 성능 최적화 작업을 해주는 것은 중요합니다. 불필요하게 렌더링되는 컴포넌트는 없는지, 연산이 오래걸려 병목을 발생시키는 함수는 없는지 확인해볼 필요가 있습니다. 그래서 실무에서 개발자 도구를 이용하여 성능을 개선한 사례 중 일부를 공유하려 합니다. React devtool로 타임라인 띄우기 성능 측정에는 크롬 확장프로그램인 React developer tools의 Profiler를 사용했습니다. React 프로젝트가 아니더라도 개발자도구의 Performance 탭에서 측정이 가능합니다. 다만 React 프로젝트라면 실행된 함수의 이름을 좀 더 명확히 표시해주고 React와 관련된 다양한..

서두 개발에 대한 리서치를 하다보면, 정말 흥미롭고 유익한 정보들이 많아서 꾸준히 읽고 싶은 테크 블로그들이 많다. 그러나 블로그라는 것이 플랫폼도 많고, sns의 뉴스피드처럼 한 곳에 모아서 볼 수 있는 매체가 아니다보니 블로그의 글을 꾸준히 찾아가서 읽기란 참 어려운 일이 아닐 수가 없다. 그러다 우연히 알게 된 기술이 RSS였다. 정말 오래전 기술인데, 필자가 초등학생일 때도 어렴풋이 본 것 같은 기억이 난다. 블로그를 방문하면 꼭 보이지만 어디에 쓰이는 건지 알 수 없는 이 RSS가 블로그를 구독할 수 있는 녀석이다. 이 RSS 링크를 RSS 리더에 등록하면, RSS 리더를 통해 마치 SNS의 뉴스피드처럼 블로그를 실시간으로 확인할 수 있다. 그럼 어떻게 RSS를 이용하여 블로그의 업데이트 되는 ..

요즘 한창 사용 중인 styled-component인 stitches는 inline style로 css를 부여할 수 있는 방법이 두 가지 있다. // const Box = styled('div', { ... }) 두 prop은 동일하게 html 태그에 스타일을 부여한다. 그렇다면 두 prop 간에 차이는 없을까? style prop은 DOM 생성 시 태그 내에 inline 스타일로 생성된다. css prop는 CSSOM을 생성한다. css prop이 CSSOM을 생성하는 이유는 정적인 CSS를 잘 관리하기 위함이다. 또한 style prop은 내용을 그대로 inline해버리기 때문에 사전에 정의한 디자인 토큰을 사용할 수 없다. 그러나 css prop을 이용하면 CSSOM으로 변환하는 과정에서 디자인 토..

체크박스를 감싸는 영역(label)의 클릭이 체크박스에 연동되도록 하는 과정에서 심상치 않은 발생했다. 클릭 시 focus-within을 이용해 해당 영역의 backgroundColor가 변경되어 focus되었다는 것을 시각적으로 보여주고자 하였다. 일단 그 때 당시의 상황을 코드로 재현해보았다. 보시다시피 다른 체크박스를 클릭하는 순간 backgroundColor이 깜빡거리는 것을 확인할 수 있다. 원인은 을 감싼 태그가 focus 불가능한 엘리먼트이기 때문이다. 마우스 다운 시 input의 focus가 풀리면서 backgroundColor도 풀리게 되고, 마우스 업을 하면서 input의 focus가 다시 되살아나서 비활성화되었던 focus-within이 활성화되는 것이다. 해결법은 간단하다. 에 ta..

세션과 쿠키가 필요한 이유는? HTTP의 두 가지 특징때문에 세션과 쿠키가 필요합니다. Connectionless(비 연결지향) 클라이언트에서 서버에 요청을 보내면 서버는 클라이언트에 응답을 하고 접속을 끊는 특성이 있습니다. Stateless(상태정보유지안함) HTTP 통신은 요청을 응답하고 접속을 끊기 때문에 클라이언트의 상태정보를 알 수 없습니다. 이를 Stateless하다고 합니다. 이러한 상태에서는 통신할 때마다 스스로를 인증해야합니다. 웹사이트 내에서 이동할 때마다 로그인을 새로해야하는거죠. HTTP 프로토콜에서 로그인을 유지한 채로 웹 서비스를 제공하기 위해 쿠키와 세션을 이용합니다. Session 세션이란 브라우저를 통해 웹서버에 접속한 시점부터 브라우저가 종료되기 전까지 클라이언트의 요청..

create-react-app만 사용하며 언젠가는 직접 개발환경을 세팅해야지 미루다가 드디어 하루 꼬박 들여서 기본 개발환경을 바닥부터 세팅하였다. 클론해다가 그대로 이용하기만 하면 되니 애용 부탁드린다. student513/react-dev-template react 작업환경이 세팅된 템플릿. Contribute to student513/react-dev-template development by creating an account on GitHub. github.com

프론트엔드 개발환경의 이해: 린트 1. 배경 jeonghwan-kim.github.io

변경전 const uniqueFlatQna = [].concat.apply([], faqs.map((faq)=>{ return faq.faqs.map((qa)=>{ return { question: qa.question, answer: qa.answer, fUrl: qa.fUrl, } }) })) uniqueFlatQna.forEach((item) => { if (uniqueFlatQna.findIndex(x => x.question === item.question) { return qna.question.indexOf(this.state.keyword) > -1; } ) : faqs[selectedCategoryIndex]?.faqs || [] 변경 후 getKeywordFaqs(faqData, key..

_findNoticeOrder = () => { const notices = this.props.notices let order = notices.findIndex( notice => notice.id === this.state.noticeId ) console.log(this.state.noticeId) return order } Get the index of the object inside an array, matching a condition I have an array like this: [{prop1:"abc",prop2:"qwe"},{prop1:"bnmb",prop2:"yutu"},{prop1:"zxvz",prop2:"qwrq"},...] How can I get the index of the..