분류 전체보기

HTML/JavaScripts API 이용하기

자바 스크립트를 이용한 API 데이터 요청 - POST 1) XMLHttpRequest - XMLHttpRequest 함수를 불러옵니다. - open 함수를 이용하여 타입(get, post, update, delete)과 주소를 지정합니다. ※ 데이터 요청시 해당 백엔드에서 Access-Control-Allow-Origin으로 접근을 허용해야 데이터를 얻을 수 있습니다. 2-1) 데이터 요청(데이터 포함 x) - send 함수로 데이터를 요청합니다. - 전송 성공시 데이터(json)를 받고 데이터를 처리 2-2) 데이터 요청(json형태 데이터를 전송과 요청) - 요청 할때 필요한 헤더를 지정해줍니다. - 데이터를 json형태로 파싱하고 데이터를 보내면서 요청을 합니다. - 전송 성공시 데이터(json)..

aws 이용 팁

AWS 꿀팁 저장용 1. AWS로 웹 서버 운용시 팁 1) 웹서버 이용 IP주소확인 2) 웹서버 인바운드 설정(기본적으로 22포트- ssh만 열려있음, 80 or 443포트를 따로 열어 주어야함) 2. AWS Route 53 팁 Hosted zones에서 A타입으로 레코드 생성

react 컴포넌트, props

react 컴포넌트 react 컴포넌트는 재사용을 위해 jsx, 자바스크립트 확장 파일을 이용하여 프로그래밍하는 것입니다. 위 소스코드는 create-react-app을 이용해 만든 기본 구조인데, index.js는 app.js라는 컴포넌트를 가져와서 단순히 이라는 태그로 app.js 컴포넌트를 사용할 수 있습니다. 임의로 Temp라는 컴포넌트를 만들어 index.js에 추가를 하였더니 정상적으로 컴포넌트가 추가된 것을 확인할 수 있습니다.

css 반응형 웹 Flex 시작하기

CSS Flex vs Grid Grid는 Flex보다 늦게 나온 기술로 Flex로 구현가능한 대부분을 구현할 수있다. 하지만 두가지 모두알고 적절한 상황에 적절하게 사용하는 것이 중요하다. reset.css 기본 html 태그 속성들의 값을 모두 없애주는 css 파일 https://meyerweb.com/eric/tools/css/reset/ Flex 레이아웃 기본적인 HTML 구조 (1) 컨테이너에 적용 속성 1) display: flex 내용물의 width 만큼만 차지한다. 좌 -> 우로 이동하는 축이 메인축, 위 -> 아래로 이동하는 축은 교차축 2) 배치 방향 설정: flex-direction 아이템들이 배치되는 축의 방향을 결정, flex-direction: row; 기본 값, 메인축을 좌에서 ..

CSS 미디어 쿼리

CSS 미디어쿼리 css2에서 도입된 미디어 타입 규칙 휴대폰, 태블릿, PC의 각 장치의 화면 크기에 맞게 유연한 구조를 만들기 위한 도구 미디어 쿼리 사용방법 소스코드: min-width 보다 커지면 해당 값으로 변경 실행결과 소스코드: max-width 보다 값이 작으면 해당 값 적용 실행결과

react란 무엇인가?

1. React JS란? React는 라이브러리이다. React는 유저인터페이스를 만들기 위한 도구이다. AJAX, Controller, Route 기능을 제공하지 않음, 하지만 다른 라이브러리를 사용하여 구현 가능 virtual DOM 기존 DOM 조작은 비효율적이고 속도가 느리다. view에 변화가 생긴다면 virtual DOM에 적용되고 DOM에 적용시킨다. 유지보수가 가능한 어플리케이션 제작에 도움을 주는 도구 2. React JS 장점 Component 하나로 모든것을 관리 뛰어난 Garbage Collection 및 메모리 관리 성능 매우 간편한 UI 수정 및 재사용 다른 프레임워크나 라이브러리와 함께 사용이 가능 서버 & 클라이언트 렌더링 JavaScripts는 클라이언트 렌더링만 지원 서버..