narlo의 Devlog

네이버 클라우드 보강 Compute / Network Compute 상품 - 컴퓨터를 임대해서 쓸 수 있는 - 기본적인 서버를 생성하고 관리하는 상품 - cpu사양, 메모리 사양에 따라 요금이 변동 - 네트워크, 스토리지 요금 발생 - 서버 정지 시 컴퓨팅, 네트워크 요금은 발생하지 않으나 스토리지 비용 발생 Bare Metal Server - 단독으로 사용할 수 있는 고성능 물리 서버를 클라우드 형태로 제공 GPU Server - 딥러닝을 위한 - T4, V100 서버 타입별 특성 서버 오퍼레이션 방법 - 웹 콘솔 이용 - CLI Operation - API Operation 서버 복제 - 서버 이미지 : 기존 세팅 서버를 이미지처럼 복사해두고 추후에 복제 시 오토스케일링처럼 자동으로 복제할 수 있도록..

네이버 클라우드 Cloud DB - 설치의 번거로움을 줄이기 위해 DB의 클라우드 전환은 불가피한 흐름이다. 금융권의 경우 하이브리드 클라우드도 많이 사용 PaaS(Platform as as Service) DB - DBA는 데이터 설정에 대해서만 알면 된다. Cloud DB - 6TB까지 스토리지 자동 증가 (MSSQL, MongoDB는 2TB) - DB 백업 및 복원 - 읽기 부하 분산 지원 - 성능 모니터링 및 알람 CRUD - Create - Read - Update - Delete NoSQL(Not Only SQL) - MongoDB - Redis HOST(IP) % : Any DB 서버와 DB 서비스의 차이 - DB 서비스 안에 DB 서비스가 있다고 생각하면 됨 Application Servi..

프로그래머스 - 프론트엔드 미니 데브코스 strapi - 별도의 많은 코딩 없이 컨텐츠를 관리할 수 있도록 해줌 - 프론트엔드 개발자로서 백엔드를 쉽게 구축 가능 CRUD(Create, Read, Update, Delete) GraphQL - 데이터를 불러오는 규칙 - 데이터를 가져오는 방식이 RestAPI와 차이가 있음 - RestAPI의 한계를 극복하기 위해 등장 Over fetching - 특정 데이터를 받기 위해 필요없는 데이터까지 불러올 수 있다. Under fetching - 페이지에 필요한 데이터를 받아오기 위해 여러 API를 호출해야 한다. => GraphQL은 ? query를 이용해 필요한 데이터만 가져올 수 있다. query로 한번에 가져올 수 있다. 기본 규칙 1. POST /grap..

프로그래머스 - 프론트엔드 미니 데브코스 Redux-thunk를 이용한 비동기 통신 제어하기 ex) 서버 사이드 렌더링 MPA + ajax + pushState MPA : 사용자가 브라우저를 통해 서버에 웹 페이지를 요청하면, 서버는 HTML을 만들어 반환하는 방식 SSR 이유 - 검색 엔진 최적화 - 더 빠른 초기 로딩 속도 => 첫 렌더링 후에는 Client side 렌더링을 택하면 된다. 기존 SSR의 문제점 각각 렌더링을 위한 코드를 따로 만들어야 한다. => Isomorphic (Universal) : 같은 코드로 서버와 클라이언트에서 동일하게 실행되는 환경 서버사이드에서는 window 객체를 사용할 수 없음 => 예외처리 필요 Todo List Drag & Drop NEXT.JS https:/..

팀 프로젝트 구현 https://github.com/CNU-SW6/proj-fe/tree/mainpage GitHub - CNU-SW6/proj-fe: CNU SWAcademy 6조 frontend 레포입니다. CNU SWAcademy 6조 frontend 레포입니다. Contribute to CNU-SW6/proj-fe development by creating an account on GitHub. github.com 메뉴바 이벤트 구현 코딩테스트

프로그래머스 - 프론트엔드 미니 데브코스 SPA의 역사(Single Page Application) - 태초에는 MPA(Multi Page Application) - 2000년 초반, 그 이전 - javascript의 영향이 크지 않았음 점점 브라우저에 요구사항이 많아짐 => Ajax(Asynchronous JavaScript and Xml) 등장 - 구글 지도 : 지도를 동적으로 보여줌 페이지 이동 없이 페이지를 가져올 수 있지 않을까? - Hashbang 화면 전환 시 깜빡임이 없어지고, 로딩도 보여줄 수 있게 되었다. 문제점으로는 검색 엔진에 잡히지 않는다는 것 HTML5 History API - pushState - replaceState 페이지 이동없이 브라우저의 주소 변경 가능 pjax pus..

팀 프로젝트 구현 redux이용하기 메인페이지, 색상 선택 페이지 이벤트 구현 https://github.com/CNU-SW6/proj-fe/tree/mainpage 코딩테스트 320개 n = int(input()) a = list(map(int, input().split())) cha = [0] * n for i in range(n): cha[i] = abs(a[i] - 320) print(cha.index(min(cha))+1)

프로그래머스 - 프론트엔드 미니 데브코스 axios를 이용한 네트워크 API 실습 axios - 브라우저나 Node.js에서 사용 가능한 http 클라이언트 라이브러리 - promise 기반으로 동작 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com useReducer - u..

프로그래머스 - 프론트엔드 미니 데브코스 Firebase api, database, hosting, 데이터 분석 등 다양한 도구를 지원 Netlify 배포가 매우 쉽고 간단 github repo와 연결하도록 되어 있음 서버에 한국이 없다 => 접속이 느리다 Vercel Netlify와 비슷 한국 서버가 있어서 훨씬 빠르다 spa routing ReactDOM.createPortal - 원하는 곳으로 jsx를 위치시키고 싶을 때 사용 https://github.com/narlo23/SW_Academy_React/tree/storybook GitHub - narlo23/SW_Academy_React: CNU SW Academy React 학습을 위한 레포입니다. CNU SW Academy React 학습을 ..

프로그래머스 - 프론트엔드 미니 데브코스 타입스크립트(TypeScript) - 타입이 적용된 JavaScript - MS에서 만듦 - 장점 - 타입이 있다는 것 => 안정성 : 컴파일 단계에서 미리 오류를 감지할 수 있다. => 가독성 : 타입을 보고 무엇을 하는지 미리 알 수 있다. - 단점 - 초기 설정을 해야한다. - 스크립트 언어의 유연성이 낮아진다. - 컴파일 시간이 길어질 수 있다. (한 번 빌드해야 한다. => 빌드에 시간이 오래 걸린다.) 문법 1. 타입 주석과 타입 추론 - 변수, 상수 혹은 반환값이 무슨 타입인지를 나타내는 것을 의미 - 생략하면 컴파일 타임에 알아낸다. let a: number = 1;// 타입 주석 let b = 2;// 타입 추론 let c: boolean = fa..