[Let's TIL✍️] 코딩 18 : 4 Week_ 추가 강의 : 당당마켓 마무리 (4&5)

- 4주차의 당당마켓 부분 수정 & 기능추가

- 5주차의 aws관련한 부분 정리

 

---

01. [당당마켓] 텍스트 편집기 기능 적용하기

1) VScode에서 write.html 열기

그동안 우리가 사용한 textarea 태그는 단순히 텍스트를 추가해주었다.
그런데 우리는 editor, 즉 편집기를 적용할 것이다.

이때 위지윅 에디터라고 하는 quill을 사용해볼 것이다. 

2) Quill 검색해서 접속하기
https://quilljs.com/

3) DOUCMENTATION 클릭

QuickStart가 나오고 이 안에는 cdn, JS코드, Script가 보인다.

이전 방식과 동일하게 css는 위에, JS는 아래에 추가를 할 것이다.

 

4) 먼저 CSS 복사해서 Html에 붙여넣기
        <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

5) div 태그 복사해서 html에, textarea 아래에 붙여넣기

<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

 

TIP🤖 textarea 태그

편집기를 추가한 경우 textarea 태그가 아니기 때문에, from이 전달될 때 편집기의 내용을 textarea 태그에 추가하는 동작이 필요하다.

6) script 복사해서 , html 아래 부분에 추가하기 
(</body> 바로 위에 추가했다.)

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

7) 브라우저에서 확인하기

 

 

 

 

editor는 우리가 어떤 텍스트를 작성하거나, 
기능을 활성화 했을 때, 
이를 태그로 변환해 주는 역할이다.

= 등록할 때에도 태그를 포함한 문자열은 전달한다.

 

 

 

 

8) textarea 수정하기

<textarea id="content" class="form-control" rows="4" name="content"></textarea>

 

이때 textarea를 삭제하면 안 된다.
그 안에 name="content"라는 속성값이 있는데, 

이 속성값을 따라서 데이터가 submit 될때 자동으로 값이 전달되고 있기 때문이다.

(만약 없애면 내용값이 전달 되지 않는다.)

 

따라서 

1_ textarea를 보이지만 않게 설정하기
: class는 삭제하고 , style 값을 넣어준다.

       <textarea id="content" rows="4" name="content" style="display:none;"></textarea>

2_ submit 하는 순간에 data(내용)을 받아오는 코드 작성
= 'form이 submit 할 때' 에 대한 코드를 먼저 작성, 

                                                 <form method="POST" action="/write" id="write-form">

3_ head로 가서 submit을 할 때 연결하는 코드 작성
: write-form id 속성값을 넣은 from을 섭밋(제출) 할 때 연결하는 코드

 

       $(document).ready(function() {
                $("#write-from").on('submit', function () {
                });
            });

TIP🤖 on('submit') = '제출 되었을 때'를 의미한다. 

 

 

4_ div 에디터 아래에 있는 내용들을 textarea안에 넣어주는 코드 작성
= editor id를 가진 태그의 html 가져오기

   이때, 이전에 배운  let content = $("#editor").html(); 를 하면 안 된다!

 

그 이유는 ?

개발자 도구를 살펴보면, 자동으로 생성된 다른 editor 태그들이 있다. 
이 class 속성을 이용해야한다.

class = "ql-editor"

         let content = $(".ql-editor").html();

 

 

5_ 데이터를 넣기 위해, content 태그 추가
 

       

          $("#content").html(content);
                    return true;

 

6_ 상세정보가 html로 나오도록 변경
: 만약 변경하지 않으면, 태그로 나오기 때문이다. 
script.js로 가서, text를 html로 변경한다.

 

 

  $("#detailModalContent").html(result.content);

 

 

태그로 나온다는 것은?

이렇게 나온다.

 

---

02. <당당마켓> 이미지 업로드 기능 적용하기

이미지를 업로드하는 기능을 추가할 것이다.

---

새롭게 적용할 부분

1) form 태그에 enctype이라는 속성값 추가하기
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype
이 사이트에서 두 번째 부분을 복사해서 vscode로 가져온다.

 

 <form enctype="multipart/form-data" 

수정 완료

이렇게 하면, form태그를 이용해서 파일을 전달할 수 있게 된 것이다.

2) 파일 입력 부분 만들기

 

이제 '내용' 아래 부분에 새로운 div 를 넣어서, 파일 입력하는 곳을 만들어보자

            <div class="form-group"></div>

3) 위에 있는 '가격'부분을 복사해서 label과 input 태그를 활용하기

먼저 복사해서 붙여넣은 다음, image로 변경하기

                    <label for="price">가격</label>
                    <input type="number" class="form-control" id="price" name="price">

변경: 

       

    <div class="form-group">
                <label for="image">이미지</label>
                <input type="file" class="form-control" id="image" name="image">
            </div>

 

4) 브라우저에서 확인 (종료 후 재실행)

사이트로 가보면, 파일을 넣을 수 있는 항목이 생성되었다.

이제 파일을 저장할 수 있게 만들어보자.


1) 파이썬으로 가서(app.py) 파일을 입력받아야 한다.

이때 form이 전달되는 부분? 
write 부분이고, 그 안에서 파일을 입력받아야 한다. 

이때 파일은 request.files라는 곳에 들어있다.

가져올 때에는 이름 속성값['image'] 사용하기

request.files['image']

변수설정 :  fileinfo
    fileinfo = request.files['image']
이 변수 안에 이미지를 담아온다.

이때 이미지는 wirte.html 코드에서 name에 들어있는 속성값을 활용한 값이다.

: 이 fileinfo라는 변수를 이용해서 파일을 저장할 것이다.

2) 저장을 위해서 경로 설정하기

app.py 첫줄에 import os

TIP🤖 os는 경로를 표현하기 위해서 사용하는 패키지이다.

 

3) 경로를 명시해서 저장하기

fileinfo.save 즉 저장을 해주는데, 어디에 저장할 것인지 명시하기

 

   fileinfo.save()

: filepath 경로 만들어서 명시할 것이다.

이때,
filepath = os.path.abspath 
filepath = os.path.realpath 
이렇게 두 가지 path가 있는데 우리는 위의 것을 사용한다.

그 안에 언더바 두 개(__)로 감싸져 있는 file을 쓰게 되면, 지금 이 app.py 파일의 경로가 나오게 된다.

그 바깥에 os.path.dirname 즉 dirname을 하면, 이 파일이 속해있는 폴더의 이름이 나오게 된다.

그 경로 안, static에 저장을 할 것이므로 경로를 이어서 만들자.  

4) join이라는 함수 사용하기

    filepath = os.path.join(filepath, 'static')

기존에 만들었던 경로(dirname~)에다가 static을 연결 하는 것이다.

= 이 폴더 안에 static 폴더를 가리키게 된다.

 

5) 이제 저장을 한다.

    fileinfo.save(os.path.join(filepath, fileinfo.filename))

join 안에 앞에서 만든 paht에다 파일 이름정보를 같이 넣어서 저장을 해준다.

: file을 업로드할 때에는 파일 이름 정보가 같이 오기 때문에, 파일 이름 정보를 같이 넣어서 저장을 해준다.


파일을 저장했으면, 저장한 파일을 database에도 써놔야 한다. 

 

6) db 코드 작성

(내 파일의 경우 db가 product_S이다.)
이미지는 어떻게 저장을 해도 되지만, static 폴더 안에 계속 넣을 것이므로 파일명만 넣어준다. 

        'image' : fileinfo.filename
(당연히 이어지는 쉼표는 전 문장 앞에 넣어주자.)

7) 저장 후 테스트

테스트를 해보니, 내용은 잘 들어갔는데 이미지 변경이 안되었다.

이미지가 잘 들어갔는지 살펴보자.

 

---

1) static 폴더 안에 이미지가 들어가 있으면, 태그는 정상 작동하는 것이다.

만약 이미지가 없다면 연결이 안 된 것이므로, 수정해야한다.
나의 경우는 import os가 아닌 앞에 자동으로 다른 import가 생겨서
이미지 연결이 안되었고, 추후에 그 코드를 수정했다. 

 

그럼 이 이미지를 보여주는 부분을 설정해주면 된다.

1list.html 부분을 수정해본다.

 

 

2) 이미지가 있는 경우 & 없는 경우 = 조건문 !

이미지가 있으면(if) 그 이미지를 보여주고,  없으면(else) 1번 image를 보여주도록 설정하기

                {% if product.image %}
                {% else %}
                {% endif %}

>> 이 사이에 이미지 태그가 들어가도록 하자.

             <div class="media">
                {% if product.image %}
                <img src="/static/{{ product.image }}" class="mr-2 product-image">
                {% else %}
                 <img src="/static/prod1.jpg" class="mr-2 product-image">
                {% endif %}

해결완료! 잘 작동한다.

---

03. <당당마켓> 주소 검색기능 개발하기

지역 값을 넣을 때, 주소를 검색해서 넣는 방법을 배운다.

이때, 다음에서 제공해주는 우편번호 서비스를 이용할 것이다.

https://postcode.map.daum.net/guide

검색어를 입력했을 때 결과가 나오고, 선택해서 원하는 처리를 할 수 있는 기능이다.
(= 공개주소 서비스)

전에 map 서비스처럼, 다음 카카오에서 제공하는 서비스의 경우 
별도의 키를 발급받거나 제한이 있지 않아 다양한 곳에서 사용하고 있다. 

1) 기본 사용법 (가이드)

기본이 되는 코드처럼 사용을 할 것이다. 
이때, 아래로 스크롤하면 다양한 방식들의 예제가 나와있다.

우리는 이 중에서 iframe 방식을 이용 해볼 것이다.
이때 예제 코드보기를 누르면, 
우리가 사용할 수 있도록 코드가 뜨고 이를 복붙해서 사용한다.

TIP🤖 iframe의 경우, 별도의 팝업이 뜨는 게 아니라 별도의 '레이어'가 뜬다.

---

당당마켓에선 왜 ifrrame을 사용할까? 

우리는 모바일 화면처럼 당당마켓을 만들고 있는데, 
모바일에서는 사실 팝업을 많이 쓰지 않기 때문이다. 
이는 모바일에서는 팝업차단이 되는 경우가 많고, 사용성이 좋지 않다고 생각하기 때문이다.

2) 코드 살펴보기

<input type="text" id="sample2_postcode" placeholder="우편번호">
<input type="button" onclick="sample2_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample2_address" placeholder="주소"><br>
<input type="text" id="sample2_detailAddress" placeholder="상세주소">
<input type="text" id="sample2_extraAddress" placeholder="참고항목">

input 태그 : 검색하는 부분, 버튼이 설정되어 있다.특히 이 부분은 우리가 사용하지 않을 것이다.
그 이유는 아래의 미리보기의 나오는 입력칸 부분과 동일하게 보이는 것인데, 이 부분이 필요 없기 때문이다. 

<div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

div 부분 : 버튼을 눌렀을 때 띄워지는 페이지

이 부분을 그대로 복사해서 사용하자.

 

3) write.html에 복사 붙여넣기

우리는 지역을 입력하는 부분(지역 내부)에 div 태그를 추가할 것이다.

        <div id="layer" style="display:none;position:fixed;overflow:hidden;z-index:1;-webkit-overflow-scrolling:touch;">
                <img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px;z-index:1" onclick="closeDaumPostcode()" alt="닫기 버튼">
                  </div>

 

4) 다시 사이트로 돌아가면 script가 두 개 있는데, 일단 가져와서 수정하기

 

(div 다음 script 에서, 마지막 닫는 태그 부분까지 전부)

이때 가장 아래 body 닫는 태그 위에 추가한다.

 

추가했다면, 우리에게 필요한 것은 button이다.

5) 지역 아래에 button 추가하기

       <button type="button" class="btn btn-secondary">주소찾기</button>
        버튼 타입은 버튼, class를 지정해서 주소찾기라는 버튼을 만들어주었다.

6) 버튼에 이벤트 연결하기 (onclick)

사이트의 예제코드 앞부분을 살펴보면, onclick부분에 sample2라는 함수를 연결해놓았다.

이를 복사해서 활용한다.

 onclick="sample2_execDaumPostcode()"

이를 아까 작성한 버튼에 붙여넣는다.

 <button type="button" class="btn btn-secondary" onclick="sample2_execDaumPostcode()">주소찾기</button>

7) 브라우저에서 확인하기

확인해보면, 1) 주소찾기라는 버튼이 새로 생겼다.

버튼과 iframe이 잘 적용되어서 2) 새로운 레이어가 뜨는데, 

 

이제는 검색하고 버튼을 눌렀을 때 그 결과값이 들어가는 코드를 만들어보자.

---

결과값 전달 코드

이 부분은 아까 사이트에서 가져온 script 부분이다.

코드를 살펴보면, 상세하게 동/로/가 까지 나눠준 부분들도 있고, 

if else를 통해서 도로명 주소가 아니면 지번주소를 받아오는 코드들이 작성되어 있다.

 

우리는 필요한 부분을 남기고 다 지운다.

 

1) 필요없는 부분 삭제하기

사용자가 선택한 주소가 도로명 타입~ focus 부분 삭제

(아래 부분)focus 함수를 사용하는 곳부터 ~ (위) 주소를 만드는 코드 addr 바로 밑까지 삭제하는 것이다. 

이렇게 코드를 정리하면, addr이라는 변수 안에 데이터(주소)가 잘 들어갈 것이다.

이제 우리는 이 주소값 addr을, 우리가 원하는 위치에 넣으면 된다.

 

2) 우리가 원하는 위치인 지역 input태그의 값으로 addr 을 넣어주기

= 지역 부분의 location id에 넣기

jQuery를 사용하고 있으므로, jQuery를 사용해서 작성한다.

TIP🤖 값을 넣을 때는 val이라는 함수를 사용한다.
$("#location").val(addr);

 

3) 브라우저에서 확인

테스트해보니, 주소를 누르니 값이 잘 들어간다

---

5week 추가 강의 : AWS 둘러보기

= aws 환경에 대해서 더 자세히 살펴보기

우리가 만든 ec2는 하나의 가상pc이다.

 그런데 aws에는 그외에도 수많은 기능들(데이터베이스, 스토리지 등)이 별도로 분리되어 있다.

그 이유는 무엇일까?

우리가 만든 프로그램들이 한 pc에서 동작하면 문제가 없겠지만,
만약 모바일청첩장에 너무 많은 방명록이 생기게 된다면, 데이터베이스 쪽이 힘들어질 것이다.

 

그래서 그러한 문제를 방지하고자 db를 다른 컴퓨터에서 관리하게 분리한 것이다.
또 이를 각각의 컴퓨터가 하나씩 존재하면 비효율적이므로, 각각의 서비스를 그 안에서 또 분리한 것이다. 

예를 들어 몽고db를 써야하면, 그에 맞는 인터페이스를 제공해주기 때문에 
불친절하거나 어렵지 않게 클릭해서 사용할 수 있다.

이를 적절히 활용하여 사용한다면 앞으로 만들 프로그래밍에도 도움이 될 것이다!

---

오늘의 소감 ✍️

 

사실 5주차를 먼저 듣고 마지막에 듣는 추가강의라서, 이번에 들은 것이 완전히 마지막 강의인 셈이다.

추후에 또 소감을 적겠지만, 오늘 이 강의를 마지막으로 들으며 다양한 감정이 교차한 것 같다.

막막했던 부분들을 해소했던 기초강의, 그리고 1:1 질문이 가능했던 스터디, 팀원분들과 함께라서 동지애가 마구 생겼던 자율학습까지. 짧았다면 짧고 길다면 긴 기간 동안, 스스로가 성장할 수 있는 기회를 얻었고 

이를 통해 얻어간 게 너무 많아서 감사할 뿐이다. 패스트캠퍼스 TIL 안녕!