웹 브라우저에서 서버로 데이터를 요청할 때, 캐시가 없을 경우 데이터가 변경되지 않았더라도 네트워크를 통해 데이터를 다운로드 받아야 한다. 캐시를 사용하면 불필요한 네트워크 통신 없이 좀 더 빠른 사용자 경험을 할 수 있다. 브라우저 캐시를 적용하는 방법 1. cache-control 적용 - response header에 캐시가 유효한 시간(초)를 함께 반환해 브라우저가 해당 시간동안 캐시로 응답 결과를 저장하도록 한다. - 캐시 시간이 초과되면 다시 네트워크로 요청을 보내 응답을 가져오고 다시 유효시간동안 캐시로 저장하게 된다. (갱신) - 브라우저는 cache-control 정보를 받으면 설정된 시간동안 새로운 요청이 와도 리소스를 요청하지 않는다. - 클라이언트의 메모리 캐시 -> 디스크 캐시 순..

나는 내부 mysql을 이용하였다. * 터미널에서 mysql 실행 방법 1. mysql.server start 2. mysql -uroot -p 3. 비밀번호 입력 management 데이터베이스와 customer테이블을 생성 후 사용자들을 임의로 삽입해주었다. 우선 npm install mysql을 터미널에 입력하여 현재 프로젝트 폴더에 mysql 패키지를 설치한다. 그리고 서버에 database.json 파일을 만들어 { "host":"0.0.0.0", "user":"user", "password":"user 비밀번호", "port":"3306", "database":"management" } 위와 같이 작성해준다. 그리고 server.js 에서 database.json파일을 읽어와 데이터베이스와 연..

node.js express 를 설치하여 REST API를 구축해보았다. REST API는 최근 상당수의 웹 서버 프레임워크에서 기본적으로 지원하는 기능으로 서버와 클라이언트가 웹 프로토콜을 기반으로 하여 효과적으로 데이터를 주고 받을 수 있도록 해준다. 저번 강의에 이어서 전체 고객 목록을 불러오는 API를 구현해보았다. 터미널에 각각 npm run server 와 npm run client를 입력하면 각각의 포트가 열리도록 서버에 만든 package.json의 scripts에 작성해두었다. 서버 클라이언트 5000번 포트 3000번 포트 package.json package.json server.js app.js 클라이언트의 package.json 에 "proxy": "http://localhost:..

npm install @material-ui/core

react.js 는 자바스크립트 라이브러리로, 재사용성이 뛰어나다는 특징이 있다. 새로고침을 하지 않아도 수정된 부분이 바로바로 업데이트가 된다. 오늘은 props(property)를 통해 컴포넌트에게 값을 전달하는 방법을 공부했다. 우선 App.js에 위와 같이 유저들의 정보가 담긴 배열을 만들어준다. 그리고 위와 같이 컴포넌트 안에 customers 배열을 하나씩 탐색하기 위해 map 함수를 이용하여 모든 배열을 돈다. 이때, Customer는 미리 만들어둔 Customer.js 의 클래스이다. 여기서 구체적인 UI를 만들었다. Customer는 CustomerProfile 과 CustomerInfo로 이루어져 있다. 여기서 props를 통해 컴포넌트로 값을 받아왔다. - 처음 해보는 리액트 공부였는..

태그는 입력된 데이터를 서버로 전송한다. name 속성은 서버로 제출된 form data를 참조하기 위해 사용되거나, js에서 요소를 참조하기 위해 사용된다. 해당 폼의 이름을 명시한다. method 속성은 데이터를 전송하는 방법이다. 보안을 위해서는 POST방식을 쓰는 것이 좋다. 1. text input +) id와 name의 차이? 둘다 태그와 태그를 식별하는 기능을 한다. id는 페이지 내에서 고유한 값이어야 하며 css, js, jQuery 에 사용된다. name은 html을 통해 양식을 제출할 때 PHP에서 양식을 처리할 떄 사용된다. 따로따로 고유한 접근을 원할때는 id, 중복되는 것들을 한번에 접근하고 싶을 때는 name을 이용한다. +) label 추가 What type of protei..

https://fontawesome.com/icons?d=gallery Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 해당 링크에 들어가 원하는 아이콘을 클릭하면 아래와 같은 버튼이 뜰 것이다. 버튼을 누르면 아래와 같이 복사할 코드가 뜰 것이다. 에 아래 코드를 입력해두어야 아이콘을 사용할 수 있다. >> 아이콘 밑줄을 없애려면 text-decoration 을 none으로 주면 된다. //fa-5x의 경우 크기조절이므로 생략 가능 이제 해당 아이콘을 누르면 연결해놓은 링크로 들어갈 수 있다.

WAMP란? Windows Apache MySQL PHP의 약자로 window에서 앞의 3가지를 한번에 설치가능한 모듈이다. 1. Bitnami wamp 설치가 끝나면 아톰에 C:\Bitnami\wampstack-7.4.9-0\apache2\htdocs 해당 경로의 폴더를 추가하여 그 안에 php 파일을 생성한다. (설치할 때 비밀번호가 cmd에서 mysql에 들어갈 때 사용해줄 비밀번호니까 잘 기억하도록 하자) 2. mysql에 들어가려면 이와 같이 해주면 된다. (기본 경로는 C지만 용량 부족으로 인해 설치할 때 나는 로컬디스크 D에 깔았다.) cmd는 기본적으로 처음 위치가 C로 되어있기 때문에 D로 바꿔주고 싶다면, C:\>D: 와 같이 입력해주면 된다. 이제 아톰에서 php , mysql의 사용..

+) css는 생략! 1. 첫번째 페이지 (로그인 화면) -myFirstWeb.html 로그인 버튼을 누르면 myFirstLogin.php로 이동한다. 회원가입 버튼을 누르면 myFirstRegister.html로 이동한다. 2. 두번째 페이지 (회원가입) - myFirstRegister.html 정보를 모두 입력후 확인버튼을 누르면 myFirstRegister.php로 넘어가 해당 정보를 db에 넣어준다. 3. 세번째 페이지 (회원가입) - myFirstRegister.php 위와 같이 mysql에 만든 regiser 테이블에 POST로 받은 값들을 넣어주었다. 3. 네번째 페이지 (로그인 성공) - myFirstLogin.php 로그인을 구현할때는 세션이 필요하다. 로그인버튼을 눌렀을 시 성공하면 세..