전체 글53 [Angular] 03. Dynamic interface with templates Angular 공식 문서를 실습하고 정리하는 글입니다. 동적 텍스트 표시Binding은 컴포넌트와 템플릿과 데이터 간의 동적 연결을 생성한다.이 연결은 컴포넌트 데이터가 변경되면 자동으로 렌더링된 템플릿을 업데이트한다. 이중 중괄호 {{ }} 를 사용하여 바인딩을 생성할 수 있다.@Component({ selector: 'user-profile', template: `Profile for {{userName()}}`,})export class TodoListItem { userName = signal('pro_programmer_123');}출력: Profile for pro_programmer_123{{ userName() }} 은 userName 시그널의 값 ‘pro_programmer_123’.. 2025. 1. 31. [Angular] 02. Signal Angular 공식 문서를 실습하고 정리하는 글입니다. SignalAngular에서는 시그널을 이용해 state를 생성하고 관리한다.로컬 상태를 유지하는 함수를 생성하기 위해 시그널 함수를 사용한다.특징반응성: 시그널 값이 변경되면 이를 참조하는 부분이 자동으로 업데이트된다.set과 update 메서드를 통해 상태를 쉽게 관리할 수 있다.update메서드는 콜백 함수를 인자로 받는다. 콜백함수는 이전 값을 받아 새로운 값으로 반환한다.시그널은 변경 사항을 효율적으로 추적하고, 불필요한 렌더링을 방지한다.import {signal} from '@angular/core';// 시그널 생성, 초기값을 인자로 전달const firstName = signal('Morgan');// 함수처럼 호출하여 현재 값을 읽.. 2025. 1. 31. [Angular] 01. Component Angular 공식 문서를 실습하고 정리하는 글입니다. Component (컴포넌트)컴포넌트는 Angular 앱의 주요 구성 요소이다.각 컴포넌트는 더 큰 범위의 웹페이지의 일부를 나타낸다.애플리케이션을 컴포넌트 단위로 분리하면 유지보수가 용이해진다. 컴포넌트 구성 요소// user-profile.ts@Component({ selector: 'user-profile', template: ` User profile This is the user profile page `, styles: `h1 { font-size: 3em; } `,})export class UserProfile { username: string = 'John'; email: string = 'john.doe@exam.. 2025. 1. 31. [Angular] 00. 사전 준비, Angular 설치 Angular 공식 문서를 실습하고 정리하는 글입니다. 사전 준비 사항Node.js 18.19.1 이후 버전VS Code 등의 에디터CLI 커맨드 입력을 위한 터미널 Angular CLI 설치VS Code 터미널에서 npm을 통해 Angular CLI를 설치한다.npm install -g @angular/cli 프로젝트 생성ng new 명령어를 통해 프로젝트를 생성한다.e.g. my-first-angular-appng new 실행프로젝트가 설치된 폴더로 이동모든 종속성은 이 시점에 설치되어야 한다. (프로젝트 내 node_modules 폴더 유무로 확인)cd my-first-angular-app 아래 명령어로 실행한다.npm start 2025. 1. 28. [CS] 지연 로딩 / 즉시 로딩 정의데이터베이스에서 데이터를 가져오는 방식데이터베이스에서 데이터를 가져오는 시점과 방법에 따라 성능과 자원 사용이 달라진다. 지연 로딩실제로 데이터가 필요할 때 가져오는 방식필요할 때만 데이터를 가져오기 때문에 메모리 사용량을 줄일 수 있다. (불필요한 데이터 로딩 X)데이터 접근 시 추가적인 데이터베이스 쿼리가 발생하여 성능 저하가 발생할 수 있다.데이터 접근 빈도가 낮고 메모리 사용량을 줄이고 싶을 때 지연 로딩을 사용한다. 즉시 로딩데이터를 요청할 때 모든 관련 데이터를 가져오는 방식데이터를 미리 한번에 가져오기 때문에 데이터 접근 시 추가적인 쿼리가 발생하지 않는다. (모든 데이터를 미리 로딩하기 때문에)불필요할 데이터도 미리 로딩하기 때문에 메모리 사용량이 증가할 수 있다.데이터 접근 빈도가 높.. 2025. 1. 28. [CS] Persistence Context (영속성 컨텍스트) 정의엔티티 객체를 관리하는 메모리상의 저장소로, 1차 캐시, 쓰기 지연, 변경 감지 등의 기능을 통해 데이터베이스와 애플리케이션 간의 데이터를 효율적으로 관리하고 최적화하는 역할을 수행한다.특성1차 캐시영속성 컨텍스트는 엔티티 객체를 1차 캐시에 저장한다.같은 트랜잭션 내에서는 동일한 엔티티를 재사용하므로, 불필요한 DB 조회를 막을 수 있다. 쓰기 지연엔티티 인스턴스에 대한 쿼리를 바로 DB에 보내지않고 1차 캐시에만 반영한다.쿼리는 쓰기 지연 저장소에 모아둔다.동기화(Flush)할 때 모아두었던 쿼리를 한번에 DB로 전송한다.즉, 쿼리를 모아두었다가 트랜잭션이 커밋될 때 한번에 반영한다. 더티 체킹자동으로 변경을 감지하는 것엔티티가 영속성 컨텍스트에 처음 들어올 때 그 상태를 복사해 저장한다. (스냅.. 2025. 1. 24. [JS/TS] Promise와 async/await [참조] 동기 / 비동기Promise정의비동기 함수의 결과를 담고 있는 객체동기적으로 순서대로 불러야 하는 코드가 있을 때, 사용하는 함수계속 호출하면 코드가 복잡해지고 에러 처리가 어려워지는 콜백의 단점을 보완함세 개의 상태Pending: 비동기 함수가 시작하지 않은 상태Fulfilled: 비동기 함수가 성공적으로 완료된 상태Rejected: 비동기 함수가 실패한 상태Promise가 대기 상태에서 상태가 바뀌면 then(), catch() 함수를 사용하여 각각 성공과 실패 Promise를 처리할 수 있다.하지만, then() 체인을 길게 이어나가면 콜백과 마찬가지로 가독성이 떨어지고 에러 파악이 어려워진다.async/awaitasync 정의함수 앞에 붙여 비동기 함수임을 명시한다.항상 Promise 객.. 2025. 1. 23. [JS/TS] Trouble Shooting: 컴파일과 런타임 환경 NestJS로 간단한 게시판을 제작하며 CRUD기능을 구현하고 있었다. 그러던 중 Delete기능의 예외 처리를 하는 과정에서 문제가 발생했다. 위 사진들처럼 해당하는 id가 있음에도 불구하고, id를 인식하지 못하였다. 여기저기 검색도 해보고 코드도 수정해봤지만 결국 해결을 못했고,GPT에게 물어본 결과 아래 코드처럼 id 파라미터를 강제로 형변환 하는 해결책을 제시해 주었고, 문제는 해결되었다. 여기서 궁금증이 생겼다.board.id 의 타입도 사전에 number로 지정해 주었고, id 파라미터의 타입도 number로 명시적으로 지정해 주었는데 왜 타입이 string으로 바뀌는건지 이해가 가지 않았다. 여기저기 찾아보며 도출한 결과는 아래와 같다.TypeScript 코드는 컴파일환경에서 JavaS.. 2025. 1. 22. [CS] Authentication / Authorization Authentication (인증)정의사용자의 신원을 검증하는 행위방법ID, PW 입력생체 인증etc…예시웹 페이지 로그인QR코드를 통한 신원 확인Authorization (인가)정의특정 사용자가 무엇을 할 수 있는지, 어떤 자원에 접근할 수 있는지 결정하는 과정방법역할 기반 접근 제어(RBAC)권한 정책 및 설정예시데이터베이스에 대해 관리자는 읽고 쓸 수 있지만, 사용자는 읽기만 가능 2025. 1. 21. 이전 1 2 3 4 5 6 다음
