반응형 angular11 Angular 앵귤러 <mat-select> 안에 체크박스 다중선택 checkbox 목록을 여러개 만들어, 여러개 (다중선택)를 선택하여 배열에 담는 것은 웹개발을 하면서 가장 빈번하게 나타나는 부분입니다. 라디오버튼을 여러개 만들어서, 선택을 하는 방법, 혹은 체크박스로 select 하는 방법이 있습니다. 일단 여러개를 입력받아 저장하는 것도 굉장히 귀찮은 일이긴 합니다. 일단은 앞으로도 계속 사용하게 될 다중 선택 기능을 확실하게 잡고 갑시다. 일단 기본적으로 다중선택 기능 구현을 확실하게 익혀두고, 두고두고 사용합니다. 기본을 익히고 나서 심화를 해봅시다. Angular 기준, 즉 typescript 기준이지만, 이 정도의 응용은 할 수 있을 것이라 생각합니다. 만일, 해당 코드를 보고 다른 언어로 변환하기가 힘들다면 댓글을 남겨주세요. 아주 기본적인 것만 적을 것.. 2021. 12. 10. HTML div 요소 정렬 mat-card 를 사용 하던 도중 button을 우측 하단에 놓고 싶었다. 하지만, 구글링을 해도 float : right 를 하면 된다는 글들이 있었다. 냅다 따라했지만 오른쪽에 위치하는건 맞는데 div 밖으로 튀어 나온다. 혈압이 터질 거 같았지만 다른 방법을 찾아 보았다. 결과만 말하고 끝내고 싶다 display: flex; justify-content: flex-end; 선에서 정리 가능. See the Pen by Junmannn (@Junmannn) on CodePen. + div 자체를 중앙 정렬하는 코드 : div 자체에 적용하는 스타일 한 줄이면 정리 가능 style = "margin:0 auto;" 2021. 8. 20. Angular url 쿼리 파라미터, 라우팅 파라미터 이전에 소개했던 앵귤러 라우팅 방법에서 컴포넌트간 데이터 전달하기가 있었다. 근데 일단 그거는 진짜 깔끔하게 보이고 말고 싶어서 그러는 경우다. 그렇다면 정석적으로 협업을 하기 위해 하는 라우팅을 알아보자. 그냥 혼자만 하려면 다 알고있어서 컴포넌트간 이동을 해도 되는 거였지. 정말 쉽지만 비응신 같은 행동이 있었지. 물론 이게 1회용이고 다시 돌아가면 안되는 부분에서는 이렇게 하는게 맞아. 하지만 우리는 이제 뒤로 돌아가더라도 모든게 다 유지가 되는 라우팅을 하려고 해 이전에 언급한 라우팅 Angular 컴포넌트간 데이터 / 값 전달하기 Angular pass data on Routing 다른 사이트들 보이 뭐 다 4~5가지의 방법이 있다 이러면서 길게 코드를 쭉 늘어놓는데 멍청한 짓 하지 말고 깰껌하.. 2021. 7. 19. <select> <option value =1> number (int), string 오류 해결 문제 발생 html 1학년 2학년 3학년 typescript selectGradeHandler(event: any) { this.grade = event.target.value; } 우리는 value = "1" 이라 하면 1이라는 string으로 저장이 될 터이니, value = 1 이라고 하거나 grade를 number나 int 와 같은 숫자의 형태로 선언을 했다면 하면 숫자로 저장이 될 것일고 믿었다. 그런데... 아니었다... 이렇게 한참을 개발하고 나중에 === (타입과 값을 동시에 비교하는 것) 로 비교를 했는데 숫자 타입이 아니라는 오류가 났다... 반년간 운영된 웹사이트에 이런 식으로 데이터가 쌓여오던 것이었다. 개패고싶다. 하지만 == 으로만 비교하면 되므로 일단 패스. 이 글을 읽게 되는.. 2021. 7. 6. Angular scrollable modal 앵귤러 모달에서 html, css를 무슨 짓을 해도 스크롤이 안 되고 멍청하게 생긴, 화면에서 넘쳐나는 정보들이 그저 잘려서 보이지 않는 부분들을 경험했을 수 있다. 당황하지 말고, 해결책 먼저. 지금 그 html을 ...... 이거로 감싸면 된다. 끝! 2021. 6. 16. 버림, 반올림 없이 소수점 2번째 자리까지 표현 $25 짜리 상품을 저렇게만 쓰면 없어보여서 25이지만 $25.00 이렇게 나타내고 싶은 경우 있다. 버림 싫다. 반올림 싫다. 그렇다면 어떻게 할까? 데이터베이스에서 가져올때 애초에 소수점 두자리까지 표현하도록 가져오겠다. 오늘도 짧고 간결하게 핵심만. 답은 .toFixed(2) 끝! 2021. 5. 18. Angular 컴포넌트간 데이터 / 값 전달하기 Angular pass data on Routing 다른 사이트들 보이 뭐 다 4~5가지의 방법이 있다 이러면서 길게 코드를 쭉 늘어놓는데 멍청한 짓 하지 말고 깰껌하고 빠르게 가자. 나는 학원 페이지 개발중이니까 그거로 설명을 한다. - 학원 페이지를 만들면 학부모 계정으로 로그인 하고 내가 학생들을 만들어. 그 학생 버튼 누르면 다음 이동 페이지에 그 학생의 상세 정보가 나와야겠지 1. www.너의홈페이지도메인.com 이런 주소가 있을때 (뭐 퍼블리시 전이라면 localhost:4200인 상태) // constructor()에서 public router: Router, 헤서 들여온 router임 classPayment(student){ this.router.navigateByUrl('/class-pr.. 2021. 5. 18. <title> 브라우저 탭 아이콘, 탭 제목 1. 브라우저의 탭 아이콘을 설정하는 방법 (난이도 1~100 중 15?) 사용하는 방법은 거의 다 비슷하고 어렵지 않은 과정이죠. 물론 다른 프로젝트를 진행하게 된다면 또 다른 부분이 필요할테지만 지금은 Angular을 사용하고 있으니, 이런 것이 있구나, 이렇게 부르는 구나 정도를 알아보고 Angular로 브라우저의 탭에 들어가는 아이콘, 즉 Favicon 을 설정하는 방법을 기록한다 Angular에서 가장 처음 프로젝트를 생성한다면 app.component.ts가 src 최상단에 생기게 된다. app.component.ts로 간다. 거기서 가장 처음 내가 한 행위는 Favicon 설정, 다중 언어를 사용하는 사이트이기 때문에 처음에 언어를 영어로 설정하는 방법을 세팅했다. → 네비게이션 바에 국기버.. 2021. 5. 12. Angular 11 + firebase(firestore) 프로젝트 #03 - 데이터 CRUD -2 기능별 관리하기 + 확인까지 이전편에서 일단 app.component.ts에서 모든 작업을 했었는데, 이러한 모든 기능들이 다 app.component에 몰려있으면 안되겟지 당연히. 모든 기능적인 함수가 main() 문에 다 때려박혀있는 지저분한 코드나 마찬가지이므로 일단은 분리를 해보자. 나는 기능별로 component로 나눠서 관리를 할 거야. 솔직한 마음으로는 이 1,2 편 작성하면서 이거 찾으려고 여기저기 다들 돌아다녔을게 뻔함...(경험) 이후 진행하다가 손쓸 수 없게 터지면 여기로 돌아오자. 초기 세팅한 코드들이라고 생각하면 됨 그럼 일단 component를 생성해야지. 이제 약자에 많이 익숙해짐ㅇㅇ cd src -> cd app 그냥 app폴더 밑에 만들으라는거고 비주얼스튜디오 내에서 내장 터미널 여는거 했었지 ⌃ + .. 2020. 12. 11. Angular 11 + firebase(firestore) 프로젝트 #02 - 데이터 CRUD(Read) -1 이전 자신이 만들어놓았던 Firestore 에 맞게 데이터 이름을 불러와야 한다. 지금 내가 하는거는 저 데이터를 바탕으로 할 것이다. 음 일단 난 저 user 이라는 콜렉선의 값을 가져오고싶어. 근데 그냥 가져오는건 이제 재미 없지. 좀 정렬을 넣어볼까? app.component.ts import { ArrayType } from '@angular/compiler'; import { Component } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection, CollectionReference } from '@angular/fire/firestore'; import { AngularFireStorage } from '@a.. 2020. 12. 11. Angular 11 + firebase(firestore) 프로젝트 #01 - firestore 연결 앞서 진행했던 내용들이 있는데 이거랑 상관 없으니까 쫄지 말고. 이 게시물만 봐도 Angular 최신 버전이랑 firebase 연동함. 처음 내용은 개념 다시 복습하고 넘어가는거임 일단 짚고 넘어가자 모듈 : 컴포넌트 관리. : 각종 정보(서비스, 일반 객체 등)를 제공. : 다른 사용자가 만든 모듈을 등록(import)하여 사용하기 위해서는 내가 만든 모듈에 등록. -> 기억 나지? imports: [] 안에 쓰면 자동으로 맨 위에 import {} from 추가 되던거 컴포넌트 (ng g c 컴포넌트이름) : 화면구성. : 화면에 대한 모든 기능을 담당. : 컴포넌트간의 데이터 - 컴포넌트에서 속성이나 Input 또는 Output같은 데코레이터 사용. : 컴포넌트간의 데이터 공유는 서비스를 통해 구독.. 2020. 12. 10. 이전 1 다음 반응형
