본문 바로가기
반응형

Angular14

Angular 12 DB연결해서 게시판 만들기(CRUD)(1) 어디 블로그를 뒤져봐도 Angular의 가장 최신버전에서 Node.js로 DB연동해서 작은 게시판을 만드는 튜토리얼같은 예제가 없고 복사 붙여넣어봐도 제대로 작동하지 않아서 외국 사이트들을 뒤져보다가 발견한 후 최대한 분석하면서 공부해봤다. 한국에서 Angular의 시장은 크지 않지만 그래도 아예안쓰는 것도 아닌데 왜이렇게 공부할 예제가 없는지모르겠지만 내가 찾고 직접 해보면서 작성하면 되지않는가 싶었습니다. 아마 저처럼 Angular를 이용해서 미니 게시판을 만들어 보며 공부하고싶은 사람들이 있을것같아 주석도 최대한 달면서 작성해봤으니 같이 공부 해봅시다! 기본 셋팅 일단 기본적으로 어떤것을 사용하는지 알아봐야하는데 가장 인기있는 Node.js 웹 프레임 워크 Express 당연하게도 Node.js는 .. 2021. 8. 26.
Angular 컴파일 개념 (AOT vs JIT) 규모가 큰 프로젝트를 처음 접근하면서 ng serve를 하면 어떨때에는 빠르고 어떨때에는 느리게 생기는 이유가 뭘까 하며 생각하다가 공부하게된것인데 Angular에서는 다양한 상황에 따른 컴파일 설정을 바꿀수 있었다. 그러기위해 Angular.io를 뒤져보며 찾은것을 적어보겠습니다. 💡 Angular에는 컴파일 종류가 2가지로 JIT(Just in Time)과 AOT(Ahead of Time)가 있는데 JIT은 런타임 컴파일을, AOT는 미리 컴파일을한다. JIT 컴파일 💡 JIT은 실제 애플리케이션이 브라우저에서 실행되는 순간에 코드에 대해 컴파일을 진행한다 사용자가 브라우저에 접속하게되면 모든 소스코드를 서버에서 로드해오면서 실행되기 직전에 컴파일을 진행한다. 실행 직전에 컴파일을 하기때문에 에러를 .. 2021. 8. 25.
Angular에서 생명주기(Life Cycle) 오늘 공부하게 되었던 내용은 Angular에서 사용되는 생명주기 그중에서도 라이프사이클 훅 메서드들에대해서 사용하게되었습니다. Angular.io에서 여러가지 문서를 보면서 정리한내용입니다. **LifeCycle hooks** 컴포넌트와 지시자는 생명주기(Life Cycle)를 가지고있는데 , 생명주기 안에서는 특정 시점에 훅 메서드(hook method)를 호출할 수 있다. 컴포넌트 인스턴스는 Angular가 컴포넌트 클래스의 인스턴스를 생성한 시점부터 미리 정의된 Life Cycle에따라 화면에 렌더링되며 동작합니다. 라이프 싸이클 **단계에 따라 화면에 렌더링** 되고 자식 컴포넌트를 화면에 추가합니다. 컴포넌트가 동작하는 동안 프로퍼티로 바인딩된 **데이터가 변경되었는지 감지**합니다. 값이 변경.. 2021. 8. 23.
Angular 파일 구조 간편정리(완전 기초) Angular를 새롭게 공부하면서 가장 큰 문제는 무엇을 모르는지 이 파일은 무슨역할을하고 내가 작성한 이 파일은 무엇을 의미하는지에 대해 파악하는것이 첫번째 할일이라고 생각하게되어서 Angular CLI를 통해 프로젝트를 생성한 후 Default로 생기는 개발환경 파일들 프레임워크의 용도를 파악하며 공부하였습니다. 조금이라도 이해가지 않았던 부분들을 하나하나 따로 빼서 작성해놓았으니 단어가 생소하다 생각되는 단어들은 확인하면서 쭉 한번 읽어보시면 도움이 될 것 같습니다. src 폴더 내부 파일명(폴더명) 설명 /app(폴더) Angular의 모든 주요 구성요소가 위치하며 root 즉 애플리케이션의 최상위 폴더정도로 보면 될것같다. /app/app.component. * .ts, .html, .css, .. 2021. 8. 21.
728x90
반응형