본문 바로가기

개발 공부 일지246

WAS(Web Application Server), Web server https://www.youtube.com/watch?v=70bzGTx-BH WAS = 백엔드 서버웹서버 = 클라이언트의 요청을 받고, 응답을 전달하는 역할. 이 과정에서 정적 자원은 직접 응답하고, 처리 로직이 필요한 요청은 WAS로 전달한다 기술 스택Web Server정적 파일 서빙, 프록시, 보안 설정 등Nginx, Apache, CloudflareWAS애플리케이션 로직 처리Node.js (Express), Spring, Django 등DB데이터 저장 및 조회PostgreSQL, MySQL, MongoDB, Redis 등 유튜브를 보다가 WAS 라는 용어를 접하게되어 간단히 알아보았다. 명색이 웹 개발자인데 브라우저에서 어떤 흐름으로 처리되고있는지 모르는 것들이 참 많구나 싶다..이런 개념이 있는지.. 2025. 7. 26.
axios cancellation axios 요청을 취소하는 방법을 처음으로 알게되었다. 어떠한 request가 유효하지 않을때 아래의 방법으로 요청을 취소할 수 있다. 예를 들어 검색 기능 구현 중 검색어가 짧은 시간 내에 여러번 변경되어 요청될 경우 이전의 요청은 보낼 필요가 없으므로 취소하면 리소스를 낭비하지 않을 수 있다. axios 공식문서에 나와있는 바와 같이 두 가지 cancel 방법이 있다. - signal : abortController - cancelToken (deprecated) https://axios-http.com/docs/cancellation Cancellation | Axios DocsCancellation Cancelling requests Setting the timeout property in an.. 2025. 7. 6.
[사용자의 마음을 움직이는 UX 디자인의 힘] - 김동후 사용자의 마음을 움직이는 UX 디자인의 힘이 책 『사용자의 마음을 움직이는 UX 디자인의 힘』은 에이전시, 스타트업, 대기업을 두루 경험한 현업 UX 디자이너의 현장 실무 에세이다. 이 책은 실제 UX 디자인 프로젝트를 진행하면서 겪게 되는 UX 디자이너의 고민과 생생한 경험담을 리얼하게 들려준다. 현업 디자이너들에게는 이 책은 자신들의 가려운 곳을 시원하게 긁어주고, 다양한 조직 안에서 UX 디자인의 실행 프로세스가 어떻게 작동되는지 간접 체험하는 기회를 준다. 장래에 UX 디자이너저자김동후출판맹그로브숲출판일2021.02.22 UX라는 용어는 주변에서 많이 접하고 들어봤지만, '경험 디자이너'는 꽤나 생소한 직군인 듯하다.책에서도 언급하지만 경험 디자인을 '다학제적' 분야라고 한다. 디자인, 공학, 인.. 2025. 6. 10.
체크박스 동작 방식 사용자에게 보이는 동작:체크박스는 사용자의 클릭에 따라 바로 체크/언체크 상태가 바뀝니다.(이건 브라우저와 체크박스 컴포넌트의 기본 동작입니다.)값의 바인딩:체크박스의 상태 변화는 (change) 이벤트를 통해 코드로 전달되고,이때 row.checked 같은 데이터가 업데이트됩니다.그리고 이 데이터가 다시 [checked]="row.checked"로 바인딩되어체크박스의 상태와 데이터가 항상 일치하게 됩니다. 2025. 6. 5.
$event // React 예시button onClick={e => e.stopPropagation()}> 클릭button> // Angular 예시button onClick= $event.stopPropagation()> 클릭button> $event가 자동으로 전달된다화살표함수를 쓰지않는다 1. this 바인딩React(클래스 컴포넌트):이벤트 핸들러를 메서드로 넘길 때, this가 자동으로 바인딩되지 않습니다.그래서 화살표 함수(혹은 바인딩)를 써야 합니다.Angular:템플릿에서 메서드를 호출하면 Angular가 자동으로 컴포넌트 인스턴스의 this를 바인딩해줍니다.2. 인자 전달 방식React:JSX에서 이벤트 핸들러에 인자를 넘기려면,onClick={e => handleClick(e, id)}처럼.. 2025. 6. 5.
Angular Material Table 1. Angular Material Table의 구조적 요구사항mat-table은 컬럼 정의를 로 감싸서 선언해야만,내부적으로 컬럼을 인식하고 동적으로 헤더/셀을 매칭할 수 있습니다.와 는반드시 안에 있어야 합니다.2. 왜 그냥 , 만 쓰면 안 되나요?그냥 , 만 쓰면 Angular Material이 어떤 컬럼이 어떤 데이터와 연결되는지 알 수 없습니다.처럼 컬럼 이름을 명시해야displayedColumns 배열과 매칭해서 동적으로 컬럼을 렌더링할 수 있습니다.는 실제 DOM에 렌더링되지 않으므로, 불필요한 태그가 추가되지 않습니다.순서Angular materialAngular적용 태그용례열 먼저 정의matColumnDefCdkColumnDefng-containermatColumnDef="name"->.. 2025. 6. 5.

티스토리툴바