y.developer

커스텀 훅과 유틸리티 함수는 기능적으로 유사할 수 있지만, 주로 사용 목적과 관례에 따라 구분된다. Utility 일반적으로 유용한 기능을 수행하는 함수 또는 클래스를 가리킨다. 예를 들어, 어떤 기능을 수행하는 유용한 함수나 도구를 만들어서 여러 곳에서 재사용할 때 "utility function"이라고 부른다. Utility Function (유틸리티 함수) 입력값 : 일반적으로 매개변수를 받아들여 특정 작업을 수행하도록 설계된다. 입력값은 함수에 필요한 데이터 또는 매개변수를 받는다. 반환값 : 주로 어떤 계산이나 변형을 거친 후 값을 반환한다. 이 값은 주로 함수 호출자에게 필요한 결과물이다. Hook 주로 프로그래밍에서 이벤트에 대응하는 함수 또는 코드 블록을 가리킨다. 예를 들어, React에..

현업에서 유용하게 활용하는 라이브러리를 살펴보고 익혀보자. 추후 어떤 제품을 런칭하든 속도와 완성도를 대폭 끌어올릴 수 있을 것이다. shadcn/ui NextUI, MUI를 활용해본적 있다. UI 컴포넌트 요소를 빠르게 제작할 수 있지만, 라이브러리로 제공되며 프로젝트를 무겁게 만들고, 커스텀하기 어렵다는 단점이 있었다. 특히 색을 변경하거나 원하는 형태로 가공하기 어려웠다. shadcn/ui는 Radix, Tailwind CSS로 만들어진 재사용 가능한 컴포넌트를 제공한다. 종속성으로 설치하지 않으며 필요한 구성 요소를 직접 선택할 수 있다. Radix UI 커스텀하기 쉽다. 기본 동작은 내부적으로 처리하고 있고, 스타일은 개별 지정할 수 있으며, Compound Component Pattern으로 ..

2024.02.07 수 일단 미팅을 준비하는 사람이 PPT를 만들지 않는다.(PPT를 제외하거나 만들더라도 의존하지 않는다) 왜냐하면 PPT는 주요 키포인트만 툭툭 찍어서 만들면 되니까 논리적인 허점이 많다는 것이다. 그래서 미팅을 준비하는 사람이 무려 2주 동안 A4 용지 6장 분량의 글을 쓴다. 지금 우리의 문제가 무엇인지, 이 미팅을 통해서 우리가 어떤 해결책을 도출해 내야 하는지, 아주 논리정연한 글을 작성한다. 그리고 미팅 시간이 되면 모든 참가자들이 미팅룸에 모인다. 그후 30분 동안 아무 말도 하지 않고 글 읽는 시간을 가진다. 그리고 나서 회의를 시작한다. 그 이유는 모든 사람들이 너무 바쁘기 때문이다. 미리 글을 읽어오라고 지시하면 그 글을 제대로 읽을 시간이 없기 때문에 사람들이 회의에..

2024.02.06 화 Crosswalk 프로젝트에서 기술적 강점 프로젝트를 진행할 때 어떤 도전을 했는가? Supabase Realtime을 활용한 실시간 채팅 및 알림 호감도 알고리즘 PWA 3D 애니메이션 구현 기술적 의사 결정 핵심기술을 정리하고, 각 기술을 도입하게된 의사결정 과정은? 내가 엔지니어로서 자질이 있다는 것을 어필하는 것이 중요하다. 엔지니어는 문제를 해결하는 사람이다. 따라서 우선 문제 정의를 정확하게 하는 것이 중요하고, 그에 따른 해결방법을 도출해낸 과정이 중요하다. 어떤 요구사항이 있었는지, 구현할 수 있는 어떤 선택지들이 있었는지, 어떠한 이유와 근거로 기술을 최종 결정하게 되었는지 정리해보자. 1. 실시간 채팅을 어떻게 구현할까? 선택지 : Supabase Realtime..

2024.01.31 수 추가적인 정리 필요! 트러블슈팅 내용 보고 다시 정리하자 Trigger 트리거는 데이터베이스에서 특정 이벤트가 발생할 때 자동으로 실행되는 일련의 작업이나 프로그램이다. 해당 이벤트는 주로 데이터 조작 언어(DML) 문장들의 실행에 의해 발생하며, 예를 들면 INSERT, UPDATE, DELETE와 같은 작업이 해당된다. 트리거의 주요 목적은 데이터베이스의 무결성(integrity)을 유지하고 비즈니스 규칙을 강제하기 위함에 있다. 데이터 조작이 발생할 때마다 실행되므로, 특정 조건이나 규칙을 준수하도록 강제할 수 있다. 무결성 유지: 트리거를 사용하여 데이터베이스의 무결성 규칙을 강제하고 잘못된 데이터 조작을 방지합니다. 이력 추적: 데이터 변경에 대한 이력을 추적하기 위해 트..

2024.01.30 화 1. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요? ▶ 튜터님과 기술면접 진행시 답변한 내용 정리 컴포넌트 단위로 관리를 할 수 있다. 관계성이 단방향이다. 명시적으로 판단? 코드를 읽을 때 편리하다? 가상 돔을 활용하여 일반적인 javascript를 활용하는 것보다 성능적인 면에서 이점이 있다고 생각한다. 자바스크립트는 5번의 요청을 한다면 가상돔은 한 번에 업데이트를 할 수 있다. ▶ 보완 사항 개발자의 개발 효율성 참고 링크 https://yoosioff.oopy.io/d7e35b36-4ddd-4c9c-b515-4920248447b2 https://code-lab1.tistory.com/374 https://callmedevmomo.medium.com/virt..

2024.01.29 월 1. 개발자가 되기로 한 이유가 무엇인가요? ▶ 튜터님과 기술면접 진행시 답변한 내용 정리 적성에 맞는 것을 찾으려고 함 → 개발자라는 직업이 방향성과 적합하다고 생각 무언가를 만드는 것을 좋아하고, 문제를 개선적으로 해결할까 & 좋은 방향으로 나아갈 수 있을까를 고민하는 것을 좋아한다. → 개발자가 되기를 원한다. ▶ 보완 사항 좀 더 자신만의 예시를 추가해주면 좋을 것 같다. 2. css 프레임워크로 tailwindcss 와 nextui를 사용하고 있는 것으로 보이는데 css를 위해 두 가지를 사용하시는 이유가 무엇인가요? ▶ 튜터님과 기술면접 진행시 답변한 내용 정리 tailwindcss → 주로 사용함 & 애니메이션 활용 효율적으로 사용하고자 이미 만들어진 component..

2024.01.26 금 1. 프론트엔드 개발자로서 프로젝트를 진행하는데 가장 중요하게 생각하는 부분은 어떤 건가요? 사용자 경험 (User Experience): 프로젝트의 핵심은 사용자에게 훌륭한 경험을 제공하는 것입니다. 직관적이고 쉽게 사용할 수 있는 인터페이스를 설계하고, 성능을 최적화하여 빠르고 반응성 있는 사용자 경험을 제공해야 합니다. 반응형 디자인 (Responsive Design): 다양한 디바이스와 화면 크기에 대응하여 웹 애플리케이션이나 웹사이트가 모바일, 태블릿, 데스크탑 등 다양한 플랫폼에서 잘 작동하도록 해야 합니다. 크로스 브라우징 (Cross-Browser Compatibility): 다양한 웹 브라우저에서 일관된 동작을 보장하고, 호환성 문제를 최소화하기 위해 크로스 브라우..