narlo의 Devlog

2명의 팀원과 함께 총 3명으로 아이티센 기업프로젝트에 참여하게 되었다. 아이티센1 - 표준화된 클라우드 운영 환경을 기반으로 오픈소스를 활용한 3 Tier 구축 주제를 선택하였다. 역할을 분담하여 발표를 진행하기로 했고, 5, 6번 커널과 관련된 내용을 맡았다. 5. Kernel이란? 커널은 컴퓨터 운영체제의 핵심이 되는 컴퓨터 프로그램으로, 시스템의 모든 것을 완전히 통제 운영 체제의 다른 부분 및 응용 프로그램 수행에 필요한 여러 가지 서비스를 제공 - 보안 - 자원 관리 - 추상화 커널 업데이트 이유 새로운 장치와 기술이 주기적으로 나오는 경우 커널을 최신 상태로 유지하는 것이 중요 커널을 업데이트 해야 새로운 장치와 기술을 시스템에서 정상적으로 활용 가능하며, 이전 버전에서 발견된 취약점으로부터..

프로그래머스 - 프론트엔드 미니 데브코스 NextJS ex) /posts/[id].tsx posts 디렉터리 안에 [id].tsx 파일을 만들면, /posts/1 과 같이 접근했을 때, 1 값을 router를 통해 id로 받을 수 있다 . 처음 로딩 시에만 페이지를 불러오고, 이후에는 클라이언트 사이드 렌더링 index.tsx 파일의 Head 태그 => Next가 제공 Image 태그 => 이미지를 불러올 때 최적화를 할 수 있도록 도와주는 컴포넌트 data fetching - getServerSideProps NextJS를 이용한 API 만들기 - NodeJS 기반 네이버 클라우드 - Associate 레벨 시험에 대한 팁을 제공 - 매주 월요일 오전 10시에 신규 좌석 오픈 시험유형 1. 클라우드와 ..

네이버 클라우드 보강 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..