오늘의 목표
✔️ 인프런 CS 관련 강의 찾고 결제하기
✔️ 프로그래머스 알고리즘 문제 풀기
✔️ 팀 프로젝트 진행
⏱️ 오늘의 일정
9:00 ~ 10:00 - 알고리즘 문제 풀기
10:00 ~ 13:00 - 팀 프로젝트 진행
13:00 ~ 14:00 - 점심시간
15:00 ~ 15:30 - 전수 면담
15:30 ~ 21:00 - 개인 공부
📜 알고리즘 문제 풀기
9:00 ~ 10:00 - 알고리즘 문제 풀기
캠프에서 제공하는 알고리즘 문제를 2가지를 풀었다.
( 아직은 쉬운편이라서 좀 더 풀긴 해야 할듯.. )
AlgorithmCodingTest/프로그래머스/1/12903. 가운데 글자 가져오기 at main · YamSaeng/AlgorithmCodingTest
This is an auto push repository for Baekjoon Online Judge created with [BaekjoonHub](https://github.com/BaekjoonHub/BaekjoonHub). - YamSaeng/AlgorithmCodingTest
github.com
AlgorithmCodingTest/프로그래머스/1/12922. 수박수박수박수박수박수？ at main · YamSaeng/AlgorithmCodingTest
This is an auto push repository for Baekjoon Online Judge created with [BaekjoonHub](https://github.com/BaekjoonHub/BaekjoonHub). - YamSaeng/AlgorithmCodingTest
github.com
백준허브(BaekjoonHub) - Chrome 웹 스토어
Automatically integrate your BOJ submissions to GitHub
chromewebstore.google.com
블로그 글을 보고 백준 허브 확장 프로그램을 알게 되었다.
Git과 연동되어 백준이나 프로그래머스 문제를 풀면 자동으로 Git에 연동되고 메모리 사용량, 속도 등을 기록해줘서
매우 편하다.
📜 팀 프로젝트 진행
9:00 ~ 10:00 - 팀 프로젝트 진행
웹개발 종합반에서 배운 내용을 토대로 기본적인 생성, 삭제, 수정을 할 수 있는 웹페이지를 만들었다.
내가 맡은 부분은 전체적인 틀을 보고 부족한 부분을 채우는 부분과
방명록을 팝업창을 띄워서 정보를 입력하고, 받은 정보로 방명록 카드를 생성하는 부분을 맡았다.
방명록을 팝업창으로 생성하는 부분에서 막히는 부분이 있는데 다음과 같다.
메인 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="module">
$('#guestbookbtn').click(function () {
window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=no`);
console.log(guestbookContent);
});
function guestbookContent(data) {
console.log(data);
}
</script>
</head>
<body>
<button id="guestbookbtn">자식 창 열기</button><br>
<h4 id="data_from_child">받아온 데이터 : </h4>
</body>
</html>
자식 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.myguestbookbox {
border-radius: 10px;
box-shadow: 0px 0px 3px 0px rgb(0, 0, 0);
width: 400px;
height: 500px;
margin: 30px auto 20px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
<script type="module">
$("#guestbookWriteBtn").click(function () {
let guestbookContentData = $("#guestbook-content").val();
opener.guestbookContent(guestbookContentData);
window.close();
})
</script>
</head>
<body>
<div class="myguestbookbox">
<h3>방명록 작성하기</h3>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="guestbook-name" placeholder="이름" required>
<label for="guestbook-name">이름</label>
</div>
<div class="form-floating mb-3" style="width: 300px; height:300px">
<textarea class="form-control" id="guestbook-content" placeholder="내용" required
style="height:300px"></textarea>
<label for="guestbook-content">내용</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark" id="guestbookWriteBtn">작성하기</button>
<button type="button" class="btn btn-outline-dark" id="close-guestbook">닫기</button>
</div>
</div>
</body>
</html>
자식 화면에서 작성하기를 누르면 opener의 guestbookContent()를 호출해 데이터를 전달하는 테스트 코드다.
문제는 opener의 guestbookContent가 정의가 되어 있지 않다고 계속 오류가 발생하는 지점이다.
어느 부분이 문제인지 파악하기 위해 부모쪽을 수정했는데
수정한 부모 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function OpenChild() {
window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=no`);
}
function guestbookContent(data) {
console.log(data);
}
</script>
</head>
<body>
<button id="guestbookbtn" onclick="OpenChild()">자식 창 열기</button><br>
<h4 id="data_from_child">받아온 데이터 : </h4>
</body>
</html>
<script type="module">
<script type="module"> 를 제거하고 <script>로 수정
function OpenChild() {
window.open("test_child.html", "_blank", `width=1000, height=600, toolbars=no, scrollbars=no`);
}
<script type="module"> 제거로 인해 JQuery를 사용하지 못해서 ( 자식 창 열기 ) 버튼에 OpenChild() 함수를
onclick으로 할당했다.
이렇게 수정하고 실행을 하니 이번에는 guestbookContent()가 잘 실행이 된다..
아마도 <script type="module">를 제거하고 다른 방식으로 사용하면 되는거 같은데,
왜 <script type="module">를 선언하면 guestbookContent()를 찾지를 못하는 건지 궁금해서
혼자 구글링해보다가 튜터님한테 가서 물어보게 되었다.
<script type="module">
이렇게 type = "module"로 지정하면 해당 <script> 블럭이 완전 독립적인 스코프로 지정되어
외부에서는 guestbookContent()를 호출하지 못한다는게 튜터님의 설명이였다.
근데 현재 메인 화면 작업은 전부 JQuery를 사용하기 때문에 type="module"를 붙이기는 해야하는데..
다른 방식을 사용해 방명록 팝업창을 구현해봐야 할듯..
📜 전수 면담
15:00 ~ 15:30 - 전수 면담
튜터님과의 짧은 면담이 있었다.
개발경험, 공부 가능한 시간 등등
📜 개인 공부
15:30 ~ 21:00 개인 공부
넓고 얕게 외워서 컴공 전공자 되기 강의 | 널널한 개발자 - 인프런
널널한 개발자 | 넓고 얕게 외워서 컴퓨터 공학 전공자가 되고 싶은 모든 비전공 초보자를 위한 강의입니다. 컴퓨터 구조, 운영체제 등 컴퓨터 공학 전공 필수과목에서 어떤 것을 배울 수 있는지
www.inflearn.com
평가도 괜찮고 다시 한번 정리할겸 CS 강의 시작으로 결제했다.
자기전까지는 완강 목표 !!
🌙 하루를 마치며
이번에야말로 CS 공부를 인강으로 확실하게 정리해야겠다고 마음을 먹었다.
팀 발표가 금요일이라 방명록 팝업창 띄우는게 급하긴 한데... 내일은 방법을 찾아 해결하도록 노력해야겠다.
방법을 못 찾으면 현재 방식대로 방명록을 작성해도 괜찮으니 약간은 부담감을 내려놓고 짱구를 잘 굴려봐야겠다.
'내일배움캠프' 카테고리의 다른 글
| [내일배움캠프][TIL] 6일차 Javascript 문법 시작 (0) | 2024.08.12 |
|---|---|
| [내일배움캠프][TIL] 5일차 팀 프로젝트 발표 (0) | 2024.08.09 |
| [내일배움캠프][TIL] 4일차 (0) | 2024.08.08 |
| [내일배움캠프][TIL] 2일차 (0) | 2024.08.06 |
| [내일배움캠프][TIL] 1일차 - OT (0) | 2024.08.05 |