4-1. 공지사항 1번글 클릭 시, 팝업창 뜨도록

• < body > 맨 위? 아래? -> 상관없음! < /body > 위에 작성 (relative 때문에 css 꼬이잖아) z-index 있으니까 먼저 읽어들여서 상관없음.

4-1-1) HTML

        <div id="popupnm" class="abs bg-white zup">
            <button class="abs">닫기</button>
            <p>팝업 컨텐츠 삽입하기</p>
        </div>

4-1-2) CSS

<style>

#popupnm{
    /* 내 너비를 모를 때 */ /* 알면 margin : 0 auto */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-color: white;
    padding: 20px;

    display: none;
    }

</style>

4-1-3) 제이쿼리

• 공지사항 첫번째 글 클릭하면 팝업창 뜨도록 d-none 상태에서 addClass('d-block')

CSS 추가

.d-block{display:block !important}

<script>

    $('[href="#popupnm"]').click(function(e){
        e.preventDefault;
        $('#popupnm').addClass('d-block');
    })

</script>

• 닫기 버튼 누르면 창 닫힘 공지사항 nth-child하게 생겼어? [href="#popupnm"] 클릭!

  <script>
  
    $('[href="#popupnm"]').click(function(e){
        e.preventDefault;
        $('#popupnm').addClass('d-block');
    })
    // 닫기 버튼
    $('#popupnm button').click(function(e){
        e.preventDefault;
        $('#popupnm').removeClass('d-block');
    })
  

**결과물**
![](https://velog.velcdn.com/images/la_sta/post/b6004929-f235-409c-9c08-cc20036585b4/image.png)

• 상대 경로로 쓰기 ./
• HTML 태그에 style 삽입 말고 필히 외부 연동
• 모든 파일명은 영어로!
• 이미지는 jpg로 제작하기 (사이즈 똑같이)

복습

• 헤더 https://velog.io/@la_sta/5%EC%9D%BC%EC%B0%A8-%ED%97%A4%EB%8D%94-%EC%84%B8%ED%8C%85-%EB%B3%B5%EC%8A%B5%EB%A7%88%EB%AC%B4%EB%A6%AC
• 스와이퍼 애니메이션 https://velog.io/@la_sta/28%EC%9D%BC%EC%B0%A8-js-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%9B%B9%EA%B8%B0%EB%8A%A5%EC%8B%9C%ED%97%98%EC%9A%A9 fade 처리 https://velog.io/@la_sta/29%EC%9D%BC%EC%B0%A8-js-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-2
• 탭 https://velog.io/@la_sta/29%EC%9D%BC%EC%B0%A8-js-%ED%83%AD-%EC%9B%B9%EA%B8%B0%EB%8A%A5%EC%82%AC%EC%8B%9C%ED%97%98%EC%9A%A9

1. 에밋 짜기

<A형> https://webstudybasic.pe.kr/landing/source/A-2/index.html .container>#hd+#swiper+#three+#ft

<!-- 컨테이너 .container{width:1200px; margin:0 auto} -->
.container

  <!-- 헤더 -->
  header#hd>h1>a>img^^ul#gnb>li*4>a{대분류}+ul>li*5>a{소분류}
  <!-- 스와이퍼 -->
  #swiper>.swiper-wapper>.swiper-slide*3>img
  <!-- 3단구조 -->
  #three>#notice>h4+ul>li*4^^#gallery>h4+ul>li*3^^#imgBanner>a>img
  <!-- 푸터 -->
  footer#ft>h2>a>img^^span+select>option*3

<A형> https://webstudybasic.pe.kr/landing/source/A-3/index.html

<!-- 컨테이너 -->
.container

  <!-- 헤더 -->
  header#hd>h1>a>img^^ul#gnb>li*4>a{대분류}+ul>li*5>a{소분류}
  <!-- 스와이퍼 -->
  #swiper>.swiper-wapper>.swiper-slide*3>img
  <!-- 3단구조 -->
  div#three>.tabs>#notice>h4+ul>li*4^^#gallery>h4+ul>li*3
              .banner0>a>img
              .banner1>a>img
  <!-- 푸터 -->
  footer#ft>.logo>h2>img>a^^text>ul>li*3>a^^p

<C형> https://webstudybasic.pe.kr/landing/source/C-1/index.html

<!-- 컨테이너 -->
.container

  <!-- 헤더 -->
  header#hd.d-flex>h1>a>img^^ul#gnb>li*4>a{대분류}+ul>li*5>a{소분류}
  <!-- 컨텐트 -->
  .content
        <!-- 스와이퍼 -->
      #swiper>.swiper-wapper>.swiper-slide*3>img
        <!-- 3단구조 -->
      #three>.tabs>#notice>h4+ul>li*4^^#gallery>h4+ul>li*3
             .banner0>a>img
             .banner1>a>img
        <!-- 푸터 -->
      footer#ft>h2>a>img^^div>ul>li*3^^p{copyright All rights reserved 해운대 빛축제}

2. 실습

2-1. 기본 세팅

+) 시험장에서 제공하는 제이쿼리 저장해두기 (인터넷 NO)

2-2. 공통클래스 삽입

*{ margin: 0; padding: 0; }
a{ color: black; text-decoration: none; }
ul, li{ list-style: none; }
a:hover{color: red;}

.red{background-color: red;} <!-- 여기까지구나? 확인 차원 -->

.container{width:1200px; margin:0 auto} <!-- A형 -->
<!-- .container{width:1000px;} // C형 -->
.w30{width:33.333%}

.d-block{display:block}
.d-flex{display:flex}
.justify-content-between{justify-content: space-between;}
.align-items-center{align-items:center}

.abs{position:absolute}
.rel{position:relative}
.zup{z-index: 100000;}
.ofh{overflow: hidden;}

.h100{height:100px}
.h200{height:200px}
.h350{height:350px}

2-3. 에밋 짜기

2-3-1) 헤더

href alt 비워두지 말것

<a href="#none"><img src="" alt="열심히"></a>

2-3-2) 스와이퍼

• 에밋

  #swiper.ofh>.swiper-wapper.100000.d-flex>.swiper-slide.w1200.h350*3>img

• CSS

  .w100000{width: 100000px;}
  .w1200{ width: 1200px;}

• 제이쿼리 (setInterval로 애니메이션 처리)

  <script>
  

$(document).ready(function(){ // $('body').css('background', 'red');

setInterval(function(){
    $('.swiper-wapper').animate({"marginLeft":-1200}, 400, function(){
        $(this).find('.swiper-slide').eq(0).appendTo( $(this) );
        $(this).css({"marginLeft":0})
    })
}, 3000)

})

``` +) 28일차 - js 애니메이션 (웹기능시험용) https://velog.io/@la_sta/28%EC%9D%BC%EC%B0%A8-js-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%9B%B9%EA%B8%B0%EB%8A%A5%EC%8B%9C%ED%97%98%EC%9A%A9

1-1. 사용 메뉴얼! (이해 x)

깃클론해서 타이핑 치지 말고 외우기 https://github.com/4thdraw/node14cafeapp

+) 깃허브에 dbconfig(db정보 위험)와 node_modules는 빼고 올리기! ( .gitignore )

• notice.js 와 연동된 dbconnect.js

• sql문 xml파일에서 선택하기

• 오류 메시지 출력 or 처리 결과를 리액트에 전송

• sql 저장해둔 xml 접근 모듈 // 나중에 이렇게 쓸 것

先 node_modules 폴더 생성!

• 리액트 모듈 설치 npm i
• 노드 모듈 설치 npm install underscore --save https://velog.io/@kjh950330/Nodejs-NPM%EC%9C%BC%EB%A1%9C-%EB%AA%A8%EB%93%88-%EC%84%A4%EC%B9%98

1. 노드

1-1. routes 방 안에 새끼 라우터 만들어 DB 삽입하고, 리액트와 연결

새끼 파일 생성

server.js - localhost:8080/reactProxy ( contact.js )

contact.js - get.js / post.js 연결 (require & use)

get.js 채우기

post.js 채우기

1-2. get.js에서 보내는 data들 보다 복잡하게 만들어보자

복잡한 DB를 리액트에 보내서 -> 리액트가 받아내 출력하도록 하자!

2. 리액트

리액트 접근 주소는? localhost:8080/reactProxy/list 가 된다

src 방의 contact.js

2-1. get.js가 보내는 DB 받아내기 BUT 오류 발생!

2-2. 화면 죽여두고, 방법을 찾아보자

힌트) https://www.daleseo.com/js-json/

JSON 내장 객체는 JavaScript 객체와 JSON 문자열 간의 상호 변환을 수행해주는 두 개의 메서드를 제공합니다.

• JSON.parse(str 변수) └ JSON 문자열을 JavaScript 객체로 변환하는 메서드 └ JSON 문자열을 인자로 받고, 결과값으로 JavaScript 객체를 반환 └ reviver 함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다.

콘솔에 출력해보면 JSON 문자열 형태의 데이터가 JavaScript 객체의 형태로 변환되어 출력되는 것을 확인할 수 있습니다. JavaScript 객체와 JSON 문자열 간에는 아주 미묘한 차이가 있는 것을 알 수 있습니다. JSON 문자열에서는 "키(key)"를 나타낼 때 반드시 "쌍따옴표"로 감싸줘야 하는 반면, JavaScript 객체에서는 쌍따옴표를 꼭 사용할 필요는 없습니다.

{
    name: "홍길동",
    age: 25,
    married: false,
    family: {
        father: "홍판서",
        mother: "춘섬"
    },
    hobbies: [
        "독서",
        "도술"
    ],
    jobs: null
}

이렇게 JavaScript 객체로 변환된 데이터는 . 혹은 [ ] 기호를 사용해 각 속성에 접근할 수 있습니다.

• JSON.stringify() └ 반대로 JavaScript 객체를 JSON 문자열로 변환할 때 사용하는 메서드 └ JavaScript 객체가 많은 양의 데이터를 담고 있는 경우, 3번째 인자로 들여쓰기 공백 지정

  '{"name":"홍길동","age":25,"married":false,"family":{"father":"홍판서","mother":"춘섬"},"hobbies":["독서","도술"],"jobs":null}'

<script>

const str2 = JSON.stringify(obj, null, 2); // 3번째 인자로 들여쓰기할 공백의 크기를 지정
console.log(str2);

</script>

보기 쉬워졌다

{
  "name": "홍길동",
  "age": 25,
  "married": false,
  "family": {
    "father": "홍판서",
    "mother": "춘섬"
  },
  "hobbies": [
    "독서",
    "도술"
  ],
  "jobs": null
}

1. Node.js 패키지 생성 및 실행(모듈 설치)

https://velog.io/@art-it/Npm-init-%EB%AA%A8%EB%93%88-%EC%84%A4%EC%B9%98

프로젝트 폴더 생성 후 npm init -y // package.json 생성

npm init -y

가장 기본적인 프로젝트 설정 끝

2. package.json

• "main": "server.js" 서버 인덱스 파일명 & 서버인덱스파일의 js파일을 생성 (서버실행파일)
• "server" : "node index.js" "server" 와 "index.js" 이름 자유롭게 지정 -> 노드 실행 시, npm run "server"

  +) "main"과 "server"는 자유롭게 지정 가능

  

3. npm install express (서버 프레임워크 깔기)

https://ponyozzang.tistory.com/711

npm install express

3-1. index.js (서버 언어는 걍 검색/복붙)

<script>

    // Express을 Node.js에서 사용할 수 있게 require()로 호출. 이것으로 Node.js에서 Express 프레임워크를 사용할 수 있게 됩니다.
    const express = require('express'); 
    const app = express();

    app.get('/', function (req, res) { // get메서드를 사용해 루틴(' /')과 표시할 내용("Hello World Express")을 설정할 수 있습니다.
        res.send('Hello World Express'); 
    }); 

    app.listen(8005);

</script>

3-2. "노드 실행하라" (npm run server)

http://localhost:8005 브라우저에 로컬 호스트 주소와 포트를 입력

• get이 눈에 보이는 주소창에, 눈에 보이는 주소를 쳐서 요청을 받아 처리하는 것이라면 post는 눈에 보이지 않는 주소를 요청받아 처리하는 것이다. 클라이언트에서 서버로 post 요청을 보내려면 ajax https://yahohococo.tistory.com/42

• /주소창에 치면 -> get방식으로 서버쪽에서 (요청req, 응답res) 처리

3-3. 주소창/about 치면 "about이 나왔네"라고 뜨도록

외관상 웹페이지와 동일하게 보임

• "페이지 이동" 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다.
• a태그와 Link태그 잘 구분해서 쓰기!

1-1. 라우트 돔 설치

npm install react-router-dom

1-2. index.js 임포트 & App 밖에 < BrowserRouter > 껴주기

"App 바깥쪽에 이 기능 쓸게" (하나만 삽입!)

import { BrowserRouter } from 'react-router-dom';

1-3. App.js 임포트

import { Routes, Route } from 'react-router-dom';

    <Routes>

        <Route></Route>
        <Route></Route>
        <Route></Route>

    </Routes>

1-4. path 3개 삽입 ( = 컴퍼넌트 3개 준비 )

• 주소창에 따라 컴퍼넌트가 선택되어 나감 즉, 주소창을 보고 웹페이지 노출 (컴퍼넌트만 보고 바꿔치기 됨)

• 각각 < Notice />< Gallery />< Nopage /> 3개의 컴퍼넌트 생성 (1-6)

• /*/ 사전에 정의하지 않은 경로로 접근하는 경우, Nopage 이동 처리

1-5. Link 태그 (+Link 임포트)

• 내 사이트 안에서 링크 이동 + 서버 새로고침 안 함! └> useState 아님! 외부링크 아님! (렌더링x)

• 밖에서 볼 때는 a태그로 변환됨.

1-6. 컴퍼넌트 3개 생성 후 임포트

rsfp

결과물

설명 참고 https://goddaehee.tistory.com/305

ex) 쇼핑몰 사용 예시

① 라우터를 사용하기 전에, 간단한 쇼핑몰 샘플 페이지 생성

App.js에 임포트할 3가지 페이지(=컴퍼넌트)

• 헤더.js
• 메인페이지.js
• 상품페이지.js

② 아직은 헤더/메인/상품페이지가 같이 보인다

③ 라우트 & Link

• < BrowserRouter >
• < Routes > 와 < Route >
• < Link > 주소창을 바꿔치기 하는 놈!

④ 4개의 모듈을 모두 작성한 후 접속하면, 페이지 분기 처리됨

ex) localhost:3000 → 메인 페이지 ex) localhost:3000/product/1

ex) localhost:3000/kfdkdfre → NotFound 페이지(404 Error)

선생님 깃클론 후 npm i

1. 현 깃허브 작업에서 이전 커밋으로 돌아가기 (깃 리셋)

• git reset --hard (파일까지 다 지우는 hard)
• 先 깃렌즈/깃히스토리 설치

+) 깃 커밋 리셋 https://www.lainyzine.com/ko/article/git-reset-and-git-revert-and-git-commit-amend/ ① git log --one ② git reset --hard 로그넘버 (그 이전까지 사라짐)

2. src 안에 json 폴더 생성

2-1) src 안에 json 폴더 생성 → navi.json 파일 생성

2-2) 화석화 (쌍따옴표)

2-3) {오브젝트}로 만들기

     <!-- 키 : 밸류 형태 -->
{ "navijson" : [{객체1}, {객체2}, {객체3}] }

3. 임포트 & 배열 외부연동

임포트

import naviDB from "../json/navi.json";

배열 외부연동

naviDB.naviDBjson; <!-- naviDB 안의 naviDBjson에 접근하라 -->

array가 map으로 돌게 됨

• 강사님 깃 삭제/추가된 것 공부하고 -> 할 수 있으면 내꺼에도 복붙/적용
• git log --oneline
• git reset 483753 (이 이후 작업 삭제)

"나의 소개페이지 싱글페이지를 리액트로 구현하기"

• 네비게이션 (react-bootstrap )
• 스와이퍼 ( swiper )
• 나의 소개 ( aos )
• 사전인터뷰(폴더형식)
• 면접제안 ( react-bootstrap )
• 하단

0. 강사님 깃클론 -> 첫 화면

1. 컴포넌트 분리시켜 데려오기

1-1. Hd 컴포넌트 빼서 부모자식 서열관계로 만든다

(+scss 폰트도 삽입)

1-2. 나머지 컴포넌트도 바깥으로 빼서 부모자식 서열관계로 만든다

총 5개

      <Header></Header>

      <Navi></Navi>

      <Worksswiper></Worksswiper>

      <Preinterview></Preinterview>

      <Footer></Footer>

내보내면 export default Navi; 임포트 받기 import Navi from './Navi'; 내보내면 export default Header; 임포트 받기 import Header from './Header';

2. 맵으로 스와이퍼 돌리기

2-1. json으로 DB 분리

2-2. DB json 글자노출 하려면?

<SwiperSlide> 여기에 맵을 삽입/ slide 1 대신 DB json글자노출 </SwiperSlide>

2-3. 맵 swiperinfo.map( ( item, index ) => { } )

return문 안에 < SwiperSlide >< /SwiperSlide > 삽입

2-4. cls(=클래스) 삽입해서 추후 css 작업가능하도록

3. SCSS 반응형 처리

강사님이 반응형 처리한 SCSS → 새롭게 깃클론!

3-1. 스와이퍼에 class 지정 (나중에 작업하기 편하도록)

이건 < Swiper >만 가능! 특별히 내장된 기능임.

<Swiper className='workSection'>

</Swiper>

3-2. 강사님 깃 scss 작업된 것 새롭게 클론

원래 SCSS

아래로 추가된 모습

+) scss에서의 static 경로 src 방에 위치한 scss는 public 방에 위치한 css와 모듈이 다름

https://swiperjs.com/react 에서 설치식 및 사용법 확인

2. 리액트 스와이퍼 사용법

2-1. Swiper & SwiperSlide 2개의 컴포넌트를 import

+) css도

2-2. const 스와이퍼 = ( )=>{ return식 }

2-2-1) 위의 Usage에서 그대로 복붙해 return 안에 삽입

이대로 끝내면 스와이퍼가 나오지 않음. 실행식을 써줘야!

2-2-2) APP( ){ return 안에 선언한 스와이퍼 실행식 삽입 }

3. autoplay 추가로 넣고 싶다면, 모듈로 호출

사용법 ex) https://swiperjs.com/react

3-1. 복붙복붙

import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

modules={[Navigation, Pagination, Scrollbar, A11y]}

navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}

3-2 Demos → autoplay (react) 실행식 복붙

결과물 Navigation, Pagination, Scrollbar, A11y 그리고 autoplay 적용된 것 확인

평가 위해 첨부할 자료

• DB 테이블 결과 캡쳐
• sql 화면 캡쳐 CREATE TABLE
• 노션 "~ 원리로 제작했다. 어떤 부분은 미흡했다"등 보고형식이 회의진행의 어려움이 없는가?

1. 시안이 들어오면

• 어떤 게 데이터가 되고, ex) 정보성 메일 수신에 동의합니다 / 인증버튼

• 어떤 게 DB가 되는지 파악 ex) 이름, 휴대폰번호, 이메일

• 추후 DB 설계 변형에 대비, 여분필드 3개쯤 더 넣어두기 (관계형 데이터베이스CMS를 잘 이해하고 설계하였는가?)

  

2. 테이블 생성 - 구조 몇개?

프라이머리키 이름 1 생년월일 (낱개 떨어진 애를 implode -> 하나로 뭉쳐있는 DB) + 성별(char1) 3 아이디 4 휴대폰번호 5 이메일 (낱개 떨어진 애를 implode) 6

CREATE TABLE pwa_sql
(   `id`          int           NOT NULL AUTO_INCREMENT PRIMARY KEY ,
    `pwa_name`    varchar(255)  NOT NULL,
    `pwa_bday`     varchar(255)    NOT NULL,
    `pwa_sex`         char(1)       NOT NULL,
    `pwa_id`         varchar(255)  NOT NULL,
    `pwa_phone`     char           NULL,
    `pwa_email`       varchar(255) NULL,
    `pwa_kakao`      varchar(255) NULL,
    `pwa_1`      varchar(255) NULL,
    `pwa_2`       varchar(255) NULL,
    `pwa_3`       varchar(255) NULL
);

3. 제작노트

개발환경 : php7.4 mysql8.0 db접속

제작현황 :

• 평가 시안 확인 후, 가장 먼저 어떤 항목이 데이터가 되고, 어떤 항목이 DB가 되는지 파악. ㄴ이름/생년월일/성별/아이디/휴대폰번호/이메일 항목을 구조로 갖는 sql table 생성
• 생년월일과 이메일은 데이터타입을 varchar(255)로 지정함. ㄴ추후 implode 처리하여 array를 받아내고자
• 향후 클라이언트 요청에 대비, DB 설계를 변형 가능토록 여분필드 4개를 더 삽입했음.

제작이슈 :

• 회원가입란에 사용자 비밀번호를 얻어내는 항목이 누락됨! 향후 인터페이스를 수정하고, 테이블의 여분 필드를 활용해 비밀번호를 받아내는 작업 요! ㄴ여분 필드의 데이터타입이 varchar(255) 이므로 비밀번호에 특수문자를 사용 가능. ㄴ이는 사이트 보안 강화에 도움이 될 것.

• '휴대폰번호 인증버튼'과 '정보성 메일 수신 동의' 여부는 추후 자바스크립트 처리토록.

• query 함수 : DB를 서버언어가 쓸수있게 가공해주는 php 함수

① 같은 서버 내에 있는 DB에 접속하고, 성공 여부 확인받는다. ② 성공했다면, 특정 테이블 선택해서 DB를 $sql 변수에 저장한다 (query 함수) ③ query함수로 DB를 php에서 쓸수있게 가공한 뒤, $result 변수에 저장! ④ html 출력문과 $result 변수 연결해, 화면 확인

1. sql문으로 게시판 테이블 만들기

내 폼태그 DB 테이블 변수명

1-1. 폼태그 테이블 생성

CREATE TABLE member_table
<!-- 필드명    용량제한/데이터타입  필수인자 -->
(   `id`            int           NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `name`          varchar(100)  NOT NULL,
    `gender`      char          NULL,
    `age`         int(11)       NULL,
    `content`     text(300)     NULL
);

1-2. insert into 명령으로 DB 5개 삽입해보기

INSERT INTO `test_table` ( `id`, `subject`, `content` )

VALUES
( NULL, '제목1', '가나다라마' ),
( NULL, '제목2', '바사아자차' ),
( NULL, '제목3', '카타파하가' ),
( NULL, '제목4', '나다라마바' ),
( NULL, '제목5', '사아자차카' );

1-3. php로 sql에 데이터 집어넣는 방법

id는 자동생성auto_increment 이니까 지워도 됨

2. 폼태그와 php 연동

2-1. 폼태그 생성 ( write.php )

• action = "insert.php"
• method = "post"
• 인풋 name과 php 변수 연결

2-2. 인풋란을 "POST" 방식으로 insert.php로 전송

2-3. POST 형식으로 받아서 출력

• write.php의 submit 버튼 클릭 시, action과 연동한 insert.php 페이지가 나타남
• insert.php 페이지 내용 : $subject = $_POST['subject'] └> $subject 변수에 post 방식으로 전송된 인풋 name='subject' 저장 └> sql의 테이블 test_table에 삽입할 값으로 subject $content 변수 └> "query 함수가 sql문 실행한다!" └> echo 다음과 같이 화면 노출

3. 폼태그의 checkbox(배열값)와 php 연동

체크박스와 같은 배열값 처리하기 참고 https://m.blog.naver.com/imm7745/221687698469

인풋란 write.php

화면출력 insert.php

즉, 배열값을 처리할 수 있다!

포폴 폼태그 적용하기 : 인풋란 write.php

포폴 폼태그 적용하기 : 화면출력 insert.php

4. 페이지 바뀜 없이 폼태그 submit 하기(+iframe)

참고 https://m.blog.naver.com/kimstcool01/220937419440

insert.php

iframe └> 다른 html 문서를 포함시킬 수 있도록 하는 태그. └> form의 target 속성을 이용하면 페이지 전환없이 인풋값을 submit 할 수 있다.

write.php

<style>
    /* iframe을 숨기기 위한 css */
    #if{
        width: 0px;
        height: 0px;
        border: 0px;
    }
</style>

5. 내 포트폴리오 폼태그 완성하기 (오후실습)

5-1. 면접제안 폼(수정불가능)에서 글작성해 sql에 DB 올리기

+) 페이지 이동 없도록 아이프레임 처리!

4번처럼 만듦 (but 문제 발생)

• Q) id를 수동으로 13 14 15 입력해야 sql에 올라감

  테이블 생성할 때, id에 AUTO_INCREMENT 지정해야 했음!! 그러면 'id' & value 안써도 됨. "MySQL은 자동 증가를 수행할 AUTO_INCREMENT 키워드를 사용합니다"

• Q) 체크박스 position이 그냥 Array라고 뜸

아래 식 필요

수정 sql 데이터 업로드

인풋란 & 체크박스

결과물

폼태그에서 입력한 내용들이 sql 테이블에 저장됨

5-2. 사전인터뷰 폼(수정가능) 글작성해 sql에 DB 올리기

• 글작성 & 수정 가능하도록 if-else 사용

query

• php함수
• DB를 서버언어가 쓸수있게 가공해주는 함수

① 같은 서버 내에 있는 DB에 접속하고, 성공 여부 확인받는다. ② 성공했다면, 특정 테이블 선택해서 DB를 $sql 변수에 저장한다 (query 함수) ③ query함수로 DB를 php에서 쓸수있게 가공한 뒤, $result 변수에 저장! ④ html 출력문과 $result 변수 연결해, 화면 확인

PHP7.4 MySQL 8.0 db접속 mysqli_connect

• php버전 : PHP 7.4
• DB : MySQL 8.0

<?php
$db_con = mysqli_connect("DB서버주소", "아이디", "비번", "DB명");
if ($db_con){
  echo "DB 연결 성공<p>";
} else {
  echo "DB 연결 실패<p>";
}
$sql = "SELECT * FROM `cms_board`";
$result = $db_con->query($sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>직접 서버와 연동하는 나의 php페이지</title>
</head>
<body>
    <div>    
    <?php
    if ($result -> num_rows > 0) {
        // output data of each row
        echo "<p>".$result-> num_rows."개의 게시글이 있습니다.</p>";
        echo "<ul>";
        while($row = $result->fetch_assoc()) {
            echo "<li>게시판아이디: " . $row["bo_table"]. " - 게시판제목: " . $row["bo_subject"]."</li>";
        }
        echo "</ul>";
    } else {
        echo "<p>게시글이 없습니다.</p>";
    }
    $db_con->close();    
    ?>
    </div>
</body>
</html>

• G5_PATH : php가 쓰는 경로 (서버 언어에서만 사용)
• G5_URL : 도메인http:/부터 시작하는 경로 (프론트엔드가 사용! =태그에서 쓴다) ex) G5_IMG_URL 화면 출력되는 경로를 프론트엔드쪽에서 쓰기 편하게끔 만들어준 변수

<img src="http://~~~.dothome.co.kr/cms/img/logo.png" alt="그누보드5" title="">

변수 (구분자)

• 게시판 구분자 -> $bo_table
• 내용관리 구분자 -> $co_id
• 게시글 구분자 -> $wr_id

$bo_subject // 게시판 제목
$wr_subject // 게시판의 게시글 제목 <!-- $subject로 다시한번 변수지정(편하게) -->
$wr_content // 게시글 내용 <!-- $content (많이 쓰는 애들 간편하게 부르기) -->
$thumb         // 이미지정보에 해당하는 변수 Array <!-- $thumb[ src ] / $thumb[ ori ] -->

Q) 이미지경로(~~.jpg)가 이미지로 노출되게 ($thumb)

<?php
   echo '<img src=\" '.$thumb[ src ].' \" >';
?>

1. 최근게시글을 제작하려면 무엇부터 해야하나?

① 게시판 생성 ② 게시글 삽입 ③ 스킨 골라서 올바른 경로에 업로드 (그누보드에서 스킨 최신글 스킨 맘에 드는 것 골라서 latest 폴더에 업로드) ↓↓↓ (4,5,6번은 그누보드에 있기 때문에, 그누보드에서 그냥 작업할 경우 생략) ↑↑↑ ⑦ 최신글 스킨 튜닝하기

2. (51일 복습) ./_common.php

오직 common.php를 호출하는 놈. 그 이외에는 역할 주지말것! html 파일과 나란히 _common.php 두고, 그누보드 안의 common.php 호출

<?php
    include_once('./_common.php'); <!-- common.php 호출 -->
    include_once(G5_LIB_PATH. '/latest.php'); <!-- lib에서 latest.php 가져옴 -->

    <!-- latest 함수 호출 -->
    echo latest('pic_list', 'notice', 4, 23); <!-- 최근 게시골 노출 방식 -->
    <!-- latest( '사용할 스킨' , '게시판id', 노출할 갯수, 글자수 ); -->
?>

Quiz) free게시판의 '최근 게시'를 그누보드 본 스킨의 basic으로 출력되도록

<?php
    echo latest( 'basic', free, 5, 100바이트 );
?>  <!-- latest( '스킨', '게시판id', 노출할 갯수, 글자수 ); -->

3. 스킨 골라서 올바른 경로에 업로드

sir.co.kr 스킨방 → 최신글 스킨 다운 → 압축풀고 그누보드 스킨방에 넣기 (+서버 업로드)

• 그누보드 테마, 다 부숴도 되도록 베이직으로 변경 (그전까지 medicine 사용했음)
• 이제 그누보드 latest는 쓰는데, 테마방 안의 latest는 못 쓴다

4. 최신글 스킨 튜닝하기

결과물 index 페이지

sub 페이지

5. 스킨 골라서 올바른 경로에 업로드 (최신글x슬라이더)

① 그누보드에서 최신글 스킨 맘에 드는 것 골라서 다운&압축해제 → latest 폴더에 집어넣기 ② echo latest 함수로 노출하기

그누보드 최신글 스킨을 이용한 메인 배너 스킨입니다.
스킨 적용위치는 상관없으나 head.php 파일의 <div id="container_wr"> 상위에 위치시켜주시면 됩니다.

<?php
/* thumb_width, thumb_width : 배너이미지 가로,세로 크기 */
$options = array();
$options['thumb_width'] = '1920';
$options['thumb_height'] = '680';
echo latest('theme/main_slider', 'main_slider', 5, 23, 0, $options);
?>

여분필드 사용 // IMAGE01 - txt_big : 여분필드 wr_1을 사용
쉽게 관리하는 배너스킨 // txt_small : 여분필드 wr_2을 사용
더보기아이콘 // href : wr_link1값이 있을경우 wr_link1값 적용(기본:href)

최신글x슬라이더 적용됨

③ 게시판 생성 ④ 게시글 삽입

⑤-1) 썸네일 오리지널 이미지로 $thumb['ori'] ⑤-2) 슬라이더에 게시판 제목/내용 삽입 - 관리하기 쉽도록

결과물

6. 최신글 스킨 - 상단 튜닝

이렇게 만들어보자

상단 웹 접근성을 지키기 위한 태그순서

여기까지, 태그 순서만 옮겼을때의 모습

CSS 삽입 후 완성된 형태

skin방 안의 gallery → list.skin.php에서

7. PHP에서 데이터베이스 접속하기 (db접속하기)

mysql_connect 함수 이용

• 키워드 검색해서 → php7.4 mysql8.0 db접속 → 찾아서 복붙
• 기본적으로 데이터베이스에 접속하는 기본 문장들 있음 └ 처음 4개는 DB에 따라 다르므로 각자에 맞게 설정해줘야

<?php
$db_con = mysqli_connect("localhost", "root", "터미널에서 MySQL 들어갈 때 치는 비밀번호");
if ($db_con){
  echo "DB 연결 성공<p>";
} else {
  echo "DB 연결 실패<p>";
}

$db_sec = mysqli_select_db($db_con, "연결을 확인하고 싶은 데이터베이스명");
if ($db_sec) {
  echo "DB select OK <p>";
} else {
  echo "DB select NO <p>"
}
?>

8. 첫화면 index.php만 다른 css 깔기 위해

ex) 첫화면 인덱스 페이지만 다른 게시판과 달리 max-width 빵빵하게 넣는다거나

8-1. 그누보드 포트폴리오 / 아이템을 정의한 변수 선언하기

8-2.

Quiz) 메인 index 페이지만 하단 배경색 white + 글자 black

나머지 페이지들에서는 하단 black + 글자 white

• define ( '변수' ) 선언 대문자로 지정 정의값! (일반변수 아님! 사실 변하지 않음) ≒ const 한번 정의되면 끝! (그누보드 설치할 때 정의되고 끝!)

• $sql 달러로 시작하는 일반변수

1-1. define('정의값') 선언에 대해 알아보자

그누보드 본 index.php에 선언됨 ( 내가 설치한 테마ㄴㄴ ) 첫 인덱스 페이지에 들어가는 정의값!

ex) 'G5_THEME_PATH' = "네가 설정한 테마의 경로"

1-2. index.php에 직접 정의값 선언해보기

단, 이건 인덱스 페이지(index.php)만 인식하는 정의값!

• 전 포폴 영역에 통하는 정의값을 선언하고 싶은데... 모든 페이지에 다 걸리는 걸로! 힌트) "include"...... php는 다 찢어져있잖아?
• 정답)* 내가 쓸 테마의 head.sub에 변수 선언한다!

1-3. head.sub.php에 정의값 선언하기!

< head >와 < head.sub >, 공통점과 차이점 └ 둘은 같이 다닌다, 하나로 생각! └ head.sub( 변수선언/눈에 보이지 않는 js등 )이 head( 인터페이스 )보다 먼저 온다. └ 페이지 호출 시, head.sub헤드섭 → head헤드 → index본페이지 → 푸터tail → 푸터섭tail.sub

2. 그누보드 공통변수 common.php

① index.php에서 include_once('./_common.php'); ② _common.php에서 include_once('./common.php'); 를 호출한다

+) index.php가 가지는 if문 살펴보기

• "개별 페이지 접근불가" : 그누보드 정의값이 선언돼있지 않다면 exit

• "테마 선언되어 있으면, 인덱스 첫페이지만 팝업창 띄우기" ex) 'G5_THEME_PATH' = "네가 설정한 테마의 경로"

3. 내 html과 그누보드 시스템 연동하기

① 그누보드 폴더 밖에 sir.html & _common.php 만든 다음 → ./_common.php 호출

    <?php
        include_once('./_common.php');
        include_once(G5_LIB_PATH. '/latest.php');

        echo '<h1>'.G5_PATH.'</h1><h1>'.G5_PATH.'</h1>';
    ?>

② _common.php가 그누보드(cms) 안의 common.php 호출함.

    <?php
        include_once('./cms/common.php');
    ?>

즉, 그누보드가 쓰는 변수 다 갖고올 수 있다!

③ 서버 업로드 후 확인 : 다음과 같이 뜬다 /host/home2/dotoho/html/cms

4. 최근 게시 노출하는 함수

echo latest( 스킨, 게시판id, 출력라인, 글자수 );

최근 게시를 노출하고 싶은 구역에 함수 호출 실행함.

include_once(G5_LIB_PATH.'/latest.lib.php');

"테마의 스킨을 사용하려면 theme/basic과 같이 지정"

• basic을 가져와 옷입히겠다 (그누보드 본래 skin의 latest의 basic)
• theme/basic을 가져와 옷입히겠다 (내가 받은 테마 속 skin의 latest의 basic)

5. php는 sql과 연동해서 화면 출력함.

태그 안에 php 있고 그럼

6. for문 = list (목록)

• 백엔드 언어로 만들어진 '프레임워크' ex) 워드프레스
• 백엔드에 전달할 정보 : DB명 / DB테이블 / 접두어 / DB아이디 / DB패스***워드 / DB접속주소

Q) DB를 추가하는 방법이 없을까요? wp_write_free여성사진가협회 / mm_write_free뫄뫄회사 / ss_write_free솨솨기업 등등 모든 DB가 다 'dotoho' 안에 있으면 무섭잖아. 실수로 딴거 삭제할까봐.

A) 돈 주고 서버를 더 사세요.

1. 닷홈 phpMyAdmin 로그인

• 접두어_write(게시판)_gallery(아이디)
• 접두어_write(게시판)_notice(아이디)

2. CMS_board_file은 '첨부파일' 게시판

첨부파일은 CMS_board_file 게시판에서 따로 관리함.

3. phpMyAdmin에서 즉시 'free' 게시판 수정하기

방법1) CMS_write_free '수정' → 빈칸 바꾸기

방법2) SQL을 수정해주기 (백틱)

UPDATE `CMS_write_free` SET `wr_hit` = '1000', `wr_name` = '접니다' WHERE `CMS_write_free`.`wr_id` = 1;
    <!-- 이 게시판을 수정 -->  <!--조회수를 1000으로-->  <!--글작성자 수정-->    

• UPDATE CMS_write_free /// 이 게시판을 수정
• wr_hit = '1000' ////// 조회수를 1000으로 수정
• wr_name = '접니다' /// 글작성자 수정

↓

수정 후, php 언어 변경된 것을 확인

아래처럼 게시글 컨텐츠 수정됨 ex1)

4. free 게시판에 '새 글' 삽입하기 (3과 동일)

방법1) CMS_write_free '삽입' → 빈칸에 new 내용 삽입하기

wr_subject 제목 wr_content 내용 wr_link1 wr_name 글작성자 wr_datetime 글작성시간 wr_1 2 3 4 ... 여분필드

방법2) SQL로 새글 삽입하기 (백틱)

          <!-- 이 테이블로 -->
INSERT INTO `cms_write_free` (`wr_id`, `wr_num`, `wr_reply`, `wr_parent`, `wr_is_comment`, `wr_comment`, `wr_comment_reply`, `ca_name`, `wr_option`, `wr_subject`, `wr_content`, `wr_seo_title`, `wr_link1`, `wr_link2`, `wr_link1_hit`, `wr_link2_hit`, `wr_hit`, `wr_good`, `wr_nogood`, `mb_id`, `wr_password`, `wr_name`, `wr_email`, `wr_homepage`, `wr_datetime`, `wr_file`, `wr_last`, `wr_ip`, `wr_facebook_user`, `wr_twitter_user`, `wr_1`, `wr_2`, `wr_3`, `wr_4`, `wr_5`, `wr_6`, `wr_7`, `wr_8`, `wr_9`, `wr_10`) 

VALUES <!-- 각 값들을 삽입(insert into)한다 -->
(NULL, '0', '', '0', '0', '0', '', '', '', 'sQL에서 넣는 데이버베이스', '내용', '', '', '', '0', '0', '0', '0', '0', '', '', '', '', '', '2022-12-05 10:17:38', '0', '', '', '', '', '', '', '', '', '', '', '', '', '', '')

• INSERT INTO cms_write_free (~) //// 이 테이블로
• VALUES ( , , , , ~ ) /// 각 값들을 삽입(insert into)한다

+) SQL 1회로 새글 5개 작성하는 법 (=DB를 한꺼번에 업로드)

한꺼번에 5개의 새글이 작성됨

그누보드에서도 확인 가능 ↓

5. 테이블 구조 살펴보기

5-1. CMS_write_free의 테이블 구조 살펴보기

• 이름
• 데이터타입
• null 필수입력
• 기본값

5-2. CMS_board_file(첨부파일 게시판) 테이블 구조 살펴보기

사진을 두 장 첨부하면 아래처럼 나타남.

5-3. cms_config(그누보드 테마 있는곳) 보기

6. 내가 만든 게시판 테이블 찾아가기 : CMS_content

bo_table 게시판 co_id 내용관리

wr_subject  // 게시판명
wr_content  // 내용
wr_name     // 글작성자
wr_datetime // 글작성시간
wr_hit         // 조회수

7. where 키워드로 원하는 데이터 정확히 뽑아내기

주로 사용되는 키워드들 where order by wr_id desc(내림차순) order by asc(오름차순) group by 특정 필드

예시1)

                               <!-- 필드가   5 이상인 애들 추려 -->
SELECT * FROM `CMS_write_free` where wr_id >= 5;

예시2)

SELECT * FROM `CMS_write_free` where wr_name = '행인';
                                <!-- 조회수가 100 이상인 것만 -->

예시3)

SELECT * FROM `CMS_write_free` where wr_hit >= 100;

예시4) 2개 필드에서만 조건 사항 추려내기

SELECT wr_name, wr_subject FROM `CMS_write_free` where wr_hit >= 100;

예시5) 조건이 일치하는 필드의 갯수 세기

SELECT count(wr_id) FROM `CMS_write_free` where wr_hit >= 100;

8. 게시판 만들기 - 테이블 생성 및 데이터 입력

기본 틀 예시)

• 필드명
• 용량제한/데이터타입
• 필수인자

  CREATE TABLE emp_table
  <!-- 필드명    용량제한/데이터타입  필수인자 -->
  (   `emp_id`      int           NOT NULL,
    `emp_name`    varchar(100)  NOT NULL,
    `gender`      char          NULL,
    `age`         int(11)       NULL,
    `content`     text(300)     NULL,
    PRIMARY KEY (emp_id)
  );

+) PRIMARY KEY란? 컴퓨터가 관리하는 키

포폴 사전인터뷰 폼 필드에 최적화된 테이블 만들기

① 기본 틀

모양 A

CREATE TABLE freeinterview_table
(   `id`          int           NOT NULL,
    `subject`    varchar(255)  NOT NULL,
    `content`      text          NULL
    PRIMARY KEY (emp_id)
);

모양 B

CREATE TABLE freeinterview_table
(   `id`          int           NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `subject`    varchar(255)  NOT NULL,
    `content`      text          NULL
);

② emp_table & freeinterview_table 테이블 생성하기 (A,B 각각 예시)

③ emp_table & freeinterview_table 테이블이 각각 생성됨

9) '게시글 순번' 바르게 지정

게시판 관리에서 직접 조정해준다 → 순번이 뒤죽박죽에서 깨끗이 정리됨.

• 내용이 바뀌거나 추가될 수 있다 (DB 차곡차곡 누적) └> "이전 버젼을 이어가기 위해, 내용관리(덮어쓰기)보다 '게시판' 처리해 튜닝했습니다"
• 사용자들은 못 쓰지만, 관리자는 글씀
• 게시글 작성 후 메뉴설정란에 링크복붙 & 댓글창 등은 d-none ex) 공지사항 ex) 회사연혁 : .... 2018 2019 2020 2021 2022....

8-6. 태극당 시연) 주소창에 있는 서버쪽 변수를 이용해 -> 필터링

9. 주소창에 있는 서버쪽 변수 이용해, CSS 변경

하나의 레이아웃으로 여러 디자인을 만들 수 있음!

9-1. 요소검사 → 자바스크립트에서 사용하는 '전역 변수 선언' 확인

var g5_bo_table  = "";

그럼 변수값은 어디?

9-2. 관리자 페이지에서 변수명 & 변수값 확인 가능

$(bo_table) : 게시판 아이디 co_id : 내용 아이디

9-3. 주소창에 있는 서버쪽 변수 이용하는 법

다운받은 테마 medicine 폴더 → head.sub.php 페이지 소스에서 body class=""로 bo_table 변수값 "free" 삽입됨

ex) 페이지 소스에서 이런 식으로 나타남

<body class="gallery">

9-4. 클래스로 CSS 변경

9-4-1) 페이지 소스에서 어떤 CSS를 변경할지 찾기

10. 원활한 서버 작업을 위한 echo 런타임 처리

11. 그누보드에 제이쿼리v2 cdn 삽입하기

먼저 있던 제이쿼리v1 주석 후 cdn 삽입 같은 방법으로 스와이퍼 cdn도 복붙해라

12. '게시판' 튜닝하기

+) !important 쓰지 않고, 우선순위 바꿔서 내께 먹히도록

결과가 이렇게 되도록

1. 공통 구역 생성 - 상단header / 하단footer / 퀵aside

2. head.html / index.html / footer.html 생성

3. 자르기 자르기

공통 구역(상단/하단/퀵)은 그대로고, 바디만 바뀌는 방식.

4. 분리된 파일 import 하기

서버는 절대경로! php는 상대경로!

<?php include_once('상대경로'); ?>

5. board.html

6. login.html

7. 상하단+퀵 : 얘네가 계속 들어옴

서버에서 확인해보기

1-1. "submit 버튼 클릭 시"

.on 메서드 & 클릭 이벤트 : 이벤트를 동시에 여러개 받는 방법 └> click 혹은 submit ! 두 개를 다 받을 수 있다

1-2. return false; 넘어가지마

1-3. if-else 유효성검사

1-4. .prop( ) 메서드 : 속성에 접근해서 '참/거짓' 가져옴

• 지정한 선택자를 가진 첫번째 요소의 속성값을 가져온다

• prop / hasClass / is~ : 이런 형태의 메서드는 true/false를 return한다 (if 조건문 안으로 삽입!)

• ※ HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)

  ㄴ _attr로 접근하면 안돼!_

  <script>
    // prop / hasClass / is~~~
    // $('#agree').prop( "checked" ) : true
     // $('#agree').is( ":checked" ) : true
  
  if( !( $('#agree').is(":checked") ) ){
          return false;
        }
  if( !( $('#agree').prop("checked") ) ){
          return false;
        }
  

![](https://velog.velcdn.com/images/la_sta/post/a02380bb-ea30-4319-bfaa-f1cf27e5c5e3/image.png)

---

## 2. 12/05평가) 포폴 폼태그 작성
### 2-1. 팝업창 작성하고 CSS
폼에 폰트부터 삽입해라 (부트스트랩 틀어지니까)
### 2-2. 달력부분에 쓸 UI 제이쿼리 datepicker
https://jqueryui.com/datepicker/

### 2-3. 자바스크립트 <-> 제이쿼리로 바꿔보기
기초 제이쿼리와 자바스크립트 치환방식
https://tyrionlife.tistory.com/381

+) 리액트 갈 사람들은 **이메일 인증버튼** 받아서 글쓰기 버튼으로 넘어가도록

시나리오

① 검색어 필드를 채우고 '저장' 클릭하면 차례대로 저장해 두었다가, ② '확인하기' 통해 한꺼번에 노출시킴

1. HTML 인풋란 작성

2. '저장하기' 버튼 클릭! 하는 제이쿼리 식 작성

근데 < button >에 class, id 없다면? (nth-child도 말고!)

그럼 뭘로 잡아서 addEventListener 해???

방법1) 버튼에 class 삽입 - addClass( ' this.index( ) ' )

같은 표현

방법2) 버튼에 id 삽입 - attr( 'id', 'btn + index순번' )

방법3) data-name으로 '컨텐츠'를 저장 - [data-nm="확인하기"]

① 콘솔창에서 확인해보기

② 버튼 순서를 바꿔보자! '확인하기' ↔ '저장'

결론 : 세번째 것이 제일 좋다! (버튼 순서 바껴도 그대로 있다였나?)

③ CSS로 확인하기 ( 데이터-네임="저장"에 경계선색 주기 )

④ 버튼 순서를 바꿔보자! '확인하기' ↔ '저장'

3. on : 실체 없는 객체 안으로 자바스크립트 식 밀어넣기

[data-nm="저장"] 은 동적객체 ( = 페이지 소스보기에 없는 애들! )

$(부모).on( 'click', '동적객체_페이지 소스보기 없는 애들', function(){
            <!-- /////////////////// -->
})

배열 선언

var stext = [ ];

'저장' 버튼을 누를 때마다 → 사용자가 input에 넣은 숫자값을 이 배열에 .push

$(부모).on( 'click', '동적객체_페이지 소스보기 없는 애들', function(){
    <!-- #search 인풋에 작성한 값을 배열에 push -->
})

4. '저장해둔 검색어는 ( stext ) 입니다' 화면 출력

4-1) html에 append 하기!

    $('#search').append('<div>저장해둔 검색어는 ' + arrnms + ' 입니다.</div>');

4-2) 오류가 난다면, 빈 배열 선언 방식 수정하기

var stext = [ ]; 대신 var stext = new Array( ); // 이게 더 좋다

근데 이 단계에서 아직 화면 출력 안됨

5. 인풋란이 비어있으면 처리 안되도록 if-else

<script>
    $('body').on('click', '[data-nm="저장"]', function(){

        let searchText = $('[type="text"]').val()

        if( searchText != '' ){
            stext.push( $('#search input').val() )
            console.log(stext);
            $('#search input').val('');
        }else{
            alert("검색어를 입력한 뒤 저장하세요")
            $('[type="text"]').focus();
        }
    })
</script>

6. 사용자가 입력한 검색어가 (매개인자)로 들어가는 콜백함수

이렇게 만들어봅시다

6-1) 강사님이 제시한 틀 : 이 식을 마저 완성해보자!

6-2) '저장해둔 검색어는 ... 입니다' 를 화면 출력

6-3) 콜백함수 매개인자 arrnm(=stext) 과 arrnms(=searContent)

6-4) '확인하기' 버튼을 클릭하면 마지막 컨텐츠에만 ' , ' 빼기

• slice 사용 (근데 내껀 화면 적용이 안 됐음)

• join 메서드 사용

  join( ) 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.