🤕 시작하며 이 글을 작성하기 전에 구글, 벨로그 등에 "프론트엔드 개발자 취업 후기"와 같은 키워드로 검색을 해보았습니다. 제 검색 실력이 미천한 탓도 물론 있겠지만 노출되는 대부분의 게시물들이 2022년 이전에 작성된 것이었음을 확인했습니다. 분명 많은 사람들이 궁금해할만한 키워드일텐데..라고 생각이 들어 글을 작성해봅니다. 저는 최근 채용과 입사날짜가 확정되었고 현재 출근을 위해 여러가지 준비(이사...라든지.. 회사 스택 공부라든지..)를 하고 있는 상태입니다. 제 이력을 짧막하게 작성하면 이렇습니다. 비전공자 남자 20대 부트캠프 수료 그리 흥미로운 정보는 아니겠지만 수료한 부트캠프는 코드스테이츠입니다. 코드스테이츠와 관련된 정보가 궁금하면 아래 회고를 참고해주세요 https://xionwcfm..
🙄 그런데 Private, Protected 가 뭘 하는지 아시나요? protected는 조금 생소한 개념이어서 저는 조금 감이 안잡혔던 경험이 있습니다. 간단하게 정리하고 가면 public 어디에서나 접근 가능하며 접근제어자를 따로 정의하지 않으면 설정되는 default 값입니다. private private 키워드로 선언된 프로퍼티들은 서브 클래스에서도 접근할 수 없습니다. 타입스크립트는 인스턴스 간 private 액세스를 허용합니다. class A { private x = 10; public sameAs(other: A) { // No error return other.x === this.x; } } 이렇듯 classA는 sameAs 를 통해 간접적으로 private 키워드의 정보에 접근할 수 있습..
😖먼저 display none과 hidden의 차이점은? 맨 하단의 레퍼런스 칸에서 mdn이 제공하는 예제를 직접 보는것도 이해에 도움이 됩니다. 우선 둘의 공통점은 다음과 같습니다. 두 속성 모두 특정 엘리먼트를 시야에서 보이지 않도록 처리하는 데에 사용하게 되는 속성입니다. 바닐라 css 에서의 사용례는 다음과 같습니다. .hidden-visible { visibility: hidden } .hidden-display { display: none } 두 속성 모두 내 시야에서 dom 요소를 보이지 않게 처리해줍니다. 둘의 차이점은? display:none 레이아웃에서 요소를 완전히 제거하고 공간을 차지하지 않습니다. 주변 요소에 영향을 주지 않습니다. visibility: hidden 이 경우 요소는..
컨트롤러는? 웹 애플리케이션에서 컨트롤러는 외부의 요청을 처리하는 모듈을 의미합니다. 하나 이상의 클라이언트가 보내는 요청을 처리하고 요청을 보낸 클라이언트에게 응답을 반환하는 역할 이라고도 표현할 수 있습니다. 컨트롤러의 목적은 애플리케이션에 대한 특정 요청을 수신하는 것에 있습니다. 라우팅 매커니즘은 어떤 컨트롤러가 해당 요청을 처리할지를 조정하는 역할을 합니다. 보통은 각 컨트롤러는 하나 이상의 경로가 있고 각기 다른 경로는 각기 다른 행동을 수행합니다. 프로바이더 프로바이더는 nest의 기본 개념으로 서비스, 레포지토리, 팩토리, 헬퍼 등등이 프로바이더로 취급될 수 있습니다. 프로바이더의 주요 아이디어는 의존성 주입 (DI) 입니다. 제어의 역전 , 의존성 주입은 익숙한데 계층형 구조(Layerd..
shadcn/ui https://ui.shadcn.com/docs Introduction Re-usable components built using Radix UI and Tailwind CSS. ui.shadcn.com shadcn/ui는 Radix UI와 tailwindcss를 기반으로 빌드된 컴포넌트 모음집입니다. toast와 같은 ui 기능들은 Radix ui 에서 가져와 사용하고 tailwindcss와 내부적으로는 tailwind-merge , clsx, cva를 이용하여 즉시 사용할 수 있는 아톰컴포넌트들을 제공합니다. tailwindcss 계의 mui 같은 느낌이라고 생각할 수도 있을 것 같네요 다만 nodemodules에서 컴포넌트들이 관리되는 것이 아니라 커스터마이징이 훨씬 간편하다는 장..
이펙티브 타입스크립트 https://product.kyobobook.co.kr/detail/S000001033114 이펙티브 타입스크립트 | 댄 밴더캄 - 교보문고 이펙티브 타입스크립트 | 타입스크립트는 타입 정보를 지닌 자바스크립트의 상위 집합으로, 자바스크립트의 골치 아픈 문제점들을 해결해 준다. 이 책은 《이펙티브 C++》와 《이펙티브 자바》 product.kyobobook.co.kr 위 링크로 구매하셔도 저에게 아무런 이득이 없구요 그냥 어디서 샀는지 보여드립니다. 스터디를 목적으로 구매한 책이었는데 내용 같은 경우에는 서점에서 한번 슥 흝어봐서 대략적으로 이해는 하고 있었습니다. https://github.com/XionWCFM/effective-typescript-study GitHub - X..
😎next.js13 app router tailwind ts mui를 한번에 하는 starter kit이 있다? https://github.com/mui/material-ui/tree/master/examples/base-next-app-router-tailwind-ts 그것은 공식 레포의 examples이었구요 마침 app 라우터에서도 mui를 쓰고싶었는데 앱라우터도 스테이블이 된지 꽤..시간이 되었단 생각이 들어서 혹시 공식 레포에 보일러플레이트가 올라와있지 않을까? 하는 기대로 봤더니 있더라구요... 초기 환경 세팅은 고통스럽기만 하고 어... 해보면 쓸모가 있긴한데.. 고통스럽죠.. https://github.com/XionWCFM/vite-mui GitHub - XionWCFM/vite-mui:..
😊타이핑 효과? 마치 글씨를 쓰는 것 처럼 글자가 한글자씩 출력되는 효과라고 제가.. 정의했습니다. 웹 포트폴리오를 준비하고 있었는데 타이핑 효과가 있으면 재미있을 것 같다. 라는 생각이 들어 타이핑효과를 간단하게 준비해봤습니다. 그냥 코드만 보는 것도 좋지만 그런 게시물은 이미 충분히 많다고 생각하기때문에 이 글에서는 만들면서 하게 된 고민들을 하나씩 톺아보도록 하겠습니다. 😉 기능 정의 및 요구사항 1. 글자는 한글자씩 차례대로 출력되어야한다. 2. 만약 출력된 요소들이 사용자의 시야에서 사라진다면 글자는 0으로 초기화된다. 3. 다시 사용자의 시야에 글자 요소가 보이면 처음부터 글자를 출력한다. 4. 글자의 출력속도는 개발자가 컨트롤 할 수 있어야 한다. ** 성능 최적화를 고려할 것 제 나름대로 ..
😀 unknown은.. TypeScript 3.0 버전부터 추가된 타입입니다. unkwon은 any와 마찬가지로 모든 타입에 값이 할당될 수 있는 마치 any와 비슷하게 동작하는 타입입니다. 그렇다면 왜 unknown 타입이 필요한 걸까요? 그냥 any로 사용하면 되지 않을까요? typescriptlang.org의 설명에 따르면 any와 unknown의 차이점은 다음과 같습니다. 초록 체크표시는 tsconfig.ts의 strictNullChecks 옵션이 꺼져있을 때만 호환된다는 의미입니다. any와의 눈에띄는 차이점은 unknown 타입은 any 타입 외의 어떤 타입에도 할당할 수 없다는 것입니다. 반면 any는 never를 제외한 모든것에 할당 가능합니다. 이것은 무슨 의미일까요? 예제를 통해 확인해..
아래 이슈에서 도움을 받았습니다. https://github.com/radix-ui/primitives/issues/2051 Popover when hover · Issue #2051 · radix-ui/primitives Feature request Is it possible to show popover when hover on the trigger component? Could be there an option to choose either : when click or when hover for showing the popover? github.com popover 기능은 일반적으로 hover 되었을 때 나타나는 것이 조금 더 자연스러운 ux라고 생각합니다. 다만 radix의 trigger 기능은 기..
