본문 바로가기

전체 글

(96)

제 1장. 독자 ~ 제 2장. 기본 2021. 5. 22. 00:08 유키 히로시의 「이공계 x의 글쓰기책」 을 읽으면서 글쓴이가 기억하고 싶은 문장과 핵심 내용을 정리하였습니다. 매우 주관적인 정리입니다. 제 1장. 독자 글을 쓸 때, 독자의 입장을 생각하면서 글을 써야 한다. 독자의 입장을 생각하는 방법 1. 독자의 지식 독자는 글을 읽으면서 상황에 따라 변한다. 따라서 글의 순서를 의식하면서 글을 써야한다. 여기까지 읽은 독자는 무엇을 알고 있는가 2. 독자의 의욕 독자가 글에 흥미를 느끼고 글을 계속 읽을 수 있는 의욕을 향상하기 위해 글의 논조에 변화를 준다. 추상적인 이야기 ▶ 구체적인 예를 든다 구체적인 이야기 ▶ 요약 정리를 한다 글로 된 설명의 지속 ▶ 그림, 그래프, 표를 삽입한다. 의욕은 아하! 하고 무릎을 탁 치는 발견이 있을 때 매우 향상된다. 3...

cypress를 써보자! (1) 2021. 5. 16. 00:23 cypress를 써보자! (2) > cypress를 써보자! (3) > 프로젝트를 쭉 담당하면서 단위테스트만으로는 부족하다고 생각될 때가 왔다. 저번주에 운영환경을 체크하는 로직을 라우터 페이지에 넣어버리는 실수로 인해 리얼환경에서 잘 동작하는지 반드시 확인해야 할 필요가 생겼다. 또한 QA 과정(혹은 단위테스트)에서 발견이 어려웠던 이슈들이 속속들이 나오고 있었다. 따라서 새 서비스 개발에 착수하기 전에 작년부터 해보고 싶었던 cypress를 도입하여 통합 테스트를 작성하고자 했다. 이번주에는 cypress 첫 설치와 실행 그리고 간단한 테스트 코드 작성으로 사용하는 것까지 공부하면서 기록했다. 1. cypress 설치 글쓴이는 외부와 차단된 private 망에서 개발을 하고 있다. 따라서 외부 깃헙에..

오늘 배포하다가 식겁한 ssul 2021. 5. 6. 12:41 저번주에 A서비스를 출시했는데 진입하는 고객들이 단한분도 없었다.(cs도 없어서 안쓰시는건가 했다ㅠ) 일주일째되던 오늘....라우터 페이지에서 운영환경에서는 작동하지않게 해둔 코드를 발견했다.. 원래 B서비스와 출시일이 같아서 하나의 epic브랜치에서 checkout하여 병렬적으로 작업하고 있었는데, A서비스 출시일자가 미뤄지면서 방어로직을 추가했다는게 기억났다ㅠㅠ 알파,베타 환경에서는 당연히 작동하기때문에 QA도 통과되는 바람에 Real환경 이슈를 놓친것이다🥶 서비스 특성상, real환경에서는 QA를 못하는 제약사항이 이렇게 크리티컬한 버그를 낳다니ㅠㅠ 가급적 운영환경을 점검하는 로직은 넣지말아야겠다...

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..

마틴파울러의 리팩터링 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, 글쓴이라고 지칭합니다 ..

문법 2020. 9. 8. 19:46 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 문과 표현식의 차이는? const a = 2*3 // ----- (1) const b = a // ----- (2) b // ----- (3) 문은 '문장'이며 표현식은 '어구'와 일맥상통한다.(연산자는 '구두점') 모든 표현식은 단일한 특정 값으로 계산된다. (1)의 우항, (2)의 우항, (3) 모두 표현식이며, const가 빠진 (1), (2)는 할당 표현식이라고도 부른다. (1), (2)는 const 변수를 선언하는 선언문이다. (3)은 표현식이기도 하지만 그 자체가 문이 되기도 하여 표현식 문이라고 한다. 모든 문은 완료값을 가진다. 콘솔..

강제변환 2020. 8. 23. 13:58 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 추상 연산 1.1 자신의 프로토타입에 toString()이 있는 경우(1)와, 일반 객체처럼 Object.prototype.toString() 메소드를 호출하는 경우(2)의 차이점은? (1) 내장 원시 값은 정해져 있는 방법대로 문자열화되어 반환한다. (2) 내부 [[Class]]를 반환한다. 정확히는 ToPrimitive 과정을 거친 결과값이 반환되어 "[object Object]"가 반환된다. 1.2 JSON.stringify 함수의 각 인자에 대한 설명과 문자열화하는 규칙에 대해 설명하시오. JSON.stringify(value, functi..

[리액트] useAsync Hook with Suspense 2020. 8. 22. 01:41 요즘 게을러져서 글을 쓸 의욕이 사라진 거 같다...(반성ㅠㅠ) 요즘 코로나 때문에 계속 재택근무를 하고 있어서 집에 있지만 있는거 같지 않다ㅠ 퇴근하고 나서도 매번 계속 프로젝트 고민하고 있으니 더욱 여유가 없는 기분이다 (구차한 변명이다) you don't know js 시리즈도 다시 읽으면서 정리하고 싶었는데 힘내야지 2주 전인가 팀 동료분께서 생각해내신 아이디어와 프로토타입을 들은 적이 있다. 현 프로젝트에서는 mobx local store에 비동기 함수가 함께 있는 부분으로 인해 코드가 엄청 길어졌다. 물론 잘못된 것도 아니고 모든 로직이 State와 함께 있어서 가독성면에서 좋았던 점도 있다. 팀원분이 생각해내신 아이디어는 비동기함수가 쓰이는 컴포넌트에 마치 동기함수를 호출하듯이 비동기 함수를..

브라우저 동작 원리와 VSync 2020. 8. 18. 12:08 (출처) The Anatomy of a Frame 본 포스팅은 사내 기술 교육 '브라우저 동작 원리' 강의 영상을 수강 후 정리한 글입니다. 1. 브라우저 동작 원리 (Chrome DevTool 기반) * 중간중간 음영 색상이 들어간 표시는 위의 그림에서 마킹된 색상처럼 크롬 개발자 도구에서 확인할 수 있는 과정을 말한다. 1.1 HTML, CSS 파싱 위의 개발자도구 화면에서 Parse HTML에 해당하는 부분이다. - HTML 파싱하는 이유? : DOM 을 생성하여 엘리먼트를 가공 및 관리하는 표준을 구성하기 위해 - DOM 트리를 만드는 이유 : 자바스크립트 등에 의해 동적으로 변하는 엘리먼트를 쉽게 수정하고 관리하기 위해 파싱하는 과정 바이트 => 문자열 => tokenizing(태깅) => no..

[리액트] react-virtualized을 활용한 무한 스크롤 구현 2020. 8. 6. 22:18 이전에 리액트 무한 스크롤 라이브러리를 하나 뜯어보고 간소화한 버전으로 구현해보았다. 바로 이 글이다. [리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현 회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함 1. 스크롤 위치 복원 기능 (from 회사 프로젝트) 라우팅� coffeeandcakeandnewjeong.tistory.com 그런데 회사에서 무한 스크롤과 관련하여 이슈가 나온 것이 있었는데 무한스크롤되는 요소가 극단적으로 10만개 이상이 되고, 일정 개수만큼 추가로 로드해와도 렌더링 속도가 느려 화면에 요소가 그려지는 것이 지연되는 문제였다. 그래서 데이터를 로드한 것이 완료되었어도 잠시 빈 공간..

타입, 값 그리고 네이티브 2020. 8. 4. 00:03 본 내용은 카일 심슨의 YOU DON'T KNOW JS 타입과 문법, 스코프와 클로저(2017)를 읽고 서술적인 내용을 Q&A 형식으로 정리한 글입니다. 1. 타입 1.1 자바스크립트의 내장 타입 7가지 - null - boolean - object - string - number - symbol - undefined [참고] object를 제외한 나머지 6가지 값은 자바스크립트의 기본 타입임 1.2 type of null의 결과는? "object" 1.3 typeof function() {} === "function"의 의미는? [ECMA 표준 명세서] 4.3.31 function member of the Object type that may be invoked as a subroutine 서브루틴(한..

[리액트] 스크롤 위치 복원, 무한 스크롤 Hook 구현 2020. 7. 25. 22:54 회사 실무에서 유용하게 쓰이는 훅을 공부하면서 (깃허브에 올릴만큼은 아닌) 기능 단위의 간이 코드를 coesandbox에서 작성한 것들을 기록함 1. 스크롤 위치 복원 기능 (from 회사 프로젝트) 라우팅되어 페이지 전환 후 뒤로가기 등을 통해 이전 페이지로 돌아왔을 때 스크롤을 복원하는 기능 [이슈] 스크롤 복원 시 스크롤이 움직이는게 눈에 보임, 혹시나 싶어서 사내 프로젝트에서도 같은 기능을 테스트해보았는데 크롬 브라우저 웹뷰로 테스트, 디버깅 시에는 느끼지 못함 [기억하기] "0" || 0 은 "0"이 truthy한 값이기 때문에 "0"이다. 따라서 if (!val) {} 과 같은 falsy한 값일 시 실행하는 조건문에서 의도한대로 동작하지 않을 수 있습니다. 0일 시 string인지 number..

macOS iTerm2 zsh 설정하기 2020. 7. 23. 19:45 인프라 글이 아닌거 같지만 그렇다고 프론트엔드 글도 아닌... 회사에서 새로 받은 개인 장비에 iterm2와 zsh를 세팅한 과정을 기록하는 글이다. iTerm2부터 zsh 기본 세팅 과정은 여기를 많이 참고하였다. 1. iTerm2 설치 먼저 iTerm2 설치링크에서 iTerm2를 설치한다. 2. zsh 설치 이제 zsh를 설치한다. brew를 사용하면 한번에 설치할 수 있다. brew install zsh oh-my-zsh는 zsh를 더욱 쉽게 사용할 수 있게 미리 설정해주기 때문에 추천한다. 아래는 oh-my-zsh를 curl로 설치하는 명령어이다. curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh 3..

7. RxJS와 NgRx (2) 2020. 7. 18. 17:27 1. NgRx 동작 원리 NgRx는 리액트의 redux처럼 Reactive한 앵귤러 어플리케이션에서 상태관리를 위한 라이브러리입니다. redux의 flux 패턴을 이해하고 있다면 NgRx도 그 영향을 받았기 때문에 단방향으로 데이터가 흐르고 있다는 걸을 알 수 있습니다. flux 패턴은 여기에서 정확히 확인할 수 있습니다. flux 패턴은 MVC 패턴의 양방향 데이터 바인딩에서 앱 규모가 커짐에 따라 데이터 흐름을 추적하기 어려워지고 불필요한 업데이트가 발생할 수 있는 어려움을 해결하기 위해 중앙에 스토어를 두고 데이터를 액션에 의해서만 변경할 수 있는 순수 함수인 리듀서를 두어 데이터를 단방향으로 관리합니다. NgRx도 이러한 흐름을 그대로 적용하고 있기 때문에 flux 패턴을 먼저 이해한다면 큰 어려..

[리액트] mobx-react-lite로 todoList 작성하기 2020. 7. 15. 19:41 오랜만에 리액트! 리덕스만 써보다가 mobx-react-lite 상태관리 라이브러리의 예제 코드를 작성해보았다. mobX란 리액티브 프로그래밍 기반으로 리액트에서 상태관리를 가능하게 해주는 라이브러리로 앵귤러를 미리 해서 그런가 크게 어렵게 느껴지진 않았다. 참고했던 링크들 MobX를 React Hooks (TypeScript) 와 함께 사용하는방법 heros-mobx-react-lite example React에서 Mobx 경험기 (Redux와 비교기) mobx-react v6 마이그레이션하기 MobX 내부 살펴보기 mobx-react-lite 짧막 정리 이번주부터 살펴보기 시작해서 아직 내부 로직까지 완벽하게 이해하진 못했지만 mobx-react-lite가 뭔지에 대해 지금까지 이해한 바는 다음과 같..

6. RxJs와 NgRx (1) 2020. 7. 8. 17:42 글쓴이는 리액티브X 공식 홈페이지와 RxJs 홈페이지를 많이 참고하였습니다. 1. Observable 옵저버블은 ES7 스펙으로 제안된 비동기 데이터 처리 표준으로 어떻게 동작하고 이점이 무엇인지 공부하였습니다. 일반적으로 동기적인 프로그래밍은 개발자가 작성한 코드가 한줄한줄 차례대로 실행되기를 기대하지만, 비동기 프로그래밍은 원하는 순간에 작성된 순서와 상관없이 실행하거나 보류됩니다. 비동기로 호출되는 이벤트를 옵저버블에 정의할 수 있으며 하나의 옵저버블에 다수의 비동기 이벤트로 이루어진 연속된 흐름(데이터 스트림)을 정의할 수도 있습니다. 즉 옵저버블 내부에 데이터를 처리하는 매커니즘이 있고, 옵저버블이 이벤트를 발생시키면 이 옵저버블을 관찰하고 있는 옵저버가 해당 이벤트를 감지하고 데이터를 받아 연..

5. 서비스와 의존성 주입 (2) 2020. 7. 4. 23:06 1. 싱글톤 서비스 4장 실습에서 MenuModule과 CartModule에 SharedModule을 각각 임포트하면 각각 다른 모듈 인젝터에 인스턴스가 생성되어 데이터가 공유되지 않는다는 것을 확인하였습니다. 주문 리스트 정보를 관리하는 OrderService는 어플리케이션에서 단 하나만 존재해야 합니다. 즉 데이터 통신을 전역에서 수행하도록 변경해야 합니다. 이렇게 전역에서 단 하나의 인스턴스만 생성되어 관리되는 인스턴스가 싱글톤 서비스입니다. 싱글톤 서비스를 만드는 방법은 간단합니다. 서비스를 루트 모듈에만 프로바이딩하면 싱글톤 서비스가 됩니다. 공식문서의 싱글톤 서비스에서 서비스를 루트 모듈에 프로바이딩하는 방법으로 세 가지를 소개합니다. @Injectable({ providedIn: "root"..

이전 1 2 3 4 다음

티스토리툴바