FRONT-END DEV.
PORTFOLIO
SCROLL DOWN
I’M GETTING READY FOR
NEW START.
안녕하세요. 프론트엔드 개발자를 꿈꾸는 김종연입니다.
“ 집요하다 : [형용사] 몹시 고집스럽고 끈질기다. ”
이 단어는 저에게 너무 어울리는 말입니다. 단 한개의 결함도 용납 못하는 완벽을 추구하며 목적을 위해 밤을 새우는 것을 두려워하지 않습니다. 항상 이용자 입장에서
생각하며 직접 수십번 테스트해가며 작업합니다.
초등학생 때부터 처음으로 꿈꿔왔던 개발자의 꿈을 실현해보고자 합니다. 신입으로서 항상 배우는 자세를 가지며 경력을
쌓을 준비가 되었습니다!
- #열정있는
- #세심한
- #집요한
MY STORY
저는 초등학교 때 게임을 하면서 내가 직접 이런 게임을 기획하고 만들어 운영해보고 싶다라는 생각이 들어 여러가지 개발 툴을 찾아보다가 당시 유행하던 플래시라는
것을 알게되었습니다.
그 이후로 재미를 붙여 점점 코딩을 깊게 배우기 시작했고, 플래시 커뮤니티에 작품을 올리면 베스트 작품에도 자주 올라가고 대부분 반응이 좋았습니다. 이 것은 저에게 성취감을
크게 느끼게 해주었고, 프로그래밍의 길에 한 걸음씩 나아갈 수 있는 힘이 되었습니다.
-
· · ·
[ 2010~2012년도 중학생 때의 작품 ]
어렸을 적 작품이라서 부끄럽지만 플래시라는 프로그램으로 정말 다양하게 만들어본 수십개의 작품 중 몇가지의 작품들입니다. 이러한 경험은
프로그래머로서의 성장에 정말 많은 도움이 되었고, 다른 프로그래밍 언어나 알고리즘을 배우는 것도 수월하게 할 수 있었습니다.
개발자의 길은 평생을 트렌드를
쫓아 공부해야 한다고 생각합니다. 어렸을 때부터 이런 적성과 흥미가 있었던 저에게 있어서는 개발자는 천직이라고 생각하며 끊임 없이 공부할 것입니다!
TECH STACK
아이콘에 마우스를 올리면 자세한 설명이 나옵니다.
-
HTML5
웹접근성, 표준성을 준수하며 시멘틱태그를 이용해 마크업 할 수 있습니다.
-
CSS3
position, display를 적절히 사용하여 반응형웹을 적용할 수 있습니다.
-
SASS
SCSS의 문법과 모듈화를 잘 활용하여 스타일 작업을 원활히 할 수 있습니다.
-
Javascript
Javascript의 배열, 메소드, DOM을 이해하며 다양한 상황에 적용할 수 있습니다.
-
JQuery
관련 라이브러리와 애니메이션, 여러 메소드들을 잘 활용할 수 있습니다.
-
React.js
React 구조와 여러가지 hook들을 잘 알고 있으며, 범용적이고 재사용가능한 컴포넌트 설계를 할 수 있습니다.
-
Node.js
서버의 API를 구축할 수 있으며, DB와 연동하여 CRUD 기능을 수행할 수 있습니다.
-
mongoDB
mongoose를 이용해 mongoDB의 스키마 정의와 데이터들을 처리할 수 있습니다.
-
PHP
PHP를 이용하여 동적컨텐츠를 만들 수 있고, CRUD 기능을 수행할 수 있습니다.
-
JSON
JSON의 객체 구조를 잘 파악할 수 있으며, javascript에서 활용할 수 있습니다.
-
VS Code
주로 사용하는 코딩툴이며, 코딩에 편리한 확장프로그램들을 설치해 사용하고 있습니다.
-
Figma
데스크톱, 모바일 UI/UX 시안을 작업 할 수 있으며, 디버깅을 잘 활용할 수 있습니다.
-
PHOTOSHOP
마스크효과, 레이어 활용 등을 이용해 다양한 그래픽 요소를 제작할 수 있습니다.
-
Illustrator
펜툴 활용과 기타도구들을 이용해서 벡터 형식의 디자인 요소를 제작할 수 있습니다.
-
POSTMAN
Postman을 이용해 서버에 GET, POST 요청을 해서 서버 디버깅을 할 수 있습니다.
-
Git
commit, push, pull, clone 등 git 명령어를 사용하여 레파지토리에 접근할 수 있습니다.
WORKS
···
나만의 블로그를 직접 디자인하여 처음부터 배포까지 나의 힘으로 만들어보고 싶었고, React.js를 처음으로 배우면서 만들었기에 프로젝트 기간이 상당히 길어졌습니다. 그래서 굉장히 애정이 가는 프로젝트이며, 앞으로는 Next.js를 통해 SSR로 개편을 준비하고, 그 전까지는 블로그를 좀 더 다듬고 포스팅도 이어갈 예정입니다.- #React.js
- #Node.js
- #express
- #mongoDB
- #반응형웹
- #JQuery
- #AJAX
- #PHP
- #반응형웹
···
html/css를 배우던 초창기에 '이런 서비스가 있었으면 좋겠다' 해서 JQuery와 php를 연습할 겸 웹 프로젝트를 처음으로 진행하게 되었습니다.- #JQuery
- #AJAX
- #PHP
- #반응형웹
- #VanillaJS
- #swiper.js
- #JQuery
- #SCSS
- #반응형웹
- #Publishing
- #CloneCoding
JongYeon's 개발 블로그PROJECT
간단 소개
개발 관련 정보들을 메모해두고 싶어 직접 풀스택으로 만든 개발 블로그
진행 기간
2022. 11 ~ 진행 중
핵심 사용 기술
구성원
개인 프로젝트
사이트 바로가기
상세 내용
· 기술 선정 이유
컴포넌트 구조화의 간편함과 CSR의 특징인 부드러운 화면 전환이 가능한 것이 UI/UX 적으로 매력적으로 느껴져 React를 선정했고, React와 같이 쓰기좋은 Node.js를 서버로 쓰기로 했다. DB는 noSQL에 대해서 알아보고 싶었고 복잡한 쿼리를 사용할 일이 없어보여 MongoDB를 사용했다.
· 프로젝트 과정
Figma로 디자인 -> React로 퍼블리싱 -> 데이터 스키마 정의 -> Node.js 서버 api 구축 -> 서버 배포 -> 검색엔진최적화(SEO) -> 개발자 지인들에게 간단한 QA 받고 버그 수정 -> 관리자페이지 구축 -> 유지보수
· 한계점
블로그를 만들고 구글 검색에 노출되어 여러 개발자들에게 정보를 공유하고 싶어서 SEO에 대해 찾아보다가 CSR 방식은 검색엔진최적화가 어렵다는 것을 알게 되었고 방법을 찾다가 SSR로 넘어가기에는 너무 오래걸릴 것 같아 CSR로 유지하면서 react-helmet과 sitemap을 생성하는 방법을 이용해 SEO 문제를 해결해 냈다. 다음에는 Next.js를 이용하여 SSR로 블로그를 개편해 볼 생각이다.
DESIGN & GRAPHIC
자세히 보려면 마우스를 올려 클릭해주세요.
DYSON Redesign
- #3D3D3D
- #BEBEAB
- #626275
FIAT Redesign
- #F3F3F3
- #CC0001
- #1E1E1E
ADIDAS Redesign
- #000000
- #FFFFFF
- #FF3A3A
POLO Redesign
- #000000
- #FFFFFF
- #882E2E
타이포 & 합성
- #525E76
- #D7A95C
- #F8F8F8
