narlo의 Devlog

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

팀 프로젝트 구현 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..

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

프로그래머스 - 프론트엔드 미니 데브코스 React II Divider 컴포넌트 위 아래 또는 좌우로 나누는 컴포넌트로 사용 footer에 이용약관이나 개인정보처리방침 등을 넣을 때 divider를 이용할 수 있다. Skeleton 컴포넌트 로딩을 보여줄 때 사용 Flux 컴포넌트 레이아웃을 쉽게 만들기 위해 사용 기업설명회 쎄트랙아이 전민연구소, 문지연구소 인공위성, 지상국 시스템, 부품들 개발 자회사 중 영상 제공, 영상분석 서비스 개발 자회사 O 도전과 기술혼, 고객에 대한 진실, 구성원의 안녕 -> 잘 알고있으면 자소서 작성에 도움이 될 것 인재상 정직, 책임감, 배려, 성과 자체채용홈페이지로 서류접수 신입 경력 상관없이 pt면접 - 자기소개 및 경력에 대해서(10분이내) 3,4월 10,11월 공..

프로그래머스 - 프론트엔드 미니 데브코스 upload 컴포넌트 단점은 꾸밀수가 없다는 것 => toggle을 이용하여 숨기고 다른 스타일을 보여줄 수 있다. onDrop, onDragEnter, onDragLeave, onDragOver 이벤트를 이용하여 파일드롭을 구현할 수 있다. - preventDefault를 이용하여 브라우저 기본 이벤트를 막고, - stopPropagation을 이용하여 부모나 자식 컴포넌트로 이벤트가 전파되는 것을 막는다. Badge 컴포넌트 sns에서 알림 등이 왔을 때 알림이 몇개가 쌓였는지 확인할 수 있는 UI를 Badge라고 부른다. maxCount, showZero prop을 이용하여 100 이상인 경우 100+로 표현하거나, 0인 경우 표시되지 않도록 구현할 수 있다..

프로그래머스 - 프론트엔드 미니 데브코스 프론트엔드에서 검색 기능 구현해보기 https://github.com/narlo23/SW_Academy_React/tree/search GitHub - narlo23/SW_Academy_React: CNU SW Academy React 학습을 위한 레포입니다. CNU SW Academy React 학습을 위한 레포입니다. Contribute to narlo23/SW_Academy_React development by creating an account on GitHub. github.com 이모지 JSON 파일을 이용해 emoji, title, description을 컴포넌트로 만들어 화면에 띄우고, filter를 이용하여 검색을 구현하였다. 각 행을 클릭하면 이..