본문 바로가기

모두 보기

 (96)
[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..
마틴파울러의 리팩터링 2판 Gitbook 소개 2021. 1. 30. 15:21 스터디는 작년에 끝났지만 정리를 못(안)하고 있던 스터디 내용을 Gitbook을 사용하여 전자도서로 만들어보았습니다! https://yujeongjeon.github.io/ 스터디 소개 · 리팩터링 2판 스터디 No results matching "" yujeongjeon.github.io 총 12장으로 이루어졌지만 복습하면서 만드는 중이라 업데이트 중입니다 😃 사내 프로젝트와 관련하여 얘기한 내용은 논의 사항에 넣어 다양한 의견을 나누었던 내용을 추가합니다. 책의 주옥같은 내용들을 전부 넣진 못해서 직접 구매하셔서 읽어보시는것 또한 추천드립니다. 개인적으로 작년에 읽었던 개발도서 중 최고였습니다 👍
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 쿼리 스트링을 파라미터로 하여 서버로 복호화를 요청..
10월 근황 + 예정 2020. 10. 25. 16:55 와우 너무 오랜만에 블로그에 글을 쓴다 ㅠㅠ 당장 개발 관련 글을 쓰기보다는 이번 한달을 좀 정리해보면서 다시 조금씩 글을 써야지 1. 리팩터링 스터디 회고를 따로 작성하지는 못했지만 벌써 5주차까지 진행되었다. 평소의 나라면 같은 부분을 두세번 반복해서 읽는데 이번은 겨우 한 번 읽는게 고작이어서 이해가 100%되었다고는 말못하겠다. 그래서인지 책에서 소개하는 리팩터링 기법을 실무에 적용하는게 단편적이고 더 좋은 방안을 떠올리지 못해서 자괴감도 든다 (특히 주변에 더 체계적으로 구현하시는 분들을 보면 난 정말 쓰레기를 만들고 있었구나 싶고 ㅠㅠ) 그렇지만 이렇게라도 조금씩 습관을 바꿔 나가면 더 좋은 설계로 개발할 수 있는 사람이 되겠지... 현재 코드에서 바꾸고 싶은 부분부터 차근차근 구조 개선이든 ..
스코프와 클로저 2020. 10. 5. 01:29 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 들어가기 전에 개인적으로 이 장은 코어 자바스크립트에서 학습했던 실행 컨텍스트와 클로저를 참고하는 편이 훨씬 이해가 더 잘될거 같았다. 따라서 복습할 겸해서 정리하기로 하였다. 1. 스코프 1.1 자바스크릡트의 컴파일레이션 과정을 설명하시오. 아래는 예시 코드 var a = 2 토크나이징(렉싱) 〰️파싱 〰️코드 생성으로 진행된다. 토크나이징(렉싱) Tokenizing(Lexing) 문자열을 공백 기준으로 나누어 의미 있는 조각(토큰)을 생성한다. 상태 유지 파싱 규칙을 적용하여 어떤 문자열이 별개의 토큰인지, 다른 토큰의 일부인지를 판단하는 것을 렉..
리팩터링 스터디 2주차 (Ch.2 ~ Ch.3) 2020. 9. 29. 23:50 본 포스트는 마틴 파울러의 리팩터링 2판(2020, 한빛미디어)를 기반으로 진행한 사내 스터디에서 배운 점과 기억하고 싶은 점을 개인적으로 정리한 글입니다. 진행한 챕터 02 리팩터링 원칙 03 코드에서 나는 악취 챕터 2 리팩터링 원칙 챕터 2는 왜 리팩터링을 해야 하며, 리팩터링을 하면 좋은점과 언제 리팩터링을 해야 하는지에 대해 다루고 있었다. 챕터 2의 내용이 글이 많아서 좀 정리가 어려웠는데 개인적으로 꼭 이해하고 싶은 면은 다음과 같다. 리팩터링은 언제 해야 할까? 1. 일단 복붙하더라도 (혹은 함수를 매개변수화하여 사용) 기능을 쉽게 추가할 수 있도록 한다. 2. 코드를 이해하기 쉽게 만든다. 3. 원래 하려던 일을 하던 도중에 리팩터링할 로직을 발견하면 간단한거라면 즉시 수정하고 복잡하다면..
[리액트] Compound Component 활용하기 2020. 9. 27. 21:28 DEV 커뮤니티에서 React Component Patterns에 관한 글에서 Compound 컴포넌트 패턴을 소개하는 글을 읽고 실무에 적용해보았다. 글에서 소개하는 Compound Component에 대해 간단하게 설명하자면 내부 state를 공유하며 서로 상호작용하는 컴포넌트들을 내부 static 컴포넌트로 두어 사용자에게 내부 로직은 추상화하고, 이외의 로직 작성을 독립적으로 작성할 수 있게 해주는 패턴이다. "Compound components is a pattern where components are used together such that they share an implicit state that lets them communicate with each other in the backg..
리팩터링 스터디 1주차 (Ch.1) 2020. 9. 22. 00:25 본 포스트는 마틴 파울러의 리팩터링 2판(2020, 한빛미디어)를 기반으로 진행한 사내 스터디에서 배운 점과 기억하고 싶은 점을 개인적으로 정리한 글입니다. 진행한 챕터 01 리팩터링: 첫 번째 예시 (1.1 ~ 1.10) 팀에서 모집한 사내 스터디에 참여하게 되었다 🥳 마틴 파울러님의 리팩터링 2판을 기반으로 리팩터링에 대해 앞으로 공부하는 시간을 가질 것이다. 오늘은 그 첫날로, 챕터 1인 구체적인 실예시코드에 앞으로 배울 리팩터링 방법을 적용하여 어떻게 코드를 개선하는지에 대한 전반적인 소개를 읽고 그 감상과 자유토론하는 시간을 가졌다. 오늘 나눈 대화에서 기억하고 싶은 키워드, 자세를 기록하기로 하였다. 글쓴이 포함 총 4명이서 나눈 대화로, 지금부터 개발자 A, B, C, 글쓴이라고 지칭합니다 ..

티스토리툴바