narlo의 Devlog

프로그래머스 - 프론트엔드 미니 데브코스 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 메뉴바 이벤트 구현 코딩테스트

5회차(2023.02.02 19:00 ~ 22:00) 오늘의 목표 1. 프로그래머스 강의 1. 프로그래머스 강의 Redux Todo 프로젝트 Redux로 리팩토링하기 라이브러리 추천 redux-logger - 상태가 변경될 때 console에 log를 찍어주는 middleware 라이브러리 npm i redux-logger npm i @types/redux-logger redux-devtools-extension - redux의 상태를 편하게 보고 추적할 수 있다. npm i redux-devtools-extension redux-persist 상태가 localStorage나 sessionStorage를 통해 남아 있을 수 있도록 도와주는 middleware 라이브러리 npm i redux-persist..

프로그래머스 - 프론트엔드 미니 데브코스 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..