이것 저것 공부/프론트엔드 백엔드 몰입교육 (13) 썸네일형 리스트형 2일차 복습 텍스트 관련 태그 사용자에게 정보를 전달하기 가장 쉬운 방법은 텍스트를 이용하는 것이다. 대부분의 사이트에서 텍스트를 사용한다. HMTL은 텍스트를 사용자에게 전달하기 용이하도록 여러 태그를 제공한다. 텍스트 관련 태그 - 제목 제목은 다른 텍스트보다 크고 진하게 표시 자주 사용하는 스타일은 미리 태그로 정의한 것이다. h1 ~h6 순서로 크기가 작아진다. 종료태그도 있어야 한다. 텍스트 관련 태그 - 단락 웹 문서에서 단락 구분을 위해 사용 되는 태그 편집기에서 엔터키를 입력하여 줄을 바꾸더라도 웹 브라우저에서는 줄바꿈이 되지 않음 단, 한 줄로 표시할 수 없는 경우 자동으로 줄바꿈 태그 수평선을 그리는 태그로 문단이나 단락을 구분하기 위해 사용 종료 태그가 없다. 태그 HTML의 단락은 텍스트 앞뒤로.. 웹문서와 웹페이지의 차이, 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.. 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 다음
