TIL 20230517

오늘 목표

[필수]
TIL 리뷰

TIL 작성

발표 대본 쓸 자료 적어서 드리기

매니저 님 코드 이해하기

 

[선택]

소개위드미 코드에 주석 달기

모던 자바스크립트 읽기

프로그래머스 코딩테스트 입문 : 중앙값 구하기

소개위드미 중복 닉네임 방지 코드 > 튜터님 답변 : 구현 불가

오늘 한 것

TIL 리뷰

TIL 작성

발표 대본 쓸 자료 적어서 드리기

매니저 님 코드 이해하기

프로그래머스 코딩테스트 입문 : 중앙값 구하기

모던 자바스크립트 읽기 ~p.45

소개위드미 코드에 주석 달기

0. 소개위드미

0-1. 발표 자료 준비

[이다영 : 발표 대본 준비에 도움이 될 자료]

 

우리팀이 개발을 진행하면서 어려웠던 점 : 

• 초반에 CRUD를 전부 하고 싶었던 나의 주장이 너무 강하여 조원들에게 부담을 주었다.
• 하이퍼링크로 상세페이지를 이동 하는 기능보다는 DB에서 저장된 데이터를 끌어오는 것에 중점을 두고 싶었다. 상세페이지가 여러 개 되면 만들어야 하는 뼈대나 코드도 늘어나서 마감 시간을 지키기 어려울 수도 있다고 생각하였다.

 

그에 대한 해결 : 

• 우선 CR을 구현하고 추가기능들에 대해 함께 고민하고 UD를 구현하였다.
• 하이퍼링크 부분을 사용할 수 있게 되었다. 시간이 많아져서!

 

4일 동안 어떤 공부를 하여 적용했는지: 

웹개발종합반 - 코드의 기본 틀, pymongo 코드

부트스트랩 - 모달, 버튼

구글링 - CSS

 

개인적으로 힘들었던 점: 

[협업]

나의 내면의 모습을 발견하게 되어 힘들었다. 

자기 주장이 강하지 않은 편이라고 생각했는데 생각보다 타인의 의견을 기쁜 마음으로 수용하는 것이 힘들었다.

배우는 자세, 밝은 태도를 유지하고 싶었는데 어려웠다.

[기술]

삭제 버튼만 누르면 닉네임 값을 받지 않고 삭제 되게 만들고 싶었는데 어려웠다.

 

해결 했는지 여부: 

[협업]

TIL을 적을 때 매일 개선하고 싶은 부분에 대해 리마인드 하였다.

그리고 팀원과의 팀 생활 중에 기억하고 실천하려고 노력하였다.

[기술]

X, 차선책으로 진행.

삭제 버튼에 모달을 달아 닉네임을 입력 받는다.

닉네임 값으로 db에서 데이터를 삭제한다.

 

앞으로의 각오 : 팀의 의견을 귀담아 듣는 사람이 되고 싶다!

 

팀원 한 명 한 명에게 주고 싶은 나만의 피드백 : 

이승현 : 팀원들의 의견을 잘 모으고 받아들이는 모습이 매우 좋다!

우성원 : 긍정적인 태도로 모든 일을 대하고 수용하는 자세가 너무 좋다!

이상우 : 새로운 기능에 대한 탐구가 상당히 멋지다!

서혜민 : 신중한 모습이 좋다! 코드 또는 의견 공유가 이루어지면 좋겠다!

0-2. 매니저 님의 코드 이해하기

알게된 것

삭제하기 함수를 실행하면 num 값을 받아와 int로 형변환 하여 delete_one 으로 삭제한다.

우리는 num 대신 nickname 값을 받아온다! 비슷한 코드같다. (우리는 ajax 대신 jquery 사용)

index.html

function delete_comment(num) {
            $.ajax({
                type: "POST",
                url: "/api/Taeyeon/comment/delete",
                data: { num_give: num },
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload();
                }
            })
        }

 

 

app.py

@app.route("/api/Taeyeon/comment/delete", methods=["POST"])
def Taeyeon_comment_delete():
    num_receive = request.form['num_give']
    db.Taeyeon_comment.delete_one({'num': int(num_receive)})
    return jsonify({'msg': '또 남겨 주실 거죠? 😊'})

 

0-3. 경로 바뀌면

알게 된 것

파일의 경로가 바뀌면 venv생성과 pip 설치를 다시 해주어야 한다.

1. 개발자 도구 각 패널

알게 된 점

- 각 패널들의 명칭과 기능

Elements : DOM CSS를 편집하여 렌더링된 뷰 > 편집한 내용이 저장되지는 않는다.

- DOM : HTML 요소들의 구조화된 표현

Console : 웹페이지의 에러, console.log

Sources : 자바스크립트 코드 디버깅

Network : 네트워크 요청 정보와 성능

Application : 웹 스토리지, 세션, 쿠키 확인 및 관리

- 웹 스토리지 : 데이터베이스 서버나 클라우드 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술

- 세션 : 사용되는 사용자 정보를 저장하는 방법, 사용자가 브라우저를 닫아 서버와의 연결을 끝내는 시점

- 쿠키 : 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각

 

4. 디버깅

알게 된 점

디버깅 : 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것

에러가 발생한다!

오른쪽 끝에 index.html:19 와 같은 에러 발생 위치를 클릭

> Sources 패널로 자동 이동, 디버깅 가능!

line 19 의 라인 번호를 클릭해 책갈피 모양이 뜨면 브레이크 포인트가 걸린 것이다.

 

이 때 오류를 실행하면 디버깅 모드로 들어간다.

마우스 커서를 원하는 곳에 올리면 변수의 값을 알 수 있다.

 

---

정리 

파일의 경로가 바뀌면 venv생성과 pip 설치를 다시 해주어야 한다.

 

- 각 패널들의 명칭과 기능

Elements : DOM CSS를 편집하여 렌더링된 뷰 > 편집한 내용이 저장되지는 않는다.

- DOM : HTML 요소들의 구조화된 표현

Console : 웹페이지의 에러, console.log

Sources : 자바스크립트 코드 디버깅

Network : 네트워크 요청 정보와 성능

Application : 웹 스토리지, 세션, 쿠키 확인 및 관리
- 웹 스토리지 : 데이터베이스 서버나 클라우드 플랫폼이 아닌 브라우저를 통해 데이터를 저장하는 기술

- 세션 : 사용되는 사용자 정보를 저장하는 방법, 사용자가 브라우저를 닫아 서버와의 연결을 끝내는 시점

- 쿠키 : 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각

 

디버깅 : 에러 메시지를 확인하고 에러가 발생한 원인을 제거하는 것

index.html:19 와 같은 에러 발생 위치를 클릭

> Sources 패널로 자동 이동, 디버깅 가능!

line 19 와 같은 라인 번호를 클릭해 책갈피 모양이 뜨면 브레이크 포인트가 걸린 것이다.

이 때 오류를 실행하면 디버깅 모드로 들어간다.

마우스 커서를 원하는 곳에 올리면 변수의 값을 알 수 있다.

 

소감

오늘은 계획표를 대부분 지킬 수 있어서 너무 좋았다. 앞으로도 지금과 같길! 모던 자바 스크립트 딥 다이브는 재밌다.