거의 알고리즘 일기장

https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-clippath/ SVG와 삼각 함수로 도넛 차트 만들어보기 이번 포스팅에서는 얼마 전에 필자가 삽질했던 내용인 SVG로 도넛 차트 그려보기에 대해서 이야기해볼까 한다. 사실 도넛 차트를 그리는 것 자체는 SVG가 제공하는 엘리먼트를 사용하면 되기 때 evan-moon.github.io 이 블로그를 인상깊게 보고 나도 한번 만들어보기로 했다. 결과물 사전지식 1. 원 상에서 좌표를 구하는 공식 2. svg path로 호를 그리는 방법 1. 원 상에서 좌표를 구하는 공식 코드로 작성하면 다음과 같다. //https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-..

이제까지 나의 경우, ref를 prop으로 넘기는 일은 거의 없었다. 대부분 밑의 코드처럼 1. ref를 쓰는 컴포넌트의 상단에 ref 선언후 사용 2. hook에 ref 선언후 가져와서 사용 하지만, 최근에 시각적 테스트를 위해 storybook을 도입하게 되면서 구조가 변경이 되었다. 이로 인해 prop으로 ref를 내려줄 일이 생겼다. 그냥 prop에다가 ref를 내려주면 안되나여?? 다른점이 뭐임? ref는 prop으로 내려줄수 없다. 그 이유는 react 공홈에서 찾을 수 있었다. refs는 전달되지 않는다는 것입니다. 그것은 ref는 prop이 아니기 때문입니다. key와 마찬가지로 ref는 React에서 다르게 처리합니다. HOC에 ref를 추가하면 ref는 래핑 된 컴포넌트가 아니라 가장 ..

Yarn berry workspace를 활용한 프론트엔드 모노레포 구축기 이 글을 참고하여 yarn berry와 workspace를 이용한 monorepo 구축을 해봤습니다. vscode를 사용한다고 가정하고 진행하겠습니다. 사전지식 모노레포? 모노레포에 대해서는 저번에 작성한 글에 있으니 참고하시면 좋을 것 같습니다. yarn berry yarn berry는 npm, yarn1 과 같은 package manager입니다. 기존 npm, yarn1에서 사용하는 node_module의 단점을 해소하기 위해 만들어졌습니다. 여러 특징이 있는데, 간략하게만 적자면 1. pnp 지원 pnp는 plug&play의 약자로 기존의 node_module 방식과 다르게 pnp.cjs 파일로 dependency를 관리하고..

graphql이란? A query language for your API GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. 간단히 요약하면 1. ..

jsx란? react component안을 보면 html tag처럼 생긴걸 볼수 있다. jsx는 javascript의 확장 문법으로, ui가 어떻게 생겨야 하는지 간단히 작성할수있다. //예시 import React from 'react'; const Test = () => { //return안에 있는 html tag같은게 jsx return ( ) } export default Test; JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕을 제공할 뿐입니다. 한문장으로 정의하자면 이렇다. ( JSX 이해하기 머릿글이다.) jsx는 그냥 React.createElement(...args)을 우리가 보기 편한 형태인 html tag형..

서론 겁나 헷갈려서 이번에 조사해보았다. ajax 란? Mdn에는 이렇게 적혀있다. AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다. 예시로 네이버 회원가입을 예로 들자면, 여기서 사용할 아이디 입력후 중복 체크를 할것이다. 이때 만약에 중복체크를 할때 마..

https://kunkunwoo.tistory.com/214 git commit message convention 최근 git commit message convention에 대한 글을 보게 되었다. 재미있는 방법인거 같아 내용정리 겸 글을 써보고자 한다. 사실 나는 밑의 그림처럼 [jira 이슈넘버][깃모지][주제] 정도로 적어왔다. 근데.. kunkunwoo.tistory.com 저번에 이런 글을 썼었는데, 요즘 쓰는 convention을 남겨둘까 싶어서 글을 올린다. 방법 타입(Type): 제목(Subject) 본문(Body) 꼬리말(Footer)? //type 더 추가하고 싶으면 얼마든지 ✨ feat : 새로운 기능에 대한 커밋 🐛 fix : 버그 수정에 대한 커밋 👷 build : 빌드 관련 파..

https://dev.to/ms_yogii/useaxios-a-simple-custom-hook-for-calling-apis-using-axios-2dkj#final-code useAxios : A simple custom hook for calling APIs using axios Hello folks, Frontend apps are not complete if there are no api calls involved and calling an api b... dev.to 이런 글을 읽게 되었다. 이 글을 보고 이것처럼 hook으로 error, loading 값을 추가해서 return 하는식으로 바꿔주면 이용하는데 간편할거 같아 윗글의 코드에서 Typescript로만 바꿔 만들어 보았다. 예제 코드..

📖 서문 추석 연휴 이후 바로 백신을 맞아서 토일월화수목금토일 쉬는 엑조디아 발동했다. ( 노린건 아니다. ㅎ.. ) 그러다보니 시간이 좀 남아, 회사에서 이야기 나왔던 주제가 생각이 나서 시도해보았다. 주제는 다음과 같다. 1. s3에 영상 업로드가 되면, 2. aws lambda를 이용해서 aws media convert를 켜주어 영상 포맷을 스트리밍이 가능한 형태로 conversion 시킨다. ㄲ 🗺 계획 ⛏ 실습 !!! 처음부터 하려니 막막해서 구글링을 하다보니 개꿀따리 코드를 찾았다!! ( 사용 방법이 잘 적혀있으니 git readme도 같이 참고하길 바란다. ) https://github.com/trackit/aws-workflow-video-on-demand/tree/master/mediac..

다른 분이 짠 html, css, js 코드를 수정해 줘야할 일이 생겼다. 수정중에 봤는데, 분명히.. dev tool로 확인했을때 layout이 그렇게 나오면 안되는데.. 삐뚤빼뚤하게 나오는 문제가 있었다. 진짜 요리보고 저리봐도 간단한 부분이라 코드상으로 실수할리는 없었다. 그러다가 혹시 몰라서 원래 있던 html 주석을 삭제해봤는데.. 제대로 나온다.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 궁금해서 검색좀 해봤는데.. 2009년글 중에 html 주석이 많으면 레이아웃이 깨지는 버그가 있을수도 있다고 한다. ( 이게 아직도 존재하나?? ) 아무튼.... 요즘은 react, vue와 같은 프레임워크를 자주 쓰니까 이럴일이 없겠지만, 혹시라도 html 코드의 레이아웃이 이상하게 나오는데 도저히 ..