[TIL] 2024/08/07

오늘은 [왕초보] 웹개발 종합반 강의를 완주했다.

 

firestore database를 통해 서버에 데이터를 넣고 받는 방식의 코드를 작성해 봤는데

 

솔직히 아직도 어떤 코드 어떤 함수가 어떤 동작을 하는지는 완벽하게 이해하지 못했다.

 

느낌상으로는 이거 다 익히려면 4개월 다 끝나도 못할 수 있다고 생각하지만

 

기존 작성되어 있던 코드를 검사하고 어떤게 작동하는지 아는게 중요하다고 생각했다.

 

특히 5주차 숙제를 하면서 느꼈는데

 

$("#addBtn").click(async function () {

            let image = $('#floatingInput').val();

            let title = $('#foodTitle').val();

            let star = $('#inputGroupSelect03').val();

            let comment = $('#floatingTextarea').val();

            // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.

            let doc = {

                'image': image,

                'title': title,

                'star': star,

                'comment': comment,

            }

            try {

                const docRef = await addDoc(collection(db, "foods"),

                    doc

                    // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.

                );

                alert("음식이 추가 되었습니다!");

                window.location.reload();

            } catch (e) {

                console.error("Error adding document: ", e);

            }

        });

 

중간에 try, catch 구문을 보면서 아니 이게 뭐지 나 이런거 본적 없는데 라고 생각했지만

 

코드를 자세히 보고 안쪽에 있는 

await addDoc(collection(db, "foods"),);

 

부분이 강의에서 본 db에 작동하는 코드라고생각해서

 

안쪽에 doc를 넣어 작동해봤는데

 

잘 작동이 되서 이대로 제출했다.

 

코드를 전부 이해하는게 아니라 내가 이해하는 선에서 이게 어떻게 작동하는지 확실하게 알면

 

작동시킬 수 있겠구나 싶었던 결과였다.

 

이후 4시에 강의를 들으면서 특별하게 메모한것은

 

'브라우저에서 정보를 확인하는것과 코드에서 직접 다루는건 다른거다.'

 

이게 openAPI를 통한 작성 단계에서 말씀하셨는데

 

그냥 브라우저에서 api를 열어서 확인하면 확인하고 끝인데 코드 안에서 다룬다면 많은걸 할 수 있다고.

그리고 컴퓨팅 사고력의 4단계에 대해서 말씀해 주셨는데

1.분해 2.패턴 인식 3. 추상화 4. 알고리즘

알고리즘은 일단은 몰라도 된다고 하셨고

예를 들어서 다른 타입의 재료를 가지고 다른 셋팅을 하고싶다.

 

a의 모양 a의 방식 b의 모양 b의 방식이 있을 때

 

a의 모양으로 b의 방식을 하고싶다면

- 재료을 분해

 

- 해당 재료가 어떤 패턴을 하고있는지 인식, 

- 코드가 어떤 방식으로 적용되면 어떤 방식으로 작동할지 추상화.

 

같은 단계를 거쳐서 어떻게 동작할지에 대해서 알아가는 방식이

 

되게 중요하다고 생각했다.