본문 바로가기

분류 전체보기51

AWS EC2 서버 호스팅한 사이트 DB 털린 이야기 (SQL 인젝션 방어하기) 취업을 위해 포트폴리오 용으로 만들었었던 사이트에서 자랑은 아니지만 DB 공격을 1년동안 총 3번이나 당했다... SQL 인젝션은 쉽게말하면, 웹사이트에서 박스가 있을 때 그 곳에 입력한 값들은 보통 DB로 이동하기 때문에, 그 안에 쿼리문을 작성해서 전송을 하게 되면 그 쿼리문에 따라 해당 DB의 데이터를 가져올수도, 데이터베이스 전체를 삭제해버릴 수도 있다. 공격의 난이도에 비해 피해정도는 매우 커서 웹사이트를 만들 때 매우 유의해야한다고 한다. (실제 공격방법을 찾아보니 너무 간단했다.) 첫번째로 공격을 당했을 때는 그저 AWS EC2에서 호스팅할때 보안그룹 인바운드 아웃바인드를 잘못 설정해줘서 그냥 해킹을 당했나보다 하고 보안그룹설정과 어려운 비밀번호로 바꿔줬는데, 몇주 뒤에 보니 또 내 DB가 .. 2021. 11. 27.
원시값과 참조값, 얕은복사와 깊은복사, Object 깊은복사 방법 얕은복사와 깊은복사의 차이점을 이해하려면 우선 원시값과 참조값의 차이에 대한 이해가 필요하다. 원시값 원시값이란 모든 연산이 "실제값 자체"를 갖고 이루어진다. 자바스크립트의 원시값으로는 String, Number, Boolean, Null, Undefined가 있다. let num1 = 1, const num2 = num1; console.log(num2); // 1 num1 = 20; console.log(num2); // 1 다음과 같이 num1의 값만을 선언해주고, num2가 num1이 갖고 있는 "값 자체인" 1을 할당받았으므로 num2에 할당한 뒤 num1의 값을 바꿔주더라도 num2에서는 아무런 영향을 받지 않는다. 참조값 참조값이란 대표적으로 객체, 배열, 함수가 있으며, 모든 연산이 해당.. 2021. 11. 20.
크롬 Lighthouse로 내 웹사이트 성능을 측정해보자 Lighthouse를 통해서 웹 성능을 전반적으로 검사하고 성능을 향상하기 위한 가이드를 제공해줍니다 지금 F12를 눌러 [개발자도구]를 들어간 후 [Lighthouse] 탭 ( 크롬버전에 따라 이름이 [Audit] 일 수도 있습니다. ) Categories는 어떤 부분을 검사하고싶은지, Device는 어떤 기기환경에서의 성능을 검사하고 싶은지 선택해주시면 됩니다. 각각 선택해 준 후 [ Generate report ] 를 눌러 성능 검사를합니다. 그러면 웹 성능 최적화가 왜 중요한지에 대해서 열심히 설명을 해주다가 로딩이 끝나면! 검사를 한 웹 사이트는 제가 vue코드를 react코드로 바꾸면서 만들었던 사이트였는데요. 이런식으로 결과가 나왔습니다. 67점이라는 점수는 Metrics라는 기준에 의해 나.. 2021. 10. 28.
RDBMS(mySQL) 쿼리로 알아보는 elasticsearch 쿼리 (2) SELECT [컬럼] FROM [테이블] 우선 select를 하기 위해서는 읽어올 데이터가 들어 있어야하는데, 우선 나는 저번에 insert시켰던 데이터에다가 컬럼(필드)을 읽기 위해 두개 이상의 필드가 필요해서 name필드를 추가하는 업데이트만 시켰다 (name 추가) 2. SELECT [컬럼1] FROM [테이블] 조건 query 없이 그냥 GET 인덱스명/_search { "_source" : [ "필드명1", "필드명2"] } 로 보내주면 원하는 인덱스에서 원하는 필드만 골라서 데이터를 가져올 수 있따 2021. 10. 28.
5분만에 로컬서버에 Elasticsearch 환경 구축하기 (쿼리연습) https://www.elastic.co/kr/downloads/elasticsearch Download Elasticsearch Download Elasticsearch or the complete Elastic Stack (formerly ELK stack) for free and start searching and analyzing in minutes with Elastic. www.elastic.co 에서 elasticsearch 다운로드 후 tar.gz 파일을 풀어준다. 그리고 터미널을 열어서 다운받은 폴더가 있는 경로로 들어간 후에 bin/elasticsearch 를 해주면 엘라스틱서치가 구동된다. (ctrl C 누르면 프로세스 종료) 새로운 터미널을 열어서 curl -XGET localhos.. 2021. 10. 26.
[ES6+] Promise와 then, catch, finally, all, race const obj = new Promise((resolve, reject)=>{//obj라는 변수에 Promise라는 인스턴스를 생성하여 할당 // resolve와 reject 라는 이름의 함수를 만들어서 해당 인스턴스에 설정 // 처리가 성공하면 resolve가, 실패하면 reject가 호출됨 console.log("Promise 읽는 중") resolve("성공"); reject("실패"); }) obj.then( (value)=>{ console.log("결과는", value) }, (reason)=>{ console.log("결과는", reason)} ); console.log("끝까지 읽음") // 끝까지 읽음 // Promise 읽는 중 // 결과는 성공 해당 코드를 위에서부터 하나하나 보면,.. 2021. 10. 23.
[CSS] SCSS 아키텍처 7-1 pattern 폴더 및 파일 정리 하는 기준 (+ 실제 구성) CSS 공부를 위해 Udemy에서 advanced css인강을 하나 들었었는데, 그 인강에서 SCSS 파일들을 구분해놓은 방식이 신기했었다. 나중에 알고보니까 그렇게 파일을 구분해놓은 것이 CSS 아키텍처 중 하나인 7-1패턴이라는 것이었다. 7-1패턴에 대해 좀 더 알아보기 위해 구글링 중, 좋은 글을 발견해서 중요한 부분만 번역을 하면서 내가 정리해놓았던 부가 설명을 덧붙여서 공유! 원문 : https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture 7-1 Sass Architecture A natural question at this juncture is: “Okay, if .. 2021. 10. 23.
vue UI라이브러리 Vuetify vs. Quasar ( vs BootstrapVue) 사용해본 장단점 및 느낀점 비교 Vuetify 기반 개발 경험이 있어서 그런지 vuetify가 개인적으로 뭔가 더 익숙하지만 개인 프로젝트를 할 때에는 다른 UI프레임워크도 한번 써보고싶어서 ( + 그 당시에는 vuetify가 vue3을 지원을 안해서 ) 대체 라이브러리를 찾던 중에 Quasar를 사용해봤다. Vuetify보다는 좀 더 얕게 공부하고 사용한 느낌이지만 그래도 둘 다 사용해보면서 느낀점과 이와 관련해 좋은 글이 있어서 중요한부분만 참고해서 번역을 함께 공유:-) https://blog.bitsrc.io/quasar-vs-vutify-vs-bootstrap-vue-choosing-the-right-vuejs-ui-library-cf566f61bc4 Quasar vs. Vutify vs. Bootstrap Vue: Choos.. 2021. 10. 22.
숫자 뒤집기 + 소수 구하기 보호되어 있는 글 입니다. 2021. 10. 22.
문자열에서 특정 문자와 최소 거리 구하기 보호되어 있는 글 입니다. 2021. 10. 22.
거꾸로 해도 똑같은 배열 (팰린드롬) 보호되어 있는 글 입니다. 2021. 10. 22.
거꾸로 해도 똑같은 문자열 (회문문자열/팰린드롬) 보호되어 있는 글 입니다. 2021. 10. 22.
호이스팅(hoisting) 이유와 원리 3줄 요약 + 설명 호이스팅이란 , 변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다. 그리고 호이스팅은 ES6+의 let과 const 변수에서는 할 수 없고, 오직 var 변수에서만 호이스팅이 일어난다. 호이스팅이 발생하는 이유는 다음과 같다. 1. 자바스크립트 엔진은 함수선언문 해석 -> 변수 초기화 -> 코드실행 순서로 진행된다. 2. 코드를 실행할 땐 이미 함수 선언문과 변수가 생성되어있는 상태이기 때문에 3. 어디에서든 함수나 변수를 호출할 수 있다. (심지어 제일 위에서도!) 자바 스크립트 엔진은 코드를 맨 위에서부터 읽어내려오기 전에 이미 실행 컨텍스트에 식.. 2021. 10. 21.
[ES6+]화살표 함수(=>) 특징 3줄 요약 + 설명 화살표함수는 코드 형태는 (param)=> { 함수코드 } 와 같지만, 다음과 같이 작성할 수도 있다. 함수 블록{ } 과 return 작성을 생략해도 된다. const test = (num1, num2) => num1 + num2; console.log(test(10,20)); //30 하지만 내부에 아무 코드 없이 함수 블록 { } 만 작성하면 undefined 를 반환하게 된다. const test = (num1) => {}; console.log(test(1)); // undefined 또한 함수 블록 { }을 소괄호()로 감싸게 되면 { key : value } 값으로 반환하게 된다. const test = (param) => ({myName : param}); const result = tes.. 2021. 10. 20.
RDBMS(mySQL) 쿼리로 알아보는 elasticsearch 쿼리 (1) SELECT * FROM [테이블] 우선 벌크데이터를 위해 대충 이렇게 데이터를 넣었다. 1. SELECT * FROM [테이블] 가장 기본적인 "테이블 안의 모든 데이터"를 꺼내오는 작업이다. 너무 기본적인거라 바디는 {} 이렇게만 보내주면된다. 다만 테이블 이름에 해당하는 index name과 /_search는 같이 써줘야한다. GET 인덱스/_search {} 아래는 짤렸지만 5개의 모든 데이터가 출력됐다. 2021. 10. 19.