본문 바로가기

Today I Learn

 (60)
React 18에서 알아야 할 세가지(What You Need to Know About React 18) 2021. 6. 12. 23:46 Sheeraz Shaikh의 What You Need to Know About React 18을 번역하였습니다. > Going to see the original article { // Transition: Show the results setSearchQuery(input); }); React 18 Working Group Facebook에서 잘 알려진 라이브러리들의 author, maintainer들을 위한 working group을 생성했습니다. 그들은 이 특징들에 대해 사전 피드백을 주기 위해 논의하고 있습니다. 해당 논의들은 관심있는 누구든지 볼 수 있도록 열려 있습니다. 제가 팔로잉하는 링크를 공유합니다. https://github.com/reactwg/react-18/discussions/4..
cypress를 써보자! (2) 2021. 5. 23. 16:32 cypress를 써보자! (3) 목차 1. Webpack resolve.alias 2. Settig up CI 3. One intercept, multiple responses 1. Webpack resolve.alias 1주차에서 jsconfig.json에 alias 설정을 추가했다. 그러나 cypress:open 시 절대 경로를 못찾는 에러가 발생했다. cypress 웹팩 설정에서 resolve.alias를 해주지 않아 발생한 이슈였다. 따라서 cypress/plugins/index.js에 webpack resolve.alias 또한 추가했다. // ./cypress/plugins/index.js // ... 중략 ... module.exports = (on, ..
cypress를 써보자! (1) 2021. 5. 16. 00:23 cypress를 써보자! (2) > cypress를 써보자! (3) > 프로젝트를 쭉 담당하면서 단위테스트만으로는 부족하다고 생각될 때가 왔다. 저번주에 운영환경을 체크하는 로직을 라우터 페이지에 넣어버리는 실수로 인해 리얼환경에서 잘 동작하는지 반드시 확인해야 할 필요가 생겼다. 또한 QA 과정(혹은 단위테스트)에서 발견이 어려웠던 이슈들이 속속들이 나오고 있었다. 따라서 새 서비스 개발에 착수하기 전에 작년부터 해보고 싶었던 cypress를 도입하여 통합 테스트를 작성하고자 했다. 이번주에는 cypress 첫 설치와 실행 그리고 간단한 테스트 코드 작성으로 사용하는 것까지 공부하면서 기록했다. 1. cypress 설치 글쓴이는 외부와 차단된 private 망에서 개발을 하고 있다. 따라서 외부 깃헙에..
TDD로 서비스 개발하기 2021. 4. 18. 14:19 지금까지 내가 어떤 서비스 개발에 참여하고, 기획서와 디자인 시안을 받으면 가장 먼저했던 것이 있다. 바로 기획서와 전체 스펙을 보고 FE에서 개발해야 할 기능 리스트를 정리하고 각 기능에 대해 머릿속이나 간단한 코드로 설계를 해보는 것이다. 테스트 코드는 개발이 완료되면 리팩터링을 시작하기 전에 작성하고는 했다. 그러나 항상 결정과 피드백* 사이의 차이점을 인식하지 못하는 경우가 발생하는데 이는 주로 QA에서 기획서 스펙과 다른 사항을 피드백받고 나서야 해결하고는 했다. 결정과 피드백* '결정'은 개발자가 목표를 구현하기 위해 설계하는 과정을 말하고, '피드백'은 기능이 정상적으로 동작하는지에 대한 성공/실패를 말한다. TDD는 개발자가 기능을 설계하는 과정에서 목표를 잃어버리지 않게 도움을 준다. 그..
[MobX, mobx-react-lite] Observable 다양하게 활용하기 2021. 4. 13. 19:23 현재 다니고 있는 회사에서는 MobX와 mobx-react-lite*을 활용하여 상태를 관리하고 있다. 크게 아래 세 과정에 의해 스토어를 생성하고 사용한다. 과정 자세히보기 1. 'create~Store' 네이밍 룰로 옵저버블로 만들고자 하는 객체를 생성한다. const createAccountStore = () => { return { id: '', password: '', setId(value) { this.id = value } get isValidId() { return this.id.length > 5 } } } export {createAccountStore} 2. mobx-react-lite의 useLocalStore*로 만든 옵저버블을 컨텍스트에 등록한다. const rootContext..
/** IGNORE*/ 주석 2021. 4. 9. 12:20 팀원분께서 axios 코드를 뜯어보시다가 /** IGNORE*/ 주석을 소개해주셨다. 예를 들어 어떤 비동기 함수를 이렇게 작성하면 const asyncFunc = async () => { try { const res = await axios.get('/something') return res } catch { /** IGNORE*/ } } asyncFunc에서 에러가 발생해도 catch문에서는 어떠한 처리를 하지 않고 리턴할 것이다. 즉 /** IGNORE*/ 주석의 의미는 ‘내(여기서는 asyncFunc입장)가 낸 에러는 스스로 잡을게. 대신 다른 처리를 하진 않을게’ 라는 약속인 것이다. const asyncFunc = async ()=>{ try{ const res = await new Promi..
[JS] Blur 이벤트 전에 Click 이벤트를 실행하기 2021. 3. 17. 18:15 사내 디자인 가이드 중 이런 형태의 가이드를 구현해야 할 일이 있었다. 입력란에 포커싱 되고 타이핑이 있을 때만 옆의 x 버튼을 보이게 하는 기능을 구현해야 했다. 처음엔 css로 visibility를 제어하고, input에 포커싱이 될때만 버튼 영역을 그리려 했다. .flexible-delete { visibility: hidden; &.active { visibility: visible; } } const [isFocus, setIsFocus] = useState(false) const onFocus = () => setIsFocus(true) const onBlur = () => setIsFocus(false) return ( {isFocus && ( )} ) 하지만 onClick 이벤트보다 Blu..
이벤트 루프와 process.nextTick() 이해하기 2021. 3. 8. 22:43 이전에 이벤트루프에 관하여 이렇게 정리한 적이 있다. 이벤트 루프란 멀티 스레드 기반의 브라우저나, Node.js 구동 환경이 단일 스레드인 자바스크립트 엔진의 콜스택과 함께 동작하여 비동기 작업을 처리할 수 있게해주는 장치이다. 1. 콜스택이 비워있는지 체크하고, 비었다면 태스크 큐에서 대기 중인 비동기 작업을 큐에서 꺼내 콜스택에 push한다. 2. 태스크 큐에는 setTimeout, HttpRequest, addEventListener과 같은 비동기 함수들이 실행을 대기한다. 3. Promise와 같은 비동기 객체는 마이크로 태스크 큐라는 우선순위가 더 높은 큐에서 대기한다. 따라서 이벤트 루프는 콜스택이 비었으면 마이크로 태스크 큐에서 대기 중인 비동기 함수를 먼저 실행한다. 다시 공부하면서 깨달..
잊고 살았던 node.js 라우터 미들웨어 동작방식 2021. 3. 4. 11:44 (프론트엔드 이슈는 아니지만 잘 잊어먹고 개발하기 쉬워서 급하게 메모ㅠㅠ) 상황 1. Server To Server로 본 api 호출 전 유저 검증 api를 미들웨어로 추가함 const api = axios.create() const userValidator = (apiKey) => async (ctx, next) => { try { const { request: {body}, } = ctx const params = { apiKey, requestParams: { ...body } } await api.post(`${API_URL}/api/user/validation`, params) await next() } catch (err) { const httpStatus = err.response.statu..
react-router-dom __RouterContext 미존재 이슈 2021. 1. 21. 15:48 기존 프로젝트에 설치돼있던 react-rotuer-dom은 5.0.1 이고 프로젝트에서 useRouter hook을 다음처럼 만들어서 사용하고 있었다. import {useContext} from 'react' import {__RouterContext} from 'react-router-dom' const useRouter = () => { return useContext(__RouterContext) } export default useRouter 그런데 이번에 typescript를 적용한 버전으로 새로 repo를 파서 기존 프로젝트 컴포넌트 관리를 위한 storybook을 구축하고 있는데 해당 훅을 그대로 사용하려 하니까 __RouterContext라는 값이 없다는 에러가 떴다. (참고) __Rou..
react-testing-library의 “not wrapped in act” Errors 원인과 해결법 2021. 1. 8. 15:47 최근 추후에 있을 기능 개선과 리팩토링을 위해 중요 로직이 포함된 컴포넌트에 react-testing-library를 이용하여 단위 테스트 코드를 작성하고 있다. 그러던 중에 다음 Warning을 발견했다. Warning: An update to Component inside a test was not wrapped in act(...). When testing, code that causes React state updates should be wrapped into act(...): 해당 경고를 받는 3가지 원인과 해결책을 잘 정리해둔 글이 있어 기억할 겸 정리해보았다. 출처 : React Testing Library and the “not wrapped in act” Errors 들어가기 앞서 re..
[JS] encodeURIComponent, encodeURI 이슈 2020. 11. 18. 22:40 프로젝트에서 겪은 이슈 중 encodeURIComponent 이슈가 있어서 글로 남기게 되었다. 서버에서 응답으로 주는 값 중에 URL이 있었다. { encryptUrl: `https://${도메인}?key=${암호화된 값}` } 그 URL은 암호화된 값을 쿼리 스트링으로 포함하고 있고 이 값을 받아 외부 브라우저 환경이 아닌 다른 인앱브라우저(앞으로 A라고 표현하겠다)에서 구동을 해야 하였다. 사내에서 제공하는 url scheme을 사용함 window.location.href = `app://inappbrowser?version=42&url=${encodeURIComponent( `${landingUrl}` )} A로 이동해서 끝이 아니라 받은 URL 쿼리 스트링을 파라미터로 하여 서버로 복호화를 요청..

티스토리툴바