전체 글 (464) 썸네일형 리스트형 앵귤러 라이브러리 - Angular Router 앵귤러는 싱글페이지 애플리케이션으로 URL경로가 바뀌지 않는데요. 하지만 앱의 구조상 페이지 분리가 필요할 때도 있습니다. 앵귤러 라우팅은 이러한 기능을 담당하는 모듈로 사용법을 알아보겠습니다. 모듈생성 라우팅을 사용하기 위해서는 라우터를 만들어야 하는데요. 라우팅을 위한 모듈을 따로 만드는 것을 권장합니다. 해당 모듈은 최초 애플리케이션을 만들 때 라우팅을 사용할 건지 물어보는데 이때 'y'를 선택하면 자동 생성됩니다 (추후 따로 생성하는 것도 물론 가능합니다). 만약, no를 선택한 경우 아래 커멘드를 통해 추가할 수 있습니다. ng new my-app --routing 라우터모듈은 아래와 같이 AppModule에 자동으로 등록됩니다. 모듈은 등록된 순서대로 위에서부터 순차적으로 발동되기 때문에 Ap.. [태그관리자] - UA 설정 (구성) 사이트에 연결된 태그관리자 아이디 확인 UA 계정에서 좌측 하단에 '관리' -> 속성 항목에 '추적정보' 선택 열린 목록에서 '추적코드' 선택 열린 창에서 '추적 ID' 복사 태그관리자 계정에서 '작업공간' -> '태그' -> '새로 만들기' 선택 '태그구성' 박스 누름 'Google 애널리틱스: 유니버설 애널리틱스' 선택 'Google 애널리틱스 설정' 항목에 '설정변수선택' -> '새 변수' 선택 UA에서 복사한 추적 ID 붙여 넣고 '저장' 트리거 박스 선택 'All Pages' 선택 후 '저장' 생성된 UA 구성 태그 [태그관리자] - GA4 설정 (구성) 태그관리자를 사용하여 GA4 구성태그를 설치하는 방법을 볼까요? HTML 삽입 미리보기할 수 없는 소스 앵귤러 라이브러리 라이브러리는 자주 쓰이는 기능들을 개별적으로 구해 놓은 코드의 집합을 말합니다 (JavaScript의 대표적 라이브러리로 Jquery 등 이 있죠). 앵귤러는 다양한 기능을 구현하게 해 주는 자체 라이브러리를 가지고 있는데요. 앵귤러 라이브러리에 대해서 알아보겠습니다. 라이브러리들 Angular Router Angular Forms Angular HttpClient Angular Animations Angular PWA Angular Schematics 참고 Angular angular.io HTML 삽입 미리보기할 수 없는 소스 카페24 구글 머천트 센터 연결 좌측메뉴 '판매채널' -> 구글 아래 '구글채널' 순으로 선택하고 구글계정으로 로그인 (구글 애즈광고 계정과 동일해야 함). 로그인 시 계정 접근 동의 여부를 묻는 데 반드시 모두 체크해 주어야 합니다. '시작하기' 선택 'SSL인증 도메인 사용' 선택 '확인'을 누르고 다음으로 '쇼핑몰 이용약관 및 환불 정책 등록 확인'을 선택하여 체크 후 '확인'을 누릅니다. '결재 서비스 제공 확인'을 선택하여 마찬가지로 체크하고 '확인'을 선택합니다. 연동할 판매자 센터를 선택하고 '연결하기'를 누릅니다. 생성된 계정이 없는 경우 'Create now'를 눌러서 생성합니다. 이후 해당 사이트의 소유권을 주장하고 사업자 주소 확인 우측에 '자세히 보기' 선택 후 체크 및 확인을 선택하고 전화번호 인증을 진행합니다 .. 모듈 (Module) 프로젝트의 규모가 커지면 코드의 양이 늘어나고 가독성이 떨어지죠. 많은 언어에서 라이브러리, 패키지 등 다양한 이름으로 같은 기능을 하는 코드들을 분산해서 저장하고 필요할 때 불러와 쓰는 방식으로 이러한 문제를 해결하는데, 자바스크립트에서도 모듈화를 통해 효율적으로 코드를 작성할 수 있습니다. 모듈은 작성된 코드를 저장하는 별개의 자바스크립트 코드인데요. 어떻게 사용하는지 알아보겠습니다. 사용방법 index.html 파일에서 불러오는 메인스크립트에 type="module"을 추가합니다. 이후 모듈 자바스크립트 파일에서 내보내기 (export)와 이를 사용하고자 하는 자바스크립트 파일 (여기서는 index.js)에서 가져오기 (import)를 통해 사용합니다. module.js function hiWorl.. 웹팩 (webpack) 개발환경의 발전에 따라 JavaScript로 주기적으로 새로운 기술을 도입하고 있는데요. 증가하는 애플리케이션의 규모에 발맞추기 위해 다른 언어들처럼 module방식의 도입하였습니다. 이는 파일 사이즈의 증가로 이어졌는데요. 이를 효과적으로 관리하기 위해 webpack이 등장하였습니다. webpack은 정적모듈번들러 (static module bundler)인데요. webpack은 모듈 간에 의존관계를 파악하여 의존성 지도 (dependency map)을 생성하고 이를 바탕으로 연관된 모듈들을 그룹화하여 번들의 수를 줄여줍니다. 주요 개념들 Entry 의존성지도를 만들기 위한 시작점으로 기본 경로는 './src/index.js'입니다. 'webpack.config.js' 파일에서 아래와 같이 설정을 통해.. 어헤드 오브 타임 컴파일러 작동원리 변환단계 코드분석 (code analysis) 코드생성 (code generation) 템플릿 체크 (template type checking) 소스코드 표본 생성하지만 변환은 하지 않는 단계. 메타데이터 문법 오류만 기록 메타데이터 오류 분석을 계속 실시하고 오류 표시 옵션 단계로 템플릿 내에 binding 문법 확인 템플릿 체크 옵션 켜기 tsconfig.json 파일에서 "strictInjectionParameters": true { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", // ... }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictI.. 이전 1 ··· 51 52 53 54 55 56 57 58 다음
