본문 바로가기
반응형

Programming161

Angular modal 활용 Angular을 사용하여 modal을 띄우는 경우가 종종 생길 수 있다. (팝업 개념) Angular의 modal 개념을 조금 쉽게 사용하는 방법을 길게 적어보려 했으나, 요즘 인터넷 사이트의 접속 방식이 모바일이 압도적으로 많아진 현 시점에 이러한 팝업 형식은 최대한 피해야 한다. (되도록 쓰지 말고 ok, cancel 정도 확인 버튼정도나 띄울때나 쓰라는 말이다) 1. 태그로 전체 html을 묶어, scroll 가능한 모달로 만들어라. (팝업이 떳는데 스코릴이 안되면 그 얼마나 끔찍한 화면인가) 2. 1번의 태그 바로 다음 맨 위에 {{season_name}} : {{class_name}} Detail close modal-header을 추가. CSS 파일에 스타일을 .modal-header { } .. 2021. 7. 6.
<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.
웹 개발자 console.log 제대로 사용하기 console.log() ex) console.log("success") 그 때 마다 로그를 남겨 바로 확인을 할 수 있다. 하지만 물론 이것도 출력이기 때문에 배포시에는 주석처리를 하거나, 제거를 하는것이 좋다. console.log 로 여러개를 찍는 경우 깔끔하게 보이게 하는 방법 console.table() ex) console.table(찍으려는 Object) 한 번에 효과적으로 볼 수 있다. 객체를 뽑아볼 때에는 이 방법을 더 선호한다. console.error() ex) 함수.then((result) => { console.log(result) }) .catch((err) => { console.error(err); }) .catch를 하여 오류가 날 시 이 부분으로 넘어오고, 그 때에는 co.. 2021. 6. 29.
Angular scrollable modal 앵귤러 모달에서 html, css를 무슨 짓을 해도 스크롤이 안 되고 멍청하게 생긴, 화면에서 넘쳐나는 정보들이 그저 잘려서 보이지 않는 부분들을 경험했을 수 있다. 당황하지 말고, 해결책 먼저. 지금 그 html을 ...... 이거로 감싸면 된다. 끝! 2021. 6. 16.
맥북 비주얼스튜디오 vscode 꿀팁 자동 줄맞춤 : ⇧ + ⌥ + F 같은 변수 선택 : ⌘ + ⇧ + D (하나씩 선택), ⌘ + ⇧ + L (한번에 전부 선택) 탭 이동(파일 탭 창 이동) : ⌥ + ⌘ + 방향키 터미널 띄우기 : ⌃ + `(1왼쪽 물결표) 한글로 되어 있을 때에는 안 열림. 영어 입력으로 바꾸고 해야됨 글자 칠때마다 이펙트 주는 플러그인 : https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode 테마 다운로드 : https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs 2021. 5. 18.
버림, 반올림 없이 소수점 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.
<a></a> href 없이 사용하기 기본적인 태그의 사용은 의 형식으로 사용하죠. 하지만 때로는 태그를 사용하는 때에 라우팅 없이 (페이지 이동 없이) 사용하고 싶은 경우가 있다. 이런 경우의 대처 방식을 알아보죠 그 부분에 마우스를 올려놓았을 경우 클릭해서 어떠한 함수를 사용하고 싶다면 class 로 뺀 후에 .payments { color: #008fd0; } .payments:hover { cursor: pointer; } 의 형식으로 한다면, hover, 즉 마우스를 가져다 대면 커서를 저렇게 바꿀 수 있습니다. ex) 💳 카드 정보 & 결제 정보 💳 카드 정보 & 결제 정보 클릭한다면 details()라는 함수를 실행해라, 해당 text에는 밑줄이 쳐져 있게 한다라는 코드입지다. text 스타일들 애초에 밑줄이 아닌 마우스를 올렸.. 2021. 5. 11.
Angular 11 + firebase(firestore) 프로젝트 #04 - 데이터 CRUD - C addItem 구현해보기 이제까지 Read 기능에 대해서 알아보았다. 현재는 Collection 에 접근을 하는 것을 했는데 나중에 데이터가 깊어지면(하부로 쭉쭉 들어가게 되는 구조) 또 알아보자. ex) Collection/document/collection/document ... 이런 구조 나올 때. 일단 aaddItem 함수를 짜보자 서비스로 넣는게 맞다고 생각한다. 그러면 일단 ask.service.ts 파일을 가지고 작업을 한다 private collectionArray = {};// itemCollection 대신 사용할 변수 // 중간 내용 생략 getItem(db_name: string) { if(this.collectionArray[db_name]){ this.collectionArray[db_name] = nu.. 2020. 12. 14.
맥북 개발용 맥 기본 설정 1. 개발 툴 - 비주얼 스튜디오 visualstudio.microsoft.com/ko/thank-you-downloading-visual-studio-mac/?sku=communitymac&rel=16 Visual Studio for Mac을 다운로드해 주셔서 감사합니다. - Visual Studio visualstudio.microsoft.com 2. Java 설치 www.java.com/ko/download/ Download Java for Linux 사용자 컴퓨터용 Java 소프트웨어 또는 Java Runtime Environment는 Java Runtime, Runtime Environment, Runtime, JRE, Java Virtual Machine, Virtual Machine, Jav.. 2020. 12. 13.
맥북 개발 세팅 처음부터 같이 하는 설정, 화면 나누기, 빠른 검색, 터미널 꾸미기 현재 2017 맥북 프로 13.3인치, 2020 맥북 프로 터치바 15인치 사용중인데, 예전에 누나가 사용하던 개 고사양의 2015 맥북 프로 15인치를 받았다... 이제 개발을 이거로 해볼까 하느라 싹 밀고 개발 환경을 맞추려고 한다. 딱 필요한 것만 설치할 것이니 필요하다 생각하는것만 따라하길. 서론 긴 건 싫으니 바로 ㄱ 1. 윈도우 같은 화면 분할 - Magnet윈도우처럼 창을 끌어다가 위에 놓으면 전체화면, 화면 왼쪽/오른쪽 끝에 가져다 놓으면 절반 화면이 되는 프로그램시스템 환경설정 가서 ➡️ 개인 정보 보호 가서 설정을 마쳐야 됩니다. (PC마다 자동 설정이 되기도 할 것임)     2. 윈도우에서 시작 버튼 같은 검색 프로그램 - Alfredwww.alfredapp.com/ Alfred -.. 2020. 12. 13.
반응형

티스토리툴바