본문 바로가기
728x90
반응형

분류 전체보기235

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.
2023.05.14, weekly memoirs weekly memoirs ✅ 이번 주에 한 일 첫 출근 전에 많이 먹기 👆 찐으로 살찜... 이번 주 내내 나가서 사람들과 고기 먹은 기억 밖에 없다...ㅎ 7월부터 위코드에서 개발 공부를 시작해 해가 바뀌고 5월이 되었으니 벌써 개발자의 꿈을 꾸게 된 지 10개월이 훌쩍 넘었다. 어떤 일이 생기더라도 무조건 개발자 해낼 거라 마음 굳게 먹고 js 들여다본게 정말 오래 전 일 같은데 아직 1년도 안 되었다 생각하니 기특하면서도 그 동안 많이 고생하긴 했다 하는 감동이.. 왔다 ㅎ 개발을 시작하며 미래를 그리는 일이 재밌어졌다 학습을 즐기는 편이긴 했지만 내일 어떤 걸 공부하고 이번 주는 어떤 걸 학습할 지 계획 세우며 즐거워하는 편은 아니었는데 개발을 시작하며 개발 관련된 공부를 계획 세우는 일이 나름.. 2023. 5. 14.
2023.05.07, weekly memoirs weekly memoirs ✅ 공부 1. script로 폴더 만들기 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "made": "cd ../../ && mkdir asdf", "erase": "cd ../../ && rm -rf asdf" }, npm run made npm run erase 터미널 명령어가 들어가는 건 똑같으니까,, 이걸 이용해 원격 서버도 해 봤다 1) 원격 어떻게 하지 여기서 5계층 세션을 씀 ssh 2) 연결해보기 환경설정 -> 공유 (몬터레이 기준) 일단 원.. 2023. 5. 7.
2023.04.30, weekly memoirs weekly memoirs ✅ 공부 1. 기업 과제를 구현하며 recoil 공식문서를 좀 뜯어보았다. 예전에 프리온보딩 과제하면서 전체 데이터를 filtering 해서 쓸 때 recoil이 그걸 간략하게 도와주는 함수가 있었던 기억이 나, 공식 문서를 훑어보았는데 아니나 다를까 아예 공식문서에 대놓고 전체데이터를 이렇게 filtering 해서 쓰면 됩니다 ^_^ 하고 투두리스트로 친절하게 적혀있어서 아주 재미나게 썼다 https://recoiljs.org/ko/docs/basic-tutorial/selectors 전체 데이터 필터링 할 때 쓰기 좋은 듯 2. 이번주는 최적화에 대해서 알아봐도 좋을 거 같단 생각이 들었다. 1) 디바운싱 리팩토링 진행하기 2) useMemo 나 useCallback 적용해.. 2023. 4. 30.
728x90
반응형

티스토리툴바