728x90 반응형 TIL147 기명함수 / 익명함수 기명함수는 호출될 때 호이스팅이 발생함 함수를 선언하기 전 / 후 호출 가넝 함수 호출이 좀 복잡해질 수 있음 그래서 태어난 익명 함수 변수에 담고 넣으면 선언한 후에만 호출 가넝 2023. 6. 21. api gateway 클라이언트 - api gateway -(...)- 서버 api gateway 다른 네트워크로 들어가는 입구 역할을 하는 네트워크 포인트이다. 하나의 프로그램에 여러개의 서버가 있을 때 => 각각 도메인이 다를 수가 있음 클라이언트에서는 api를 호출하는 많은 코드들이 있음 -> 서버 두 개를 통합한다고 했을 때 프론트엔드는 통합된 코드를 찾아서 하나하나 다 고쳐야 됨 -> 비효율적 이때 api gateway 를 도입하는 것 api gateway는 자신만의 주소를 가지고 있음 예를 들어 example.io => 클라이언트는 "example.io/a" "example.io/b" "example.io/c" 형식으로 요청 => api gateway는 경로 별로 어떤 api 서버와 연결할 지 설정 => 서버가 통.. 2023. 6. 6. react) typescript 에서 svg 파일 어떻게 쓰나요 svg 코드 복사해서 파일명.svg 만들고 다른 컴포넌트에서 이미지 불러오듯 import 하면 됨 => 하지만 typescript 경우 모듈에서 타입을 선언해줘야 가넝 something.d.ts declare module "*.jpg"; declare module "*.png"; declare module "*.jpeg"; declare module "*.gif"; declare module "*.svg"; .d.ts. 만 붙이면 알아서 모듈 추가됨 2023. 5. 30. 컨테이너화 컨테이너화된 애플리케이션을 배포, 관리, 확장할 때 수반되는 수동 프로세스를 자동화화는 오픈소스 컨테이너 플랫폼 컨테이너화란? => 각 애플리케이션이 동일한 OS를 공유하되, 별도의 독립된 공간에서 실행되도록 하는 것 물리적 배포 서버 => 가상 머신 => 컨테이너 배포 1. 물리적 서버 단점 서버 하나에서 여러 애플리케이션이 돌 경우. 하나의 애플리케이션이 대부분의 리소스를 차지하고 있을 때 그 외의 다른 애플리케이션의 성능이 떨어짐 그래서 2. 가상화 배포 시작함 가상화 배포 (VM) => 하나의 물리적 서버에 다수의 가상 머신을 구축하는 방법 가상화를 통해 각 애플리케이션은 가상 머신들 위에서 독립적으로 구동함 => 애플리케이션끼리 영향을 받지 않음 자원 효율성이 상대적으로 낮아서 많은 자원이 낭비.. 2023. 5. 21. 클로저 const order = (food) => { return (drink) => console.log(`음식 : ${food}, 음료 : ${drink}`) } let a = order("밥") a("콜라") a("사이다") class Car { constructor(name,price){ this.name = name this.price = price this.place = "판교현백" } applyDiscount(discount) {return this.price*discount} changePlace(placeName) {return this.place = placeName} } const instance = new Car("EUNJI",2000) const ab = () => { instance.c.. 2023. 5. 19. Web Server와 WAS Web Server / WAS (web application service) 정적 페이지 / 동적 페이지 정적 페이지 : 항상 동일한 페이지를 반환하는 페이지, image 등 동적 페이지 : 동적인 content를 반환하는 페이지 WAS web Sever + web Container was 를 사용하면 여러 개의 트랜잭션(논리적인 작업 단위) 관리할 수 있음 트랜잭션 : 쪼갤 수 없는 업무 처리의 최소 단위 : 여러 개의 요청 실행시 하나라도 실패하면 rollback 하는 거 ex) 친구한테 돈 보낼 때 내 통장 출금 -> 친구 통장 입금 여기서 친구 통장 입금 절차가 실패했을 때 내 통장에 출금 되지 않아야하기 때문에 rollback 하는 것 그림처럼 was 자체가 웹서버의 기능을 가지고 있음 그럼 w.. 2023. 5. 18. docker 이미지 / 컨테이너 만들기 도커(Docker)는 리눅스의 응용 프로그램들을 프로세스 격리 기술들을 사용해 컨테이너로 실행하고 관리하는 오픈 소스 프로젝트이다. 쏘큐트 도커 아이콘 런캣 옆에 있으면 넘나 귀엽다 프론트에서 왜 도커? => 환경 맞춰서 개발 / 배포 가능하기 때문 1. 도커 다운 -> 로그인 -> 실행 2. 도커 이미지 만들기 프로젝트 root 파일에 2-1. touch Dockerfile 후 기입 # 가져올 이미지를 정의 FROM node:14 # 경로 설정하기 WORKDIR /app # package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함) COPY package.json . # 명령어 실행 (의존성 설치) RUN npm i # 현재 디렉토리의 모든 파일을 도커 컨테이너의 워킹 디렉토리에.. 2023. 5. 18. 낙관적 업데이트 & finally() 낙관적 업데이트 => 서버에 요청을 보내고 받기 전에 요청되었을 거라 낙관적으로 판단-> 빠르게 UI 그리기 를 위해 바뀐 데이터를 get하기 전 미리 UI를 그리는 것 예를 들면 todoList 만들 때 삭제 후 전체데이터에서 삭제된 데이터만 빼고(filter 사용) UI를 그리는 것 리액트 쿼리가 사기라더니 리액트 쿼리는 낙관적 업데이트도 해준다고 한다 useMutation 사용하는 건데 혹시 그 사이 발생할지 모르는 리패치를 취소 시킴 미리 업데이트 전 데이터를 변수에 담아놓고 (요청이 잘못될 수도 있으니까) setQueryData 를 이용해 쿼리를 업데이트 해줌 (todolist add라 했을 때 스프레드 ) => 서버 응답이 오기 전에 UI를 미리 업데이트함 요청이 잘못될 시 => onError.. 2023. 5. 15. e.target, e.currentTarget 차이 e.target, e.currentTarget target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환함 => 클릭이 일어난 바로 그 요소 currentTarget은 이벤트가 부착된 부모의 위치를 반환함 => 클릭이 일어난 요소부터 상위로 올라가며(버블링) 이벤트 핸들러가 등록된 요소를 가리킴 1. button 안에 자식 없을 때 2. 하위 div 만들었을 때 target은 하위를 가리킴 3. 하위 div 2개일 때 target : 가장 하위(secondChild)를 가리킴 currentTarget : button 을 가리킴 4. 하위 div 5개 만들어봄 target : 가장 하위(fifthChild)를 가리킴 currentTarget : button 을 가리킴 .. 2023. 4. 30. 이전 1 ··· 4 5 6 7 8 9 10 ··· 17 다음 728x90 반응형
