본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


앵귤러, 리엑트, 뷰111

앵귤러 튜토리얼(Angular tutorial) - 32 : Validator 이번시간에는 유효성 검사에서 사용되는 Validator에 대해서 살펴보려 합니다. 우리는 예전에 반응형 폼이라는 기능을 통해서 Validator를 사용하였었습니다. * 기억이 안나면 아래글을 통해 다시한번 살펴보세요. lts0606.tistory.com/361 이러한 반응형 폼에서 사용가능한 유효성 검사와 관련된 함수는 앵귤러에서 정의된 함수 이외에 사용자가 추가로 만들어 적용 할 수 있습니다. 이를 연습해 보기위해서 새로운 프로젝트를 만들어 주겠습니다. ng new sixStudy src - app 폴더까지 이동한 다음에 아래 명령어를 입력합니다. ng g directive my_check 디렉티브(directive)는 이전시간에도 살펴본 내용입니다. my_check 이름의 디렉티브를 만들라는 내용입니.. 2020. 10. 12.
앵귤러 튜토리얼(Angular tutorial) - 31 : 디렉티브 활용 저번시간까지 라우터, 모듈 등에 대해서 살펴보았습니다. 이번시간에는 디렉티브(directive)에 대해서 동작원리를 살펴보려고 합니다. 디렉티브는 일반적으로 html 페이지에서 사용하며 자주 사용한 디렉티브(지시자)로는 ngIf나 ngFor등이 있었습니다. 디렉티브(지시자)를 활용하면 화면을 구성할 때 매우 편리하게 만들수가 있었습니다. 이러한 디렉티브(지시자)는 사용자에 의해서 만들수도 있습니다. 앵귤러의 규칙답게 디렉티브 데코레이터와 class파일을 통해서 지시자를 만들수가 있습니다. 프로젝트는 새로 만들거나 아니면 기존 프로젝트를 이어서해도 상관 없습니다. 여기서는 fiveStudy프로젝트를 그대로 사용하였습니다. 아래 명령어를 입력하여 봅니다. * 명령어를 통해 만든 디렉티브는 모듈에 자연스럽게 .. 2020. 9. 28.
앵귤러 튜토리얼(Angular tutorial) - 30 : 모듈 활용 저번시간까지 우리는 모듈과 라우터의 관계에 대해서 살펴보았습니다. 라우터는 앵귤러에서 사용자의 요청에 따른 다양한 페이지를 보여주기 위해 존재하는 기능이며, 개발자 입장에서는 다양한 모듈과 라우터를 통해서 협업을 좀 더 쉽게 해 주는 기능 입니다. 이번시간에는 우리가 여태껏 사용한 FormsModule이나 BrowserModule등 모듈에서 다른 모듈, 즉 라이브러리처럼 동작하는 모듈은 어떻게 만드는지 한번 살펴 보겠습니다. 새로운 프로젝트를 생성하여 줍니다. ng new fiveStudy 이번에도 모듈에서 라우팅 기능이 포함된 형태로 프로젝트를 생성하여 줍니다. app컴포넌트html 파일은 라우터와 관련된 테그만 남기고 전부 제거하여 줍니다. 다음으로 동작할 컴포넌트를 추가하겠습니다. 컴포넌트이름은 이.. 2020. 9. 22.
앵귤러 튜토리얼(Angular tutorial) - 29 : 모듈과 라우터 심화2 저번시간에 이어서 모듈과 라우터에 대해서 살펴 보겠습니다. 저번시간에는 app모듈에서 라우터 설정이 존재하는 모듈 2개를 추가하여 사용하였습니다. app-routing모듈, routing2모듈 각각 1개씩 추가하여 사용자의 요청에 대해서 동작하게 하였습니다. 앵귤러는 싱글 어플리케이션, SPA(Single Page Application)라고 합니다. 우리는 작업을 하면서 여러개의 클래스를 만들고, 모듈 또는 컴포넌트를 만들어 기능을 완성합니다. 그런데 앵귤러를 실제 컴파일하여 Javascript로 구성을 하면 1개의 index.html파일에 여러개의 Javascript파일이 생성됩니다. 앵귤러는 사용자가 최초 접속을 하면 모든 파일의 내용을 읽어서 사용자의 행위에 대비합니다. 만약 100개의 페이지, 1.. 2020. 9. 18.
앵귤러 튜토리얼(Angular tutorial) - 28 : 모듈과 라우터 심화1 저번시간까지 앵귤러와 파이어베이스를 활용한 방법에 대해서 살펴 보았습니다. 이번시간에는 여태껏 사용해 왔던 모듈과 라우팅에 대해서 다시한번 살펴보려고 합니다. 간만에 새로운 프로젝트를 만들겠습니다. 프로젝트 이름은 fourStudy로 하겠습니다. 매번 N을 눌렀던 부분을 이번에는 Y를 눌러서 진행하여 봅니다. 자시히는 몰라도 라우팅을 할건지에 대해 Y로 대답하였으니 라우팅하는 기능이 자동으로 들어갈 것 같습니다. 프로젝트를 구성하는 데 시간이 좀 걸립니다. 프로젝트가 구성이 되고 나면 src - app 폴더까지 이동하여 봅니다. 모듈이 2개가 되어있습니다? 일반적으로 사용하였던 app모듈말고 AppRoutingModule이라는 모듈이 생긴것을 볼 수 있습니다. 이해를 위해서 컴포넌트를 제작하여 봅니다. .. 2020. 9. 11.
앵귤러 튜토리얼(Angular tutorial) - 27, with FireBase : 권한, 파일 이번시간에도 이어서 파일업로드와 관련한 내용을 살펴보겠습니다. 그 전에 먼저 권한과 관련된 내용을 언급하고 넘어가겠습니다. 파이어베이스에서 권한과 관련된 설정을 우리는 "모두허용" 상태로 사용하였습니다. "모두허용" 상태이기 때문에 사실 인증과 관련된 내용은 넘어갔었습니다. 파이어베이스에서는 어느정도 까지는 해당 상태를 허용해 주지만 나중에 시간이 지나고 나면 보안수준이 낮기 때문에 모든 요청을 막아버릴수도 있습니다. 그러므로 "읽기"는 모두 허용 하지만 "변경"과 관련된 행위는 권한을 갖도록 해 주어야 합니다. 일반적으로 보안수준은 Rules라는 탭을 선택하여 설정 할 수 있습니다. 파이어베이스 웹 콘솔로 이동하여 아래 사진처럼 Rules를 선택하여 변경하도록 합니다. * 파이어스토어, 저장소 2개 다.. 2020. 9. 10.