Framer Motion의 AnimatePresence 동작 원리 분석하기! Framer Motion의 AnimatePresence 또는 React Transition Group를 사용해본 개발자라면 공통적으로 떠오르게 되는 의문점이 하나 있습니다. 어떻게 UnMount 된 Component를 유지하며 애니메이션을 동작시키는 것이지? 이 궁금증을 해결하기…

Log4j logo Log4j란? log4j는 java의 기반 로깅 유틸 라이브러리로, Apache Software Foundation이 관리 하고 있는 프로젝트이며, 다양한 java기반 프로젝트에서 자주 사용되는 라이브러리 입니다. 해당 라이브러리에서는 기본적으로 로깅에 대해서 강력한 기능을 지원해주기 위해 format 기능들을 지원을 해줍니다. 그 중…

JavaScript 란? JavaScript는 *프로토타입 기반의 Interpreter 또는 JIT 컴파일 언어로, 기본적으로 Web Browser를 위해 태어난 언어인 만큼 Web에서 자주 사용되는 것으로 알려져 있지만, Node.js, Deno 와 같은 런타임, 프레임워크를 통해 Web Browser가 아닌 곳에서도 활용 되는 것을 찾아 볼 수 있습니…

💬 시작하기에 앞서... 이 글은 필자가 Typescript를 사용하면서 기존에 잘 못 사용하던 방식을 개선한 방법에 대해서 두서없이 작성한 글 입니다. 따라서 틀린 내용 또는 개선 할 수 있는 내용이 다양하게 존재 할 수 있으니 댓글로 같이 공유 해주세요! # 이글이 도움이 되는 대상 단순하게 type를 정의 해서 사용하고 있던 경우 외부 라이브러리의 …

🤓 intro 최근 FrontEnd 공부를 하면서 channel.io, crisp 와 같은 플러그인 서비스는 특정 사이트, 서비스 위에 추가 되어서 동작을 하게 되는데 이때 어떤 형태로 구현이 되어서 작동이 되었는지 궁금증과 호기심이 발생 하여서 분석을 해보았습니다. 🔬 개발자 도구를 통해 확인 해보기! 일단 기본적으로 이런 형태의 서비스는 iframe …

최근 Kakao Map Api를 React Component 라이브러리로 개발을 진행하며 자주 사용하게 된 ReactDom의 Portal 기능에 대해서 공부를 하면서 Render와 어떠한 차이점이 있는지 그리고 활용방안에 대해서 정리 해보았습니다! Portal 이란? ReactDom의 Portal 기능은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DO…

42Seoul의 공식 커뮤니티인 42JS에 기획하고 제작을 한 Javascript 단기 교육과정 일명 피씬(Piscine) 를 실제 42Seoul 학생들을 대상으로 베타로 진행을 하게 되었습니다! ℹ️ JS Piscine에 더 알고 싶은 분들은 아래의 repo로 들어가 주세요! https://github.com/42js/piscine 원래 최초의 계획은 학…

hackalearn 2021 이란? HackaLearn은 Hackathon + Learn의 합성어로 주어진 기간 안에 관련 지식을 직접 배워서 해커톤에 적용하는 이벤트입니다. 이번 HackaLearn 이벤트의 주제는 바로 애저 정적 웹 앱(Azure Static Web Apps)과 깃헙 액션(GitHub Actions)입니다. 2주간 공부하고 직접 웹 애…

✍️ 이전 1편 읽으러 가기! 하위 Notion Block 불러오기! 저번에 간단하게 만들어둔 Block Rendering 부분에서 Child Component 를 Rendering 하는 부분은 코드 상으로 존재하지만 notion 의 응답이 실제 typedef 된 부분과 다르기 때문에 아래의 함수를 만들어서 재귀를 돌려 하위 child blocks 모두 불…

최근에 Noiton API Beta로 오픈이 되어서 한번 Notion를 CMS로 하는 사이트를 개발 할려고 하다가 생각 보다 지원하는 기능이 적어서 분석하는 글을 작성하게 되었습니다. 글을 작성하면서 참고하게된 Reference는 다음과 같습니다. 🔗 https://samuelkraft.com/blog/building-a-notion-blog-with-p…