Developer
🚀 집이 영종도(인천공항)인 관계로 가급적 공항철도 라인, 또는 재택근무를 지향합니다.
프론트엔드
안녕하세요
개발자 이철웅 입니다.
개발자 이철웅 입니다.
2015년부터 ERP업무(인사,물류,재무)로 개발을 시작했으며
비대면 헬스케어, 웹툰플랫폼 등 다양한 도메인 경험이 있습니다.
정규직, 프리랜서, 도메인단위 외주등 업무는 가리지 않으며 프로세스를 보다 명확하게 만드는것을 즐깁니다.
비대면 헬스케어, 웹툰플랫폼 등 다양한 도메인 경험이 있습니다.
정규직, 프리랜서, 도메인단위 외주등 업무는 가리지 않으며 프로세스를 보다 명확하게 만드는것을 즐깁니다.
이런 기술들을 사용해요
javascript
typescript
react
nextjs
spring-boot
jpa
node
graphql
oracle
docker
swr
zustand
jest
storybook
elastic
샘플 페이지가 궁금하세요?
백오피스
백오피스형태의 어드민사이트를 샘플페이지로 구현
React
Nextjs
SpringBoot
JPA
ORACLE
Docker
oci
리소스 관리
퍼블릭 리소스 관리
React
Nextjs
Vercel
Public
Resource
oci
개발중
art(가제)
미술작품 및 미술작가 관련 샘플페이지(mobile만 가능)
React
Nextjs
Vercel
oci
개발중
도서검색
타사api연동하여 도서검색 샘플사이트, 반응형 구현 및 api를 router로 숨겨서 secret-key 등 보안처리
React
Nextjs
Vercel
oci
Kakao
샘플백오피스(제작중단)
nextjs를 이용하여 mui형태의 백오피스를 제작
React
Nextjs
Docker
oci
SpringBoot
ORACLE
샘플스웨거
추구하는 형태의 restFul한 샘플도메인
Docker
oci
SpringBoot
ORACLE
샘플graphql(제작중단)
graphql을 테스트해볼 수 있는 사이트
Docker
oci
graphql
ORACLE
샘플스토리북
atoms,molecules,test형태의 공통컴포넌트 기준으로 구현
React
Nextjs
Storybook
public
SSG
이런 일들을 했어요
Developer
초기 개발은 담당하는 도메인을 기반으로 스키마 설계부터 비즈니스 로직, 화면UI등 모든것을 했지만 현재는 가능 한 프론트엔드 위주로 개발을 하고 있습니다.
재담미디어 (2023 ~ 재직중)
프론트엔드 파트장
구독제 웹툰플랫폼을 기반으로 고객서비스, 백오피스, 웹툰공고 등을 진행하였습니다.
지비피엘 (2024 ~ 2024)
프론트엔드 PL
SI사업부 소속으로, 고객사의 요구사항에 맞춰 다양한 사이트 및 시스템을 구축하고 있습니다
블루앤트 (2021 ~ 2022)
올라케어 프론트엔드
파트너사에 대한 어드민 사이트 구축 및 기타 랜딩페이지, 웹뷰형태의 프론트엔드 개발 등을 진행하였습니다.
프리랜서 (2020 ~ 2021)
예다함상조-간편가입, 상조앱 담당
상조 다이렉트 계약서비스 구축 및 FD(장례지도사)를 위한 상조앱 개발
프리랜서 (2017 ~ 2020)
예다함상조-ERP(back-office) 담당
인사,재무,물류 기반의 ERP 서비스 SI,SM
아림티앤씨 (2015 ~ 2016)
예다함상조-ERP(back-office) 담당
예다함 상조 파견근무로 인사,재무,물류 기반의 ERP 서비스 개발 및 관리
디자인 시스템
컴포넌트 매핑
디자인 연동
디자인 시스템에서 컴포넌트 매핑은 UI 요소를 일관되게 구성하기 위한 전략입니다. 각 컴포넌트는 특정 디자인 요구 사항을 반영하며, 이를 통해 재사용 가능한 UI 요소를 생성할 수 있습니다. 컴포넌트 매핑은 디자인 시스템 내에서 일관된 사용자 경험을 보장하고, 코드의 재사용성을 높입니다.
Props-Variants 매핑
디자인 연동
Props-Variants 매핑은 컴포넌트가 다양한 변형(variant)을 지원할 수 있도록 설계하는 과정입니다. 예를 들어, 버튼 컴포넌트에서 'primary', 'secondary' 등의 스타일을 prop을 통해 쉽게 변경할 수 있습니다. 이를 통해 디자이너와 개발자가 유연하게 다양한 UI 상태를 구현할 수 있습니다.
Section 단위 설계
디자인 연동
Section 단위 설계는 웹 페이지 또는 애플리케이션을 논리적인 섹션으로 나누어 구조화하는 접근 방식입니다. 이 방법은 각 섹션이 독립적으로 설계 및 개발될 수 있도록 하여, 전체적인 페이지의 일관성을 유지하면서도 각각의 섹션이 명확한 역할을 수행하도록 돕습니다.
Article 단위 설계
디자인 연동
Article 단위 설계는 콘텐츠 중심의 설계 접근 방식으로, 웹 페이지에서 독립적인 콘텐츠 블록을 정의하고 스타일링하는 것을 의미합니다. 이는 블로그 포스트, 뉴스 기사 등과 같은 콘텐츠를 효과적으로 배치하고 스타일링하는 데 사용됩니다. Article 단위 설계를 통해 콘텐츠의 가독성을 높이고, 사용자 경험을 향상시킬 수 있습니다.
프론트엔드 블로그
React의 가상 DOM 이해하기
프론트엔드
React의 핵심 개념인 가상 DOM(Virtual DOM)에 대해 깊이 있게 탐구하고, DOM 조작을 최적화하여 성능을 향상시키는 방법에 대해 설명합니다. 이 포스트에서는 가상 DOM의 작동 원리와 그 장점을 자세히 다룹니다.
CSS Flexbox와 Grid: 언제 무엇을 사용할까?
프론트엔드
CSS의 두 가지 레이아웃 모듈인 Flexbox와 Grid의 차이점과 각각의 사용 사례에 대해 논의합니다. 실제 프로젝트 예시를 통해 언제 어떤 모듈을 사용하는 것이 더 적합한지 알아봅니다.
Next.js 애플리케이션 성능 최적화
프론트엔드
Next.js 애플리케이션에서 성능을 최적화하는 방법을 다룹니다. 코드 스플리팅, 이미지 최적화, 정적 사이트 생성(SSG) 및 서버 사이드 렌더링(SSR)을 활용하여 빠르고 효율적인 웹사이트를 구축하는 방법을 설명합니다.
React에서 TypeScript 활용하기: 베스트 프랙티스
프론트엔드
React 애플리케이션에서 TypeScript를 사용하여 더 안전하고 유지보수 가능한 코드를 작성하는 방법을 안내합니다. 주요 패턴과 실수하기 쉬운 점을 설명하며, 타입 정의와 인터페이스를 효과적으로 사용하는 방법을 다룹니다.
연락하기
연락하기
정규직,프리랜서 크게
구애받지 않고 일합니다.
구애받지 않고 일합니다.
중요한건 업무내용이며 계약관계는 중요하지 않다고 생각합니다.
명확한 내용을 좋아하며 재미있게 일합니다.
명확한 내용을 좋아하며 재미있게 일합니다.
견적문의
견적문의
좋은 퀄리티와 합리적인
가격을 지향합니다.
가격을 지향합니다.
따라서 명확한 내용이 필요합니다.
화면정의서, 스웨거등의 api명세서를 기반으로 개발하며 인프라는 가능한 연관작업을 하지 않습니다.
화면정의서, 스웨거등의 api명세서를 기반으로 개발하며 인프라는 가능한 연관작업을 하지 않습니다.
협업툴을 이렇게 사용해요
타스크 관리
Jira
Jira를 사용하여 프로젝트 관리와 이슈 추적을 수행합니다.
- 에픽 관리: git의 release와 매핑하여 일감을 관리하며 일감을 생성하여 담당자및 나에게 배정합니다.
- 이슈 추적: 각 작업(Task), 버그(Bug), 새로운 기능(Feature)을 이슈로 등록하고, 할당된 담당자가 이슈를 해결합니다.
형상 관리
GitHub
형상 관리를 위해 GitHub를 사용합니다.
- 브런치 전략: 기능별 브런치를 만들어 개발하고, Pull Request를 통해 코드 리뷰를 진행하여 코드 품질을 유지합니다.
- jira 연동: jira의 epic과 연동하여 release관리를 합니다..
- git 전략: feat,fix,bugdix등의 구문등으로 commit메세지를 패턴화하여 일감과 함께 관리합니다.
커뮤니케이션
Slack
팀 내 커뮤니케이션을 위해 Slack을 사용합니다.
- 채널: 프로젝트별, 기능별 채널을 만들어 체계적으로 소통합니다.
- 장애 대응: 서비스별 장애 발생 시 hook을 이용하여 고객문의 전 선제적으로 대응 합니다.
- 통합 알림: Jira, GitHub 등의 툴과 연동하여 중요한 알림을 한 곳에서 관리합니다.
디자인 협업
Figma
디자인 파일 공유와 협업을 위해 Figma를 사용합니다.
- 디자인 시스템: 일관된 디자인을 유지하기 위해 디자인 시스템을 구축하고 활용합니다.
- 프로토타이핑: 초기 디자인 시안과 프로토타입을 만들어 이해관계자들에게 시각적으로 설명합니다.
- 실시간 협업: 여러 팀원이 동시에 디자인 파일에 접근하고, 실시간으로 피드백을 반영합니다.
스토리북
공통객체 및 UI테스트를 위하여 사용합니다.
- 디자인 시스템: 공통컴포넌트를 구조화 하고 공유할수있도록 사용합니다.
- UI테스트: 작성 된 시나리오를 기반으로 인터랙션을 활용하여 테스트 합니다.