공부 내용 및 활동 내용 |
|
- 프로젝트 개발 |
|
1. 개발 파일 정리 (LiveSever (VSCODE))
|
1. 개발 파일 정리
기존에 html에 javascript와 포함되있었는데 가독성도 좋지 못해서 분리하는 작업을 가졌다.
backup, testFolder는 말 그대로 백업용 혹은 테스트 폴더이며 관리하기 귀찮아서.. 일단 저렇게 보관하고 있다.
테스트 폴더에는 내가 사용하기 조금 힘들었던 그리드 연습페이지가 잔뜩있다 ㅋㅋㅋ... 헷갈린다
그리드를 처음 쓸때는 이해하지 못하고 썼다면 이제는 이해가 가기 시작했다. 동적으로 만들어진 요소를 어떻게 깔끔하고 이쁘게 보이게할지 고민하다 보니 공부하게 되었다.
물론 아직 완벽하지 못하다 ㅠㅠ
이제 html이랑 javascript를 분리할건데, 단순히 내가 사용하고 있는 건 javascript가 아니라
<script type="module"></script>이런식으로 된 구문을 썼다. 왜 쓴지는 이해 못하고 단순히 firestore를 위해 쓰고있긴 한데 모르겠다. 정말 궁금하다..
음.. ai한테 물어보니 그렇다고 한다.. 흠...
" 모듈 시스템은 코드의 재사용성과 유지 보수성을 향상시키는 데 도움을 줍니다. JavaScript의 모듈 시스템을 사용하면, 대규모 애플리케이션을 보다 체계적으로 관리할 수 있습니다."
그렇다고 한다.. 내일 물어보자 아무튼 그래서 script.js 파일로 만들어서 복사 붙혀넣기 했다.. 작동하지 않는다 ㅠㅠㅠㅠㅠ
모듈형식의 자바스크립트를 .js 파일로 만들어서 호출했지만 로그창에 "CORS 정책 위반" 이라고 뜬다.. 흠... 이게 뭐신가 하니 프로토콜 차이라는데 네트워크도 기억이 잘 나지 않는다.
그래서 파일을 분리하고 보기 편하게 하는 것을 포기할 것이냐? 대답은 "NO" 이다
나는 의지의 한국인이다. 서버를 열면 해결이 된다곤 한다. 정확히는 이해 못하겠다.
계속 찾다보니 "LiveServer"? 예전에 들어본 기억이 났다. vs 코드를 실시간으로 받아서 바로 갱신해줬던 것 기억이 있다.이름도 서버..? 음 뭔가 포트를 열엇던 기억이 있어서 바로 vs 코드 가서 다운로드를 했다
음 vscode-extension에 가면 다운로드 할 수 있다. 디자인 스크립트를 공부할 것이라면 적극 추천한다. 정말 편했다..
LiveServer 사용방법
1. vscode 하단에 go liive 킨다
2. 코드 오른쪽 클릭해서 라이브서버를 킨다.
-> 물론 alt+ L + alt+O 순서대로 누르면 바로 켜진다.
3. 옆에 브라우저를 낫두고 html, js를 수정해서 저장하면 바로 갱신된다..
정말 이건 혁명이다
그래도 나름 깔끔해졌다. css도 정리해야하는데 막코딩이라 손이 안 간다...
2. Firestore 쿼리 색인 만들기
음 파이어스토어에서 데이터를 가져오는데 뭔가 순서가 계속 맞지 않는다.
분명히 1,2,3,4,5 순서대로 저장했지만 실제로 저장되는건 1, 5, 3, 2, 4 이다..?
음... 고민이였다. 그래서 파이어스토어를 자세히 보니 컬렉션 - 문서 - 컬렉션 순으로 저장이 되는 구조다.
여기서 문서id를 자동 생산해서 그런지 모르겠으나 문서 순서가 뒤죽박죽이다.
음 고민에 빠져있는 사이 여러가지 선택해서 눌러보았다.
오 내가 저장한 데이터에 따라 오름차순 내림차순이 가능하다. 정말 좋은 기능이였다.
이걸 활용하기 위해 데이터 유형을 한번 살펴보았다.
오 뭔가 시간 데이터를 저장할 수 있는 타입이 있다.
그래서 구글링해서 타임스탬프를 어떻게 쓰는지 찾아보았고
// 타임스탬프 import
import { serverTimestamp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
await updateDoc(doc(db, "users", find_uid), {
name: name,
mbti: mbti,
style: style,
link: link,
short: short,
confirm: '1',
// 변수형에 바로 써주면된다.
date: serverTimestamp()
});
잘 저장이 되는 것을 확인할 수 있다. 이렇게 설정한 뒤, 색인을 만졌다.
date 기준으로 오름차순 하고 그다음 id를 오름차순 해주었다. 잘 작동된다.
3. 동적으로 추가된 요소에 클릭이벤트 추가
음.. 2번에 마지막 사진에 보면 저렇게 카드들이 있다. 근데 저 카드들은 firestore에서 받아온 데이터를 기준으로 동적으로 추가된 카드들이다. 이 카드들은 다 id가 같기에 클릭이벤트가 작동하지는 않을 거라 추측했다. 역시
$("#modal_close").click(async function () {
$('#card_modal_container').css('display', 'none')
$('#card').css('visibility', 'visible')
$('#box_mbti_style_url_other').css('display', 'none')
})요런식으로 짠 코드는 작동하지 않는다.
계속 코드를 돌려보고 있었는데 음.. 잘 작동되지가 않았다. 동기처리, 비동기처리, 클릭이벤트, 태그안에 데이터 넣기 등 많은 것을 수집했다.
일단은 해당 카드가 누구의 것인지 식별하는 것이 중요했다. 그래서 태그안에 data_id 라는 속성을 추가해 부여해주었다.
let docs = await getDocs(q);
docs.forEach((doc) => {
let row = doc.data();
if (row['style'] == '') { return }
else {
let id = row['id']
console.log(id)
// 여기서 session id 와 들고온 id를 비교하며 세션아이디(현재 로그인한 아이디)가 있으면 현재 로그인한 사용자 페이지에서 join 버튼을 none으로~
if (id == sessionStorage.getItem('user_id')) {
$("#join_button").css('visibility', 'hidden')
}
let name = row['name']
let mbti = row['mbti']
let style = row['style']
let link = row['link']
let img = row['url']
// 여기서 동적으로 추가할대마다 data-id 부여
let temp_html = ` <div data-id='${id}' class="col" id='member_card'>
<div class="card h-100">
<img id='profile_img' src="${img}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${name}</h5>
<p class="card-text">${mbti}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${link}</small>
</div>
</div>
</div>`
$('#card').prepend(temp_html);
}
})그 뒤,
// 각 카드를 클릭했을 때,
$('#card').on('click', '#member_card', function () {
// const cardTitle = $(this).find('.card-title').text();
const profile_id = $(this).data('id')
handleClick(profile_id)
});
async function handleClick(profile_id) {
// 해당 프로필의 아이디로 유저 데이터 받아옴
// const q = query(collection(db, "users"));
let docs = await getDocs(q1);
let name, mbti, style, link, img = ''
docs.forEach((doc) => {
let row = doc.data();
let id = row['id']
if (id == profile_id) {
name = row['name']
mbti = row['mbti']
style = row['style']
link = row['link']
img = row['url']
}
})
$('#box_name').text(name)
if (sessionStorage.getItem('user_id') == profile_id) {
//셋팅
$('#mbti_me').attr('value', mbti);
$('#style_me').attr('value', style);
$('#url_me').attr('value', img);
// 내 카드일 시, 실행될 곳
$('#card_modal_container').css('display', 'flex');
$('#card_modal_content').css('display', 'flex');
$('#box_mbti_style_url_me').css('display', 'flex');
$('#card').css('visibility', 'hidden');
$('#box_img_file').css('display', 'block');
} else {
// 셋팅
$('#other_grid_mbti').text(mbti)
$('#other_grid_style').text(style)
$('#other_grid_url').text(link)
// 남의 카드일 시, 실행될 곳
$('#card_modal_container').css('display', 'flex');
$('#card_modal_content').css('display', 'flex');
$('#box_mbti_style_url_other').css('display', 'grid');
$('#card').css('visibility', 'hidden');
}
$('#circle_img').attr('src', img)
}클릭 이벤트를 구현하고 비동기 함수를 따로 만들어 firestore도 사용가능하게 해놨다.
4. 프로필 클릭 시, 모달창 (남이 클릭했을 때, 내가 클릭했을 때)
지금 12시가 넘어서 10월 4일이다 하루가 지났따 ㅠㅠ
아직 미니프로젝트가 끝나지 않았기에 설계를 안한 부분까지 추가하기로 하였다.
해당 프로필을 누를 때, 프로필을 자세히 볼 수 있게 모달창 이던 팝업창이던 페이지를 이동하던 보이게 해주어야 한다.
음.. 여러가지를 고민하던 찰나 모달창으로 구현하는게 가장 깔끔하다고 생각했다.
그렇기에 다시 디자인을 Figma로 만들기 시작했는데 어떤 것이 가장 깔끔한지 모르겠어서
이것저것 해보다가 2시간이 지났다.
- 아래 사진은 자신의 프로필을 눌렀을 때와 남의 프로필을 눌렀을 때이다.
그렇게 만족스럽진 못하지만 나를 깔끔하게 만든 것 같다.
이거 만든다고 뒤진 사이트...
이걸 만들려고 그리드를 다시 공부하고 몇 시간이 흘렀는지 모르겠다.
노력은 했지만 좀 이상하다..
오늘 개발하면서 느꼈지만 좋다고 하는걸 끌어다 쓰는 것도 좋지만 어느정도 이해를 한 상태에서 쓰는 것이 더 좋을 것 같다. 그래도 오늘은 그리드에 대해서 확실히 알아가는 시간이 되어서 다행이다.
내일 할 것
- async, 스크립트 모듈, 비동기, 동기처리에 대해 공부하고 튜터님께 여쭤보기
- update, delete 구현, 사진 미리보기
내가 잘 공부하고 있는 것인지 모르겠다. 답답한 날이였다.
'스파르타(부트캠프) > TIL (Today I Learned)' 카테고리의 다른 글
| [내일배움캠프] 스파르타 6일차_24.10.07 (7) | 2024.10.07 |
|---|---|
| [내일배움캠프] 스파르타 5일차_24.10.04 (5) | 2024.10.04 |
| [내일배움캠프] 스파르타 3일차_24.10.02 (7) | 2024.10.02 |
| [내일배움캠프] 스파르타 2일차_24.10.01 (6) | 2024.10.01 |
| [내일배움캠프] 스파르타 1일차_24.09.30 (2) | 2024.09.30 |
