작년에는 실패하였으나 이번년도는 경쟁을 뚫고 드디어 참석하게 된 Feconf!! 이번 컨퍼런스를 통해 개인적으로도 궁금해하고 고민했던 영역에 대해 해결도 하게 되고 새로운 것들을 알게되어 뜻깊은 행사라고 생각되었고 이러한 경험을 같이 공유 하고 싶어 후기를 작성합니다. :)
ps. 월드타워에서 진행해서 너무 이쁜.. 뷰도 즐기고...
https://so-so.dev clean Architecture in bankSalad
여러 서비스를 프로덕트로 구성하기 위해 처음은 도메인 중심의 설계 (DDD가 아닌 카드사 정보의 도메인)
사내에서 각종 웹뷰를 위한 코드가 추가되기 시작. 처음 PC 서비스만을 고려하여 설계되어 이후 PC + 웹뷰
의 서비스로 점차 커지게 되버리는 불상사 발생. 이렇게 점차 커지다 보니 빌드시 엄청난 시간이 소모. 이러한 작업이 커지게 되어 우선적으로 repo
를 분리하기로 결심!!.
mapStateToProps
, mapDispatchToProps
의 선언 위치를 고민중 우선 첫 view 영역 엔트리영역에서만 처리하였으나 다음과 같은 단점이 발생.
컴포넌트를 관리하는 프레젠테이션 계층은 다음과 같이 관리.
각 하위요소에 컨트롤러라는 이름으로 사용 util은 어디서는 재사용성이 가능하고 view에 관련없는 공통 사용
기존의 PENDING, SUCCESS, FAILURE 를 각 선언하는것을 한곳에 사용하는 util function사용.
thunk
는 고려사항이 아니고 saga과 옵저버블을 고민 하는중 팀내에서 rxjs
를 사용하는곳이 많아 선택
redux의 보일러 플레이트 문제 및 프로젝트 구성방법에 대해선 항상 고민되었고 이게 최선인가 라는 생각이였으나 이번 세션을 듣게 되며 본인의 프로젝트 구성에 여러 도움이 되는 세션이였다고 생각합니다.!!
라이브 코딩방식의 세션진행.
라이브 코딩을 보고 느끼며 타입가드를 중점으로 느꼈던 코딩 방식의 스타일을 좀더 유연하게 바꾸어야 한다는 생각이 들게 된 세션이였습니다.
애니메이션과 인터렉션
리엑트 네이티브는 크게 js thread
, Native thread
그리고 이 둘간의 통신 공유를 위한 bridge
로 구성
자바스크립트와 네이티브 영역이 서로 통신할 수 있도록 가운데에서 조율을 담당.
데이터를 JSON 포맷으로 전달해 호출시마다 시리얼라이징, 언시리얼라이징 의 과정을 거치게 때문에 이를 통신할때마다 게속 호출하게 되는 비효율적인 부분을 해결하기 위해 5ms 단위로 Queue에 넣어 한꺼번에 전달하는 Batched Bridge 방식
으로 전달.
리액트 네이티브에서 애니메이션을 사용하기 위해 사용되는 존재.
Animated.timing.start() 를 실행하면 여러 실행함수를 거쳐 RequestAnimationFrame을 호출되는 구조.
RequestAnimationFrame 는 프레임 단위로 호출되어 연산되는데 위의 이미지 처럼 1Frame 이 생성될때 3번에 브릿지페이지를 호출 이는 60프레임 기준 1초에 180번의 브릿지페이지가 호출됨을 의미.
기본적인 것은 문제가 없으나 product 모델의 경우 위의 브릿지 통신구간 중 브릿지를 통신하는 blocking 코드를 만나게 되면 애니메이션이 멈춰버리는 단점이 존재.
requestAnimationFrame을 사용하지 않고 startNativeAnimation 함수로 처리 이 함수는 네이밍에서 처럼 네이티브를 호출하여 처리하는 방식으로 한프레임 단위로 계산이 아닌 모든프레임에 대한 연산을 한꺼번에 진행하기때문에 blocking 코드를 만나더라도 애니메이션에 영향이 없음.
아직 RN에 대해서는 인트로 정도만 본 정도라 디테일한 내용보다는 발표자님이 겪어서 이를 해결하기 위해 실제 코드를 살펴보고 사용하려는 라이브러리의 핵심 내용을 분석한다는 내용의 해결 과정에 대해 배울것이 많다고 느낀 세션이였습니다.
가장 큰 문제는 한페이지가 너무나도 복잡함.
각 기능간 의존성을 없애면 오류는 줄고 작업속도는 증가하지 않을까?
iframe 단위를 마이크로서비스 한개로 구성 ifame의 부모 자식관 통신을 위해 postMessage를 사용.
iframe 간 부모와 자식의 통신을 하기 위해 4가지 개념을 만들어 대규모 서비스를 구성하는데 사용.
배포과정은 내부 구현체만 로드되어있으면 public url만 있어도 배포 해서 사용 가능.
개인적으로는 component 단위의 마이크로 서비스를 기대했던 부분인데 이부분이 살짝 아쉬운 점이.ㅠ 성능저하로 발표하신 분도 도 사실상 서비스를 크롬 한정으로만 처리해서 보통의 프로덕트에서는 적용하기 힘든 방식이라는 생각이 듭니다.ㅠㅠ
애니메이션 제작 에디터. 로 자바스크립트 라이브러리.
당연히 이를 만족시키는 라이브러리는 없었고 때문에 scene.js 를 제작하기 시작.
라이브러리를 알리기 위한 가장 큰 요소인 문서화와 라이브러리를 사용한 데모제작을 최대한 작성. 이후 블로깅 처리까지. 또한 많은 사용성을 위해 React, vue, Anguler 용으로 각각 릴리즈 준비를 하여 19년 5월 출시
이후 여러 커뮤니티를 통해 홍보 작업.
codePen의 메인커뮤니티에도 올라오고 youtube에서 언급 등 여러 곳에서 사용하니 뿌듯뿌듯
리엑트로 만든 라이브러리를 바닐라로 배포할 경우 preact를 사용하여 배포 하면 훨씬 경량화 작업이 가능.
오픈소스가 아닌 사내 개발환경에서도 샘플예제와 디테일한 가이드 문서는 더욱 필요하다고 느꼈고 조만간 회사 내에서도 문서화에 좀더 힘을 넣을수 있도록 노력을..해야,.,... 이하 생략..ㅠㅠㅠ
데이터의 변화에따라 화면이 다시 그려지는 성질
인스턴스가 생성될때 created 생명주기 바로 전 단계 설정됨.
생성하는 시점에 없는 data는 반응하지 않는다. 때문에 $set 을 사용하거나 데이터 셋을 애초에 만들어서 선언하는 방법으로 사용하기. 이는 vue 3에서 프록시로 바뀌면서 해결됨.
쿼리셀렉터가 아닌 Ref 속성과 v-디렉티브 를 활용하여 돔조작을 처리하자.
template는 실제로 돔이 아닌 virtual dom 으로 변환되어 들어가게 된다. vue tempalate-explorer 로 확인하면 랜더링 된 부분을 볼 수 있음. 클래스의 객체를 가져와서 사용하려고 할때는 mounted 속성에서 들어가야 마운트 된 다음 속성를 가져올 수 있으나 created 에서 사용하는 잘못된 케이스 존재
특정 돔 엘리먼트나 하위컴포넌트를 가르키기 위해 사용
간결하고 직관적인 템플릿 표현식을 위해 뷰에서 제공하는 속성.
내년 3월 쯤 오픈 예정이고 이때 vuex의 각종 map헬프 함수 들이 사라질 가능성이 좀 있다고 합니다. (TS 기반으로 되어 스트링으로 선언하는 헬퍼함수를 없애는것으로 추측이... )
사실 제일 마지막에 map 헬퍼함수가 사라진다는 소식이 제일 큰 기쁨이였던... (이거때문에 vue 에서 ts 쓰는게 너무 주저되었어요.ㅠㅠㅠㅠ)
Copyright © 2018 woolta.com
gommpo111@gmail.com