TIL

[23.05.19.]내일배움캠프 1주차-5일

heediv 2023. 5. 19. 21:57
반응형

오늘의 계획

  • 프로젝트 준비 모두 마치고 개인공부(오후 2시 발표)
  • 생활코딩 JavaScript

공부내용

[생활코딩 JavaScript]

 

<HTML 사용설명서>

onclick 속성에는 JS가 오게되어있다.

style 속성에는 반드시 CSS가 온다.

 

*on 으로 시작하는 속성 - event

<input type = "button" value = "hi" onclick = " alert('hi')">  hi 버튼만드는 html태그 , onclick 속성에 JS

<input type = "text" onchange = "alert('changed')"> 텍스트 입력후 바깥쪽 click하면 changed라는 알림뜸

<input type = "text" onkeydown = "alert('keydown!')"> key를 누르면 alert가 뜬다.

 

Javascript key down event attribute(속성) 이라고 구글링하면 어떻게 이용하는지 나옴

 

마우스 오른쪽 검사 클릭해서 Elements에 들어가고 Esc누르면 밑에 Console창이 뜬다

GitHub egoing/페이스북 그룹 추정 코드가 랜덤으로 원하는 사람의 수만큼 추출하는 코드

 

JS데이터타입-6가지

Boolean

Null

Undefined

Number

String

Symbol(New in ECMAScript 6) 

 

text.length 글자수 알수있다 = properties

.toUppercase() 소문자였던 문자열이 대문자가 된다

'Hello world'.indexOf('world') 'world'가 몇번째 글자인지 알려줌 world는 6번째 시작한다는 것 

.trim 공백을 없애준다

 

콘솔에서 엔터를 유보하고 싶을때 shift + Enter

텍스트들 속에서 "+name+" 변수처리

변수 사용시 가급적 var  앞에 붙여주기

 

 

 

<div>태그 - 어떠한 의미,기능 없음. CSS or JS 통해 어떤정보를 제어하고싶을때 감싸주는 역할, 무색무취태그,전체화면쓰므로 줄바꿈이 된다.

<span>태그- <div>와 비슷한데 전체줄을 쓰지 않는다.

 

CSS관련강의 3개-선택자,우선순위 id>class>태그, #도 .도 안붙인다면 태그를 나타냄

 

*Javascript에서 선택하고싶다 태그를  CSS선택자에 의해 (Javascript select tag by CSS selector)-구글링

MDN작성한 글

document.querySelector('body')

<body>태그를 선택했고 이제 <body>태그에 style을 입힐것

javascript element style 구글링 첫번째 검색결과에 docu

<body style = "background-color: black;" >
    <input type="button" value= "night" onclick = "document.querySelector('body').style.">

CSS에서는 background-color

JS에서는 backgroundColor

<body>
    <input type="button" value= "night" onclick = "document.querySelector('body').style.backgroundColor = 'black';">
<body>
    <input type="button" value= "night" onclick = "
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    ">
    <p>
        night버튼을 click시 배경은 검은색 글씨는 하얀색으로 변경된다. JS를 이용하겠다.
    </p>
</body>

버튼 클릭 전
버튼 클릭 후

 

이번주는 프로젝트 관련해서 공부하는 것과 개인공부를 왔다갔다하면서 정신이 없어서 그런지 많은 내용을 학습하지 못하였던것 같다. 주말에 개인공부도 조금 하고 다음주 준비를 해야겠다. 주말에 남편생일이 있어 양가 부모님댁 방문이 예정되어있으나 밤에 조금씩 해야할 듯 싶다.

 

프로젝트 관련-마무리

*노션제출사항 프로젝트를 통해 느낀점

느낀점: 1) 강의를 보는 것과 달리 직접 웹페이지를 만들어 봄으로써 원리 파악이 구체적으로 되고 코드 암기 효과가 있어 좋았다.
             2) 협업을 통해 전체 웹페이지를 만드는데 시간을 절약 할 수 있고, 실력에 비해 더 좋은 성과를 낼 수 있었다. 더하여 맡은 분야를 깊게 공부할 수 있다는 점이 있다.
             3) 게더를 통해 모르는 것이 있을 때 바로 질문하고 답변을 들을 수 있어 좋았다.
             4) 마지막 다른 팀의 발표도 보면서 웹페이지의 기능의 종류에 대해 더 알 수 있었다.

 

*프로젝트 각자 담당한 기능에 대한 설명

[POST]
1.html파일에서 등록하기 버튼의 onclick = "posting()"을 확인한다.
2.함수기능을 이용하여 functhion posting() { } 중괄호 속에 입력된 요소를 formData 형식에 담아준다. ex)"name_give
3.fectch url /intro , method POST 인 것을 python파일 안에 있는 flask에서 실행한다.
4.formData에 담긴 것을 받아 예)"name_receive" 형태의 변수에 담아준다.
5. doc.intro.insert_one(doc) 를 통해 mongoDB에 POST 해준다.
중간에 조건문을 통해 Update 기능을 넣어주었다.

 

[GET]
동작
-기록하기 버튼 클릭시 mongodb에 post로 저장된 데이터를 가져와 홈페이지에 카드 형식으로 보여준다.동작원리
-mongoDB에 있는 데이터 값을 찾는다
-찾은 데이터 값을 반복문으로 돌린다
-데이터 값을 변수에 담아서 html형식에 넣어 보여준다

 

UPDATE
1. 기록하기 or enter버튼이 입력되었을 때 posting()이 실행된다.
적혀진 내용을 바탕으로 flask에 데이터를 FormData에 담아 넘겨준다.
2. flask에서 받은 데이터를 doc = {} 딕션너리 형태에 담아준다.
이때, 담긴 내용중에 name 이 mongodb에 있는지 확인해준다.
있으면 update를 수행하고 없다면 insert를 수행한다.어려웠던 점: 처음에는 하나의 요소만 수정되어서 코드를 수정하는데 어려웠던 것 같다.
또한, name을 가져오는 과정에서 부모요소 선택자가 어떤 것인지 정확히 알지 못해 처음에는 작동이 힘들었던 것 같다.

 

페이지 좋아요 기능:
동작 : 좋아요 버튼을 누르면 버튼이 움직이면서 하트가 빨갛게 변하고 한번 더 누르면 검게 바뀐다.
동작원리 : 좋아요 버튼의 like 클래스를 선택하여, class 값을 toggle하여 기존값의 css 스타일이 liked와 다르면 liked를 입히고, liked가 기존값이면 liked를 삭제하였다.
어려운 점 : 각 사람별로 좋아요 기능을 구현하고 싶었으나 잘 되지 않아 어려움을 겪었음.Enter 기능:
동작 : 엔터를 누르면 등록하기가 된다.
동작원리 : 키를 누를때 이벤트가 동작하고, 그 키 값이 Enter인 동시에 쉬프트키를 누르지 않은 Enter 값이면 Posting함수가 실행되어 등록하기와 같은 기능이 동작하도록 하였다.
(쉬프트+Enter값은 줄바꿈 기능이 있으므로 그 기능은 유지함)
브라우저의 기본 동작을 제한하여 등록할시 엔터키로 줄바꿈을 막음.

반응형