뇌 채우기 공간

1. 불렛저널 https://www.youtube.com/watch?v=x38NvCuGuXQ 이 영상을 어느날 봤다. 우와 보기만 해도 번거로워!! 이러고 끝. 하지만 어느날 나태하게 누워있다가 아 나도 그 불렛저널을 한번 써볼까? 하고 벌떡 일어나 다이소에 가서 공책을 사왔다. 지금은 불렛저널을 쓴지 3일차. 신기하게도 이 페이지를 채우고 싶어서, 체크 리스트를 검정색으로 칠하고 싶어서 하루종일 부지런하게 움직이게 된다. 내가 여기 적어놓은 것들은 뭐든지 다 이룰 수 있을 것 같은 자신감이 생긴다. 2. 노마드 코더 canvas https://nomadcoders.co/javascript-for-beginners-2/lobby?utm_source=free_course&utm_campaign=javasc..

1. 생각할만한 좋은 글을 읽었다. https://yozm.wishket.com/magazine/detail/1742/ 회사 다니면서 바쁜 와중에도 성장하는 팁 | 요즘IT 매일 하루가 어떻게 지나가는지도 모르게 지내다 보면 몇 달이 훌쩍 지나 있고, 나는 여전히 제자리인 것 같아서 불안할 때가 있다. 뉴스 기사에서는 잘 나가는 기업들의 승전보가 들려오고 주 yozm.wishket.com 글을 읽다가 제일 오래 머물렀던 부분이다. 맨 처음에 했던 인턴 과제의 디자인 결과가 괜찮았던지 나는 디자인에 관심있고 예쁜 것을 좋아하고 잘하는 사람으로 포지셔닝된 것 같았다. 디자인 관련, 애니메이션 관련한 스터디나 프로젝트가 나오면 나를 떠올리실 정도? 하지만 실상은 퇴근하고 나면 새로운 공부를 하기 쉽지 않고 회..

결과 화면을 먼저 봅시다. (참고로 이것은 실제 서비스 하는 코드와 화면이 아님) 애니메이션을 적용한 곳은 1. 리스트 페이지에서 디테일 페이지로 이동할 때 사진이 그 자리에서 커지면서 이동하고 디테일 페이지에서 리스트 페이지로 넘어갈때 작아지면서 그 자리를 찾아간다. 2. 디테일 페이지 진입 시에 이미지 하단 부분이 뿅 하고 나오는 형태 3. 이미지 하단 썸네일들이 뾰로롱 순서대로 등장함 4. 찜하기를 눌렀을 때 별이 띠용띠용 커졌다가 줄어듦 이렇게 적용했습니다. 각자에 적용한 라이브러리들이 다릅니다. 하나씩 소개하겠습니다. 1. React-navigation-shared-element https://github.com/IjzerenHein/react-navigation-shared-element 네비..

너무나 기뻐서 오랜만에 글을 쓴다. 리액트 네이티브 ios빌드를 25시간만에 성공했다. 아!!주!! 기쁘다. 회사에서 하는 리액트 네이티브 Poc에서 리스트 페이지에서 디테일 페이지로 화면 전환 될때 애니메이션을 적용하기로 했다. 초기 아무것도 없는 프로젝트를 클론 했을때는 잘만됐는데.. 많은 것이 바뀌고 나서 다시 클론을 받으니까 안되기 시작했다. 1. clone을 받음 2. root에서 yarn 3. cd ios 4. npx pod-install 5. root에서 yarn ios 일단 pod-install부터 고난 시작이었다. "Can't merge user_target_xcconfig for pod targets: ["RNReanimated", "hermes-engine", "react-native..

1. 프론트엔드에서 테스트코드(리액트 테스팅) https://learn-react-test.vlpt.us/#/ 벨로퍼트와 함께하는 리액트 테스팅 learn-react-test.vlpt.us 프론트에서도 테스팅을 하는지 궁금해서 찾아봤다. 일단 한번도 테스트를 해본 적이 없어서 하는지 조차 궁금했다. 다른 회사에 있는 프론트 개발자에게 물어보니까 프론트는 디자인변경에 따라서나 백엔드 로직 변경에 따라 코드가 변해야할 일이 많아서 오히려 테스트 코드를 짜는게 더 비효율적이기 때문에 테스트코드를 짜지 않는다고 한다. 여기에 대해서는 더 알아봐야겠다. 2. 리액트 18 주요 변경점 https://velog.io/@woodong/React-18-%EC%A3%BC%EC%9A%94-%EB%B3%80%EA%B2%BD%..

1. prod배포 에러 - 현상 회사에서 dev, qa, stage까지 배포가 잘 되었는데 prod배포에서 에러가 났다. - 원인 개발 하는 사람들이 패키지를 설치하고 나중에 받는 사람은 yarn install을 해서 최신 버전을 다운받는다. 그래서 라이브러리가 업데이트 된다면 어떤 버전에는 있고, 어떤버전에는 없다. 각자 버전이 달라서 생기는 문제 - 해결 yarn.lock파일을 gitignore하지 않고 모두 공유하여 사용 2. 타입 스크립트 with React 참고 https://www.youtube.com/watch?v=xkpcNolC270 코딩앙마 타입스크립트 https://www.youtube.com/watch?v=g-kauNOTVRY https://typescript-kr.github.io/..

1. ag grid 테이블 상태 저장하는 것에 대한 기묘한 현상 (나만 알아볼 수 있음) 어떤 페이지는 이런 필터가 있는 페이지가 있고 어떤 페이지는 없다. 없는 페이지에서 테이블에 필터를 걸거나 컬럼 위치를 바꾸고 다른 페이지를 갔다가 다시 돌아왔을때 상태저장을 하기 위해서 위 코드와 같이 사용할 수 있었다. 위 코드에서 gridColumnApi 와 gridApi 는 onGridReady함수를 실행할 때 useState를 사용해서 상태를 초기값에서 할당해주는 방식이다. 하지만 날짜 필터가 있는 페이지에서는 gridColumnApi가 null로 나와서 상태 저장 코드를 실행할 수 없었다. 위 필터는 ag grid자체를 건드리는 것이 아니라 날짜를 선택했을 때 다시 api를 호출하는 형태인데 도무지 원인은..

1. 음수 마진을 써도 되는가? https://webclub.tistory.com/541 Negative margins(음수 마진) Negative margins 이 포스팅에서는 음수마진이라고 Negative margins 에 대해 알아보도록 합니다. 음수 마진은 문서 내의 정상적인 흐름(document flow) 를 건들이지 않습니다. 다시말해, 요소를 이동하기 위 webclub.tistory.com 2. javascript 클린 코드 https://velog.io/@seob/JavaScript-Clean-Code-%EA%B0%80%EB%8F%85%EC%84%B1-%EB%86%92%EC%9D%B4%EA%B8%B0 [JavaScript] Clean Code - 가독성 높이기 A professional d..

1. 웹폰트는 어떻게 사용하나? https://d2.naver.com/helloworld/4969726 2. 리액트 쿼리 https://tech.kakao.com/2022/06/13/react-query/ My구독의 React Query 전환기 안녕하세요, 톡FE파트에서 My구독, 이모티콘 스토어를 개발하고 있는 Hugo입니다.My구독은 정기 결제를 통해 ‘이모티콘 플러스’, ‘톡서랍 플러스' 서비스를 이용할 수 있는 구독형 서비스입니 tech.kakao.com 3. 리덕스 사가 https://react.vlpt.us/redux-middleware/10-redux-saga.html 10. redux-saga · GitBook No results matching "" react.vlpt.us 4. conn..

1. 디자인시스템이란 무엇인가요? 디자이너분과 디자인시스템을 만드는 회의를 들어갔는데 정확히 이것은 무엇인가 궁금해서 찾아봄 https://brunch.co.kr/@minnimalism/3 ‘디자인 시스템’에 대해 얘기해보다 -Part 1 Part 1. 디자인 시스템이란 무엇인가요? | 8기 디자이너로 활동한 IT 동아리인 ‘디프만(Depromeet)’ 에서 디자인 시스템에 대한 온라인 세미나를 유튜브 라이브를 통해 1시간 반 정도 진행하게 됐다. brunch.co.kr 2. git commitizen/ pr template 회사에서 쓰는 commitizen과 pr템플릿이 편리해서 어떻게 적용하는지 궁금해서 찾아봄 git commitizen의 사용방법 및 template에 대해서 알아보기 Github를 ..