본문 바로가기

전체 글

Web Component API로 컴포넌트를 만들어보자 이번 2월부터 새로운 회사에 새롭게 일을 하게 되면서, PHP기반으로 구축된 LMS 프레임워크에 React로 개발한 프로젝트 소스를 팝업 형태로 띄워달라는 개발 요청을 첫 번째 일감으로 받게 되었다.지금까지 REST API 위주로만 React나 Next 기반으로 프로젝트를 개발해온 나에게 흥미로운 주제였다.구글과 AI로 여러가지 자료들을 서치해본결과, 먼저 React 컴포넌트를 Web Component로 감싸서 다른 프로젝트에서도 사용할 수 있게 브릿지 코드를 구축하기로 결정했다.어떻게하면 UI가 다른 팝업을 웹앱 컴포넌트로 재사용하도록 코드를 작성할 수 있을까?? 의문이 들었다.의문이 들면… 코드를 작게나마 만들어 테스트를 해보면 되겠지! 가장 먼저, 재사용은 뒤로 미뤄둔 채로, 외부에서 웹앱 컴포넌트.. 더보기
[유데미x스나이퍼팩토리] FSD 아키텍쳐가 뭐야? 프론트엔드 진영에서도 많은 아키텍쳐 패턴들이 존재하는데요, 대표적으로 UI 컴포넌트를 5단계 단위로 나누어 설정하는 Atomic Design Pattern(아토믹 디자인 패턴), 백엔드 진영에서도 한 때 인기가 많았던 MVC(Model-View-Controller) 패턴 이외에도 MVVM 패턴, 마이크로 프론트엔드 패턴 등 많이 존재하고 있습니다.  https://feature-sliced.design/kr/docs/get-started/overview 둘러보기 | Feature-Sliced DesignFeature-Sliced Design (FSD)는 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론입니다. 간단히 말해, 코드 구성에 관한 규칙과 관례를 모아놓은 것입니다. 이 방법론의 주요 목적은 .. 더보기
[유데미x스나이퍼팩토리] 프로젝트 캠프 schdn ui 11월 중순부터 프론트엔드 프로젝트 캠프에 참가하게 되었는데, 아직 Next.js와 관련된 프론트엔드 지식이 좀 부족하다 느꼈으며, 프로젝트 경험을 좀 더 다양한 사람들과 하고싶어 참여하게 되었다.  아무래도 개발쪽 경험이 어느정도 있는 사람들이 많이 참여하는 프로젝트다보니 진도 속도도 굉장히 빨랐으며, 퀄리티 또한 깊게 생각하게 되는 내용들이 많았다. 이번주는, JavaScript 개념들과 심화내용에 대해 학습을 하고, 바로 React + tailwind로 구축된 프로젝트를 만들어보는 시간을 가졌다. UI를 만드는데 여러 라이브러리들이 존재하지만, 이번엔 schdn ui라는 걸 사용하게 되었다. schdn ui 알기 전에는, material ui 나 ant design과 같은 라이브러리를 사용해본적은 .. 더보기
React-Native로 드래그앤드롭 기능 구현 이번에 프로젝트로 드래그앤드롭 기능을 응용할 기능이 추가될 것 같아 React-Native로 한 번 드래그앤드롭을 공부해봤다.먼저 이번에 내가 구상한 플로우는 다음과 같다.보관함 버튼을 클릭 후 스티커 아이템 모달창을 띄운다.아이템 모달창에서 아이템 한 개를 클릭한다.클릭된 아이템이 클릭된 상태는 border로 표시→ 드래그앤드롭으로 제어 후 어딘가에 배치 후 하단 완료 버튼을 누르면 배치완료.배경화면에 해당 아이템이 영구적으로 저장되도록 구현.보관함 버튼 클릭시 모달창 띄우기.보관함 버튼을 클릭하면 오른쪽화면 처럼 아이템보관창이 나오도록 구현할 예정이다. const [isModalVisible, setIsModalVisible] = useState(false);const [items, setItems].. 더보기
React-Native 해당글은 React-Native는 React와 달리 어떤식으로 동작하는지에 대하여 공부하고 정리한 글입니다. 이전 회사에서 관리자 알림 푸쉬 기능으로 React-Native를 유지보수 한 경험은 있지만, 그 때는 RN 버전도 굉장히 낮았고 안드로이드만 출시하여 관리하는 단계라 크게 많은 기능들을 사용해 보지 못했는데, 이번에 다시 앱을 출시해보고 싶어 공부하게 되었다. React-Natvie 가 뭐고 왜 사용하는걸까?javascript 라는 기존 웹 언어로 하이브리드 앱을 개발할 수 있다는 가장 큰 장점이 있다. 그렇기에, React를 개발한 경험이 있으면 금방 습득할 수 있다.React Native Sample Codeimport React from 'react';import {Text, View} f.. 더보기
Next.js + @tanstack/react-query 왜 같이 쓸까? 이번에 Next.js 15버전 기반인 App router를 공부하면서 @tanstack/react-query를 써야 하는지에 대해 느끼게 된 점을 정리하게 되었다. 이전에는 page router기반 Next.js 12버전으로 서버와 통신 이후에 비동기 처리하는 과정에서 Next.js + @tanstack/react-query를 조합해서 캐싱기능과 로딩, 에러 ,성공 상태에서 대부분 사용했었는데 ?이번에 Next.js 15 version을 공부하며 Next.js app router에서 제공하는 기능만으로도 캐싱 기능과 스트리밍 기능이라던가 서버컴포넌트 기능의 확장으로 react-query를 같이 써야할 이유가 있을까? 라는 의문을 가졌다. @tanstack/react-query에서 제공하는 여러 캐싱기능들.. 더보기
React-Query React-QueryReact-Query란 ? 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 관리하는 개념으로 서버 상태를 관리하기 위해 사용되어지는 대표적인 라이브러리다. React-Query 의 주요 기능을 살펴보자면1. 서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지해주기 때문에 따로 수동으로 할 필요가 없다.2. Prefetching 기능을 적용할 수 있다.3. Pagination / infinite Scroll을 보다 손 쉽게 지원 가능4. 데이터 변경 관리를 상세하게 가능5. 중복 요청 제거6. 서버에서 오류 발생 시 재시도 가능7. 쿼리가 성공하거나 오류가 났을 때 구별해서 조치를 취할 수 있도록 콜백 전달 가능. 이번에, React-Query를 공부하기 위해 환경은 R.. 더보기
TypeScript - 제네릭 제네릭은 원하는 대로 함수의 인수에따라 반환되는 값을 가변적으로 정할 수 있다.function func(value: any){ return value;}let num = func(10);num.toFixed();let bool = func(true);let str = func("str.....ssss"); 위 코드를 이제 any타입이 아닌 제네릭을 사용하여 타입 지정한다면?function func(value: T): T { return value;}let num = func(10);num.toFixed();let bool = func(true);let str = func("str.....ssss");let arr = func([1, 2, 3]);위처럼 제네릭으로 타입을 설정하게 되면 func 함수는 .. 더보기

티스토리툴바