분류 전체보기 (27) 썸네일형 리스트형 동시성모드, selectable hydrate 관련 좋은 영상 https://www.youtube.com/watch?v=bpVRWrrfM1M Api test 프로그램 추천 unit test는 기본적으로 만들어줘야한다고 생각하지만 필자는 아직까지 "만드는 도중"에는 직접 api를 호출해주며 테스트 하는 경우가 많다. 지금까진 postman을 애용했는데 무료에 더 좋아보이는 app이 있어서 소개해본다. https://insomnia.rest/ React 동시성 모드란 무엇인가? 원글: https://medium.com/swlh/what-is-react-concurrent-mode-46989b5f15da What is React Concurrent Mode? For the past three years, the React core team has been working on a major feature that is going to significantly affect both user… medium.com 지난 3년, React core team은 개발 프로세스, 사용자 경험 두가지 모두 상당한 영향을 미치는 동시성 모드를 작업해 왔다. 여전히 작업이 진행중이고 많은 부분들이 공식적이지 않지만, 가까운 미래에 무엇이 우리들을 기다리고 있는지 살펴보겠습니다. "동시성"이란 무엇인.. [fe] setting3 기간을 여유롭게 잡았으며 최대한 기존에 알고있는 언어, 프레임워크에서 차근차근 넓혀가는 방식의 공부를 택했으므로 마음에 안들면 갈아엎는 방식으로 진행할것이며 이번에 한번 갈아엎으려고 한다. 다음과 같은점을 중심으로 잘 생각한뒤에 다시 구조를 만들어보자 1. ui 2. 홈페이지 기능 3. mobile first 엎어진 branch github.com/dbstpwlsWork32/whwtopia-fe/tree/__pending [fe] setting2 1. lit-html lit-html을 패키징한 lit-element도 안쓰고 lit-html만 사용했으므로 사실상 렌더링 엔진만을 사용하고 나머지는 생각하면서 구조를 짜야해서 구조짜는데에 거의 80%의 시간만 든거 같다. 구조짜기전의 컨셉은 대강 다음과 같다. 1. custom element 적극 활용 2. 관심사의 집중 ( lib, view, app, component의 샅샅이 흩어지는 구조 수정 ) 3. life cycle없이 실 렌더도 언제해줄지도 직접 제어 4. dom기존의 네이티브한 기능 그대로 이용 폴더 구조 *x: import X, 자체상태 O, 1급함수 X *O: import O, 자체 상태 X *L: import O, 자체 상태 O /App *x - root rendering /comp.. [fe] setting BASE SETTING 무조건 wsl2기반으로 작업할거다 windows로 작업하면 mac등 다른 os에선 충돌이 있을수도 있기 때문이다. ide는 ms가 만들었고 wsl2에도 최적화 되어있는 vscode를 사용한다. project folder는 /project/whwtopia/fe 에다 할거다. root로 접속안해도 수정 가능하게 chmod도 잡아준다. git ssh는 귀찮으니까 window에 설정되어있었던 ssh 가져오고... ( 주의할건 root가 아니라 ${USER}에도 가져오게 하려면 해당 ${USER}에도 알아서 .ssh 복붙하도록... ) branch 구조는 다음과 같다 1. master => real server staging 2. dev => dev server staging 3. feat.. [design] 디자인 초기 www.figma.com/file/aMlWdbRTneaL6UehNmTsuA/whwtopia_prototype?node-id=47%3A2 Figma Created with Figma www.figma.com vscode vim의 편한 부분만 약간 따오기 vim plugin을 사용해보려 했지만 아직 익숙하진 않아서 vim extension 삭제하고 keyboard shortcut 만들어봤습니다. alt를 누르고 오른손을 이용해서 방향키, 페이지 업 다운, home, end가 가능하게 했습니다. 사용하다보니 키보드의 오른편에 갈일이 없어져서 좀더 편해진거 같아 공유하게 되었습니다. // Place your key bindings in this file to override the defaults // for WINDOW [ // keyboard arrow cursor 이동 { "key": "alt+p", "command": "cursorUp", "when": "editorTextFocus" }, { "key": "alt+;", "command": "curs.. 이전 1 2 3 4 다음
