반응형 TypeScript4 프론트엔드 개발자의 백엔드 입문하기 계기아마 대부분의 프론트엔드 개발자는 비슷한 생각일 것이다.퍼블리싱의 영역보다는 로직의 영역이 더 재미있다는 것 물론 퍼블리싱이 하기싫은 정도는 아니지만 퍼블리싱 끝에 로직에 대한 고민하는 시간이더 재미있는 건 부정할 수 없다. 지금도 완벽하지 못하고 벅찬 알고리즘을 만나는 순간이 많지만프론트엔드 영역에서 해결하기 힘든 문제는 좀 처럼 만나보기 쉽지 않다. 마침 무언가 배우기 위해 인프런에 접속했고App, Web, 3D 등 여러 분야가 있었지만 백엔드를 해보고 싶은 생각이 들었다. 프론트엔드 개발자로 아주 깊게 이해하는 전문가가 되기 위한 목표가 있지만혼자 개발하는 것이 아닌 이상 백엔드의 환경이나 고민거리도 알아놓으면 좋을 것 같다. 그 중에서 무엇을 해볼지 고민했지만 그리 길지는 않았다.지금 바로 시.. 2025. 4. 20. Library React Swiper 응용하기 (module, props...) 기본편 보러가기 Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm 3pdev.tistory.com 기본편에서 말했듯 React Swiper는 여러가지 모듈, props, style등을 활용해 자유도를 높였다. 먼저 모듈부터 살펴보자. Navigation 모듈은 슬라이더에 이전/다음 버튼을 추가한다. 클릭하면 슬라이더가 넘어간다. import SwiperCore, { Navigation } from 'swiper'; import 'swiper/css/.. 2023. 3. 29. Library React Swiper 슬라이드 가능한 컴포넌트 만들기 React Library 중 하나인 React Swiper를 사용해보고자 한다. 업무 중에 생각보다 많이 쓰이기에 한번 정리하고 넘어가야 할것 같다. 오늘은 기본적인 사용법과 문법에 대해 알아보자. 1. Package Install npm install swiper or yarn add swiper 2. 기본 문법 import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import { IListItem } from 'src/common/view-model/list.view-model'; interface IProps{ list : IListItem[]; } /** * 스와이퍼 슬라이드 이미지 * @param props.list i.. 2023. 3. 27. TypeScript 기초 with Example 우린 그동안 Javascript를 기반으로 개발을 해왔다. 하지만 팀프로젝트, 대형프로젝트를 할수록 유지보수와 재사용에 대한 필요성이 점점 늘어난다. '내가 나가면 다음 개발자는 내 코드를 잘 이해할까?' '기존 프로젝트에 내가 들어간다면 전 개발자의 의도대로 개발할 수 있을까?' 그래서 Typescript라는 것을 사용해서 내 의도를 코드에 지정해줄 수 있다. Typescript란? Javascript를 기반으로 type 구문을 추가하여 나의 의도를 기록해 놓는 것. 오류를 컴파일 단계에서 잡아낼 수 있고 코드의 가독성을 높이며 디버깅의 효율성도 증대시킨다. 난 프론트엔드 개발자이며 React를 주로 사용하기에 React에서 Typescript를 사용하는 방법을 적을 것이다. 실습 먼저 install이.. 2023. 1. 30. 이전 1 다음 반응형
