이것 저것 공부 (23) 썸네일형 리스트형 웹문서와 웹페이지의 차이, HTML 시맨틱 태그 1일차 복습 HTML 웹 문서 웹 문서와 웹 페이지의 다른 점 웹 문서 HTML 언어로 작성된 문서이다. 웹 문서 전용 뷰어인 웹 브라우저를 통해 그 내용을 확인한다. 웹 문서는 페이지 단위로 파일에 분할하여 저장한다. 페이지마다 하나의 파일에 나누어 작성한다. 각 페이지는 하이퍼링크로 연결한다. 웹 페이지 텍스트만 저장한다. 이미지, 그래픽, 동영상 등은 별도의 파일로 저장한다. 웹 페이지는 이미지, 그래픽, 동영상 등을 파일의 이름으로 연결한다. 웹 페이지를 읽는 순서는 사용자가 결정한다. 이러한 웹 페이지는 HTML, CSS, Javascript 이렇게 3요소로 분리하여 개발한다. HTML 에러에 매우 관대하기에 문제의 원인을 찾는 것이 어렵다. 태그 이름, 속성에 대해 대소문자를 구별하지 않는다. HTML 태그와 요소.. 20일차 nesting -> 계층화 시켜서 css 구문을 관리할 수 있다. '&' 는 이전 단계와 동급으로 사용할 경우에 사용한다. router yarn add react-router-dom or npm install react-router-dom index.js 라우터 세팅 switch를 쓰거나 exact를 사용한다. switch의 경우 home을 아래에 써주어야함 안그러면 /만 보고 다 홈으로 빠짐 detail 함수 axios yarn add axios npm i axios api test는 jsonplaceholder component 설계 useEffect useEffect(콜백함수 - > dom이 렌더링 될 때 호출된다. 콜백함수의 리턴값은 dom이 사라질 때 호출된다. 두번 째 인자가 감시대상을 지정하.. 19일차 CORS 교차 출처 리소스 관련 이슈 크로스 도메인 브라우저 측 이슈이므로 아래와 같은 응답 헤더를 추가한다. 'Access-Control-Allow-Origin' : '서비스 허용 도메인' 'Access-Control-Allow-Methods' : 메써드 허용 -> * 'Access-Control-Allow-Headers' : 헤더 항목 허용 -> * 언어의 문제가 아니다. npm install --global http-server npm run build docker exec -it -d -w /home/work/aa/frontEnd_BackEnd_Study/backEnd/NodejsStudy/day18/exam04 0254e5e41460 npm run dev npx create-react-app e.. vue router, axois 18일차 router https://router.vuejs.org/kr/guide/ router.js -> view this.$router 동적 방식 -> 라우터 정의한 배열에 임포트 -> 뷰가 보일 때 로딩이 일어남 정적 방식 -> 스크립트 상단에서 뷰를 임포트 -> 어플이 시작할 때 로딩함 programable router vuex : store 관련 기능(전역변수 관리해줌) 라우터간 이동 후 값이 저장되지않는 문제를 해결하기 위함 store(vuex) vuex 가이드 state -> data 와 쓰임이 비슷하다. Vue.js 17일차 created() mounted() updated() 사용하여 훅을 건다. 리액티브하게 쓴 것이 바뀔 때까지 논 리액티브한 것은 바뀌지 않는다. 리액티브하게 쓰려면 data안에 넣어줘야함. 내부적으로 값의 변환을 원할 때에만 hook에 걸어둠 data reactive data(반응형 데이터) : data가 바뀌면 view가 바뀐다. view가 바뀌면 data가 바뀐다. :속성이름 = 변수이름 -> 변수값이 들어간다. 속성이름= 변수이름 -> 변수이름 자체가 들어간다. 쌍방간의 데이터 전달을 위해서 method @이밴트핸들러 = 메써드이름 @이밴트핸들러 = 메써드호출() @click @change @input 핸들러 함수 인자값 없이 이름만 쓰면 아래처럼 첫번째 인자로 이벤트 객체가 넘겨진다. @chang.. url과 uri의 차이 제 글에 틀린 부분이 있다면 댓글로 꼭 알려주시길 바랍니다! url(uniform resource locator) url은 uri에서 네트워크상의 경로이다. 간단하게 말해서 네트워크 상에서 해당 자원이 어디 있는지 알려주는 것이다. uri(uniform resource identifier) 즉, 인터넷에 있는 자료의 id로 유일성이 보장되어야 한다. 또한 주소 문자열로 특정 웹사이트에 이동되는 것이다. get 방식으로 id 값을 통해 웹사이트에 접근하므로 파일 위치가 아니라 url과는 다르다. 글로만 보면 제대로 이해가 가지 않으니 직접 예시를 들어 설명하겠습니다. https://sondiaa.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fpo.. 16일차 환경변수 다루기(cross-env, dotenv) npm i -D cross-env -> cross-env NODE_ENV=dev node app (실행전 환경변수로 넘기는 방식) npm i dotenv -> 실행후 환경변수에 넘어옴 -> dotenv.config() -> .env -> 파일 이름 직접 지정 -> dotenv.confing({path:"./config.env"}) 환경변수접근-> process.env express processing pipe line req(요청)-> {미들웨어(메소드가 무엇인가 등을 구분) -> 라우팅(요청이 뭔지 논리적으로 구분)} ->res(응답) 미들웨어는 use 함수를 사용하고 라우터는 express.Router 객체를 사용한다. 응답은 get, post,(pu.. 15일차 POST 큰 용량의 통신을 할 때 보안이 필요한 상황 바이너리 전송 body에 data를 넣어서 전송한다. 이와 다르게 get의 경우에는 search에 데이터를 전송한다. get의 경우 최대 2MB이므로 아주 큰 용량이 불가능하다. body는 헤더 이후에 개행 문자 두개 연속으로 뒤에 나오는 데이터이다. curl post 요청 예 curl -X POST -d "hello post" http://localhost:8090/echo -d : 바디 데이터 -X : method 선택 rest client로 POST header가 끝났으면 개행을 해야함 ### echo post test POST http://localhost:8090/echo my-custom-header : 'hi' hello rest fetc.. 14일차 전체적인 코드는 제 github 가시면 소스 있습니다. import http from 'http' //html 파일 표준 중에 하나로 {}있는 것은 export default같은 것이 없는 것 import {URL} from 'url' import fs from 'fs' // 파일 입출력을 위한 모듈과 웹서버를 위한 모듈 const port = 8080; // 서버 생성 시 같은 디렉토리에 있는 // http:localhost:8080/home.html 이런 바뀌는 html 부분만 읽어서 서버에 // 해당 파일이 있으면 보내주고 없으면 없다고 한다. http.createServer((req, res) =>{ console.log(req.url); //url을 넣어준다. console.log(req.met.. mongo db, server와 client, docker로 서비스 돌리기 13일차 같은 이미지로 컨테이너로 달라진 것만 조금씩 변경하여 사용할 수 있지만 그렇지만 데이터 베이스는 실존하는 것이기에 볼륨을 사용한다. curl 사용법 curl -i -X GET http://localhost:8080 -i 는 헤더까지 출력 -X는 method 지정해주는 것 (GET 방식, POST 방식) 대용량 파일 업로드 시에는 POST, 일반적인 로그인나 페이지의 상품 목록의 경우는 GET을 사용한다. 맨 뒤에 uri 지정 uri는 http(스키마)를 포함한 전체 요청 문장이다. 쉽게 말하면 http를 빼면 ip주소/포트/pass명 arguement url과 uri는 차이점 (제가 간략하게 조사한 내용을 담은 게시글이니 참고하시면 됩니다.) wget -> 주로 파일 받을 때 mongo db(docker.. 이전 1 2 3 다음
