Context Context는 React에서 제공하는 기능 중 하나로, 유효범위 내부에 존재하는 컴포넌트들에서 데이터를 주고받는 방법 중 하나입니다. 사용 이유 기본적으로 React 공식 홈페이지에서는 컴포넌트들의 계층이 복잡해질 때 props가 아닌 다른 방식으로 데이터를 쉽게 주고 받을 수 있다고 홍보(?)하고 있습니다. 하위 컴포넌트에게 넘겨주...

개요 저는 몇 개월 전부터 Atomic Design 방법론에 빠져있어요. 애초부터 비즈니스 로직과 UI 컴포넌트 로직은 완벽히 분리되어야 한다는 철학이 있었던 저에게 있어 Atomic Design은 그 어떤 설계방법보다 아름답다고 느꼈거든요. Atomic Design 아토믹 디자인하면 많이 보는 이미지 Atomic Design은 이미 유명한 방법론...

개요 회사 프로젝트를 진행하다가 어떤 영역에 배치 된 사각형이 어떤 각도로 회전했을 때, 그 사각형의 각 꼭짓점을 알아야만 하는 상황이 생겼어요. 장시간의 리서칭과 사내 개발자분의 조언을 통해 완성한 소스코드입니다. 소스코드 export const getRectPoint = ( x: number, y: number, radian: nu...

개요 산업기능요원 편입이 되었던 작년 9월 6일, 이적 시장에 풀리는 기간인 6개월을 뛰어넘어 10개월간 복무하고 이직을 하게 되었습니다. 이직 이유 이직을 결심하게 된 계기는 여러가지가 있겠지만 가장 큰 이유는 커리어 측면에서의 이슈가 가장 컸던 것 같습니다. 실력이 없는 경력자 저는 일반적인 산업기능요원과는 다르게 일반 회사에서 3년이 조금 안되...

개요 이번에 토이프로젝트를 제작하기 위해 Sapper + Typescript를 사용해보기로 결정했습니다. 원래는 Nuxt3를 써보려 했는데 아직 정식 릴리즈가 되지 않아 Sapper가 좀 더 끌리더라구요. Sapper란? Svelte에 서버 엔진을 붙인 프레임워크입니다. React의 Next.js, Vue의 Nuxt를 생각해보시면 될 것 같아요. 설치...

개요 최근에 여러 기업에 면접을 보러다녔는데 그 중 어떤 기업에서의 임원면접에서 들은 질문입니다. “찬영님이 생각하시기에 탁월한 개발자란 뭐라고 생각하세요?” 이 질문을 처음 들었을 때 약간의 생각에 잠겼습니다. 일단 질문 자체가 막연히 ‘탁월함’에 대한 정의를 요구하고 있기 때문이기도 했고, ‘일을 잘하는 사람’에 대한 기준은 가끔 생각하던 것이였...

JSDoc JSDoc은 Javascript로 작성 된 문서에서 각 변수나 함수 등에 의미를 부여하기 위한 마크업 언어입니다. 이를 이용하면 VSCode와 같은 개발 툴에서 특정 함수를 사용할 때, 이 함수가 어떤 역할을 하는지 혹은 어떤 변수를 파라미터로 전달 받는지 등을 툴팁 형태로 띄워줄 수 있습니다. 태그 @author 이 코드를 작성한 개...

기능 textarea 형태의 에디터에서 작성 된 글은 평문으로 작성됩니다. 이를 HTML 문서에서 보여주게 된다면 줄내림 등의 양식이 적용되지 않기에, 이를 변환시켜주는 함수입니다. 덤으로 https://www.naver.com 같은 링크가 들어오면 a 태그를 래핑하는 기능도 포함 되었습니다. 코드 /** text2html * 텍스트를 html 형...