티스토리

7 o'clock

검색하기

블로그 홈

7 o'clock

tpghks9245.tistory.com/m

tpghks9245 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

API API가 뭐냐? Application Programming Interface 다른 애플리케이션에서 현재 프로그램의 기능을 사용할 수 있게 함. 웹 api: 다른 웹 서비스의 기능을 사용하거나 자원을 가져올 수 있게 함. 다른 사람에게 정보를 제공하고 싶은 부분만 api를 열고 제공하고 싶지 않은 뿐은 api를 만들지 않으면 됨. api에 제한을 걸어 일정 횟수 내에서만 가져가게 할 수도 있음. 그럼 API를 왜써? 사용자들이 서버에 직접적으로 요청사항을 전달할 경우, 각자 다른 방식으로 전달된다. 해당 과정을 매우 비효율적이며 서버에 부하가 걸릴 수 있다. 해당 과정을 방지하고자 API를 통해 일종의 rule을 정하고 효율적으로 정보를 주고받을 수 있도록 도와주는 것이다. 공감수 0 댓글수 0 2022. 5. 8.
express 서버 사용하기 express http 모듈로 웹 서버를 만들 때 코드가 보기 좋지 않고, 확장성도 떨어짐. - 프레임 워크로 해결. - 대표적인 것이 Express(익스프레스), Koa(코아), Hapi(하피). - 코드관리도 용이하고 편의성이 많이 높아짐. 미들웨어 클라이언트에게 요청이 오고 그 요청을 보내기 위해 응답하려는 중간에 목적에 맞게 처리를 하는 함수(?). 라우터에서 중복되는 코드 제거 가능. const express = require('express'); // express서버 const path = require('path'); // 경로처리를 위해 const app = express(); app.set('port', process.env.PORT || 3000); app.use((req, res, .. 공감수 0 댓글수 0 2022. 4. 25.
npm2 npm i -g rimraf (rimraf 글로벌 설치, 명령어로 사용할 수 있음 ex)rimraf) 뭔가를 삭제하는 모듈. 다만 이 방식으로 하면 package.json에 추가가 되지 않음. 아래의 방식으로 설치하는게 좋다 1. npm i rimraf -D (rimraf 설치) 2. npx rimraf node_modules (글로벌 명령어로 사용하기 위함) # 글로벌 설치는 지양하자! 공감수 0 댓글수 0 2022. 4. 25.
npm npm Node Package Manager - 노드의 패키지 매니저 - 다른 사람들이 만든 소스 코드들을 모아둔 저장소 - 오픈 소스 생태계 - 이미 있는 기능을 다시 구현할 필요가 없어 효율적 package :npm에 업로드된 노드 모듈 npm init - package.json 만들기 npm -v (버전확인) npm run test (에러를 발생시키고 종료하는 코드) npm i express (오픈소스 서버 설치) npm i cookie-parser body-parser (각종 패키지 설치) npm i -D nodemon (각종 패키지 설치) dependencies - 배포할때까지 사용되는 패키지 devDependencies - 개발할때만 사용되는 패키지 { "name": "npmtest", "ve.. 공감수 0 댓글수 0 2022. 4. 25.
노드 - Promise 프로미스 자바스크립트 비동기 처리에 사용되는 객체. - 서버에서 받아온 데이터를 화면에 표시할 때 주로 사용한다. 프로미스의 상태 new Promise() - 프로미스를 생성 이후 3가지의 상태를 가짐. pending(대기) - 비동기 처리 로직이 아직 완료되지 않음. fulfilled(이행) - 비동기 처리 완료. 결과 값이 반환됨. rejected(실패) - 비동기 처리중 오류가 발생하거나 실패한 상태. new Promise(); 해당 메서드를 호출하면 대기 상태로 전환됨. 해당 메서드를 호출할 때 콜백함수를 선언할 수 있다. ex) new Promise(function(resolve, reject) { }); -------- new Promise(function(resolve, reject) { r.. 공감수 0 댓글수 0 2022. 4. 21.
노드 - 쿠키 쿠키의 필요성 - 누가 요청을 보냈는지 모름(IP 주소와 브라우저 정보 정도만 앎). - 로그인을 구현하면 됨. - 쿠키와 세션이 필요. 쿠키: 키 = 값의 쌍 - name = zerocho - 매 요청마다 서버에 동봉해서 보냄. - 서버는 쿠키를 읽어 누구인지 파악. 쿠키 넣기 구현 writeHead : 요청 헤더에 입력하는 메서드. Set-Cookie : 브라우저에게 쿠키를 설정하라고 명령. 쿠키: 키 = 값의 쌍 name = john 매 요청마다 서버에 동봉해서 보냄. 쿠키 서버 만들기 cookie.js const http = require('http'); http.createServer((req, res) => { console.log(req.url, req.headers.cookie); res... 공감수 0 댓글수 0 2022. 4. 21.
노드 - REST API REST API(Representational State Transfer) - 서버의 자원을 정의하고 자원에 대한 주소를 지정하는 방법. - /user이면 사용자 정보에 관한 정보를 요청하는 것. - /post이면 게시글에 관련된 자원을 요청하는 것. HTTP 요청 메서드 - GET: 서버 자원을 가져오려고 할 때 사용. - POST: 서버에 자원을 새로 등록하고자 할 때 사용(또는 뭘 써야할 지 애매할 때) - PUT: 서버의 자원을 요청에 들어있는 자원으로 치환하고자 할 때 사용. - PATCH: 서버 자원의 일부만 수정하고자 할 때 사용. - DELETE: 서버의 자원을 삭제하고자 할 때 사용. HTTP 프로토콜 :클라이언트가 누구든 서버와 HTTP 프로토콜로 소통 가능. - iOS, 안드로이드, .. 공감수 0 댓글수 0 2022. 4. 21.
노드 - HTTP 서버 만들기 const http = require('http'); const server = http.createServer((req, res) => { res.write('Hello Node!'); res.write('Hello server'); res.end('Hello Sehwan'); }) .listen(8080); server.on('listening', () => { console.log('8080번 포트에서 서버 대기 중입니다.'); }); server.on('error', (error) => { console.error(error); }); 공감수 0 댓글수 0 2022. 4. 21.
버퍼와 스트림 버퍼 : 일정한 크기로 모아두는 데이터 일정한 크기가 되면 한 번에 처리 버퍼링 : 버퍼에 데이터가 찰 때까지 모으는 작업. 스트림 : 데이터의 흐름 일정한 크기로 나눠서 여러번에 걸쳐서 처리 버퍼(또는 청크)의 크기를 작게 만들어서 주기적으로 데이터에 전달 스트리밍 : 일정한 크기의 데이터를 지속적으로 전달하는 작업. 공감수 0 댓글수 0 2022. 4. 20.
블로킹과 논블로킹 블로킹 호출된 함수가 자신의 작업을 모두 끝낼때까지 제어권을 가지고 있어 호출한 함수가 대기하도록 만듦. 논블로킹 호출된 함수가 바로 return 해서 호출한 함수에게 제어권을 주어 다른 일을 할 수 있게 함. 호출되는 함수가 바로 리턴하느냐 마느냐가 중점. 공감수 0 댓글수 0 2022. 4. 20.
노드 - os os 운영체제의 정보를 담고있음. 모듈은 require로 가져옴(내장 모듈이라 경로 대신 이름만 적어줘도 됨.) const os = require('os'); os.arch() // process.arch와 동일. os.platform() // process.platform과 동일. os.type() // 운영체제의 종류를 보여줌. os.uptime() // 운영체제 부팅 이후 흐른 시간(초)를 보여줌 os.hostname() // 컴퓨터의 이름을 보여줌. os.release() // 운영체제의 버전을 보여줌. os.homedir() // 홈 디렉터리 경로를 보여줌. os.tmpdir() // 임시 파일 저장 경로를 보여줌. os.cpus() // 컴퓨터의 코어 정보를 보여줌. os.freemem() .. 공감수 0 댓글수 0 2022. 4. 20.
노드 - process $node > process.version // 설치된 노드의 버전 > process.arch // 프로세서 아키텍처 정보 > process.platform // 운영체제 플랫폼 정보 > process.pid // 현재 프로세스의 아이디 > process.uptime() // 프로세스가 시작된 후 흐른 시간. 초 단위 > process.execPath // 노드의 경로 > process.cwd() // 현재 프로세스가 실행되는 위치 > process.cpuUsage() // 현재 cpu 사용량 > process.env 시스템 환경 변수들이 들어있는 객체. 비밀키(데이터베이스 비밀번호, 서드파티 앱 키 등)를 보관하는 용도로도 쓰임. 환경변수는 process.env로 접근 가능. > process.next.. 공감수 0 댓글수 0 2022. 4. 19.
자바스크립트 - promise, async/await promise 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체. .then 을 붙이면 결과를 반환함. 실행이 완료되지 않았으면 완료된 후에 then 내부 함수가 실행됨. Resolve(성공리턴값) -> then으로 연결 Reject(실패리턴값) -> catch로 연결 Finally 부분은 무조건 실행됨. async/await async function 변수 = await 프로미스; 인 경우 프로미스가 resolve된 값이 변수에 저장. 변수 await 값; 인 경우 그 값이 변수에 저장. 공감수 0 댓글수 0 2022. 4. 19.
자바스크립트 코드의 실행과정(이벤트 루프) 실행된 코드 function run() { console.log('3초 후 실행'); } console.log('시작'); // 첫번째 실행 setTimeout(run, 3000); // 2 console.log('끝'); // 3 실행 과정 그림 실행순서 1. anonymous - 파일이 시작되면 기본적으로 생성.(전역 컨텍스트), 메모리에 - run이 선언되어 있음. 2. 호출스택에서 console.log('시작')가 실행되면서 콘솔창에 '시작'이 기록. 3. 실행이 완료되면 console.log('시작')는 호출스택에서 빠져나감. 4. 함수 setTimeout이 실행됨. setTimeout은 비동기 함수이기 때문에 백그라운드에 타이머(run, 3초)가 입력이됨. (백그라운드에 보내게 되면 호출스택과.. 공감수 0 댓글수 0 2022. 4. 18.
javascript (var과 let의 차이) var과 let의 차이 변수는 스코프(범위)를 가진다. var은 함수 스코프를 가지고 있다. let은 블록 스코프를 가지고 있다. var 테스트 function var_test() { var a = 1; } console.log(a); 실행결과 a를 출력하려고 하면 에러발생. a는 함수 안에 선언된 변수이므로 함수 밖에서는 접근할 수 없다. 함수 스코프는 함수를 경계로 접근 여부가 달라지기 때문. let 테스트 if (true) { let a = 1; } console.log(a); 실행결과 let의 경우에는 블록스코프이기 때문에 에러가 난다. 블록은 if, for, while문의 {} 중괄호를 의미한다. 블록 밖에서는 블록안의 let에 접근할 수 없다. let과 var테스트 let for (let i.. 공감수 0 댓글수 0 2022. 4. 15.
javascript (indexOf) indexOf 배열이나 문자열에 원하는 값이 들어 있는지 찾는 메서드. 원하는 값이 들어있을 경우 첫번째로 마주치는 해당 값의 인덱스를 알려주고, 원하는 값이 없을 경우에는 -1을 반환한다. '12345'.indexOf(2) => 1 (첫번째 부터 0 1 2 순으로 진행하기 때문에 2의 인덱스 값은 1이다.) '12345'.indexOf(7) => -1 (해당 값이 없을 경우에는 -1을 반환한다.) ['1', '2', '3', '4', '5'].indexOf(3) => -1 (비교하는 요소끼리 자료형이 틀리기 때문에 -1을 반환.) ['1', '2', '3', '4', '5'].indexOf('3') => 2 (자료형이 같고 해당 값이 존재하기때문에 해당 값의 인덱스 반환) 공감수 0 댓글수 0 2022. 4. 14.
java script (join함수, split함수) join함수 배열을 문자열로 바꿔주는 함수가 join이다. 예시 [1,2,3,4] [1,2,3,4].join을 사용할 경우 => '1,2,3,4' 이라는 문자열로 바뀜. (사실 join(',')와 같은 형태임) [1,2,3,4].join('')을 사용할 경우 => '1234' 문자열로 바뀜 split함수 문자열을 배열로 바꿔줌. '1234'.split() 할 경우 => ["1234"]의 형태로 바뀜. '1234'.split('') 할 경우 => ["1", "2", "3", "4"] '1234'.split('2') => ["1", "34"] (2를 기준으로 나뉜다.) 공감수 0 댓글수 0 2022. 4. 14.
(웹) Servlet form,action 해석 1 2 3 4 5name : 6 7 8 9 6 submit이라는 버튼이 눌렸을때 4 action의 주소로 요청해주세요. 4 요청이 들어갈때 메서드는 post라는 값으로 넣어주세요. 공감수 0 댓글수 0 2021. 12. 9.
(웹) 웹 프론트엔드 기술요구사항 * html layout tag를 사용. * classname은 일정한 컨벤션을 유지. * 의미에 맞는 tag를 최대한 사용하기.(div 사용은 최대한 자제) * position속성과 float를 사용해서 element를 배치해야함. * 라이브러리를 사용한 레이아웃은 안됨. (부트스트랩등) * id와 class등의 다양한 selector문법을 잘 활용해야 함. 공감수 0 댓글수 0 2021. 12. 2.
(웹) HttpServletRequest, HttpServletResponse WAS는 웹 브라우저로부터 Servlet요청을 받으면 * 요청할 때 가지고 있는 정보를 HttpServletRequest객체를 생성하여 저장 * 웹 브라우저에게 응답을 보낼 때 사용하기 위하여 HttpServletResponse객체를 생성 * 생성된 HttpServletRequest, HttpServletResponse객체를 서블릿에게 전달 HttpServletRequest * http프로토콜의 request정보를 서블릿에게 전달하기 위한 목적으로 사용. * 헤더정보, 파라미터, 쿠키, URI, URL 등의 정보를 읽어 들이는 메소드를 가지고 있다. * Body의 Stream을 읽어 들이는 메소드를 가지고 있다. HttpServletResponse * WAS는 어떤 클라이언트가 요청을 보냈는지 알고 있고.. 공감수 0 댓글수 0 2021. 12. 1.
(웹) Servlet Lifecycle Servlet 클라이언트의 요청을 처리 및 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술. Servlet Lifecycle Servlet 생명주기 (init()메서드를 호출하여 초기화 -> service() 메서드를 호출하여 클라이언트의 요청을 처리 -> destroy() 메서드를 호출하여 종료) init() Servlet 요청시 처음 한번만 호출. Servlet 생성 시에만 호출됨. 사용자의 요청에 호출 x Servlet 생성시 초기화 작업을 주로 수행. service() doGet(), doPost(). Servlet 요청시 호출됨. 클라이언트가 요청하는 작업 수행. destroy() 라이프 사이클이 끝날 때 한 번만 호출. Servlet이 기능을 수행하고 메모리에.. 공감수 0 댓글수 0 2021. 11. 30.
(웹) Servlet 서블릿 클라이언트의 요청을 처리, 결과를 반환하는 웹 프로그래밍 기술. 특징 * 클라이언트의 Request에 대해 동적으로 작동하는 웹 애플리케이션 컴포넌트. * HTML을 사용하여 Response 함. * JAVA의 스레드를 이용하여 동작. * MVC 패턴에서의 컨트롤러로 이용. * HTTP 프로토콜 서비스를 지원하는 javax.servlet.http.HttpServlet 클래스를 상속 받음. * UDP보다 속도가 느림. * HTML 변경 시 Servlet을 재 컴파일해야 하는 단점이 있다. Servlet Program Client -> HTTP Request -> HTTP ServletRequest -> Web.xml -> Servlet -> Service() -> doGet() -> doPost().. 공감수 0 댓글수 0 2021. 11. 30.
(웹) Dictionary Java Annotation : 어노테이션을 통해서 유효성 검사 등을 쉽게 알 수 있고, 관련된 코드가 깔끔해진다. 용도는 다양한 목적이 있지만 메타 데이터의 비중이 가장 크다. Types of animations @Override, @Deprecated, @SuppressWarnings, @SafeVarargs, @Functionallnterface 공감수 0 댓글수 0 2021. 11. 29.
(웹) 자바 웹 어플리케이션 폴더 구조의 이해 WEB-INF : 웹 어플리케이션을 실행하는데 필요한 클래스 파일 및 설정 파일 등이 저장되는 폴더. web.xml : 브라우저가 Java Servlet에 접근하기 위해 WAS(TOMCAT)에 필요한 정보를 알려줘야 해당하는 Servlet을 호출할 수 있으며, 이것을 정하는 곳이 web.xml이다. (Web.xml은 WebApplication의 Deployment Descriptor로서 XML형식의 파일이다. 모든 Web application은 반드시 하나의 web.xml파일을 가져야하고 위치는 WEB-INF폴더 아래에 있다.) DeploymentDescriptor : 배포 설명자, Deploy할 때 Servlet의 정보를 설정해줌. jar파일 : Java ARchive Files, 자바 프로젝트 압축 .. 공감수 0 댓글수 0 2021. 11. 29.
(웹) element 배치하기 - box-sizing box-sizing 박스의 크기를 화면에 표시하는 방식을 변경. 해당 옵션의 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다. 최근엔 모든 element에 이 값을 지정하는 경우가 늘고 있다. box-sizing연습하기 일단 빈 옵션만 설정. 참고. padding - object내의 내부여백을 의미한다. padding: 10px; -> padding: 100px; padding값을 변경했더니 내부의 여백이 증가함에 따라 박스의 크기도 커졌다. 하지만 박스의 크기는 최대한 유지하고 싶다. box-sizing:border-box옵션 추가. border-box옵션 -> element의 크기를 최대한 고정하면서 padding값을 늘릴 수 있다. 옵션이 들어.. 공감수 0 댓글수 0 2021. 11. 22.
(웹) element 배치하기 - float(띄우기) 기본 옵션으로 설정 파랑 초록 빨강 배치했음. float 속성을 추가함. float 속성 고정적인 배치에서 벗어날 수 있고 둥둥 떠다닐 수 있다. 일반적인 배치에서 벗어난 형태로 특별히 배치가능. 뒤에 배치된 block element가 float된 엘리먼트를 의식하지 못하고 중첩되서 배치된다. green을 띄웠기 때문에 blue 아래에 red가 위치하게 되었다. .green에 margin-left를 추가해서 왼쪽에서 좀 띄워주기. 공감수 0 댓글수 0 2021. 11. 21.
(웹) element 디테일하게 배치하기 - position 속성 position 레이아웃을 배치하거나,객체를 위치시킬때 사용하는 css 속성이다. 속성은 상속되지 않는다. position: static; 그냥 원래 순서대로 배치됨. position: relative; 원래 자신이 위치한 곳을 기준으로 옵션이 적용된다. position: absolute; 기준점(상위 element들 중에 static이 아닌 position이 기준점이다)을 기준으로 특별한 위치에 위치. position: fixed; 전체화면을 기준으로 동작한다. (ex. 스크롤해도 따라오는 광고) 공감수 0 댓글수 0 2021. 11. 21.
(웹) element 배치방식 display:block(제일 흔한 방식) p tag를 추가해봄 inline 옵션을 추가해봤다. css display : inline; inline 옵션을 가지고 있는 속성들 span, a, strong inline옵션을 가지고 있는 속성들에 display: block; 추가 연습시 border:1px solid gray 추가하기 -> 어떤 식으로 공간 차지하는지 확인 가능 공감수 0 댓글수 0 2021. 11. 21.
CSS Selector css selector : html의 요소를 tag, id, class, html 태그 속성등을 통해 쉽게 찾아주는 방법, 트리 구조롤 되어있는 데이터를 빠르게 찾아가는 방법. (트리구조 - DOM트리) element에 style을 지정하기 위해서, 3가지 기본 선택자를 사용할 수 있음 tag id class 공감수 0 댓글수 0 2021. 11. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.