160 프론트엔드 개발 이슈
source: categories/study/vue-experiance/vue-experiance_9-99_61.md
160 프론트엔드 개발 이슈
- 전체 구조 이대로 괜찮은가?
- axios / store 구조
- Loading 컴포넌트 / 뒤로가기
- 어떤 구조로 해야 이를 컨트롤하기 쉬울까?
- 현재 스타일 작성 및 개발 관련 방식이 과연 좋은 방법일까?
- 텝메뉴 구조이면서 서로가 연계되어야하는 (이번 DL이엔씨처럼) 경우엔 어떻게 설계를 하는것이 효율적일까?
- 퍼블관점에서 벗어나 전체 구조, 말 그대로 프레임워크 (또는 좀 더 작겐 라이브러리) 관점으로 봐라봐야된다.
- 퍼블 관점은 오로지 마크업 입장에서만 바라보는 관점..
- 디테일한 면에서는 이게 좋을지도 모르나 전체적인 구조로 봤을 땐 별로인듯..
- 일단 큰 그림을 설계하고 바라볼 줄 알아야한다. 그것이 가장 중요.
- 큰 그림을 그리고 디테일을 잡아나가자
- 큰 그림을 그리라고했다해서 대충 큰 그림을 그리라는 의미가 아닌, 디테일을 쉽게 잡을 수 있는 그런 큰 구조로 짜자는 말임
- 코드 정리 -> 알아보기 쉽게하기위해 함수형 코딩으로 나아가야함
프론트엔드 정석 개발 방식
- 풀리퀘스트 <- 모든 개발자들이 이렇게 일해
- 프론트엔드 <- 스토리북 : UI 컴포넌트 개발하면 스토리북을 통해서 미리 확인을 할 수가 있어.
- ngrok
- Jest (Mocha) <- 테스트 코드 TDD 개발 - 개발 완료 후 최종 테스트
- 테스트 라이브러리 . 테스트 메소드
- 이 변수에는 뭐가 들어와야돼 근데 이게 들어오고있어?
- 어 근데 이 변수에 너가 설정한대로 안들어오는 경우가 있어. 이거 에러야.
- 타입스크립트 - 개발하면서 테스트할 수 있는 기법
해야될일
- 검색팝업 스크롤 (해결)
- 검색팝업 엔터, 이동 클릭시 검색 -> 키패드 닫히게
- 검색팝업 목록 선택시 팝업 닫히게
- 하단 플로팅 시나리오 수정
- 회원정보 수정 (회의예정)
- Refused to execute inline script because it violates the following Content Security Policy directive: "script-src ‘self'". Either the ‘unsafe-inline' keyword, a hash (‘sha256-2xJ5T2220Ozu0as5F7rroxnWbXltCsDwNPPN30RXY9w='), or a nonce (‘nonce-…') is required to enable inline execution.
- CSP 헤더
- ‘https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' 스타일시트 로드를 거부했습니다. 콘텐츠 보안 정책 지침 "style-src ‘self' ‘unsafe-inline'"을 위반했기 때문입니다. ‘style-src-elem'은 명시적으로 설정되지 않았으므로 ‘style-src'가 대체 수단으로 사용됩니다.
회원정보 수정 프로세스
- 첨부파일 수정
- 혈압(PressureMeasurement.vue 참고)
- 000006 첨부파일 목록 조회 getAttachmentFile
- 6번으로 조회해서 있으면 000054 첨부파일 삭제
- 그리고 다시 저장 /attach/upload - postFileUpload
- 위와 같이 수정하고 받아온 파일 번호를 아래 11번에 태워서
- 수정API 11번, U 로 보내면됨