분류 전체보기

일단 오늘은 GET 정보이동 id특정 부분을 했다. 일단 먼저 index부분인데, 댓글창과 마찬가지로 일단 정보를 db에서 가져와서 html코드로 붙이듯이 apped해줬다. 메인페이지 출력함수 function show_main() { fetch("/introduce/index").then(res => res.json()).then(data => { let rows = data['result'] //db데이터를 가져와서 리스트 형태로 저장 $('#user_box').empty() //user사진과 이름이 출력될 박스를 비워준다. rows.forEach((a) => { let name = a['name'] let img_url = a['img_url'] let _id = a['_id'] //id 값을 받아와..

오늘은 post작업이 거의 끝나고 상세페이지를 만들고, 팀원분들 하시는걸 조금 숟가락 얹었다. 백엔드 쪽을 하다가 상세페이지 프론트를 만들려고하니, 너무 어려웠다...(백엔드가 더 쉬워...) 그래도 상세페이지 틀은 잡아두고, 댓글기능을 삭제빼곤 완성했다. 오늘 완성한 기능 댓글기능 이제 팀원분들 기능이랑 연결만 하면 기능은 어느정도 태가 날것같다!! 오늘 새로 배운 것은 MongoDB의 ObjectID형태인 _id값을 이용해 특정 오브젝트를 특정해서 변경하는 것이었다. 편리하게 MongoDB는 저장할 때 _id값을 따로 지정해주지 않는 이상 랜덤한 해쉬값을 준다고 한다. 위와같이 숫자마다 의미를 가지는데, 첫 4byte는 timestamp값을 의미한다.이 값은 Unix시대부터 초단위로 측정된 값이다. ..

코드는 가장 아래에... 새로운 팀원들과 팀원들을 소개하는 미니프로젝트를 만들었다. 나의 담당은 POST 데이터를 등록하거나 댓글을 달 때 db에 저장해주는 기능이다. 데이터를 꺼내오는 GET기능이나 UPDATE, DELETE같은 다른기능들은 다른 분들이 맡아주시고 프론트 쪽도 한분이 맡아주셨다. 오늘은 OT다 GIT특강이다 서로 소개하고, 와이어 프레임, 역할분담 정신이 없었는데, 댓글등록 기능과 팀원을 추가하는 포스트기능을 만들었다. 화면에 프론트적으로 아직 나오게는 못 만들었지만 db에 착실이 쌓이는걸 확인했다. POST기능을 맡아서 해본건 처음이었지만 생각보다 간단했다. 큰 틀은 위와같은 모양새로 request로 받아오고 ▶︎ dictionary형태로 db에 저장 ▶︎ 완료시 메세지 출력. 의 모..

오늘은 index와 input을 팝업으로 이용가능하게 합쳐뒀었는데, 완성본코드에 따로 떨어져있어서 다시 합치는 작업을 했고 팝업메뉴가 열렸을 때, 백그라운드에 어두운 효과를 줌과 동시에 배경을 클릭하면 팝업창을 닫을 수 있게 UI디자인을 완성했다. div를 이용해 opacity값(투명도)을 조정해 배경을 만들었으며, 팝업메뉴의 형태와 같이 팝업메뉴가 닫히고 열리는 함수가 실행될 때, 같이 보이고 지워지도록 코드를 완성했다. 아래는 백그라운드의 CSS코드 .popup-back{ visibility: hidden;//기본 visibility를 hidden으로 설정해 처음에 화면에 보이지않는다. position: fixed;//엘리먼트에 고정이아닌 스크린자체에 고정해 스크롤 시에도 //같이 움직이도록 left..

오늘은 등록창을 팝업 느낌으로 바꿔서 index.html과 합쳐줬다. 한참을 찾아보다. 약간 야매(?)같은 방법으로 팝업창을 구현했다. 구현 방법은 간단한데, 함수를 이용해 버튼클릭 이벤트 호출시 style에 visibility속성을 건드려 보였다 안 보였다 할수 있게 만들었다. 아마 display: none으로도 가능할 듯하다. 일단 간단한 페이지에 버튼을 달고 실험을 했다. 간단하게 팝업창을 하나 만들어주고 열릴 팝업창에 스타일에 visibility: hidden; 위 코드를 필수적으로 붙여준다. function openPopup(){ document.getElementById('popup').style.visibility='visible' } function closePopup(){ document..

영화 추천 공유사이트의 등록 페이지를 만들었다. 아래는 완성코드 비전5 영화. 영화 등록하기 별점 -- 선택하기 -- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 등록 취소 오브젝트 가운데정렬을 할 시 위와 같이 position: absolute를 이용해 가운데정렬할 수 있는 방법이 있었다. 그리고 textarea를 사용하니 textarea를 사용자가 직접 크기를 조절할 수 있는 기능이 있었는데, 이 기능을 사용하니 모든 오브젝트가 따라 아래로 내려가버려서 resize: none;을 이용해 사이즈 조절기능을 막았다. 그리고 app.py서버와 연결완료! app.py서버 코드 from flask import Flask, render_template, request, jsonify app = Flask(__name__..

JavaScript는 다른 언어들의 문법들과 비슷한 느낌이다. 다른 언어들을 이미 배웠다면 많은 기본적인 문법이 비슷하다고 느낄것이다. 그러므로 JavaScript에서 사용할 수 있는 이벤트함수나 객체, 메서드 등 편하게 쓸수 있는 기능들을 알아보자. 이벤트 input type="button" on이벤트명 = ""와 같이 사용할 수 있다. 이벤트 종류 마우스 이벤트 click : 마우스 클릭 시 이벤트 발생 dbclick : 마우스 더블클릭 시 이벤트 발생 mouseover : 요소에 마우스를 오버했을 때(올라갔을 때) 이벤트 발생 mouseout : 요소에서 마우스가 아웃되었을 때(나갔을 때) 이벤트 발생 mousedown : 요소에서 마우스를 눌렀을 때 이벤트 발생 mouseup : 요소에서 마우스..

color : 글자색을 변경해줌.color : #ff0000; 사용가능. #뒤에 2자리씩 끊어서 R G B 로 표현 background-color : 배경색 변경 font-size : 글자크기 변경(px, %등) font-familly : 글씨체변경 text-align : 정렬(left,right,center,justify) text-decoration : 글씨 장식(none, underline등) text-shadow : 그림자(text-shadow :그림자색깔, 가로위치, 세로위치 margin : 위치조절 , 바깥여백 padding : 간격조절, 안쪽여백 display : none, inline, block, grid등등 border : 테두리 (border : 테두리색 테두리종류 크기) soli..