김민정 - chungstar/hansei-study2 GitHub Wiki

김민정
[22.01.06]

각자 구상해온 레이아웃을 구체화 시켜봄
와이어 프레임
기획안?

1. cmd창에 npm install -g create-react-app 입력
   
2. cmd창에 create-react-app 파일이름 입력
   
3. cmd에 npm start입력하여 프로젝트 시작
   

• $ npm install -g yarn.을 cmd에 입력하면 yarn을 통해 프로젝트 시작 가능
  
• yarn install을 통해 다양한 모듈을 받을 수 있음
  
• yarn start로 프로젝트 시작
  
  
  

디렉토리 구조 my-app
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js //화면에 표시되는 영역(?
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── reportWebVitals.js

npm과 yarn의 차이

npm : - 노드 패키지 매니저라는 프로그램으로, 자바스크립트 라이브러리 설치하고, 버전을 관리한다.
npm은 https://www.npmjs.com에서 node_modules라는 폴더에 라이브러리를 내려받아 저장하고, package.json이라는 파일에 설치된 라이브러리의 정보를 적어서 저장한다.

※ yarn은 npm의 동작방식과 비슷하고, 페이스북에서 npm의 단점을 보완하여 성능과 속도를 개선한 라이브러리 관리 도구이다.

내일은 usestate를 직접 타이핑해보고 공부해볼 예정
화이팅^^

블로그(BLOG)
: WEB + LOG의 준말로, 보통사람들이 자신의 관심사에 따라 자유롭게 글을 올릴 수 있는 웹 사이트를 일컫습니다.

국내에서는 네이버 블로그와 티스토리가 제일 보편적으로 쓰입니다.
대표적인 기능으로 CRUD와 통계, 꾸미기의 기능을 갖습니다.
일반적으로 설치형과 서비스형이 있으며 국내에서는 통상적으로 서비스형이 가장 보편적입니다.

세부 기능은

① 일기처럼 날짜별로 구성되어 있어 일상에서 일어나는 일들을 손쉽게 기록할 수 있다.

② 완벽한 자료 관리가 가능하다.

③ 독자적인 자료 보관이 가능하고, 저장된 파일을 이메일로 보낼 수 있다.

④ 일반 커뮤니티의 게시판과 달리 콘텐츠 중심으로 구성되어 있어 더 많은 커뮤니티 기능을 할 수 있다.

⑤ 자신이 작성한 콘텐츠를 중심으로 한 동조자가 생겨 광범위한 커뮤니티를 형성할 수 있고, 남이 만든 블로그에 가입할 수도 있다.

⑥ 채팅이 가능하며, 특히 채팅한 내용들이 날짜별로 블로그 페이지에 기록된다.

⑦ 웹 브라우저 상에서 실시간으로 콘텐츠의 내용을 볼 수 있다.

최근 네이버블로그 체인지라는 이벤트를 통해 블로그 활동을 하는 사람들이 많아졌습니다.
이 중 파워블로거들은 많은 이웃(구독자)를 갖으며 많은 파워가 있습니다.
최근에는 타SNS의 영향인지 해시태그 검색기능 및 모먼트(스토리)의 기능이 있는 곳도 있습니다.

국내에서 가장 보편적인 네이버 블로그와 티스토리 블로그의 경우를 살펴봅시다
네이버 블로그는 음식점, 물건 등의 후기를 쓰는 일상이 주제인 경우가 많은 한편, 티스토리의 경우 일상보다는 전문적인 내용이 많습니다.
최근에는 블로그를 일상공유 뿐만 아니라 자신이 공부한 것, 한 것들을 정리하기 위해 많이 쓰이기도 합니다. 그의 예로는 Velopert가 있습니다.(주로 개발자가 사용) 국내에서 사용자가 늘고 있는 추세입니다.

우리가 정의할 기능은 CRUD, 댓글, 좋아요, 공유이며 가능하다면 추가할 기능으로는 검색 및 정렬, 통계 이런식으로 할 수 있는 것부터 하는 것이 좋을 것 같습니다.
https://github.com/jcc/blog
Laravel and Vue.js(php도 사용)를 사용하여 만든 블로그

https://github.com/mmistakes/minimal-mistakes
반응형 웹사이트 (saas사용 추정)

https://github.com/LennonChin/Blog-Frontend-Project
vue.js사용
백엔드가 능숙하지 않다면 파이어베이스를 사용하는 것도 좋아보임 하지만 생각보다 더 빨리 끝날 수 있다...

FireBase란
: 계정 기능을 쉽게 만들 수 있게 해주는 API다.
nosql 서비스이고, 1기가바이트 저장까지는 무료이며 한달에 문서 쓰기 60만번, 문서 읽기 150만번, 문서 삭제 60만번까지 무료이다.
댓글 쓰기 수정 조회는 node.js를 통해 충분히 가능! 통계, 좋아요도 가능! 정렬은 조금 어려울 수 도 ,,,

오늘은 22:00에 회의가 있으니 열심히 하자! :>

블로그 시스템

1. 트랩백
   
2. 핑 : PING이라고 쓰며, 네크워크를 통해 상대에게 접근할 수 있는가를 확인할 수 있는 프로그램이다. URL이나 IP를 지정하면 대상에게 echo를 요청하는 데이터를 전송하고 상대의 echo 응답을 기다리는 형태로 동작한다.(ICMP프로토콜을 사용)
   
3. 링크: 주소와 주소가 비선형적으로 엮인 인터페이스로 주소와 주소 사이를 중간과정 없이 옮겨다닐 수 있다는 특징이 있다.
   
4. RSS feedback : 어떤 사이트에 새로운 콘텐츠가 올라왔을 때 해당 사이트에 방문하지 않고, RSS서비스를 통해 리더 한 곳에서 그 콘텐츠를 이용하기 위한 방법이다. 인스타그램이나 페이스북등을 생각하면 더욱 알기 쉬울 것이다. 이 RSS 자체가 블로그가 유행하면서 활발히 쓰이게 된 것이다. 2015년 이후 사라지는 추세이다.
   

4. NodeJS (JAVASCRIPT)
: 1. JAVASCRIPT + V8엔진 + 오픈소스 프레임웍 및 라이브러리 (github에서 1등!)
2. 라이브러리 설치는 소스코드 프로젝트 내부에 할 수도 있고, 외부(node 설치된 곳)에다 global하게 할 수도 있다.
3. 배포는 소스코드 및 라이브러리 업데이트 후 서버 재시작
4. Front-end와 Back-end를 같은 개발언어로 개발하게 된다. 이는 서비스 로직을 재활용할 수 있는 범위가 (Front-end + Back-end)로 넓어지는 장점이 있는데, 이게 가끔 다른 프레임웍에서는 누릴수 없는 굉장한 유용함을 선사할 때가 있다.
5. 동시요청 처리능력은 제일 좋다고 보여진다.
6. 문법이 자유롭다
7. 실시간 소켓 통신을 쉽게 구현할 수 있다.

내 생각에는 node.js혹은 php로 하는 것이 가장 좋지 않을까 싶다.

부트스트랩이란 ?
: 부트스트랩이란 웹 프론트개발에서의 구조를 미리 만들어준 프레임워크입니다.

부트스트랩이란 각종 버튼, 테이블, 입력창 등 여러가지의 css style과 레이아웃 정렬을 class만으로 제어할 수 있습니다.

보통 여러명의 개발자가 각자 맡은 영역을 개발하기 때문에 완성물이 제각각인 경우가 생겨서 이를 통일시키기 위해서 개발되었습다.

부트스트랩을 개발한 사람은 트위터의 직원이였던 'Mark Otto'와 'Jacob Thornton'가 프로젝트의 일관성을 위해 만들어졌습다.

부트스트랩 설치방법

1. 파일을 다운로드 받은 뒤 프로젝트에 삽입
   
2. 혹은 cdn(링크 삽입)으로 삽입
   <!-- 합쳐지고 최소화된 최신 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- 부가적인 테마 --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <!-- 제이쿼리 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- 합쳐지고 최소화된 최신 자바스크립트 --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

부트스트랩은 Jquery를 내부적으로 사용해주기 때문에 jquery.js를 추가해줍니다.

그리고 jquery 아래에 부트스트랩 링크를 추가시켜줍니다.

js의 위치는 head 사이 혹은, body 마지막에 호출시켜줍니다.

body 마지막에 호출하는 이유는 스크립트 호출로 인한 로딩시간을 줄여주기 위해서 입니다.

부트스트랩에서 제공하는 '기본 html 템플릿'입니다.

부트스트랩은 반응형을 지원하기 때문에 뷰포트태그를 추가시켜줍니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

ie8서의 동작을위해 html5shiv.js와 respond.min.js를 추가시켜줍니다.

부트스트랩 그리드 레이아웃
다음은 부트스트랩에서 가장 사용되는 그리드 레이아웃입니다.

부트스트랩을 사용하려면 필요한 요소가 'container' 입니다. 상위 요소에 container 클래스를 지정해주세요.

row는 콘텐츠영역이 될 'col-md-숫자' 를 감싸는 상위요소입니다.

'col-md-숫자'는 콘텐츠 영역입니다. 여기서 '숫자'의 합이 12가 되도록 해주셔야 합니다.
모바일, 태블릿, 데스크톱의 레이아웃
부트스트랩 그리드 레이아웃 중 클레스에는 총 4가지가 있습니다.

아래의 클레스명으로 모바일, 태블릿, 데스크톱에서 보여질 레이아웃 화면을 정렬할 수 있습니다.

• 모바일 : class="col-xs-숫자"
  

• 태블릿 : class="col-sm-숫자"
  

• 데스크톱 : class="col-md-숫자"
  

• 더 큰 데스크톱 : class="col-lg-숫자"
  

http://bootstrapk.com/getting-started/#template 템플릿 사이트

자바스크립ㅌ, : 프론트엔드 개발 언어
프로젝트 개발 순서

1. 고객에게 사이트개발 의뢰르 받고, 기획안 작성
   
2. 고객의 요구에 맞게 작성한 기획안을 토대로 디자이너가 UI디자인, 퍼블리셔에게 넘겨짐
   
3. 퍼블리셔가 html, css를 작성하고 웹문서 완성
   
4. 웹문서를 백엔드 개발자에게 전달하여 ASP, PHP, 등을 이용하여 보이지않는 부분을 개발
   
   

자바스크립트 기본문법

자바스크립트 선언문
: 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것으로 <script></script>사이에 영역이다.
[기본선언문]
<!DOCTYPE html><html lang="ko"><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>Document</title><script>document.write('환영해용ㅋ');</script></head><body></body></html>

** 자바스크립트의 주석처리**
//한 줄 설명
/* 여러 줄 설명*/

코드 입력 시 주의사항

1. 대소문자를 구분함
   
2. 꼭 세미콜론 작성하기
   
3. 한 줄에 한 문장이 가독성이 좋음
   
4. 문자형 데이터 사용시 큰따옴표와 작은따옴표의 겹침오류 주의
   
5. 괄호의 짝이 잘 맞아야함
   
   

변수
변수란 : 변하는 데이터값을 저장할 수 있는 메모리 공간으로 변수에는 데이터 하나만 저장됨.

• 문자형
  
• 숫자형
  
• 논리형
  
• 빈(Null)
  *변수 선언 시 var 키워드를 변수명에 붙입, 업그레이드 이후, 값의 유동성에 따라 let, const로 구분된다.
  typeof : 지정한 데이터 또는 변수에 저장된 자료형을 알고싶을 때 사용
  
  객체 : 기능과 속성을 갖는다. (ex. TV에 켜다, 끄다 등의 기능을 갖는데 TV등의 사물을 객체라고 함)
  

자바스크립트 객체의 메서드와 속성 사용법
객체.메서드(); 객체의메서드를 실행
객체.속성; 또는 객체.속성=값; 객체의 속성값 가져오기 및 변경`
객체

• 내장 객체: 자바스트립트 엔진에 내장되어 있어 필요한 경우에 생성
• 브라우저 객체 모델: 브라우저에 계층구조로 내장되어있는 객체
• 문서 객체 모델 : DOM으로 html 문서구조이다 하지만 IE8이하 버전에서는 호환성이 떨어진다는 단점이 있다.

내장객체 생성하기
참조변수(인스턴스 이름) = new 생성함수()

와이어 프레임

업로드 예정

1. 부트스트랩을 활용하여 만든 코드
   
2. 직접 처음부터 만든 코드
   

1. 비쥬얼스튜디오 코드 >> 터미널 >> 새터미널
   
2. 콘솔창에 git add . 입력
   
3. git commit -m "이게 진짜 최종" //히스토리명 입력
   
4. git push origin minjeong //내 브랜치에 넣기
   

• 처음할 때는 git init과 git remote 필요하고 ssh 암호 동기화 필요
  

5. pull할 때는 git pull origin "뫄뫄"
   
6. clone 할 때는 gir clone ssh
   
7. pull은 merge가 간편한 한편 fetch는 merge를 따로 해야한다.
   

1. 제이쿼리로 반응형만들기
   
   • 스크롤으로 계산해서 코드를 짰으나 왠지 모르게 실패함... 코드는 주석처리함
     
2. css에서 미디어쿼리로 만들기
   
   • 성공함. 다만 미디어쿼리 breakpoint는 조원들끼리 맞춰봐야할 필요가 있으며 25일 11시에 회의하여 바꿀 예정
     => 미디어쿼리를 처음 알았는데 오히려 제이쿼리보다 더 간단하고 좋은 것 같다... 다만 제이쿼리로도 구현하고 싶어서 공부 중
     

GIT의 새 기능 발견!! 홈페이지 만들기

• 다만 사진까지 업로드하는 법은 몰라서 사진빼고 구현
  https://minjeong204.github.io/minjeong.github.io-/ => 내일은... 바쁜 하루가 되겠네 ^^
  

##[프로젝트] 파일질라로 도메인 만들어서 연결
http://anjell0204.dothome.co.kr/

1. 파이어베이스 설치방법
   -> 단. 파이어베이스 설치파일 밑에 sdk가 존재해야하며 코드도 그 아래 존재해야함.
   
   
2. 파이어베이스 구조
   

• firebase auth : 단순히 말하여 로그인, 회원가입 등을 지원
  
• firebase database : 우리가 흔히 말하는 DB로, 글, 작성자 등의 필드를 이용하여 짤 수 있다.
  
• firebase store : 쉽게 말하면 클라우드로, 글을 제외한 고용량의 사진, 동영상 등이 이에 들어가며 url방식으로 가져가서 써야한다.
  
• firebase host : 배포
  
  

  var storage = firebase.storage();

를 통해 저장소와 연결,
doc.data()를 통해 db에 있는 필드를 가져올 수 있음.

<script>
   var storage = firebase.storage(); // db연결
   var storageRef = storage.ref(); //참조객체 만들기

var gsReference = storage.refFromURL('gs://minjeong0204-52970.appspot.com/unsplash_TscNBt1tIVY.png'); // db의 내 storage 하고 연결
storageRef.child('unsplash_TscNBt1tIVY.png').getDownloadURL()//url로 따오기 
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'
    console.log(url)
    db.collection('post').get().then((결과) => {
        결과.forEach((doc) => {
          console.log(doc.data());
          var temp = `<div class="post">//이 형식대로 화면에 보이게 하기


<div class="subn">
    <a href="#!" class="pn">${doc.data().제목}</a>
</div><br>

<br>
<div class="content">
    <img class="postimg" src='${url}'>
    <div class="pp">
        <ppp>${doc.data().내용}</ppp>
    </div>
    <br><br><br>

    <div class="icons">
        <img src="./assets/topcoat_like.png" width="15px">&nbsp${doc.data().좋아요}&nbsp
        <img src="./assets/fa-regular_comment-dots.png" width="15px">&nbsp ${doc.data().댓글}
    </div>
</div>
<br><hr><br>
</div>`;
          $('.media').append(temp);//이 내용을 media클래스에 붙이기
          
          
        })
       
      })
    
    // Or inserted into an <img> element
    var img = document.getElementById('myimg');
    img.setAttribute('src', url); //앞서 따온 url을 img src에 넣기
  })
  .catch((error) => {
    // Handle any errors
  });

 
  </script>

=> 내가 필요한 기능은 검색과 정렬이다,

1. 파이어베이스는 검색기능을 따로 지원하지않기때문에 서드파티인 알고리아를 사용하여 검색기능을 사용할 것
   
2. 쿼리기능을 이용해 회원가입된 사람만 글을 볼 수 있게 설정 및 인기순 및 최신순으로 정렬하고 싶음
   
   • form의 select를 이용하기 때문에 onchange를 쓸것이고 때문에 비동기식으로 하고싶음
     

<script>
       async function change(id){ //await 쓸 거라 async 꼭 쓰기!! 아니면 오류남
         const postsRef = db.collection('post'); // 참조객체 만들기

            
            id = document.getElementById("filter");
          if(id.value=="date"){
            const firstThreeRes = await postsRef.orderBy('좋아요','desc').limit(1).get(); // 참조객체에 따라 좋아요를 내림차순으로 1개만 가져옴
            firstThreeRes.forEach(doc => {
              console.log(doc.id,'->',doc.data()); // 콘솔에 해당 데이터 표시
            });
          }
          else{
              return;
          }
        }
      </script>

이렇게 구현! 봤을 때, 이미지를 가져오든 정렬을 하던 참조객체가 꼭 필요한 듯

  var kw = document.querySelector(".search").value; //search클래스의 value를 가져옴
    console.log(kw)
    document.querySelector('.media').innerHTML = ``; // media클래스를 비운 후 
    db.collection("post").where(`title`,"==", kw) // 검색창에 쓴 제목과 db안의 제목들 중 같은 목록을 찾음
    .get()//가져와라
    .then(function(querySnapshot) { //QuerySnapshot 을 얻으면 컬렉션 정보가 다 들어있음

문제점이 있다면... 정말 정확하게 입력해야 검색결과가 나온다는 것과... 결과물이 여러개 나온다는 거... 추후에 고쳐봐야겠다...

 $(document).ready(function(){ //제이쿼리 사용할 때 써야하는 부분
    $(".back").click(function(){ // back클래스를 누르면
      window.history.back(); //뒤로간다.
    })
  })

<div class="post" onclick="location.href='./post.html?id=${doc.data().docId}'">//이런식으로 사용해도 된다...

반대로 에러났을 때 쓴느 경우도 있다.

 <img class="postimg" src='${doc.data().firstImage}' onError="this.onerror=null;this.src='./assets/undefined_image.JFIF';" >

사진이 없을 때 불러올 수 없는 이미지라는 이미지를 쓰게 했다...

홈 글 양식