TIL 2일차 220327
Intro
이번에 좋은 기회가 생겨 프론트엔드 개발을 어떻게 해야하는지에 대해 개발업계에 계시는 분께 조언을 얻게 되었습니다. 웹페이지를 나도 한번 만들어보고 싶다는 마음에 시작했지만, 지금 제대로 가고 있는지 막막하고 힘든 시기이었는데 프론트엔드 개발자도 당연히 알아야하는 백엔드, 서버 관련 기본 그리고 전체적인 공부흐름을 잡게 된 것 같습니다.😊
전체적으로 확인해야할 공부흐름
- HTML5 컴포넌트가 어떤 것이 있는지?
ex) - form 묶음에 어떤 것이 있는지?
- 게시판을 만들 때 필요한 컴포넌트는 어떤 것이 있는지?(각 컴포넌트파악)
- 뷰, 제이쿼리, 부트스트랩 중 한가지 경험해보기- 로그인 페이지를 한번 정도 경험해보는 것이 좋음
- ★submit버튼을 눌렀을 때 정보를 서버가 받아서 어떻게 DB에 올리는지를 파악하고 난다면 어떤 부분을 공부하고 배경지식을 쌓아야할지가 눈에 보일 것.
- node.js 와 express를 설치해 프롬짜보기
- mariaDB를 이용해보기
- SQL의 기본문법 select, insert, update, delete 조작 방법 익히고 이용해보기
- 컴퓨터공학의 학문적인 요소는 아니더라도 기본적인 지식의 습특은 필요(프로토콜 기초 등)
오늘 목표
- 별점랜딩시스템 코드 아쉬운 부분 보완하기
- 랜딩페이지 디자인하기
- 프론트엔드 개발자가 알아야할 보안관련 이슈 찾고 정리하기
- 모듈화란? webpack으로 모듈화하는 방법 정리하기
새로설정한 오늘 목표
- submit버튼을 눌렀을 때 발생하는 전체적인 맥락 파악하기
새로 배운 내용
1) Webpack
- Webpack이란 현대 Javascript Application의 Static Module Bundler로 Module Bundling을 통해 여러개의 Javascript파일을 하나의 파일로 관리하기 쉽게 해줍니다.
- 지정한 메인 파일에서 시작해 자바스크립트의 require과 import문을 참고해 프로젝트의 모든 의존성을 조사하고 로더를 이용해 처리한 후 번들로 묶은 자바스크립트의 파일을 생성합니다. 모든 파일을 하나로 합쳐 성능을 향상시킬 수 있습니다.
2) express 설치 및 페이지 띄우기
$ npm install express -g
$ express 폴더명
$ cd 폴더명
$ npm install
$ SET DEBUG=backend:* & npm start- public폴더 내부에 index.html파일을 작성.
- http://localhost:3000/indec.html으로 서버에 페이지 띄우기
3) createDocumentFragment()
▶createDocumentFragment()
DocumentFragment는 다른 노드를 담는 임시 컨테이너 역할을 하는 특수 목적의 노드이다.
다시 숙지한 내용
form action=""
: '로그인' 버튼을 클릭하면, 해당<form>태그 내에 지정된 값들이<action>태그에 지정된 페이지로 넘어가게 된다.
input [type="password"]
: 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다.
input[type="submit"]
:<form>태그 내에 입력된 데이터를 서버로 전달해 줍니다.
하루를 정리하며
오늘은 개발현직자분들의 조언을 많이 얻게 되는 시간이었습니다. 무엇보다 우와와와?했던 부분이 구글링!!(응,,?)물론 다른 부분에서도 배운 부분이 가득하지만 혼자 열심히 찾아보려고 했던 내용들에 있어 휘리릭 착 하고 찾으시는 것 같아 다들 대단하다고 느끼게 된,,,👍
그리고 뒷단에서 웹페이지를 서버로 연결하고 컴포넌트를 나눠서 관리하는 방법을 실제로 접해보며 부끄럽기도 사실 도망치고 싶기도 했던 하루이기도 했습니다. 🤣
새로운 것을 배운다는 건 어렵지만 하나하나 쌓이고 누적되어 디자이너와 백엔드를 모두 소통이 될 수 있고, 지금 하는 일에 자신감이 있는 개발자가 되고 싶습니다😊
