Web 52

Angular *ngFor

ngFor를 사용하는 방법은 다음과 같다. 예를 들어 게시판의 글 데이터의 수만큼 html 코드를 반복해야한다고 하면, 아래 코드처럼 반복할 html 문 태그 안에 *ngFor="let 데이터 of 데이터배열" 을 넣어주면 된다. 데이터를 출력할 때는 *ngFor="let data of datas" data.board_id 이런식으로 출력해도 되고 *ngFor="let data of datas; let i=index;" data_title[i] data_content[i] index를 이용하여 출력해도 된다. 즉 서버에서 데이터를 요청/응답받아 datas, data_title, data_content 배열에 넣고, 그 배열의 수만큼 html 에서 for문을 돌려 출력해주는 것이다. 그러면 이런식으로 게시..

Web/Angular 2020.12.09

Angular Http post

서버에서 http post 요청을 하여 데이터를 받아오는 방법은 다음과 같습니다. 먼저 HttpClient와 HttpParams 모듈을 추가해준 후, var params = new HttpParams() .set('param1', 'value') .set('param2', 'value') this.http.post(url, params).toPromise() .then((res:any) => { // Example this.name = res.content[0].name; this.title = decodeURI(res.content[0].title) .replace(/%2[cC]/g, ",") .replace(/%3[aA]/g, ":"); ... }) .catch(err => { console.log(..

Web/Angular 2020.12.09

ngModel 데이터 바인딩

서버에서 응답받은 데이터를 html에 출력해주고 싶다면 데이터 바인딩이라는 것을 사용하면 된다. 데이터 바인딩에는 단방향 데이터와 양방향 데이터라는 것이 있는데, 엄청 간단하게 요약하자면 단방향 데이터는 그냥 저장된 데이터를 html 코드에 출력해주기만 하는 것이고, 양방향 데이터는 데이터가 변경되면 변경되는 즉시 html의 코드의 데이터가 업데이트 된다는 것이다. 즉 둘 다 데이터 Model로부터 값을 가져와 view에 보여주는 역할을 하지만 위와 같은 차이가 있다. 1. 양방향 데이터 위는 [(ngModel)]과 ionChange 이벤트 리스너를 사용하여 양방향 바인딩을 해준 것이다. 먼저 typescript 파일에서 서버에 http post 요청하여 응답받은 데이터를 name이라는 변수에 넣어준다...

Web/Angular 2020.12.08

[Error] Uncaught (in promise): NullInjectorError: R3InjectorError

코드를 짜다가 계속 이런 오류를 마주하게 됐었는데, (file transfer, camera, googleMap 등...) 이유는 app.module.ts에 사용하려는 모듈을 import 시키지 않아서 생기는 오류였다. 즉 최상위 app.module.ts에 설치한 plugin을 import하고 providers에 등록해주면 됩니다. 위 코드를 참고하여 넣어주세요. 참고 stackoverflow.com/questions/47236963/no-provider-for-httpclient kenneth-dev.tistory.com/7

Web/Angular 2020.12.07

[Error] An error occurred while running subprocess cordova.

해결법: gradle 다운 받아서 C드라이브 안에 넣고, 환경 변수 설정 1. Gradle 다운 gradle.org/install/ Gradle | Installation Install the Gradle build tool on Linux, macOS or Windows, either manually or using a package manager like SDKMAN! or Homebrew. gradle.org 2. 환경 변수 설정 1) 폴더 생성 2) 환경 변수 설정 시스템 변수 - 새로 만들기 변수 이름: GRADLE_HOME 변수 값: C:\Gradle\gradle-6.7.1 시스템 변수 Path - 편집 - 새로 만들기 %GRADLE_HOME%\bin 참고 stackoverflow.com/qu..

Web/Ionic 2020.11.29

JQuery Ajax Uncaught TypeError: Cannot read property '0' of undefined

JQuery ajax를 이용해 JSON 데이터를 받아오려고 했는데 위와 같은 오류가 났다. Network 부분을 보면 Request 값도 제대로 가는 걸 확인할 수 있었는데 Response를 받아올 수 없는 이유, 즉 저 오류가 나는 이유는 서버의 header 부분인 contentType과 dataType을 맞춰주지 않아서다. 결론은 서버와 클라이언트 요청/응답 헤더 부분을 맞춰주면 된다. Ajax로 데이터를 요청하는 클라이언트쪽 코드에서 저 헤더 부분을 주석처리해보니 정상적으로 response가 오는 것을 확인할 수 있었다. 아니면 서버 코드에서 위 코드를 추가해주면 되었다. - 마지막으로 약간 팁 같은건데 만약 서버로 들어오는 POST 값을 확인하고 싶다면 서버 코드에 위와 같이 코드 두 줄을 추가한..

Web 2020.10.21

Directory listing 취약점

만약 디렉토리 취약점이 존재한다면 URL에 폴더명만 입력했을 때 위와 같이 login 폴더 아래에 있는 모든 파일들을 볼 수 있다. 즉 Directory listing이란 디렉토리에 접근할 때 디렉토리 하위 폴더와 파일들을 볼 수 있는 취약점이다. 패치 방법은 Indexes 부분을 지우고 설정 파일을 수정했으므로 apache2를 재시작합니다. service apache2 restart 다시 들어가보면 forbidden으로 막혀져있는 것을 확인할 수 있다. 이후 URL에 디렉토리 접근 시 웹사이트에 페이지를 표시할 수 없습니다 또는 forbidden이 나오지 않는다면 Directory listing에 취약한 것이므로 실행 과정은 위와 같다.

SQL Injection 실습

SQL 삽입(SQL Injection)은 응용 프로그램 보안 상의 허점을 의도적으로 이용해, 악의적인 SQL 문을 실행되게 함으로써 데이터베이스를 비정상적으로 조작하는 코드 인젝션 공격 방법이다. SQL Injection 실습을 위해 가상 환경에서 만든 홈페이지에서 웹 취약점인 SQL Injection을 이용해 로그인 해보도록 하겠다. 위와 같이 ' or 1=1#로 로그인이 되는 것을 확인할 수 있고 ' or 1=1# 저 SQL Injection 구문을 해석해보자면 로그인을 하는 과정에서 사용자가 입력한 id와 pw 값이 데이터베이스에 저장된 값과 일치 하는지 조회를 하는데 그 부분이 위 PHP 코드의 select * from members where mem_userid='$id' 부분이다. 이 SQL ..