728x90 반응형 분류 전체보기231 aws 란? aws 란 아마존 웹서비스의 약자 아마존에서 제공하는 클라우드 서비스 탄생 배경 기존에는 온라인 중에서 서점만 서비스를 하는 회사였음 소비자의 배송부터 주문까지 하자 :fb 방식 이러면서 온라인 규모도 커지고 사용자가 많아짐 -> 사용자가 많아지면 트래픽이 생기기 쉬움 -> 우리 서버가 다운되지 않게 노하우가 생김 -> 이런 노하우를 상업화 하자 -> aws 사업 시작 aws 사용하는 이유 제일 많이 씀 (네이버 등) cloud Market 선구자이자 리더 1,000,000 Active Users 클라우드의 컴퓨팅의 특징과 장점을 그대로, 그 이상으로 제공 뛰어난 유연성 확장성 및 탄력성 우수한 보안성 안정성 리전 전세계에 있는 데이터센터의 기준이 되는 물리적 위치 사용자와 리전이 가까울 수록 네트워크 .. 2022. 8. 23. Cloud Computing Services Cloud Computing Services 운영 서버와 아키텍쳐 운영 서버 (production server) 우리가 개발하고 있는 서버와 다름 ( 이건 테스트 서버에 가까움) 우리가 개발하는 상품을 운영하고 배포하는 서버를 이야기 함 개발이나 테스트 목적이 아닌 실제 사용자를 대상으로 서비스 하는 서버 운영서버의 아키텍쳐 1. 단일 서버 구조 클라이언트 - 서버(애플리케이션, 데이터 베이스) 가장 단순하면서 기본적이고, 구축하기 간단한 서버 구조 전체 서비스 장애 발생 가능성이 높음 (서버 자체에 문제가 생기면 전체적인 서버 다운이 될 수 있음) 서버 자원을 효율적으로 사용하기 어려움 (서버 열어줄 동안 아무 것도 못함) 보안성이 떨어짐 (하나의 컴퓨터로 서버를 열기 때문에 여러 곳에서 요청이 들어올.. 2022. 8. 23. 쿼리스트링의 활용 페이지네이션 offset -> 보여줄 순서 limit -> 보여줄 양 예시 페이지당 10개의 아이템을 보여주는 UI를 구사한다고 했을 때 1 페이지를 보기 위해서는 0번째 이후로 10개의 아이템을 보여달라 요청해야 함 2 페이지를 보기 위해서는 11-20개의 아이템을 보여달라고 요청해야함 n번째 이후로 : offset key (start) n개의 아이템을 보여줘 : limit key (limit) -> 쿼리스트링 : ?offset=0&limit=10 // 페이지 네이션 샘플 api : "https://jsonplaceholder.typicode.com/posts" // 쿼리 스트링 예시 api : "https://jsonplaceholder.typicode.com/posts/post?_start=0&_l.. 2022. 8. 20. 쿼리스트링 1 쿼리스트링 URL의 한 부분 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용 일반적으로 URL을 통한 정보 요청은 비교적 단순한 형태이다 규모가 크고 복잡한 애플리케이션에서 단순한 형태의 요청만으로는 충분하지 못하거나 비효율적이다 예시 애플리케이션에서 취급하는 상품의 종류가 1억개가 넘을 때 유저가 list로 접근 했을 때 한 페이지에 1억개를 다 넣을 수 없음 게다가 실제 유저는 판매량 순으로 상위 10개만 보는 식의 특정된 형태의 정보를 보고 싶어 함 이떄 활용할 수 있는 것이 쿼리스트링 상품에 대한 정보를 얻고 이 API 주소로 요청한다고 했을 때 http://www.example.com/products 인기순으로 정렬된 정보를 얻으려면 http://www.example.com/pr.. 2022. 8. 19. 동적 라우팅 정적 라우팅 라우터 컴포넌트에서 미리 프로젝트에서 사용할 수 있는 경로들과 해당 경로로 접속했을 때 보여줄 컴포넌트를 모두 정의해두는 방식 복잡하고 큰 애플리케이션에서는 경로를 정해놓는 방식은 처리하기 힘든 상황이 생길 수도 있음 예시) 리스트 페이지를 기본 경로 라우터로 설정하는데 상세 페이지를 post/postid로 정해서 ex) /post/1 1번 게시물 이라 한다면 라우터 페이지에 모든 라우터를 정의해두는 정적 라우팅은 라우터를 유연하게 정의할 수 없음 -> 이를 해결하기 위해서 동적 라우팅이 나옴 동적라우팅 : 특정 규칙을 정의한 후 규칙에 부합하는 URL 이 있을 경우 해당하는 element를 보여주게 설정함 /post/ 로 시작하는 모든 URL은 상세페이지로 연결되게 설정하는 방식 /post.. 2022. 8. 19. 컴포넌트 재사용, 로그인 회원가입창 클론 예시 컴포넌트 : 재사용할 수 있는 최소 UI 단위 : 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것 : 코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 컴포넌트를 분리함 컴포넌트 분리기준 : 다양함 (밑은 예시) UI를 표현하고자 하는 컴포넌트 동작하는 로직을 담고 있는 컴포넌트 두가지 역할을 모두 담고 있는 컴포넌트 그 외의 역할을 담고 있는 컴포넌트 로그인 회원가입창 클론 중 컴포넌트 재활용 예시 ☺️ 클론을 진행하며 컴포넌트 재사용(특히 UI적인 부분)을 경험해 이를 기록하려한다 👆 구현한 로그인, 회원가입 창 html 너무 신기하게도 이 html 하나로 로그인, 회원가입을 구현할 수 있다! login 과 signup 창이 유사한 부분이 있어 id, pw 창과 그 외의 .. 2022. 8. 19. Monster 과제 (react, map함수, 컴포넌트) 슬슬 감이 잡히기 시작한 react! 프젝 전 금요일에 위코드에서 요 monster 과제를 주셨다 바로 이렇게 👆 해당 페이지에 몬스터 카드를 불러와 map 함수를 써서 각각 불러오면 되는 것! 그리고 카드 정보를 받는 컴포넌트 (여기서 맵) - CardList.js 카드 구성을 받는 컴포넌트 (카드 정보를 받아 구성을 만듬) - Card.js 각각 나누어야했다 react에서 다뤄왔던 fetch(), map() 그리고 컴포넌트 나누기를 해보는 좋은 연습 같아 여러번 실습해보았다 1️⃣ 카드 정보 가져오기 1. 카드 정보 가져오기 , useEffect ( import useState 잊지 않기) 1-1. useEffect - fatch 메서드 ( import useEffect 잊지 않기) 1-2. useE.. 2022. 8. 15. 상수데이터란? 상수데이터 : UI 구성에 필요하지만 변하지 않아 백엔드에서 가져올 필요가 없는 데이터로 UI를 확장성 있게 구성할 수 있으며 유지보수가 용이하다 특히 반복되는 구조는 map 함수를 이용해 표현하는데, 이때 상수데이터는 별도의 파일로 분리하기도 한다 변하는 데이터는 변수 데이터 변하지 않는 변수는 상수 데이터 리액트는 ui를 그리는 라이브러리이고 ui는 데이터이다. 리액트에서 데이터를 요구하면 서버 변수데이터는 응답하고 리액트는 그것을 jsx로 읽어서 ui로 나타낸다. 하지만 변하지 않는 상수데이터를 받을 땐 서버에서 받아올 필요가 없다 컴포넌트에서 상수데이터를 만들면 된다! 그렇다면 어떤 것이 상수 데이터일까? -> 홈페이지 메뉴바 같은 경우는 변하지 않으니 상수 데이터! ❗️ 변하지 않는 구조로 만든.. 2022. 8. 12. useEffect 란? React에서 side Effect의 올바른 발생 시점 const App = () => { const doSideEffect = () => // do some side effect }; // 함수 정의 doSIdeEffect() // 함수 호출 return hello world ; //jsx 리턴 } 👆 위 코드는 리턴문 위에서 하고 싶은 동작을 실행 시킨다 문제점 1. sideEffect가 렌더링을 blocking 함 코드는 위에서 아래로 읽음, doSideEffect의 동작이 끝날 때까지 jsx를 return 하는 코드로 넘어가지 않음 만약 여기서 doSideEffect가 시간이 오래 걸리는 sideEffect 라면 함수 컴퍼넌트가 jsx를 리턴하기 전까지 브라우저 상의 UI가 렌더링 되기까지 오랜시.. 2022. 8. 8. 이전 1 ··· 20 21 22 23 24 25 26 다음 728x90 반응형
