TIL_211223_Frontend

Ail_ 2021. 12. 23. 18:01

수업 전 워밍업 때 알게 된 것들

개발할 때 순서

-> 빈화면 -> 버튼 -> 액션 하나씩 추가

자바스크립트

event driven 방식(자기가 호출되면 동작하고 끝남 => 순서는 보장이 되는데 절차가 보장이 안됨)

funA() {
  const x = funX() // x에 X를 리턴시켰다 치고 담겠다
  console.log(x) // 그럼 x에 X가 있으니까 X가 콘솔에 찍혀야할 것 같지만 undefined
} // (데이터가 담기기 전에 console.log가 먼저 동작해버림)

주의

vue에선 await를 사용하지 않는다.(Store에서 대신 해줌)

-> 이걸 적응 못하면 끔찍한 혼종을 탄생시킬 수 있다...

코딩 순서는 사용자 인식의 반대 방향

<사용자의 순서>

정보 입력 --> 등록요청 --> 등록접수(여기부턴 백엔드) --> 로직동작 --> DB호출 --> DB입력

그러나 코딩은 반대로 되어야함(DB가 있어야 호출을 하고 DB 호출을 할 수 있어야 로직이 동작하게 할 수 있고...)

하지만 코딩 순서대로 짜기가 어려울 수 있기 때문에 저렇게 짜진 않음

개발 공부는 모자이크처럼 해야함 계속 반복하면서 익숙해지고 이해하게되면 점점 선명해짐

오늘은 CRUD를 중점으로 사용자 관리 화면을 만들었다.

- key 값엔 절대 한글이 들어가면 안되기 때문에 fields를 이용했다.

- 코드는 간단할수록 좋다 -> bootstrap vue에서 가져올때 필요한 기능만 있는 최대한 간단한 코드부터 가져올 것, 그리고 옵션을 붙일 것

- 붙여넣기할 때 위치는 괄호로 살펴보면 정확

- @click의 @는 action

- methods 등에 넣을 땐 순서 맞춰서! 보통 methods에 먼저 만들고 그걸 복사해서 위에 붙여넣으며 씀
-> 평범하면 이름 못찾으니 가능한 유니크한걸로

- 주의! 변수는 camelCase로 써야됨

- 비밀번호 설정 주는 건 엄청 간단하네... type="password"

vue-good-table에 테이블의 데이터를 필터링해서 보여주는 검색기능 있음

사용한 bootstrap 기능

Table, Form group, buttons, Layout and Grid, Modal, FormRadio

느낀 점

확실히 똑같은 걸 여러번 하니까 처음보단 훨씬 낫다.

그 사실이 희망이다.

왜 초반에 잘 모를 때 하드코딩을 (하면 안되는데) 많이 하게 된다고 하는지 알 것 같다...

중간중간 백엔드를 막판에 우다다 할 때가 떠오르는 시점들이 있었다..

받아들여야할 지식이 정말 많다.

하나하나는 어려운게 아닌데 vue, 자바스크립트, html, 부트스트랩이 다 섞이면서 복잡해보이는 느낌?

정말 거대한 모자이크 속에 갇힌 기분이다ㅎ

선명해지도록 헤매면서 길을 찾는 수밖에...