본문 바로가기
728x90
반응형

분류 전체보기238

2023.06.04, weekly memoirs weekly memoirs ✅ 공부 1. 이번 주는 일이 바빠 공부를 거의 하지 못했다 ^_ㅠ 오전에 타입스크립트 스터디 때문에 책을 읽긴 했지만 뭔가 엄청 공부한 느낌은 아닌 거 같다... 2. next.js 를 잠깐 볼 일이 생겨 들여다보았다. 서버 여는 거 공부하다 그만두었었는데 절대 경로만 데이터 가져오는 거 가능해서 목데이터는 public 폴더에 두어야하고,,, page/api 폴더는 서버를 여는 폴더라는 걸... 2시간 삽질 후에 기억이 났다 항상 기본이 부족하다는 생각이 참 크게 든다 3. 타입의 extends 구문은 도대체 언제 쓰는 것인가 하는 의문이 늘 있었는데 크기나 폰트 색깔을 props를 받는 UI를 빼놓을 때 쓰면 좋다는 걸 깨달았다 그러니까 카드라는 컴포넌트를 만들 때 css-.. 2023. 6. 4.
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.
2023.05.29, weekly memoirs weekly memoirs ✅ 공부 1. 타입스크립트 책을 지원 받아 아침마다 타입스크립트 공부를 하게 되었다. (아직 2챕터 공부중) 저녁에 책을 펼치기엔 너무 피곤해서 아침 한 시간 정도 일찍 가서 하고 있는데 생각보다 1시간이 짧아서 더 일찍 갈 수 있으면 일찍 갈 생각이다 ㅎㅎ 사실 더 일찍 가려다가 몇 번 실패했지만... 아무튼 타입스크립트를 익히고 사용한지 이제 6개월 정도 된 거 같다. 어떤 프로젝트를 구현하면서 아직 타입 때문에 시간을 많이 잡아 먹거나 크게 막히는 일은 없지만(작은 프로젝트만해서 그런 걸수도) 타입을 예쁘게 쓰는 편은 절대로 아닌 거 같다 ㅎ 이 점을 개선하고 싶은데 이제껏 타입스크립트 any만 안 쓰면 되는 거 아닌가 ^_____^ 하는 마음으로 코드를 작성했다면 이번 .. 2023. 5. 29.
2023.05.21, weekly memoirs weekly memoirs ✅ 공부 1. 컨테이너 개념이 궁금해서 간단히 도커를 공부했다. 만들어두었던 프로젝트 하나 간단히 도커에 띄워보기도 했는데 사실 프론트 코드를 왜 도커에 띄워야 하는진 크케 이해하지 못한 거 같다. 버전 관리 때문에? 문제 생겼을 때 롤백하기 위해서..? 그래도 물리적 서버 => 가상 머신 => 컨테이너 흐름을 공부하면서 "서버를 나누어서 개발한다" 는 의미를 더욱 가깝게 느꼈던 거 같다. 가상 머신에서 왜 컨테이너로 넘어갔는지 한번에 이해하기 어려웠는데 약간 리액트의 컴포넌트 재활용하듯이... 환경을 올려놓고 재활용한다는 느낌으로 이해했다... 2. 공부를 하면 할수록 cs 지식이 부족하다는 생각이 크게 들었다. 아침마다 네트워크 관련 책을 보고 있는데 쉽게 풀어놓은 책도 머.. 2023. 5. 21.
컨테이너화 컨테이너화된 애플리케이션을 배포, 관리, 확장할 때 수반되는 수동 프로세스를 자동화화는 오픈소스 컨테이너 플랫폼 컨테이너화란? => 각 애플리케이션이 동일한 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.
728x90
반응형

티스토리툴바