💥 최종 개발 화면 및 구성

• 상단 Div[Top]
  • 시간 / Welcome 문구 / 로그인 및 로그아웃 Form
• 좌측 상단 Div[LeftTop]
  • 프로필 이미지 / 프로필 내용[개인 정보 및 Skill]
• 좌측 하단 Div[LeftBottom]
  • 개인적으로 자주 사용하는 Web Site 로그 및 링크
• 중앙 Div[Middle]
  • To Do List
• 우측 Div[Right]
  • 개인 경력 / 팀 프로젝트[대학교 시절] / 개인 프로젝트
• 하단 Div[Bottom]
  • 시간과 관련된 유명 문구

⁉️ 왜 해당 프로젝트를 진행하게 됐나?

최근 취직을 하게 됐는데, 팀에서는 내게 준 업무 중 가장 큰 부분이 Front단 개발이었다.
팀에서는 Front 단을 처리하기 위한 Tool로 ‘넥사크로’를 활용하고 있었다. 넥사크로는 단순히 Component를 드래그 & 드랍을 하고, 특정 컴포넌트에 이벤트 발생할 것 같은 부분만 JS 코드를 작성하면 그만이었다. (물론, 복잡한 것은 복잡함…)

하지만, 다른 팀 소속의 인원은 React.js나 Vue.js를 활용하여 개발을 진행하고 있었다. 이것을 보고, 나 역시 언젠가는 넥사크로가 아닌 다른 라이브러리나 프레임워크를 기반으로 한 업무를 할지도 모르겠다는 생각을 하게 됐다.

이 생각이 든 이후로, 개인 프로젝트를 진행하기 위한 사전 공부를 하고자 [노마드코더] 강의 중 JS 기반의 [바닐라 JS로 크롬 앱 만들기]를 수강했다. 해당 강의의 코드를 따라해보며 JS를 비롯해 HTML과 CSS의 지식을 쌓을 수 있었다. 그렇게 해서 쌓은 지식으로 어떻게 FE의 기본적인 틀이 돌아가는지 파악할 수 있었다.

이후, 개인 프로젝를 진행했고 약 30일이라는 시간에 걸쳐 마무리를 지을 수 있었다. 😃

🍎 Feedback

좋았던 점

• 대학 이후, 그리고 취업 이후 진행한 첫 개인 프로젝트
• 얻은 지식
  • 자바스크립트 내장 객체 / 브라우저 객체 모델 / DOM
  • 자바스크립트로 HTML 조작하기
  • console.log() / console.dir()
  • querySelector() / querySelectorAll() / getElecmentById() 등
  • Event 처리
  • localStorage / Date
    • 특히, 회사 Front 업무 개발시 localStorage를 활용을 많이 했다. 배웠던 것 중 가장 많이 사용하는 것 같다.
  • HTML 및 CSS 지식
    • 강의를 수강했을 때는 HTML 및 CSS보다는 JavaScript 위주로 배웠었다. 하지만, 이 개인 프로젝트에서 사용되는 대부분의 기술은 강의에서 사용했던 JavaScript를 기반으로 작업하다 보니, 개인 프로젝트에서는 JavaScript보다는 HTML 및 CSS를 위주로 공부하게 됐다.

아쉬운 점

• 위에서 언급했던 것처럼 [바닐라 JS로 크롬 앱 만들기]를 토대로 한 개인 프로젝트였기에, 해당 프로젝트는 JS보다는 HTML과 CSS 위주로 공부를 한 프로젝트였다. 따라서, 다음 프로젝트에서는 새로운 기능을 JS로 내가 직접 짜보고 싶다.
• 대부분의 Div의 반응형이 아닌 고정형인 fixed 또는 absolute로 되어있다. 다음에는 요즘 트렌드 웹인 반응형 Web을 해보고 싶다.
• HTML 화면이 하나밖에 없다. 다음에는 여러 화면을 기반으로 한 하나의 Site를 만들고 싶다.

📚 To do in the next project

• React를 활용하여 반응형 웹 만들기
• 화면 구성
  • 메인 화면
  • [로그인 / 로그아웃] 화면
  • 사용자 정보 화면
  • 게시판 화면
• DB(Oracle 또는 MySql)를 이용해 [사용자 정보 / 게시판 정보]와 연관된 데이터를 송수신
• CSS Reset을 통한 Selector값 초기화 및 Setting