소개

배운 모든 것을 기록하고 정리하는 블로그입니다.

경력

이프커뮤니티 | 웹 퍼블리셔

2020.11.02 ~ 현재 (산업기능요원 2021.08.25 ~ 2024.06.25)

담당 업무

  • HTML5, SCSS, JavaScript (jQuery), Gulp.js 를 이용한 웹 퍼블리싱
  • 웹 표준과 접근성, 호환성을 준수한 마크업 및 시멘틱 마크업
  • 소개 / 대민 페이지 또는 GIS (지리정보시스템) 페이지 퍼블리싱

학력

  • 서울아이티고등학교 스마트 웹 콘텐츠과 졸업 (2021)
  • 산업체 복무 완료 후 사이버대학교 컴공 진학 예정

기술

HTML5

  • 시멘틱 마크업
  • 웹 표준 / 접근성 / 호환성 준수 및 WAI-ARIA 활용
  • meta 태그 및 Open Graph 활용

CSS3

  • id 대신 class 활용
  • !important 는 최대한 지양
  • 사이즈 적용 시 고정값 (px) 대신 %, rem 등의 상대값 사용
  • 컬러 값 적용 시 컬러 이름 (red,white) 대신 명확한 rgb / hex code를 사용
  • 중복되는 코드는 css 변수로 관리 하거나 SCSS Mixin으로 관리
  • 셀렉터 단순화 (셀렉터가 길어지지 않도록 작성)
  • 셀렉터 선택 시 태그 이름 보단 class 이름으로 선택
  • :first-child, :last-child 등의 가상 클래스 대신 class를 활용
  • Flex / Grid 활용
  • 미디어쿼리를 이용한 반응형 구현

SCSS

  • 부모 선택자 (&) 활용
  • mixin, function, variable 활용

JavaScript

  • getElementById, getElementsByClassName, querySelector 등의 DOM API 활용
  • Event Listener 활용
  • ES6 문법 (const / let, 템플릿 리터럴, 구조분해할당, Rest 파라미터, 스프레드, 화살표 함수 등)
  • forEach, map, filter 등 배열 메서드 활용
  • 접근성 키보드 이벤트 제어
  • 로컬스토리지를 활용한 다크테마 작업

jQuery

  • 노드를 찾을 수 있는 메서드 활용 (parent, parents, children, find, closest, siblings, next, prev, nextUntil, prevUntil)
  • 요소를 제어하는 메서드를 활용 (append, prepend, after, before, html, text) 하여 CRUD 가능
  • 요소의 속성을 제어하는 메서드 활용 (attr, removeAttr, prop, removeProp, val)
  • 요소의 클래스를 제어하는 메서드 활용 (addClass, removeClass, toggleClass, hasClass)
  • 요소의 순서를 제어하는 메서드 활용 (index, eq, not)

React

  • useState, useEffect, useRef 등의 훅 활용
  • 중복되는 코드는 커스텀 훅으로 관리
  • Styled-components, react-spring, Axios, loadsh, react-responsive, Redux Toolkit 등의 라이브러리 활용
  • 로컬스토리지를 활용한 기초 CRUD

Next

  • 기존 리액트 프로젝트에서 SEO 이슈가 있어서 Next13 으로 마이그레이션

Vue (vue3 script setup)

  • 이벤트핸들러, 라이프사이클, 라우터 활용
  • computed & watch, ref & reactive 차이점 숙지
  • v-for, v-if, v-show, props, slot, emit 등의 vue 문법 숙지

Astro (v4)

  • 상태관리가 딱히 필요없는 정적 웹사이트 (블로그) 를 만들기 위한 도구로 활용

Gulp

  • 코드를 일일이 하드코딩 하지않고, gulp로 작업물을 자동화 (공통파일 관리, scss 컴파일, css prefix, browser-sync 등)

Git

  • Git으로 버전관리 및 협업
  • commit, push, pull, merge, webhook 활용

Figma

  • 정적 페이지 디자인
  • 컴포넌트 기능 활용

프로젝트

기여도

  • 최상: 단독으로 프로젝트 진행
  • 상: 페이지 가이드 작업 / 레이아웃 설계 및 퍼블리싱
  • 중: 페이지에서 필요한 컴포넌트 추가 작업 및 퍼블리싱
  • 하: 기존 컴포넌트 가지고 페이지만 퍼블리싱
  • 최하: 일부 페이지만 퍼블리싱

이프커뮤니티

펼쳐보기

SGIS 자연재해지도 서비스 / 관리자

  • 프로젝트 기간 : 2023.11 ~ 2024.01 (2개월)
  • 주요업무 : 서비스 및 관리자 지도 화면 퍼블리싱, 유지보수
  • 기여도 : 최상
  • 타입 : 반응형
  • 라이브러리 : Swiper

맵픽 간편지도

  • 프로젝트 기간 : 2023.10
  • 주요업무 : 지도화면 퍼블리싱
  • 기여도 : 최상
  • 타입 : 데스크탑
  • 라이브러리 : Swiper

주소정보관리시스템 (KAIS)

  • 프로젝트 기간 : 2023.09
  • 주요업무 : 프로젝트 세팅 / Vue 컴포넌트 작업 / 내부 관리자 페이지 퍼블리싱
  • 기여도 : 상
  • 타입 : 데스크탑
  • 주요기술 : Vue3 (Script setup), Vite

맵픽 (Mappick)

  • 프로젝트 기간 : 2023.04 ~ 2023.06 (2개월)
  • 주요업무 : 스타일가이드 / 메인 / 서브페이지 퍼블리싱
  • 기여도 : 최상
  • 타입 : 반응형
  • 라이브러리 : Swiper, Aos.js,

부산도시공사 청약센터

  • 프로젝트 기간 : 2023.03 ~ 2023.04 (1개월)
  • 주요업무 : 서브페이지 퍼블리싱
  • 기여도 : 중
  • 타입 : 데스크탑
  • 라이브러리 : jquery datepicker

LX Bizland 공간정보 사업존

  • 프로젝트 기간 : 2022.12 ~ 2022.02 (2개월)
  • 주요업무 : 해외 사업존에 있던 컴포넌트로 페이지 퍼블리싱
  • 기여도 : 상
  • 타입 : 일부 반응형 (1280px 까지 대응)
  • 라이브러리 : highlight.js, jquery datepicker

LX Bizland 해외 사업존

  • 프로젝트 기간 : 2022.12 ~ 2022.02 (2개월)
  • 주요업무 : 메인 및 서브 페이지 퍼블리싱 및 유지보수
  • 기여도 : 상
  • 타입 : 일부 반응형 (1280px 까지 대응)
  • 라이브러리 : highlight.js, jquery datepicker

똑똑청년농부

  • 프로젝트 기간 : 2022.11 ~ 2022.12 (1개월)
  • 주요업무 : 서브 페이지 레이아웃 설계 및 퍼블리싱
  • 기여도 : 상
  • 타입 : 반응형
  • 라이브러리 : Swiper

부동산공시가격산정시스템 지도 (REPIS GIS)

  • 프로젝트 기간 : 2022.09 ~ 2023.02 (5개월)
  • 주요업무 : 지도 화면 및 팝업 퍼블리싱, 유지보수
  • 기여도 : 최상
  • 타입 : 데스크탑
  • 라이브러리 : jquery-ui, jquery sortable & multisortable, jquery splitter, eyecon colorpicker, realgrid 2.6.0

K-GEO 지자체활용서비스 적지분석

  • 프로젝트 기간 : 2022.08 ~ 2022.10 (2개월)
  • 주요업무 : 지도 화면 및 팝업 퍼블리싱, 유지보수
  • 기여도 : 최상
  • 타입 : 데스크탑
  • 라이브러리 : jquery-ui, jquery sortable

K-GEO 지자체활용서비스 부동산정보종합조회

  • 프로젝트 기간 : 2022.08 ~ 2022.10 (2개월)
  • 주요업무 : 지도 화면 및 팝업 퍼블리싱, 유지보수
  • 기여도 : 최상
  • 타입 : 데스크탑
  • 라이브러리 : jquery-ui, jquery sortable

KLIS (한국토지정보시스템)

  • 프로젝트 기간 : 2022.07 ~ 2022.09 (2개월)
  • 주요업무 : 내부 관리자 페이지 퍼블리싱
  • 기여도 : 상
  • 타입 : 데스크탑

EGIS NEWLAYER

  • 프로젝트 기간 : 2022.05
  • 주요업무 : 기업 소개 페이지 퍼블리싱
  • 기여도 : 최상
  • 타입 : 반응형
  • 라이브러리 : Swiper

충청북도 도민생활 지도 서비스

  • 프로젝트 기간 : 2021.12
  • 주요업무 : 메인 지도 화면 퍼블리싱
  • 기여도 : 최상
  • 타입 : 반응형
  • 라이브러리 : jquery-ui

LX 지적측량업무지원 시스템

  • 프로젝트 기간 : 2021.11 ~ 2022.02 (3개월)
  • 주요업무 : 내부 관리자 페이지 및 서브메인 퍼블리싱, 유지보수
  • 기여도 : 상
  • 타입 : 데스크탑
  • 라이브러리 : jquery datepicker

이북5도위원회

  • 프로젝트 기간 : 2021.12 ~ 2022.03 (4개월)
  • 주요업무 : 서브페이지 퍼블리싱 및 웹 접근성 마크 획득 작업,유지보수
  • 기여도 : 중
  • 타입 : 반응형

가뭄지원센터

  • 프로젝트 기간 : 2021.11
  • 주요업무 : 메인 페이지 및 서브 페이지 각각 1개씩 퍼블리싱
  • 기여도 : 최상
  • 타입 : 반응형

국토교통부 공간정보 플랫폼 (K-Geo) 행정업무지원

  • 프로젝트 기간 : 2021.10 ~ 2021.12 (2개월)
  • 주요업무 : 내부 관리자 페이지 퍼블리싱 및 유지보수
  • 기여도 : 중
  • 타입 : 데스크탑

LX 국토정보 플랫폼 관리자

  • 프로젝트 기간 : 2021.06 ~ 2021.11 (5개월)
  • 주요업무 : 내부 관리자 페이지 퍼블리싱 및 유지보수
  • 기여도 : 상
  • 타입 : 데스크탑

공간정보산업협회

  • 프로젝트 기간 : 2021.06 ~ 2021.07 (1개월)
  • 주요업무 : 내부 게시판 페이지 퍼블리싱 및 유지보수
  • 기여도 : 최하
  • 타입 : 반응형

KTL 한국산업기술시험원

  • 프로젝트 기간 : 2020.12 ~ 2021.04 (5개월)
  • 주요업무 : 서브페이지 반복 퍼블리싱
  • 기여도 : 최하
  • 타입 : 반응형

개인 프로젝트

펼쳐보기

자격증

  • 정보처리기능사 (2021.05 취득)
  • 웹 디자인기능사 (2021.09 취득)

최근 공부하는 것들

  • 동기/비동기 프로그래밍, 블로킹/논블로킹
  • 자바스크립트 Promise
  • 자바스크립트 Async & Await
  • 자바스크립트 Prototype / Proto
  • 브라우저의 동작과정
  • 프론트엔드 필수 지식 (CSR, SSR, MVP, MVC, CORS 등)
  • 프로그래머스 문제 풀기