본문 바로가기

분류 전체보기179

여러개의 input이 있을 때 객체로 관리하기 그리고 Ref에 대하여. 보호되어 있는 글 입니다. 2022. 7. 31.
정규표현식에 대한 개념 정규표현식은 다음과 같은 역할을 수행한다. 1. 문자 검색 2. 문자 대체 3. 문자 추출 테스트사이트 : regexr.com 생성자 new RegExp('표현', '옵션') new RegExp('[a-z],'gi') 리터럴 /표현/옵션 /[a-z]/gi 일단, match함수를 알아보자.. const stro = ' is impressreddive.' console.log(stro.match('red')) 결과는 이렇게 나옴 ! 이제 써보자. const str = ` 010-2132-2323 thejf@naver.com http://www.omdbapi.com/?apikey=7035c60c&s=frozen The quick brown fox jumps over the lazy dog abbcccdddd .. 2022. 7. 22.
스프레드연산자 (...) spread 연산 하나로 뭉쳐 있는 여러 데이터들의 집합을 개별적인 값으로 분류 Iterable객체에 적용할 수 있다(Array, String, Map, Set, DOM nodelist, arguments) 예제) let arr = [1, 2, 3, 4]; let a = { ...arr }; let b = [...arr]; let arrObject = { '0': 1, '1': 2, '2': 3, '3': 4 } console.log(...arr); //1 2 3 4 console.log(a); // { '0': 1, '1': 2, '2': 3, '3': 4 } console.log(b); // [ 1, 2, 3, 4 ] 함수의 인자값으로 넣는 예 function sum(a, b, c) { return a + b + c;.. 2022. 7. 21.
자바스크립트_구조분해할당 구조분해 할당 : array / 객체에 에 있는 값을 한번에 정의하는 것. const user = { name : 'Heropy', age : 85, email : 'sldk@naver.com' } const {name,age,address='seoul'} = user //내가 원하는것만 꺼내서 쓴다 console.log(`${name} . ${age} . ${address}`) 변수 이름을 바꿔줄수도 있다. 아래 예제에서 name보다 heropy로 정의했다. 어차피 같은 Heropy라는 문자를 가리킨다. const user = { name : 'Heropy', age : 85, email : 'sldk@naver.com' } const {name : heropy,age,address='seoul'} =.. 2022. 7. 21.
자바스크립트_배열 1. length 길이를 반환한다. const numbers = [1,2,3,4] const fruits= ['Apple','Banana','Cherry'] console.log(numbers.length) 4 나옴. 2. concat 배열을 이어준다. const numbers = [1,2,3,4] const fruits= ['Apple','Banana','Cherry'] console.log(numbers.concat(fruits)) 3. forEach 배열데이터의 개수만큼 콜백이 실행된다. 콜백함수의 매개변수에 들어가는 것은 첫번째는 반복되는 각각의 아이템, 두번째는 횟수이다. const fruits= ['Apple','Banana','Cherry'] fruits.forEach(function(ele.. 2022. 7. 21.
Node Version Manager 설치 및 사용하기 NodeJS를 여러개 사용할수는 없으니까, 버전을 언제든지 바꿀 수 있는 Node Version Manager을 다운받아야 한다. nvm-windows 검색 -> nvm setup 압축파일 실행 다운로드가 되었는지 VS Code에서 알수있다 현재 깔려있는 NodeJS버전 볼려면: nvm ls 다른 버전을 다운받으려면, 어떤 버전을 사용하겠다고 하려면 use를 사용한다. 디바이스 변경 허용? Yes 누르면 됌! 확인하려면 node --version 으로 쳐서 변경이 잘 되었는지 확인할 수 있다. npm ls 로도 확인할 수 있다. 지우려면 uninstall을 사용한다. 2022. 7. 20.
모듈에 대한 개념. 프로젝트가 커지면 기능에 맞게 코드를 분리하는것이 매우 중요하다. 모듈은 코드를 분리하기 위한 방법을 제공해준다. 반복되는 코드는 모듈로 분리를 해서 반복되는 부분에서 가져다 쓸 수 있게 코드를 모듈로 분리하여 사용한다. 모듈의 집합이 패키지인 것이다. node.js에서 제공하는 기본 모듈 - console - process모듈(.arch / .argv / .env / .abort / .kill / .exit) - fs모듈(.readFile / .readFileSync / .writeFile / .watch) : 파일입출력을 위해 사용됨 - http모듈( .createServer ) : 서버나 클라이언트를 만들 수 있는 기능을 제공한다. 모듈 생성하고 내보내기 commonjs모듈 : module.expo.. 2022. 7. 15.
nodemon 설치 및 npm start로 연결하기 - 설치하기 : npm install nodemon script에 적용해 npm start로 시작할 수 있게 셋팅! - 연결하기 2022. 7. 11.
리액트에 폰트 적용하기 1. 구글폰트를 다운받는다. 2. src->font경로를 만들어서 다운받은 폰트를 넣는다. 3. App.css에서 GamjaFlower이라는 이름을 지어준 뒤 *에 적용한다. @font-face { font-family: GamjaFlower; src: url(./font/GamjaFlower-Regular.ttf); } * { font-family: GamjaFlower; font-size: 26px; } 2022. 7. 9.
기명함수와 익명함수 1. 기명함수 function hellow(){ console.log('hello'); } 2. 익명함수 let world = function(){ console.log('world'); } 함수호출 hello(); world(); 2022. 7. 7.
함수의 호출과 반환의 차이 1. 함수의 호출. return을 사용하지 않는다. function helloFunc() { console.log('1234') } helloFunc(); --> 콘솔창에 1234가 나온다. 2. 함수의 반환. return을 사용한다. 함수 안에서 특정 값을 반환 할 수 있고 반환할 때 return이라는 키워드를 사용할 수있다. function returnFunc(){ return 123 } let a = returnFunc(); //a라는 변수가 123을 받는다. console.log(a) 함수에서는 리턴이라는 키워드를 사용해서 자바스크립트 데이터를 내보내기를 할 수 있고 이거를 변수에 할당해 사용할 수 있다. 2022. 7. 7.
로그를 찍어주는 라이브러리 모듈 multer morgan 모듈 : 로그를 찍어주는 라이브러리 모듈 설치방법 : npm i morgan const logger = require('morgan'); logger('dev')이부분은 로그찍히는 형식을 쓰는 것이다. 우리는 dev설정에 맞춰 로그를 찍어줘보겠다. app.use(logger('dev')); app.use('/',router); app.listen(3000,()=>{ console.log('3000피스 퍼즐'); }) 이거를 실행해보면 이제 이렇게 console에 log가 찍힌다. write라는 이름으로 GET방식으로 요청했고요, 답은 404가 나왔고 시간은 3.611 ms걸렸어요 --> 이역할! 2022. 7. 5.
MongoDB localhost 127.0.0.1:27017 접속안될때 오류 : cmd 내용 Error: couldn’t connect to server 127.0.0.1:27017 라는 오류가 떴다. 해결방법 : 서비스 -> MongoDB 찾고 -> 오른쪽버튼 클릭 -> 시작 2022. 7. 4.
cookie-parser모듈 cookie-parser 모듈 쿠키를 쉽게 설정하고 사용할 수 있게 도와주는 모듈로, 익스프레스 객체에 미들웨어로 등록하여 사용한다. 설치방법 : npm i cookie-parser 예제를 써보자. 2가지를 import한다. 쿠키파서는 cp라는 변수에 넣고, app.use(cp()); 로 미들웨어로 등록하여 사용한다. const express = require("express"); const cp = require("cookie-parser"); const app = express(); app.use(cp()); 그 밑에 쿠키를 셋팅하는 코드를 써보겠다. 쿠키를 만들 때, resp.cookie로 만든다. key값으로 member를 사용한다. member에다가 value를 객체로 썼다. {id:'apple.. 2022. 7. 4.
JSON.parse와 JSON.stringify JSON.parse("문자열") : JSON포맷으로 되어있는 문자열을 JSON객체로 반환 JSON.stringify("문자열") : JSON객체를 JSON포맷의 문자열로 반환 2022. 7. 4.
ejs에 대해 알아보기 EJS : Embedded JavaScript 모듈 특정한 형식의 파일로부터 HTML페이지를 생성하는 모듈 설치 : npm i ejs로 설치한다! ejs 함수 추가하기 : const ejs = require('ejs'); 코드를 만들어보자. 6가지를 require한다. const express = require('express'); const app = express(); const bp = require('body-parser'); const router = express.Router(); const fs = require('fs'); const ejs = require('ejs'); bodyparser 가져온다. app.use(bp.urlencoded({extended:false})); /login이.. 2022. 7. 3.
미들웨어에 대해 알아보기 미들웨어 : 가운데에서 연결점 역할을 하는 것. request-response사이클 안에서 routing handler함수가 가지고 있는 request객체, response객체, next함수에 대한 접근이 가능한 함수이다 -> 요청에 응답하는 중간에 목적에 맞게 처리할때 거쳐가는 함수. - request, response객체 수정이 가능하다 - request, response사이클을 끝낼 수도 있고 다음 미들웨어를 호출할 수도 있다. 대표적인 미들웨어 - error-handling middleware 매개변수를 3개(request, response, next)를 가지고 있는 일반적인 middleware와는 달리 4개(error, req, res, next)의 매개변수를 갖는 middleware이다. ap.. 2022. 7. 3.
이미지나 음악파일을 보여지게하기(fs.readFile) localhost:3000을 통해 접속하면 사진이 나오고 4000을통해 접속하면 노래가 나오도록 해보자. 코드 : const http = require('http'); const fs = require('fs'); http.createServer((req,resp)=>{ fs.readFile('./tesst.jpg',(err,data)=>{ if(err){ console.log(err); }else{ resp.writeHead(200,{'content-type':'image/jpg'}) resp.end(data); } }) }).listen(3000,()=>{ console.log('3000번 포트로 이미지 서버 실행중..') }) //yout.com에서 유튜브 노래 다운받음! http.createSer.. 2022. 7. 3.
try catch finally를 이용한 예외처리 개념 : 예외처리 try{ 예외가 발생할 수 있는 문장을 작성 } catch(e){ 예외가 발생했을 경우 발생할 문장을 수행해줌. } finally{ 예외 발생 여부에 상관없이 수행할 문장 } 코드 : const fs = require("fs"); let text = null; try{ text = fs.readFileSync("./text4.txt",'utf-8'); }catch(e){ console.log(e) console.log('동기식으로 파일 읽기 실패!'); }finally{ console.log('예외발생 여부에 상관없이 수행'); } catch부분에 매개변수로 e를 넣으면 에러를 출력해준다. 2022. 7. 3.
fs모듈 사용해 동기식/비동기식으로 txt파일 읽기, 쓰기(readFile, readFileSync,writeFile,writeFileSync) 1. 쓰기 node.js에서 가장 중요하고 기초적인 모듈로,파일 처리와 관련된 모듈이다. 모듈 사용을 위해 가장 위에 const fs = require("fs");를 선언해야 한다. 바깥에다가 text1.txt파일을 만든다. * require() : 다른 곳에 있는 코드를 불러오는 함수. 비동기 방식으로 파일을 읽는 readFile과 동기방식으로 파일을 읽는 readFileSync를 사용해보겠다. const fs = require("fs"); fs.readFile('./text1.txt','utf-8',(err,data)=>{ if(err){ console.log(err); }else{ console.log("비동기식으로 파일 읽기"+data); } }); const text = fs.readFileSy.. 2022. 7. 3.
node의 개념, node설치하기, package.json만들기 개념을 알아보자. - 노드 : 서버(컴퓨터 운영체제)에서 실행되는 자바스크립트를 뜻한다(즉, 자바스크립트는 브라우저에서 작동되는 반면, 노드를 설치하면 자바스크립트도 운영체제에서 실행이 되고 사용할수있다) - 노드의 장점 : 백앤드랑 프론트앤드가 같은 언어를 사용한다. - 사용되는 엔진 : Chrome V8 Javascript 엔진 - 아파치같은 웹서버(apache, iis, zeus...) 소프트웨어가 필요없고 웹서버 역할을 할 수 있는 내장 라이브러리가 존재한다 - npm이라는 패키지 관리자(라이브러리를 다운받아 탑재시키는 역할)가 포함되어있다. 설치를 해보자. *설치확인하기 cmd에서 node -v 명령어를 실행 *설치하기 https://nodejs.org/en/ > Download for Wind.. 2022. 7. 3.
호이스팅 변수/ 함수 선언 시 먼저 var, function의 경우 먼저 실행되는 현상 console.log(a) var a = 3; ==> undefined라고 나온다. 에러가 떠야하는데! var말고 let과 const는 에러가 뜬다. 2022. 6. 28.
비구조화할당 비구조화할당= 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 ex1) test.js const studnt = { apple="사과", banana="반하나", kiwi="키위"} const{apple,banana,kiwi} = student console.log(apple) ==> 이거 하면 사과 나온다! 어떻게 이해해야 하냐면 const{apple,banana,kiwi} = student 에서 apple, banana, kiwi값 student에서 뽑아와~ 라는 의미임. ex2) 다음은 배열이다. 배열은 index값이 자동으로 주어지므로 차례대로 할당된다. const user = ["김사과","반한","다람쥐"] const [kim,ban,oh] .. 2022. 6. 28.
제이쿼리) 수정버튼클릭하면 인풋창뜨게하기_.click사용 Change content of all p elements This is a paragraph. This is another paragraph. 2022. 6. 24.
도메인 연결하기 가비아에 가서 로그인하고 https://dns.gabia.com/ 샀던 도메인클릭 -> DNS설정 호스트이름 : @ IP 주소 : IP4주소 치고 확인버튼 클릭. 그리고 저장 클릭. 이제 된다.ㅎ 2022. 6. 20.
Flask설치하기&서버사용하기 Flask : 서버를 만들 수 있는 큰 라이브러리. 이거를 우리는 프레임워크라고 부른다. 프레임워크는 3분요리/소스라고 생각하면 된다. 새로운 프로젝트 열고 설정에서 Flask를 설치해준다 그다음 이제, 서버를 구동해보겠다. from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' @app.route('/mypage') def mypage(): return 'This is Mypage!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True) 이제 localhost:5000으로 접속하면 This is Home나오고 localh.. 2022. 6. 19.
지니뮤직 렝크,제목,가수 크롤링(QUIZ) import requests from bs4 import BeautifulSoup headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'} data = requests.get('https://www.genie.co.kr/chart/top200?ditc=M&rtm=N&ymd=20210701',headers=headers) soup = BeautifulSoup(data.text, 'html.parser') #코딩시작 songs = soup.select('#body-content > div.newest-list >.. 2022. 6. 18.
javascript 코드 버튼 누를때마다 홀짝홀짝 나오는 코드 홀짝홀짝 2022. 6. 8.
javascript 처음 써보기. style테그 밑에다가 function만들기 이제 버튼 누르면 alert창 뜨게 해보기 영화 기록하기😇 버튼 누르면 hey() 함수가 실행이됨! 2022. 6. 8.