Electron Tutorial – Connect to MySQL Database

안녕, 레드 스테이플러가 다시 올 때! 이 비디오 어떻게해야하는지 보여 드리겠습니다 mySQL 데이터베이스에 연결하여 전자 응용 프로그램에서 간단한 쿼리 내 예제 응용 프로그램, 빈 페이지가 있습니다

빈 DIV 태그 다음 일은 내가 할 일은 스크립트를 만드는 것입니다 MySQL 데이터베이스에 연결하는 자바 스크립트 이 DIV 태그의 결과를 응용 프로그램에 표시하십시오 그러나 우리가 코딩을 시작하고, 우리는 mySQL을 설치해야한다 모듈 npm 먼저! 이 모듈을 통해 그래서 Node

js 응용 프로그램에서 mySQL 데이터베이스에 연결하십시오 나는 지금 신청서를 닫을 것이다 npm으로 MySQL 모듈을 설치한다 좋아, 우린 가야 돼! 이제 mySQL 모듈 공식 페이지의 예제 코드를 보라 데이터베이스에 연결하려면 먼저 모듈을로드해야합니다 (물론!)

다음 설정 연결 설정 호스트 이름, 자격 증명, 사용자 이름 및 암호와 데이터베이스 이름 그 후 우리는 연결을 만든 다음 질의하고 연결을 끝내십시오 그것이 우리가 할 일 전부입니다 시간을 절약하기 위해 코드를 작성하고 예제 애플리케이션에 배치하십시오 내 데이터베이스를 살펴 보겠습니다

나는 갔다 일부 더미 데이터를 설정하십시오 이제 데이터베이스와 일치하도록 설정을 업데이트하겠습니다 localhost가 정확하고 어떤 사용자도 가지지 않았습니다 기본 사용자는 루트가되고 암호는 null이어야합니다

데이터베이스 이름은 electron_db입니다 다음으로 우리는 가지고있는 테이블, 즉 employee 테이블만을 선택하려고합니다 쿼리를 업데이트 할 예정입니다 나는 직원 ID와 직원 이름을 선택하겠습니다 employee 테이블에 저장하고 SQL을 질문

우리가 질의를 한 후에 콜백에 반환 된 몇 가지 기능 첫 번째 오류입니다 있을 경우 쿼리에 대한 오류로 인해 이 하나 따라서 콜백 내부 함수에 오류가 있으면 함수를 버립니다 두 번째 결과입니다

이것은의 결과이다 당신의 질문 배열 형식입니다 마지막은 들판입니다 이것은 보류 할 것이다 선택한 필드의 모든 정보 전체 결과 배열을 기록 할 것입니다

콘솔에서 볼 수 있도록 배열의 구조 개발자 콘솔 열기 올바른 행 4 개를 반환했습니다 이제 우리가 결과 배열을 얻었 으면, 응용 프로그램에 정보 표시 화면이 아주 쉽다 jQuery를 사용하여 resultDIV를 선택하고 표시 할 수 있습니다 예를 들어, 첫 번째 행 결과를 원할 경우 응용 프로그램을 다시 시작합시다 John Doe여보세요! 이것이 기본입니다

나는이 비디오를 바란다 첫 번째 단계를 수행하는 데 도움을줍니다 전자에서 데이터베이스를 연결하는 신청 네가 가진다면 나에게 알려줘 어떤 질문이라도 내 의견은 지도 시간

다른 사람을 확인하는 것을 잊지 마세요 우리 채널의 흥미로운 동영상 구독하십시오! 안녕 : D 조

웹에플리케이션 만들기 – 데이터베이스(MySQL) 이론 1

지금부터 데이터베이스 수업을 시작하겠습니다 우선 이 데이터베이스란 무엇인가에 대한 이야기부터 해보면 데이터베이스는 정보를 관리하는 전문적인 애플리케이션이라고 할 수가 있습니다

그래서 우리가 어떤 웹 애플리케이션을 놓고 봤을 때, 그 웹 애플리케이션 전체에서 가장 중요한 부분을 뭐라고 생각하세요? 우리가 뭐 HTML이란 이야기도 했지만 HTML이 중요하다라는 이야기를 하는 이유는 그 HTML이 정보를 표현하는 것이기 때문입니다 그 이야기는 뭐냐, 그 HTML 안에서도 가장 중요한 것은 결국 정보라는 것이고, 그 정보를 표현하기 위한 여러 가지 수단들 , 기술적 구성들 그런 것들은 정보라고 하는 목적을 달성하기 위한 수단에 불과하단 것이죠 즉 정보가 위치하는 곳이 가장 중요한 곳이라고 할 수 있는데, 근대적인 웹 애플리케이션이라고 한다면, 실제 정보는 결국에 우리가 이번 시간부터 살펴 볼 데이터베이스에 존재하게 됩니다 그리고 그 정보를 안전하고 효율적으로 사용할 수 있도록 하는 전문적인 애플리케이션이 바로 데이터베이스라는 것이죠 그럼 우리가 이전 시간에 예제에서 정보를 파일에 저장하는 방법을 우리가 사용해서 웹 애플리케이션을 만들었습니다

그리고 우리가 데이터베이스 수업을 이번 시간에 하고, 그 다음 시간에 할 것은 바로 그 파일을 데이터베이스로 대체하는 일을 할 거예요 그렇다면 파일과 데이터페이스는 서로 어떤 관계에 있고 파일-데이터베이스 어떤 장단점이 있는 지에 대해서 살펴보는 것이 의미가 있을 것 같습니다 우선 파일이라는 것은 가장 기본적이고 원시적인 형태의 데이터 관리 수단이라고 할 수가 있어요 가장 큰 장점은 어느 시스템에서나 쓸 수 있고 무언가를 설치할 필요도 없고 굉장히 심플하기 때문에 이 파일이라는 것 자체를 이해하는 것은 그렇게 어렵지가 않습니다 그런데 데이터베이스는 그런 점에서는 많은 단점들을 갖고 있어요

데이터베이스는 공부도 해야 되고, 무엇인가를 설치해야 되기도 하고, 무엇을 설치해야 될지 고민되기도 하고, 뭐 이런 여러 가지 단점들이 있다는 거죠 하지만 궁극적으로는 결국에는 우리가 애플리케이션을 만든다고 하면, 파일을 직접 이용하지 않고 실제로는 데이터베이스를 사용하게 됩니다 결국 데이터베이스가 Winner라고 할 수 있을 건데요 데이터베이스가 갖는 굉장히 중요한 장점들을 몇 가지 나열을 해보면, 우선 “안전하다”라는 것을 들 수 있을 겁니다 여러분이 파일을 이용해서 데이터를 저장한다면 누군가 여러분 그 파일 딱 보면 그 안에 적혀있는 것을 다 볼 수가 있겠죠? 그 정보가 굉장히 내밀하거나 아니면 경제적인 것들이 관련되어 있거나 그렇다면 치명적인 약점이 될 수 있습니다 그런데 이 데이터베이스라고 하는 것은 마치 금고와 같은 역할을 합니다

여러분 집에 돈을 놓아두면 기본적으로 현관문이 있기 때문에 약간의 방호수단이 제공되지만 그 돈의 규모가 크거나 그렇다고 한다면 우리는 집에 또 다른 안전 장치인 금고를 두고 그 안에 정보를 그 돈을 보관하죠 마찬가지로 이 데이터베이스가 바로 그 금고 같은 역할을 한다는 것이죠 그래서 여기서 “안전하다”라는 것은 누군가가 여러분의 정보를 무단으로 보지 못하도록 하는 측면에서의 안전도 있고, 그 정보를 혹시 여러분의 시스템이 고장이 났을 때 컴퓨터가 물에 빠지거나 이런 문제가 생겼을 때 그 정보를 다른 곳에 백업하는 그런 시스템을 데이터베이스가 가지고 있기 때문에 그런 점에서 안전하다고 할 수가 있는 것이죠 그리고 “빠르다”라는 특성이 있습니다 여기서 “빠르다”라는 것은 핵심적인 개념은 index(인덱스)라는 것을 좀 이해하실 필요가 있는데요 index라는 것은 색인이라는 뜻이고, 이 색인이라는 것은 사전이나 또는 책 같은 거 보면 옆이나 뒤에 찾기 편하게 ‘ㄱ, ㄴ,ㄷ’ 순으로 정리해 놓은 거 있잖아요

바로 이 데이터베이스 시스템은 index라는 것을 통해서 정보를 빠르게 찾을 수 있도록 미리 잘 정리를 해놓습니다 그렇기 때문에 여러분이 어떤 정보를 찾으려고 할 때 index라는 것을 이용하게 되면 굉장히 빠르게 정보를 찾을 수 있어요 바로 그런 점에서 이 데이터베이스는 “빠르다“라고 할 수 가 있는 것이죠 그리고 무엇보다도 중요한 것은 우리가 뒤에서 살펴보게 될 SQL이라고 하는 것을 이용해서 “프로그래밍적으로 제어가 가능하다”라는 것 입니다 바로 이러한 특성으로 인해서 우리가 만들고 있는 웹 애플리케이션에서 우리는 데이터베이스를 사용할 수 있게 되는 것 입니다

이것은 지금 설명 드리면 이해하기 힘든 이야기고요 그래서 이 데이터베이스에 대한 이야기를 조금 더 해보면, 우선 이 데이터베이스라고 하는 이 분류에 해당되는 여러 데이터베이스 체계들이 있습니다 그 중에서 오늘날 가장 보편적으로 사용되고 가장 성공적인 데이터베이스 모델은 바로 관계형 데이터베이스라고 하는 것이고요 이 관계형 데이터베이스라고 하는 카테고리에 속하는 구체적인 제품명으로는 MySQL, MS-SQL, Oracle 이런 것들이 있습니다 이것들이 다 장단점이 있고 광범위하게 사용되는 데이터베이스 제품들이에요

그런데 그 중에서 우리가 살펴 볼 것은 바로 MySQL을 우리는 이용해서 데이터베이스 시스템을 배울 겁니다 그런데 한 가지 말씀드리고 싶은 것은 MySQL은 구체적인 제품이지만 여러분들이 MySQL을 다룰 줄 알면 Oracle, MS-SQL 기타 등등의 여러 데이터베이스 시스템을 제어하는 것을 배우는 것이 훨씬 더 수월해집니다 왜냐하면 동작 방법이 기본적으로는 거의 똑같기 때문입니다 그리고 이제 이 MySQL이라고 하는 이 제품에 대한 구체적인 이야기를 좀 해보면 이 MySQL라는 것은 WEB과 함께 성장한 데이터베이스라고 할 수 있어요 그 중요한 이유 중에 하나는 MySQL이 Open Source라고 하는 형태로 개발된 데이터베이스였기 때문입니다

마치 공공재 처럼 사용할 수 있는 그런 데이터베이스 시스템이기 때문에 여러분들이 혹시 들어보셨을 수 있는 이 블로그에서 워드프레스 또는 국내에서는 제로보드 또는 텍스트큐브 또 PHP, 이런 여러 가지 여러분이 설치해서 사용할 수 있는 웹 애플리케이션들이 기본적인 데이터베이스로 MySQL을 주로 사용을 하게 됩니다 Open Source라고 하는 공공재적 성격이 있기 때문이죠 그런데 이 MySQL은 주인 좀 여러 번 바뀌었어요 제일 먼저 이 “MySQL AB“ 라는 회사가 MySQL을 만들어서 이것을 발전시키다가 이 회사가 MySQL을 ”SUN“이라고 하는 Java 라는 프로그래밍 언어를 만든 회사에게 MySQL을 팝니다 그리고 ”SUN”은 다시 “Oracle”이라고 하는 Oracle 데이터베이스를 만든 회사에게 다시 인수가 됐어요

그래서 현재 MySQL은 “Oracle”이라는 회사의 소유로 들어가 있는 상태입니다 그 과정에서 이 MySQL을 만든 이 엔지니어들이 Oracle의 정책에 대한 반발로 새로 나와서 새로운 데이터베이스를 만들었는데 그게 바로 MariaDB라고 하는 겁니다 그런데 MariaDB라고 하는 이 데이터베이스는 이 MySQL가 완전히 완벽하게 호환이 되기 때문에 여러분들이 MySQL을 사용 할 줄 안다는 것은, 곧 MariaDB를 사용할 수 있다라는 뜻입니다 그리고 오늘날 이 MariaDB가 MySQL 보다 훨씬 더 공격적으로 발전하고 있는 중이기 때문에 여러분들이 MariaDB라고 하는 것도 관심 있게 지켜볼 만한 데이터베이스 시스템이라고 할 수가 있습니다 그럼 이제 데이터베이스에 대한 조금 더 깊은 이야기를 좀 해보죠

우리가 이 데이터베이스를 이해하는데 있어서 핵심적인 키워드는 바로 “Structured”라는 겁니다 “Structure“는 구조라는 뜻 이구요 “-ed“ 가 붙어 있으니까 저것은 구조화된이란 뜻이겠죠 그럼 구조가 무엇인지를 한번 생각해 볼까요 여기 제가 글을 하나 썼어요

“진혁이는 초등학교 4학년이고 청주에 살고 있고 남자아이입니다” “장래희망은 만들기 전문가이고 유빈이는 진혁이의 동생이고 그림 그리기를 좋아한다“ ”이람이는 만화가가 되고 싶은 8살이고 동생은 이은 이는 5살입니다“라고 이렇게 제가 일기를 썼다고 칠게요 어떤 친구들을 어린 친구들에 대한 이야기입니다

제가 아주 아끼는 어린 친구들 그런데 이렇게 정보를 우리가 작성해서 보관하거나 누군가에게 줄 수도 있겠지만 우리는 조금 다른 방법으로도 정보를 정리합니다 어떻게 하나요? 바로 이런 식으로 정리하는 거죠 표입니다 표! 왼쪽에 있는 정보와 오른쪽에 있는 정보, 무엇이 더 구조적인 느낌이 드나요? 오른쪽에 있는 정보가 무엇인가 조금 골격도 느껴지고 무엇인가가 정돈되어 있는 느낌이 들죠? 바로 그 정돈 된 상태를 우리가 좀 유식하게는 “구조화된” 이라는 표현을 쓰는 겁니다

영어로는 “Structured”라고 하는 것이죠 그래서 이 Structured 또 구조화된 정보의 표현 방식의 대표적인 사례는 바로 표라고 할 수가 있는데요 표를 영어로는 테이블(표 == table)이라고 합니다 이 테이블 시스템! 여러분도 사실은 이미 사용을 해봤습니다 무엇이냐 하면 EXCEL(엑셀)입니다

아마 EXCEL 사용 안 해 보신분이 별로 없을 거라고 생각되는데 혹시 사용 안해 봤어도 상관은 없어요 이 이야기는 꼭 EXCEL을 써야 되는 이야기는 아니니까 걱정하지 마시고 EXCEL을 우리가 한 번 살펴볼까요? 여기 제가 EXCEL로 표를 만들어 봤습니다 우리가 EXCEL을 사용하면 어떤 장점이 생기냐면, 예를 들면 여기의 나이를 나이순으로 정렬을 해볼까요 정렬, 내림차순으로 정렬을 하면 보시는 것 처럼 나이 순서대로 행들을 정렬할 수가 있죠

그리고 성별에서 오른쪽 클릭하고 그리고 필터라는 것으로 남자를 선택하고, 필터로 선택한 셀 값으로 필터링이라고 하면, 남자 성별을 가지고 있는 행만을 이렇게 보여주기도 합니다 그리고 여기 있는 이 값들을 더해서 어딘가에 표현할 수 도 있고 이런 여러 가지 것들을 할 수가 있는데 바로 이러한 것들이 가능한 것은 정보를 이렇게 구조화 시켰기 때문에 이러한 작업들이 가능한 겁니다 그렇다면 제가 여러분들의 이해를 돕기 위해서 EXCEL도 일종의 데이터베이스라고 말씀을 드렸는데요 우리가 이야기하는 이 맥락에서 EXCEL을 데이터베이스라고 할 수는 없고요 그러면 본격적인 데이터베이스는 EXCEL과는 어떻게 다른 것 일까요? 바로 가장 중요한 차이는 “SQL”에 있습니다

SQL! 그래서 이 데이터베이스 시스템에는 SQL이라는 것이 있고, EXCEL에는 SQL이 없어요 그렇다면 이 SQL은 무슨 의미일까요? SQL은 “Structured Query Language“의 약자입니다 이 중에서 Language는 우리가 컴퓨터에게 어떤 무언가를 명령할 때 사용되는 것이라는 것을 이미 알고 있죠? 그리고 이 Structured는 이 표와 같은 정보들이란 뜻이고요 Query는 “질의하다, 질문하다” 이런 뜻입니다 즉 컴퓨터에게 구조화 된 정보를 질의하는 프로그래밍 언어가 바로 SQL이라는 것이고, 이SQL이 있느냐 없느냐에 따라서, “EXCEL과 데이터베이스가 다르다

”라고 이야기할 수가 있는 것이죠 그리고 제가 아까 말씀드렸던 MySQL, MS-SQL Oracle이라고 하는 그 각각의 세 개의 제품은 서로 다른 회사가 만들었지만 이 SQL이라고 하는 표준화된 프로그래밍 언어를 구현하고 있기 때문에 동일한 SQL을 통해서 그 시스템들을 제어할 수 있게 됩니다 그럼 데이터베이스 시스템이 동작하는 이 방법에 대한 전체적인 그림을 한 번 우리 그려 볼까요? 우선 보시는 것처럼, 일단 두 대의 컴퓨터가 있다고 할게요 그러면 한 대의 컴퓨터에는 MySQL Client가 깔려있고, 한 대의 컴퓨터에는 MySQL Server가 깔려있다고 생각해 보세요 어때요! MySQL이라는 거, 데이터베이스라는 것도 클라이언트와 서버로 구분이 되죠

그래서 MySQL Client가 깔려있는 컴퓨터를 우리는 클라이언트 컴퓨터라고 할 수 있고, 서버가 깔려있는 컴퓨터를 서버 컴퓨터라고 할 수 가 있는데, 보시는 것처럼 서버 클라이언트라는 개념은 꼭 웹에서만 등장하는 것이 아니라, 데이터베이스 시스템에서도 등장한다는 것을 우리가 어렴풋이 알 수 있는 대목입니다 아무튼 이 클라이언트 컴퓨터에서 마치 웹브라우저를 동작하듯이 여러분이 이렇게 생긴 명령을 실행을 하면 저 명령은 서버 컴퓨터에게 전달됩니다 바로 저 명령이 SQL이에요 Structured Query Language라고 하는 프로그래밍 언어입니다 저 언어는 데이터베이스를 우리가 제어할 때 사용되는 언어라고 할 수가 있는데요

저 명령에 해당되는 정보를 데이터베이스 서버가 데이터베이스 클라이언트인 MySQL Client에게 표로 된 정보를 다시 응답해주는 관계에 따라서 데이터베이스 시스템이 동작되게 된다라는 그림입니다 아직은 여기서 클라이언트-서버라는 개념이 분명하게 들어오지 않으실 거예요 이제 구체적으로 우리가 이 데이터베이스를 다루면서 그것들을 구체화시킬 거니까 그 이후에 다시 이 그림을 보시면 이 그림이 무슨 의미인지 바로 이해하실 수가 있을 겁니다 아무튼 우리가 최종적으로 만들려고 하는 이 웹애플리케이션이 데이터베이스와 어떻게 관계하는지에 관한 그림을 한 번 그려보고 이번 수업은 여기서 마무리를 하겠습니다 그래서 웹브라우저가 있고 이 웹브라우저에 “http://a

com/aphp“라고 입력하고 엔터를 치면, 웹브라우저는 ”acom”에 해당되는 웹서버에 접속하고 웹서버는 자기가 PHP를 처리할 수 없다는 것을 알고 PHP에게 “aphp“의 처리를 요청하는 것이죠 그러면 저 PHP 엔진은 “a

php“라고 하는 PHP 코드를 한 줄, 한 줄 해석하면서 거기에 있는 내용들을 처리하게 되는데, 거기에 데이터베이스에 접속해서 데이터베이스에서 어떤 정보를 가져오라는 SQL문이 들어가 있다면, 이 PHP 엔진은 데이터베이스 서버에 접속해서 질의를 하게 됩니다 그러면 서버를 그것에 해당되는 정보를 PHP에게 전송해주고, PHP는 데이터베이스 서버가 전송해준 데이터를 가공해서 웹페이지를 만들고, 그것을 웹서버에게 돌려줍니다 그러면 웹서버는 그렇게 만들어진 웹페이지를 웹브라우저에게 전송해서, 이 큰 사이클이 한번 끝나게 되는 것이죠 이런 맥락에서 PHP는 MySQL이라고 하는 데이터베이스에 대해서는 클라이언트라고 할 수가 있고요, MySQL은 PHP 엔진에 대해서는 서버라고 할 수가 있는 것이죠 웹브라우저에 대해서 PHP는 일종의 서버라고 할 수가 있고, 웹브라우저가 클라이언트라고 할 수가 있다라는 것을 우리가 생각해보면, 이 서버와 클라이언트란 개념은 항상 변할 수 있는 상대적인 개념이란 것도 우리가 알 수 있는 대목입니다

이렇게 해서 데이터베이스가 무엇인가에 대해서 제가 포괄적인 이야기를 했습니다 그러면 다음 시간에 데이터베이스를 구체적으로 우리가 다뤄보면서 데이터베이스는 무엇인가에 대한 구체적인 이해를 가질 수 있는 시간을 갖도록 하겠습니다

AWS Lambda Tutorial – Connect to MySQL

안녕하세요이 동영상의 빨간색 스테이플러에 오신 것을 환영합니다

AWS lambda에서 RDS MySQL 데이터베이스에 연결하려면 먼저 데이터베이스가 있어야합니다 RDS에서 실행되는 인스턴스는 데이터베이스가 하나뿐입니다 테이블에 몇 줄의 행이 있으므로 람다 함수를 new에 연결할 것입니다 데이터베이스를 선택하고 첫 번째 직원은 nodejs MySQL 모듈을 사용할 필요가 없습니다 이 작업은 기본적으로 람다에서 사용할 수 없으므로 코드 및 테스트가 필요합니다

로컬로 배포 패키지를 만들고 다시 람다에 업로드하십시오 NPM init로 프로젝트 초기화하기 npm install을 사용하여 mysql 모듈을 설치한다 에 대한 새 파일 만들기 로컬 실행이므로 localjs라고 부르 자 지금은 데이터베이스 연결을 하나씩 만들고 관리하는 것이 아니라 lamda와 협력하여 연결 풀을 대신 사용해야하므로 기능은 짧은 기간에 여러 번 호출되었으며 연결이 될 수 있습니다

여러 번 열거 나 닫지 않고 재사용 해 보자 연결 풀을 만드는 MySQL github RDS 콘솔과 데이터베이스 인스턴스에서 호스트 URL을 가져올 수 있습니다 이제 소스에서이 값을 하드 코딩하는 것은 좋지 않습니다 코드를 사용하여이 값을 저장하는 config JSON 파일을 만들 예정입니다 그런 다음 require를 사용하여 js에서 구성 파일을 잠급니다 다음으로 우리는 연결 방법을 사용하여 풀에서 연결을 얻습니다

쿼리 메서드를 사용하여 SQL 실행 콜백 (call back)에서 우리는 연결을 사용을 위해 풀로 되돌려 놓을 것입니다 콘솔에 결과가 확실하게 선택된 경우 오류를 던집니다 마지막으로 노드 프로세스를 종료합니다 이제 코드를 테스트 해 봅시다 좋습니다

다음 단계는 코드를 약간 변경하는 것입니다 그래서 lambda와 함께이 코드의 복사본을 만들어 mainjs라고 부르 자 우리는 exportshandler 내부에서 연결 메소드를 가져와야한다

throw back 및 consolelog를 람다 콜백 함수로 대체하십시오 우리는 processesexit을 제거하고 그것을 대체 할 필요가있다 context

callbackwaitforemptyeventloop false와 같음 때문에 우리는이 작업을 수행해야합니다 연결은 다시 연결될 수 있도록 활성 상태로 유지되므로 그렇게 할 경우 이 플래그를 비활성화하지 말고 람다 콜백 우리는 풀을 영원히 기다린다 종료 및 결과 시간 초과 이제 배포 준비를 시작합니다 로컬 주소를 제외하고 필요한 모든 것을 홀짝 여서 패키지를 업로드 한 다음 업로드하십시오 콘솔에서 좋아,이 건강이 람다 MySQL로 시작하기를 바란다

연결이 비디오가 마음에 들면 엄지 손가락으로 구독하고 구독하십시오 보고 주셔서 감사합니다

웹애플리케이션 만들기 – MySQL 실습 3 : 상세 정보 출력하기

우리가 이전 시간에 중요한 내용을 다루었구요 이번 시간은 그것의 연장선 상에서, 이 웹 애플리케이션을 마무리하는 작업을 진행해보도록 하겠습니다

우선 화면이 조금 문제가 있네요! 우선 여기에 너무 여백이 커서 이것이 한 화면에 들어오지 않는 문제가 있구요 그리고 밑으로 쭉 내려가 보시면 어떤 콘텐츠를 선택했을 때, 그 내용이 길면, 보시는 것처럼 여기에 표시가 되지 못하고, 아래쪽에 표시가 되는 것을 볼 수가 있습니다 이런 문제를 해결하고 수업을 진행하는 것이 좀 흥이 날 것 같아요 만든 결과물이 좀 예뻐 보이겠죠? 우선 여기 네비게이션이 있는 곳에서 오른쪽 클릭, 요소검사를 하시면, 구글 개발도구가 뜨죠? 여기서 <ol>태그를 선택하면 보시는 것처럼 이렇게 녹색으로 되어있는 부분이 공백이 있습니다 여기 있는 박스모델을 보시면 이 녹색으로 되어있는 이 쪽에 40픽셀의 공백이 있는 것을 알 수가 있죠? 그러면 이 40이라고 돼있는 것을 더블 클릭해서 0으로 볼까요

그랬더니 이렇게 여백이 없어지고 화면 옆에 착 달라붙은 것을 볼 수가 있습니다 그럼 우리 에디터에서 stylecss 파일을 열고, 이 파일에서 “nav ol”의 “padding;0“ 으로 주는 거죠? 그리고 reload를 해보면, 보시는 것처럼 이렇게 레이아웃이 변경된 것으로 볼 수가 있습니다 그 다음에 아래쪽에 콘텐츠가 내려가 있는 부분은 왜 그런가를 살펴보고 싶은 데요 화면이 이렇게 좌우로 분할되니까 좀 좁습니다

그래서 이 밑에 있는 이것을 누르면 옆에 있던 것이 밑으로 내려오죠 그리고 무슨 일이 있는 지를 살펴보기 위해서 여기에서 오른쪽 클릭, 그리고 요소검사를 한 번 해보겠습니다 그랬더니 <article>를 선택했을 때, <article>이 보시는 것처럼 화면 전체를 차지 하면서 여기에 위치하지 못하고 줄 바꿈이 되어버린 문제입니다 그러면 여기 article에서 제가 여기 있는 “elementstyle”이라고 되어있는 부분을 클릭해서 “width:300“ (넓이 300 픽셀)로 주면, 보시는 것처럼 이 article이 300픽셀 만큼의 크기를 갖게 되면서 화면 위쪽으로 올라오는 것을 볼 수가 있습니다 이 원리는 잘 이해가 안 가셔도 상관없으니까, 이해 안가시면 그냥 넘기시면 됩니다

그리고 레이아웃을 조금만 더 조정하면 좋을 것 같은데, 300픽셀 보다는 좀 더 큰 것이 더 예쁠 것 같아요! 한 500픽셀을 줘볼까요? 그랬더니 화면에서 이 정도를 차지해요 괜찮은 것 같아요! 그러면 여기에 이 <article>이라고 하는 태그에 대해서, “width:500“ 으로 주니까 적당했던 것 같으니까, article을 찾아서 width 값을 500픽셀을 주고 reload를 하면, 보시는 것처럼 이렇게 적당한 크기로 화면이 나오고 있습니다 이제부터는 클릭하면, 우리가 클릭한 것에 해당되는 정보들이 이렇게 화면에 표시되는 것을 볼 수가 있죠 그러면 이제 우리가 리스트를 클릭했을 때, 여기 있는 id 값이 바뀐다는 거죠? 그러면 그 바뀐 id 값에 해당되는 topic을 불러오도록 코드를 변경해 보겠습니다 우선 콘텐츠가 출력되는 영역은 <article>이라는 태그로 감싸져 있는 이 부분입니다

여기에 우리가 id 값에 입력이 있다면, [‘id’]txt의 파일 콘텐츠 읽어서 화면에 출력해라 라는 뜻이죠? 이것을 이제 데이터베이스로 바꾸려는 것입니다 데이터베이스의 Query(쿼리)는 어떻게 짜면 될까요? 이렇게 짜면 됩니다 “SELECT * FROM topic;”, 즉 [topic] 테이블에서 데이터를 가져오는데, 어떤 데이터를 가져올 것이냐 하면, “WHERE id=”id 값이 여기에 무엇이냐에 따라서, 그 id 값에 해당되는 정보를 가져온다라고 코딩을, 그러면 여기에 있는 이 부분에서 이것을 일단은 문자로 감싸고, 그리고 “$_GET[‘id’]”를 하면, id로 입력된 값을 이 SQL문에 넣어서 우리가 찾고자하는 정보에 해당되는 SQL문을 만들 수 있게 되는 것이죠

그러면 이 SQL문만 제가 “$sql”해서 변수에 담겠습니다 변수에 담지 않아도 직접 사용해도 되지만 변수에 담으면 좀 더 편해요 그 다음에 여기에 우리가 이렇게 만든 저 쿼리를 이제 데이터베이스로 전송하기 위해서 mysqli_query() 첫 번째 입력 값은 $conn(connect), 두 번째는 SQL을 이렇게 입력합니다 그러면 그 result 값이 있을 거 아니에요 그 result를 변수에 담습니다

그 다음에 데이터를 가져올 때는 mysqli_fetch_assoc (fetch: 가져오다, assoc:연관별 포맷), 인자로는 result를 입력 값으로 이렇게 해줍니다 됐죠? 그 다음에 우리가 지금 표현하려는 정보는 특정한 id에 해당되는 topic의 행 하나이기 때문에, 여기에서는 더 이상은 while문 같은 반복문 호출할 필요는 없습니다 한 번만 실행해주면 하나의 행을 가져올 수 있고, 우리가 원하는 것은 하나의 행이기 때문에 그러면 우선 제목을 우리가 표시해야 되겠죠 “echo ‘<h2>’$row[’title’]

‘</h2>’;”, 이렇게 되면 이렇게 title 이 표시가 될 거구요 그 다음에 “echo $row[description];”, 그리고 이 indexphp는, 우리의 홈페이지도 indexphp이구요 그리고 각각의 글들도 index

php입니다 차이가 있다면 홈페이지의 첫 번째 페이지는 뒤에 “?id=”가 붙지 않습니다 즉 입력 값이 존재하지 않는다는 것이죠 그렇다면 상세 정보를 표현하는 이 부분은 입력 정보가 들어오지 않는 이 대문 페이지에서는 실행이 않되어야겠죠? 그러면 어떻게 하면 되냐면, 우리 이전에 했던 이야기입니다 파일 쪽에서 다뤘던 이야기죠

“if(empty($_GET[‘id’]) == false)” "조건이 false이면, 하위 문장을 실행한다" 라는 뜻 입니다 즉 id 값이 없지 않다면, 이거 부정이죠? false 그리고 여기 “===”(Equal 세 개) 있는 것은 “==”(Equal 두 개) 있는 것과 똑같은 것인데, “===”(Equal 세 개)를 쓰면 더 정확하게 체크 한다 뭐 대충 그렇게 넘어가시면 됩니다 지금으로써는 자세히 알 필요는 없는 부분 이예요 그럼 한 번 실행을 시켜보죠 보시는 것처럼 제목과 제목은 <h2> 태그 안에 있죠? 그리고 본문이 화면에 잘 표시되는 것을 볼 수가 있습니다

다른 웹페이지를 가도 그 웹페이지에 해당되는 정보들이 잘 보여지고있죠? 이렇게 해서 우리가 “웹 애플리케이션에서 데이터베이스라는 것이 어떤 역할을 하는가?” 라는 것에 대한 구체적인 인식을 갖게 됐습니다 사실 이것이 가장 이해하기 힘들고 또 가장 뒤에 등장하게 되는 개념이고, 여러분들이 여기까지 오셨다면 아마 그 개념을 어느 정도는 잘 이해하고 계실 거라고 생각합니다 하지만 이것은 우리가 알고 있는 근대적인 웹 애플리케이션과는 약간은 좀 거리가 있어요 왜냐하면 지금 데이터를 추가하고 싶다면, 데이터베이스에 우리가 직접 SQL문을 입력해서 데이터를 추가해야 되는 상황이라는 것이죠 그런데 우리가 알고 있는 게시판, 여러 가지 서비스들은 사용자들이 직접 어떤 정보를 올릴 수 있는 것이 웹을 통해서 가능하잖아요

그래서 이 웹을 통해서 데이터베이스의 정보를 저장하고 수정하고 삭제하고 바로 이런 기능들이 필요하게 되는데요, 그 방법에 대해서 우리 다음 시간부터 살펴보겠습니다

웹애플리케이션 만들기 – MySQL 실습 2 : 리스트 출력하기

이번 시간은 MySQL 두 번째 실습 시간입니다 s이번 시간은 아주 중요한 수업 이예요

그리고 우리 수업에서 클라이막스라고 할 수 있습니다 우리 수업을 산에 오르는 등정에 비유한다면 이번 수업은 깃발을 꽂는 순간이라고 할 수 있습니다 즉 앞에서부터 배웠던 여러 가지 것들이 차곡차곡 모여서 드디어 하나의 완결성을 갖춘 근대적인 웹애플리케이션을 우리가 만들어보는 그 순간이 바로 이번 시간이기 때문입니다 여기까지 제 부족한 수업 따라오시느라고 너무너무 고생하셨고요 이번 수업까지 여러분들이 하시면 사실 모든 걸 다 이루고 이제 기분 좋게 하산하는 과정만 남아있는 거예요

아시겠죠? 여기까지 오신 거 정말 축하드리고, 조금만 더 힘내시면 아주 뿌듯한 기분을 가지고 여러분들이 수업을 마무리하실 수가 있습니다 우리가 저번 시간에 mysqli API를 이용해서 데이터베이스 서버에 접속 DB를 선택하는 것까지를 했구요 이번 시간부터 데이터베이스에 SQL을 날려서 그 결과를 받은 다음에 그것을 HTML 파일로 만들어서 실질적으로 동작하는 웹 애플리케이션을 만드는 거죠 우선 이 MySQL monitor에서 우리가 정보를 조회할 때는 이런 SQL문을 사용합니다 즉 [topic] 테이블에 있는 모든 컬럼의 정보를 가져온다 라는 명령이죠

이것에 해당되는 mysqli API는 바로 이것입니다 보시는 것처럼 “mysqli_query“이라고 하는 함수를 실행을 시키고, 그 함수의 첫 번째 입력 값은 이 서버에 접속된 정보를 갖고 있는 connection 변수($conn)를 이렇게 전달하게 되는 거예요 그래서 이 변수는 여러 군데에서 재활용되는 거죠 그 다음에 두 번째 인자가 중요한데요 두 번째 인자에서는 보시는 것처럼 SQL문을 작성합니다

바로 이것에 해당되는 것이 이것이 되는 것이죠 그리고 이것이 실행이 되면 이 데이터베이스에게 “SELECT * FROM topic”이라고 하는 저 SQL문이 전송이 됩니다 그럼 데이터베이스 그 SQL문을 받아서 처리를 하고, 그것을 다시 PHP에게 돌려주는데, PHP는 그것을 “result”라고 하는 변수에 현재 담도록 우리가 PHP에게 명령해놓은 상태죠! 그러면 그 정보는 “result”를 통해서 우리가 얻어올 수 있게 되는 겁니다 그럼 여기서 우리 코딩을 해보죠 mysqli_query($conn, “SELECT * FROM topic”); 그리고 그 결과를 $result(변수)에 담았습니다

그 다음에 이 MySQL monitor에서는 저렇게 SQL을 서버에 질의하면, 이 서버는 어떤 정보를 줄 것이고 그것을 MySQL monitor는 그냥 화면에 출력할 뿐인데요 이 mysqli는 프로그래밍을 하는 것이기 때문에 조금 다른 방법을 취하게 됩니다 어떻게 하냐면, 보시는 것처럼 “mysqli_fetch_assoc()”라고 하 는 저런 함수를 이용해서, 그 함수의 입력값으로 우리가 데이터베이스에 질의한 그 결과를 담고 있는 이것을 이렇게 입력 값으로 주는 거예요 그러면 실제 데이터가 이 $row라고 하는 변수에 담기게 됩니다 그럼 우리는 이 $row(‘title’)하면은, 이 값은, 여기에 있는 이 값 있죠? 이 값이 여기로 오구요

이것은 description의 값인데 여기에서는 표시가 안 되어 있네요 아무튼 그런 식으로 데이터를 가져올 수 있어요 그런데 이것을 우리가 이해하기 위해서는 년년배열이라는 것을 조금 살펴보면 더 좋습니다 제가 준비한 코드를 보시죠 이거 우리 실습 아니니까, 따라하지 마시고 설명만 들으세요

여기 보시면 “array”라고 하고, 이렇게 “,”로 구분하면, 이것은 두개의 값을 가지고 있는 배열이 만들어 집니다 그리고 우리는 “$a“ 즉 a라는 변수를 통해서 이제 그 배열의 값에 접근할 수 있게 돼요 “0”은 첫 번째 값을 의미하기 때문에 바로 이 값이 여기에 이렇게 표시가 된 거죠 그런데 조금 다른 형태의 배열이 있습니다 여기 있는 이 배열의 경우에는 똑같이 array를 사용을 했는데 어떤 차이점이 있냐면, 위에 것은 그냥 값과 값이 콤마(,)로 구분되는 이 문법을 따르고 있는데요, 이것 역시도 콤마로 값과 값을 구분하고 있는데, 그 값 안에 바로 이렇게 생긴 화살표 기호가 등장합니다

그래서 여기 있는 이 값이 “title”이라는 이름을 가지고 있다! 이 값이 “description”이라는 이름을 가지고 있다! 라는 것을 바로 이렇게 생긴 화살표로 표시하고 있는 겁니다 그러면 어떤 차이가 있냐면, 위에 것은 숫자를 통해서 “0”은 첫 번째 값, “1”은 두 번째 값 이렇게 값을 가져올 수 있는데요 아래 것은 보시는 것처럼 숫자 대신에 아까 제가 말씀드렸던 이름을 이렇게 대괄호 안에 주어서 값을 가져올 수 있게 됩니다 "title”이 가리키는 값은 “About JavaScript”이기 때문에 바로 이것이 여기에 찍히게 될 거예요 실행을 시키면, 줄 바꿈을 시키는 게 좋겠네요

이렇게 되죠? “About JavaScript”가 여기에 이렇게 출력되는 것을 볼 수가 있죠? 이것을 뭐라고 하냐면 “연관배열”이라고 합니다 (입력 중) “연관배열, associative array” 이것이 연관배열이라는 거예요 즉 어떤 값의 이름을 주는 것이 연관배열입니다 그리고 이 앞에 있는 “assoc”라는 거 살짝 기억해 두세요 우리 예제로 다시 돌아와서 우리 코드를 다시 작성을 하죠

여기에 아까 없었던 것이 추가됐었죠? 이것이 무엇이나 하면, 이것은 우리가 “SELECT * FROM topic”을 한 결과를 이렇게 화면에 표시를 했는데요 “description”은 정보가 많아서 제가 빼버렸어요 “id, title, author”만 지금 표시가 돼있는 겁니다 이렇게 해서 우리가 이것을 실행을 하면 데이터베이스는 이 정보에 해당되는 것을 PHP에게 돌려줍니다 그런데 그 정보를 바로 사용할 수 있는 것은 아니구요, 중간에 API를 하나 더 거쳐야 해요

바로 mysqli_fetch, fetch는 가져온다라는 뜻 이예요 그리고 “assoc” 무엇으로 시작 하나요? associative 시작 글자입니다 즉 연관배열이라는 데이터 형식으로 데이터를 가져 온다! 어떤 데이터를 “result라는 변수가 가리키고 있는 데이터를” 이라는 뜻 이예요 즉 result가 가리키는 데이터는 뭐 이런 식의 데이터죠! topic에 있는 정보를 다 가져온 데이터입니다 description은 빠져있다고 했어요

그 상태에서 “$row”라고 이렇게 해주게 되면, 이 mysqli_fetch_assoc는 이 $row라는 이 변수에 어떤 정보를 담느냐 하면? 바로 이 조회한 테이블에, 즉 우리가 조회 한 내용 중에서 첫 번째 행의 데이터만을 담아서 그것을 리턴 값으로 반환하는데, 그 리턴 값은 associative array의 형식이다 연관배열의 형식이다” 라는 뜻입니다 그러면 “echo $row[‘id’]“ , 이 연관배열의 id를 주게되면, 어떤 결과가 출력되는 지를 봅시다 “1”이 나왔어요

이 “1”은 바로 이것이 실행된 결과이고, 여기 있는 이 값의 이 row는 바로 첫 번째 행이라고 말씀 드렸죠? 그 중에서 id는 바로 이 id 컬럼의 값을 의미합니다 그러면 “echo $row[‘title’]” 이라고 하면 어떻게 되나요? “About JavaScript”가 떴어요! “About JavaScript”는 이것의 결과이고 바로 이것이 “About JavaScript”입니다 그런데 우리가 조회한 결과는 바로 이것 이였어요 즉 topic 테이블에 있는 모든 행을 다 가져오라는 이야기였습니다 그런데 지금 이 “$row“라고 하는 이 변수는 첫 번째 행만을 담고 있다고 말씀을 드렸죠? 우리가 원하는 것이 아니잖아요

그러면 어떻게 하는가 하면, 여기 있는 코드를 그대로 카피해서 밑에 붙여넣기 하세요 그리고 좀 구분하기 위해서 <br>, 줄 바꿈을 의미하는 HTML 태그입니다 그리고 reload를 해 보세요 그러면 이번에는 이 “Variable and Constant”가 찍힙니다 우리가 mysqli_fetch_assoc 두 번째 실행했을 때는, 바로 두 번째 행의 데이터를 가져오게 됩니다

어떤 형식으로? 연관배열의 형식으로 row에 담겨있는 거예요 그렇기 때문에 이 “id”는 여기에 있는 이 두 번째 행의 이 값을 가리키게 되는 것이고, 그것이 여기에 나온 겁니다 "title”은 바로 이 값을 가리키고, 이것이 여기에 나오게 된 거죠 그런 식으로 우리가 이것을 반복적으로 이렇게 실행을 시키면, 보시는 것처럼 이렇게 topic들의 리스트를 화면에 출력할 수 있게 됩니다 지금 제가 mysqli_fetch_assoc를 4번 실행을 했어요

그러면 여기 있는 이 데이터들은 4개가 다 있기 때문에 그 다음에 실행을 시키면 어떻게 될까요? 더 이상 가져올 데이터가 없을 거예요, 그런가요? 제가 이렇게 한다면 더 이상 가져올 데이터가 없을 겁니다 더 이상 가져올 데이터가 없을 때 저 row라고 하는 저 변수에는 어떤 값이 담기게 되는 지를 var_dump라는 함수의 입력 값으로 전달해서 살펴볼까요? var_dump는 그 입력 값으로 들어온 어떤 데이터가 무엇인지를 정확하게 여러분들에게 알려주는 그런 내장 함수예요 F5! 어때요? “NULL”이라는 것이 출력됐습니다 프로그래밍에서 “NULL”이라는 것은 “값이 없다”라는 뜻입니다 즉 더 이상 가져올 값이 없기 때문에 저 row에 실제 데이터가 “NULL”이 된 것 이구요

그리고 참고로 알아두실 것은 PHP에서 “NULL == false”NULL은 false, 즉 거짓이라는 의미도 암시적으로 동시에 가지고 있습니다 지금 우리 퍼즐 맞추기를 하려고 제가 이런 저런 힌트를 미리 흘리고 있는 거예요 그런데 여기 있는 이 코드를 보면, 지금 제가 이렇게 뽑아놓은 이 정보를 이용해서 무엇을 하려고 하는 것이냐면, 여기 있는 이 글 목록을 제가 데이터베이스에 있는 정보로 구성하려고 하는 거예요 그런데 이 코드를 한 번 보죠! 중복이 보이세요? 우리가 정말 싫어하는 중복! 치욕스러워 하는 중복! 중복이 발생하고 있습니다 여기 있는 이 코드, 이 코드, 한 글자라도 틀린 것이 있나요? 완전히 똑같은 코드가 반복적으로 실행이 되고 있습니다

그리고 또 하나 만약 여기 있는 데이터가 하나 더 추가됐다 ! 그러면 이 코드에 우리는 이 중복되는 코드를 또 한 번 입력해야 되는 거예요 굉장히 수치스러운 상황이 생기는 겁니다 이것을 어떻게 해결할까, 잘 한번 생각해 보세요 반복적인 코드가 등장하고 있어요 우리가 무엇을 쓰면 될까요? 반복문을 쓰면 되는 겁니다

그러면 과감하게 밑에 있는 이 반복문을 지워 버리구요 이 싫은 반복되는 코드를 지우구요 밑에 일단 반복문에 기본적인 골격을 작성을 합시다 그리고 우리가 반복적으로 실행시켜야 되는 이 코드를 반복문 안으로 넣는 거죠 그리고 여기에 있는 “while”문의 이 괄호 안에 뭐가 들어가야 되냐면, 바로 이 코드가 들어가면 됩니다

이렇게요 그리고 한번 실행을 시켜볼까요? 보시는 것처럼 똑같은 결과를 얻게 돼요 어떤 일이 일어난 것인지 한 번 보죠 반복문이 처음 실행이 되면, 우선 이 괄호 안에 있는 값이 true인지 false인지를 확인합니다 그 때 mysqli_fetch_assoc가 실행 되겠죠? 그 때 우리는 첫 번째 행에 있는 데이터를 $row에 이렇게 주게 될 겁니다

그러면 결과적으로 이것 전체가 바로 그 연관배열의 값을 갖게돼요 PHP에서 어떤 값이 존재한다는 것은, 다시 다른 말로는 false가 아니라는 것은 true로 간주하는 PHP의 특성이 있습니다 즉 이것 전체가 연관배열을 갖게 되기 때문에 이것 전체는 true가 됩니다 그러면 이것이 true이면 바로 이 while문 안쪽에 들어있는 이 구문들이 실행이 되겠죠! 그것이 화면에 출력이 될 거예요 그러면 첫 번째 행이 출력될 겁니다

그 다음에 마지막 행까지 출력이 끝났으면 그 다음에는 어떻게 되겠어요? 다시 여기 있는 이 부분이 실행이 되고, 그러면 두 번째 행이 나오겠죠? 출력이 될 것이고, 두 번째 행은 역시 값이 있기 때문에 참(true) 그래서 이것도 실행이 되고, 세 번째도 참(true)이니까 이것이 실행이 되고, 네 번째도 실행이 되는데, 다섯 번째 실행될 때는 우리의 테이블은 현재행이 4개밖에 없잖아요, 그러면 이 mysqli_fetch_assoc가 리턴하는 값은 NULL이 됩니다 그리고 제가 앞서 말씀 드린 것처럼 PHP에서 NULL은 false가 됩니다 false로 암시적으로 해석되기 때문에 이것 전체가 false가 되면서 이제 while문은 더 이상 실행되지 않고 종료되게 되는 거죠 그 결과로 우리가 얻은 효과, 우리는 중복을 배제한 덕분에 어떤 효과를 얻었냐면? 일단 코드가 짧아 졌죠? 그리고 여기 있는 내용만 살짝 고치면 이것이 동작하는 방식을 한꺼번에 바꿀 수가 있습니다 여러 가지 중복을 제거했을 때 생기는 효과가 여기서도 깨알같이 등장하고 있죠! 그 다음에 그러면 이 내용은 이제 리스트가 될 준비가 거의 다 끝났습니다

이것은 cut해서, 여기 있는 공백을 없애 버리구요, 밑으로 쭉 내려가서, 여기에 표시되고 있는 이 내용, 바로 이 부분이죠? 이것을 몰아냅니다 더 이상 이제 우리는 파일을 상대하지 않을 거예요 그리고 여기에는 이제 PHP가 들어와야 되니까, 이렇게 붙여넣기 합니다 그리고 실행을 시켜보면, 여기에 이렇게 내용이 출력이 되죠? 아직 안 끝났습니다 이제 소스 보기를 해서 우리가 생성한 코드가 잘 만들어지고 있는지를 확인할 필요가 있습니다

오른쪽 클릭 “페이지소스보기“를 하면, 현재 보고 계셨던 웹페이지의 소스코드가 이렇게 나타나요 그러면 잘 안 보이시겠지만, 여기 있는 <ol>이 바로 이것 이구요, 여기 있는 <ol>이 바로 이것입니다 그리고 이것을 출력한 내용이 바로 이것들입니다 아시겠죠? 이것을 없애버립니다 그리고 “echo $row[‘title’];“이라고 하고 이렇게 해보면, 보시는 것처럼 이렇게 제목들이 그냥 쭉 붙어서 화면에 출력 되죠? 그런데 이렇게 하면 좀 보기가 안 좋아요! 그래서

“n”을 눌러 보세요 그리고 reload! 그러면 보시는 것처럼 줄 바꿈이 됩니다 바로 이 줄 바꿈이 된 여기에 이것이 들어간 거예요 “n“은 줄 바꿈을 하라는 특수한 약속된 기호입니다 그래서 이 줄 바꿈 덕분에 이렇게 화면에 표시가 되는 거죠

그 다음에 이제 여기 있는 이 title은 <a> 태그로 감싸줘야 돼요 <li> 태그와 <a>태그를 저 단 따옴표 사이에 “<li><a>” 그리고 ““을 해서 붙여주죠 그리고 여기에 </a>태그, </li> 태그를 이렇게 위치시켜줍니다 그리고 reload를 해보면, 보시는 것처럼 이렇게 <li> 태그가 만들어 졌어요! 그 다음에 이것을 실제 화면에서 보면, 보시는 것처럼 이렇게 된 화면이 나옵니다

그런데 아직 안 끝났어요, 왜냐하면 리스트이기 때문에 클릭했을 때 이동할 링크가 필요하죠? 그 정보는 <a>태그에서 “href=’http://localhost/indexphp‘“ 까지만 일단 입력하죠 그리고 reload 해보면, 이렇게 링크가 추가가 됐습니다 그리고 그 끝에 “?id=”이라고 하면 이렇게 되죠 그러면 이 각각의 id 뒤에 우리가 그 문서를 식별하는 식별자인 id값을 주면 되는데요

그 id값은 이렇게 주면 됩니다 앞쪽에서 우리가 문자를 끝내고 “” 해서 이 사이에 이제 변수를 넣으시면 돼요, 이것을 넣어줍니다 이것이 엄청 헷갈리실 거예요? 그러니까 잘 꼼꼼히 따져보시면 다 이해할 수 있는 내용입니다

그리고 이것을 제가 실행을 시켜볼게요 그럼 어떻게 돼요? 보시는 것처럼 “id=1”이 나왔고, 2, 3, 4가 나왔습니다 바로 그러한 내용에 따라서 페이지를 열어보면 보시는 것처럼 링크가 제대로 걸려있는 리스트를 볼 수가 있습니다 여러분들 축하드립니다 우리 수업의 가장 꼭대기에 올라와 계세요

우리가 정말 많은 이야기를 지금까지 했는데, 바로 이 순간을 위해서 우리가 지금까지 그렇게 인내하고 고생하면서 여기까지 온 겁니다 여기 있는 링크들 이렇게 클릭하면 그 링크에 해당되는 id 값이 이렇게 보이고 있죠? 물론 여기에 지금 나오고 있는 이 내용은 아직 데이터베이스에서 가져온 내용은 아니예요 하지만 여러분들이 알아야 되는 내용은 다 익힌 것 입니다 이것은 그냥 이미 알고 있는 것들을 응용하시면 할 수 있는 거예요 중요한 것은 이렇게 한 번 데이터베이스에 있는 정보를 꺼내서 HTML화하는 작업을 한번만 하면, 그 다음부터 우리는 얼마든지 응용해서 다양한 웹페이지를 만들 수 있는 가능성을 품게 된 겁니다

이제 꼭대기에 올라와 계시니까 잠깐 쉬시면서, 이 멀리 있는 지금까지 우리가 올라온 이 멀리 보이는 풍경들을 감상하시고 바람도 좀 쐬시다가, 이제부터 우리는 꼭대기에서의 기쁨을 만끽하고 이제 하산만 하면 됩니다 그러면 우리 다음 시간부터 아직 마무리하지 않은 것들을 살펴보고, 그리고 이후에 애플리케이션이 더욱 더 성장하는 과정에서 경험하게 될 일들 그런 것들을 살펴보는 시간을 다음 시간부터 갖도록 하겠습니다 여러분들 너무너무 고생하셨고요, 여기까지 잘 따라와 주신 것에 대해 너무나 감사드립니다