https://www.deepintodev.com/blog/how-react-works-behind-the-scenes 글을 읽고 정리한 내용입니다.JSX 변환먼저 리액트의 JSX(JavaScript XML)는 브라우저가 이해할 수 있도록 JavaScript로 변환되어야 함리액트에서는 Babel이 JSX를 JavaScript로 변환하며, 이때 React.createElement() 함수를 사용한 모습으로 변경React.createElement()리액트 내에서 활용되는 객체구조인 React Element를 리턴하는 함수문법은 다음과 같음React.createElement( type, // HTML 태그 이름 (예: "div", "h1") 또는 React 컴포넌트 함수/클래스 props, // ..

개발커뮤니티 글이나 블로그 글들을 읽다 보면 Vue, Svelte, Preact, Solid 등등 생소한 다른 프론트엔드 프레임워크들의 이름이 심심찮게 들려오는데,2년 넘는 경력동안 오직 리액트만 다뤄본 프론트엔드 개발자로서...다른 프레임워크들이 리액트랑 어떻게 다른지, 왜 쓰는지(!)에 대한 의구심이 항상 있었다. 마침 세상이 좋아져, AI와 함께 딸깍딸깍 문답하는 과정만으로 다른 프레임워크를 쉽게 이해해볼 수 있는 세상이 되었으므로, Claude 등등 AI 챗들을 붙잡고 프론트엔드 프레임워크들의 멘탈 모델, 기본 동작 원리 및 구조, 샘플 코드 등을 알아보기로 했다.맨 첫번째로, 2024 State of JS Framework 부문에서 React 다음으로 점유율이 높은 Vue에 대해 알아보았다. 단..

최근 프론트엔드 생태계에서 가장 떠오르고 있는 디자인 시스템 라이브러리를 꼽자면 shadcn/ui를 들 수 있지 않을까 싶다.최근 개발 아티클 등에서 여러모로 그 이름이 들려오고 있는 shadcn/ui는… MUI나 Bootstrap을 제치고 2024 State of frontend에서 디자인 시스템 부문에서 1등을 차지하기도 하며 2024년 FE 트렌드에 급부상했다.내가 이 라이브러리에 대해 알게 된 건 AI 코딩툴을 사용하면서부터인데, Claude 아티팩트나 v0.dev를 사용할 때 결과물 코드들이 shadcn/ui를 자주 채택하는 경향을 보였다.이 때부터 대체 어떤 라이브러리길래 이런 AI 툴에서 사용된 걸까 싶은 궁금증이 있었는데, 마침 시간이 되어 shadcn/ui의 어떤 점이 사람들을 사로잡은 ..

그야말로 백만년만에 남기는 회고.원래는 2024년 말에 Goodbye 2024 회고도 남기고 싶었고,이직 1개월차에도 이것저것 느낀 게 많아 회고를 남기고 싶었으나...안 쓰던 블로그에 손을 대는 일은 생각보다 쉽지 않아서 늦어졌다. 아무튼 지금이라도 내 과거를 반추해보고자 밀린 회고를 시작해본다. 왜 이직하셨나요?이직하였다고 하면 가장 궁금한 주제일텐데, 나의 경우 외적인 이유와 내적인 이유 두 가지가 있었다.일단 외적인 이유이자 결정적인 이유는 직무 변경의 위기 때문이었다.작년 연말 즈음, 내가 몸담고 있던 본부가 회사 내/외부 사정으로 통폐합되고, 다루는 핵심 서비스가 완전히 바뀔 거라는 예고가 있었다. 그리고 변경되는 서비스는 더 이상 웹 서비스가 아니라 SAP에 국한된 서비스였다.즉, 프론트엔드..

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries를 읽고 정리한 문서입니다.미디어 쿼리문법 구조는 다음과 같다.@media media-type and (media-feature-rule) { /* CSS rules go here */}media-type : 미디어 유형(ex: 인쇄 또는 화면)media-feature-rule : css 규칙이 적용될 조건(ex: min-width: 1024px)CSS rules : 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합보통 쓰는 syntax@media all and (min-width: 특정px) { .클래스 { /* css properties */}medi..

ChatGPT Prompt Engineeering For Developers의 Guidelines 강의를 듣고 정리한 문서입니다.효과적으로 프롬프트를 작성하는 원칙명확하고 구체적인 지시 작성모델에게 생각할 시간 주기명확하고 구체적인 지시 작성을 위한 네 가지 전략```, """, ,  , : 와 같은 구분자를 사용하여 입력의 구분된 부분 명확하게 표시하기ex)text = f"""You should express what you want a model to do by \\ providing instructions that are as clear and \\ specific as you can possibly make them. \\ This will guide the model towards the des..

인라인 스타일리액트 jsx 안에 style 프로퍼티로 스타일을 정의하는 것.장점동적 스타일링 용이 : state를 활용해 스타일을 다르게 주고 싶을 때 쉽게 조정 가능스코핑 자동화 : 인라인 스타일은 해당 컴포넌트에 직접 적용되므로 스타일의 충돌을 걱정할 필요가 없다.추가 설정 불필요 : CSS 파일을 별도로 관리하거나 로드할 필요가 없다.단점성능 이슈 : external CSS와 달리 별도의 컴파일 및 축소된 CSS 파일을 사용하지 않기 때문에 HTML 문서의 큰 부분을 차지하여 로드 시간이 늘어날 수 있다. 각 컴포넌트 인스턴스마다 스타일이 복제되어 DOM 요소가 많은 페이지에서는 성능 저하를 초래할 수 있다.재사용성 제한 : 같은 스타일을 여러 컴포넌트에서 사용하고 싶은 경우, 각 컴포넌트에 동일한..

https://sadie100.github.io/CypherTypeTest/ 사이퍼즈 성향 테스트 sadie100.github.io 3년 전에 만들고 Netlify를 통해 배포했던 사이퍼즈 플레이어 타입 테스트.도메인도 만료된 지 한참 전이고, 얼마 전 Netlify에서도 배포했던 프로젝트가 expire됐다는 메일을 받았다.이대로 묵혀둘까... 했는데 그래도 만들어둔 게 아쉬워서,별도의 도메인 구매가 필요 없는 깃헙 페이지를 이용해서 배포하여영원히 사는 프로젝트로 만들기로 했다.하는 김에 깃헙 액션을 통해 CI/CD도 연결해서, 거하게 리팩토링 작업을 했다.  Github Action을 위한 yaml 파일 만들기깃헙 액션 워크플로우를 만들기 위해서는 yaml 파일이 필요하다.해당 워크플로우가 어떤 Git..

Next + React Query로 SNS 서비스 만들기 강의를 듣다가 dayjs에 대해 알게 되었고, 강의 내에서의 dayjs configuration 코드를 보다가 알게 된 점이 있어 글로 남기고자 한다. (강의 내용과는 무관) dayjs는 플러그인 같은 개념이 있어서 쓰고자 하는 기능이 있으면 필요한 플러그인을 등록해줘야 한다고 한다. 예를 들면 이런 식이다. import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.locale("ko"); dayjs.extend(relativeTime); export default function Post() { // ...

다중 스레드 코드 테스트 다중 스레드 코드에서 버그가 있다는 사실을 증명하는 테스트 케이스는 짜기 어렵다. => 동시 갱신 문제가 발생하는 문제는 너무 드물게 발생해서 대개는 테스트로 발견하지 못함. 테스트로 버그를 더 잘 찾아내기 위한 아이디어들 몬테 카를로 테스트 : 테스트로 버그를 더 잘 찾아내기 위한 아이디어. 조율이 가능하게 유연한 테스트를 만든 후 임의로 값을 조율하면서 반복해 돌린다. 시스템을 배치할 플랫폼 전부에서 테스트를 반복해서 돌린다. 부하가 변하는 장비에서 테스트를 돌린다. 그러나 위의 조치를 취하더라도 코드에서 스레드 문제를 찾아낼 가능성은 매우 낮음 스레드 코드 테스트를 도와주는 도구 IBM의 ConTest : 스레드 코드에 보조 코드를 더해 실패할 가능성을 높여주는 도구. 스레..