IT라이프/웹프로그래밍5 프론트엔드 코딩 1. 같은 목적을 가진 코드로 구성하여 응집도를 높이기 - 세부사항을 전개하지 말고 따로 코드로 빼두고 세부구현을 해놓는다 - 코드가 길어지더라도 따로 코드로 빼놓는 것이 메인 흐름을 이해하는데 유리하다 2. 함수는 하나의 역할만 하도록 제대로 나누기 - 함수는 단일책임만 가지도록 나누기 3. 함수의 세부구현 단계를 추상화를 통해서 통제하기 - 컴포넌트를 하나 만들어서 대강 어떤 일을 하는지 알수 있게 구현하기 4. 비동기처리에서 성공과 에러 처리하기 - async await 로 성공인 경우만 작성하여 무슨 일을 하는지 알기쉽게 한다 - try catch 를 쓰지않고 await fun 안에서 에러처리를 하도록 맡긴다. 2022. 12. 9. [Javascript] function vs arrow function foo(v) { return v * 2 } caller: null arguments: null const boo = (v => v * 2) arrow function 은 caller, arguments 에 접근불가 Function.caller deprecated 브라우저에서 사용할 수 없는 가능성 높음 caller프로퍼티는 해당 함수를 실행시킨 함수를 반환합니다. strict, async, generator 함수에서 실행시켰다면 null 을 반환합니다. Function.arguments deprecated 브라우저에서 사용할 수 없는 가능성 높음 함수에 전달된 파라미터에 대응하는 오브젝트입니다. strict 에서 사용불가. 2022. 11. 3. Atomic Design 아토믹 디자인 - 컴포넌트를 나눌때 프레젠테이션 부분과 그 외의 단위로 나누는 것이 무난하다. 단계별 명칭 내용 예시 주의점 역할 Atoms 더이상 나눌 수 없는 단위 button, input, label stateless data don't call API no logic 표시 이벤트는 emit Molecules 아톰이 2개 이상 결합된 단위 썸네일 + 이름, 돌아가기 버튼 + 헤더메뉴 stateless data don't call API no logic 강제로 사용해야 하는 단계는 아님*2 표시 이벤트는 emit Organisms 하나이상의 기능을 가진 단위 헤더, 푸터, 사이드메뉴, 테이블, 위젯 이벤트는 emit 전달 UI부품 핸들링 Templates 페이지의 구성을 나타내는 단위 루프문으로 복수.. 2022. 10. 5. Vue.js 정리 (v-slot) slot 양보하는 기법을 사용할때 slot 을 이용한다 동적영역을 가진 컴포넌트는 구분자인 name 을 설정하면서 slot 을 넣어둔다 slot 주입하는 컴포넌트에서 template 에서 v-slot: 으로 내용을 주입한다. // slot에게 양보하는 컴포넌트 // name을 지정하지 않으면 default // slot에게 실체를 전달하는 컴포넌트 {{ title }} 본문내용 추가설명 푸터내용 export default { props: { title: { type: String, default: '대입하고 싶은 타이틀' } } } v-slot: v-slot을 동적으로 부여하고 싶을때 변수사용 가능 ... namedSlot을 좀더 간략하게 기술가능 아래와 같이 기술 가능 2022. 9. 22. 이전 1 2 다음 반응형
