본문 바로가기

분류 전체보기280

[220317] websocket (웹소켓) 개념 정리 기존 지식 정리 1. HTTP (HyperText Transfer Protocol)란? 인터넷에서 데이터를 주고받을 수 있는 프로토콜(규칙) HTTP 요청 (request) 웹 페이지를 열고 폼에 내용을 입력하면 웹 서버와 웹 브라우저가 데이터를 교환한다. 웹 브라우저는 데이터 헤더를 붙여 오픈할 웹페이지의 주소를 웹 서버에 요구한다. HTTP 응답 (response) 웹 페이지의 요청을 받은 웹 서버는 서버 정보 or 처리 결과를 나타내는 오류 코드와 메시지의 헤더를 웹 페이지 콘텐츠에 붙여 응답한다. 2. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받.. 2022. 3. 17.
[220317] 티스토리 캘린더 위젯 / 색상, 여백 세부 조정 의도 그간 기록한 결과를 달력별로 깔끔하게 모아보고 싶다. 과정 https://tistory.noo9ya.com/67 Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력 이번 시간에는 "사이드바 달력" 모듈입니다. 제 경험상 티스토리 블로그에 달력을 노출하는 사람은 많이 못 봤지만 그래도 없는것보단 있는게 낫지 않을까 싶어서 달력도 만들어 보도록하겠습 tistory.noo9ya.com 포스팅한 기록을 날짜별로 볼 수 있는 달력형 위젯을 알게 되어서 적용했다. 내 티스토리 컨셉색에 맞게 색 변경이랑 여백을 세부 조절함. html 코드에서 header 안에 작성할 코드 CALENDAR css 코드 안에 작성할 코드와 세부조정건 * calendar */ //아래에 여백을 46px를 줌 ... 2022. 3. 17.
[220318] 연극 예매사이트 팀플 기록) 1. 사전회의 220318 사전회의 팀프로젝트의 목표 : DB기능과 스키마 활용을 빛낼 수 있는 사이트 만들기 프로젝트 기간 : 3주 현재 하고있는 작업 원래 오래만져야하는건 예뻐야 할 마음이 생기는 법이라 어떻게 아웃풋을 짤까 레퍼런스 찾아보는중. 씐난다씐난다 예쁜 디자인을 보고 만드는건 언제나 신난다 내가 그런걸 못 만들어서 그렇지 어차피 상업적인거 하는것도 아니고, db 만드는거니까 마음놓고 레퍼런스 뒤져서 대충 틀을 짰다. 팀 주제 : 정원 페이지 목적 : 정원이라면 역시 나무지. 가드닝하는 커뮤니티 페이지를 만든다 가정하고 게시물 짜야지. 컬러칩 : 명도 낮고 채도가 살짝 낮은 진초록이랑 깨끗한 이미지를 주기 위해서 흰색이랑 아주 연한 회색, 검은색 상징적 숫자 : 6, six (팀 번호가 6번이라서) 대체로.. 2022. 3. 15.
[220314] Error: listen EADDRINUSE: address already in use :::4001 문제해결 / mac, 맥북 해당 :4001라는 포트로 이미 사용중이라고하는데, 프로그램은 이거 하나 돌리고 있는 중인데요. 검색해보니 강제로 종료되거나 알 수 없는 이유로 종료되면 지 혼자 이렇게 오류가 떠돌아다닌다고 한다. 강제로 꺼주자. sudo lsof -i :오류포트 // 오류 포트 찾기 sudo kill -9 [오류코드] //오류 포트 삭제 이 과정을 거치면 문제없이 다시 돌아간다. 2022. 3. 14.
[220314] API / 인터페이스 / UI API(Application Programing Interface)란 응용프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스. 사람의 입장에서 사용할 수 있는 인터페이스가 키보드, 마우스라고 한다면 프로그램 입장에서 사용할 수 있는 인터페이스는 함수들인것. (alert(), console.log() 등등...) 인터페이스란? 시스템끼리 정보를 교환하는 공유 수단, 방법. 스마트폰을 조작하기 위해 누르는 터치스크린, 기계를 끄기위한 리모콘을 생각해보자. 리모콘은 기계와 통신할 수 있도록 기계에 정의된 규격에 의해 특정 신호를 보낼 수 있도록 만들어진 장치 이런 신호를 주고받는 방법을 인터페이스라고 한다. UI(User Interface)란? 사용자와 .. 2022. 3. 14.
[220314] 미들웨어 body-parser와 cookie-parser body-parser node.js의 모듈 중 하나이며, post request body에서 파라미터를 편리하게 추출해주는 미들웨어다. app.post('/login',(req,res)=>{ console.log(req.body) } 가장 흔하게 쓰는 예시인 req.body는 사실 body-parser를 사용하지 않는다면 디폴트로 설정된 Undefined값이 나온다. 그래서 이 값을 읽어오기 위해 필수적으로 body-parser 라이브러리를 설치해야만한다. 하지만 express에 body-parser가 기본적으로 포함되어있으므로 express만 설치해주면 같이 사용이 가능하다. cookie-parser node.js의 모듈 중 하나이며, request 객체에 cookie 속성을 부여하는 미들웨어다. ke.. 2022. 3. 14.
[220307] 서로 다른 서버끼리 통신하기(CORS, Access-Control-Allow시리즈) 브라우저의 보안을 지켜주는 동일 출처 정책 SOP 기본적으로는 다른 서버끼리는 서로 통신하지 못한다. 4001번 포트로 연결되어있는 서버에서 3001포트로 연결하려고하면 에러가 뜬다. 같은 출처끼리만 리소스 공유나 접근을 허용해주는 동일 출처 정책 때문이다. //localhost:4001에 연결되어있는 서버 const btn = document.querySelector('#btn') btn.addEventListener('click',async ()=>{ alert('버튼클릭') let response = await axios.get('http://localhost:3001') console.log(response.data) }) 출처(Origin)란? http://127.0.0.1:5500/index... 2022. 3. 14.
[220307] 응답코드를 여러가지 방식으로 작성하기 (fetch, axios, async/await) 작성할 코드의 조건 1. 아이디의 중복여부를 중복체크 버튼을 눌러 확인하자 2. 중복일 경우는 2, 중복이 아닐 경우는 1을 반환하는 코드를 작성하기 3. 회원가입 버튼을 눌러서 입력한 아이디, 패스워드 입력한 값을 보여주는 화면을 만들자 코드가 들어갈 자리 document.addEventListener('DOMContentLoaded',init) function init(){ const btn = document.querySelector('#idcheck_btn') const userid = document.querySelector('#userid') const msg = document.querySelector('#msg') btn.addEventListener('click',clickHandler).. 2022. 3. 10.
[220304] 간단히 보는 AJAX 개념 [목록] 1. AJAX란? 2. 비동기통신 코드 만들기 1. AJAX(Asynchronous Javascript And XML)란? 브라우저에서 url의 이동 없이(새로고침 없이) 서버에 요청하는 행위. 페이지 전체를 다시 작성하지 않고도 필요한 데이터만 받아서 일부만 업데이트 되는 비동기 자바스크립트. 간단히, 브라우저에서 돌아가는 자바스크립트가 사용할 수 있는 객체라고 알면 된다. 사용하는 기본 내장 객체로는 XMLHttpRequest이 있다. XML은 데이터 통신을 하는 옛날 형식을 말한다. 요즘은 JSON으로 대체되고 있다. 엘리먼트 형태인 XML보다 객체형태인 JSON으로 작성했을때 코드 길이가 1.5배가 줄어들기 때문. 통신할때 html보다는 데이터만 주고 받음. 그 데이터를 받는 형태가 옛날.. 2022. 3. 10.
[220304] AJAX를 응용해서 입력값 받아오기 [목록] 1. ajax를 사용하여 로그인 정보 받아오기 2. 비동기통신 코드 만들기 3. 비동기통신으로 받아온 값을 출력하기 1. submit버튼을 누를때 form이 시작되지 않게 만들고 싶음. = submit을 누를때 액션값으로 이동이 안되게 하고싶음 = 이 곳에서 submit이나 form을 조작할 수 있어야 가능함. = 코드를 언제 실행시킬지 시점을 잡을 수 있어야함. //DomContentLoaded : body영역까지 html 렌더링이 끝난 후에 init이 실행됨. document.addListener('DomContentLoaded',init) function init(){ } 1.1 DomcontentLoaded 이벤트 작성 1.2 form 가져오기 or 조작할 수 있는 환경 만들기 1.3 d.. 2022. 3. 4.

티스토리툴바