1주차 WIL

항해99/WIL

1주차 WIL

공대루루 2023. 2. 12. 19:54

이번 첫주차는 두번의 토이 프로젝트를 진행했다. 첫번째는 4일 동안 진행했던 풀스텍 토이프로젝트, 두번재는 무박2일로 진행됬던 풀스텍 미니 프로젝트였다. 두번의 프로젝트를 진행하면서 얻은 것도 많았지만 아쉬웠던 점이 산더미였다. 웹종강을 2번 들으면서 스스로에게 너무 자만심을 가졌고 오만했던 것 같다. 자기 자신에 대해서 객관적으로 바라보고 필요한 것들을 우선 순위를 정해서 채워나가야 할 것이다.

1. 1차 토이 프로젝트

문제점

이정도면 열심히 했지 라는 생각으로 공부를 했던 것이 문제였다. 결국은 아무것도 모르는 상태였고 프로젝트의 투두리스트 기능을 구축했지만 스스로가 짠 코드가 어떤 것을 의미하는지 확실하게 알지 못했다.

알게된 것

자바스크립트의 기본 문법 외에 웹을 구축하면서 필요한 개념에 대해서 확실하게 공부할 수 있었다.

- Git 사용법

: 협업을 위한 툴로 원격에 있는 공간에 내 로컬공간에 있는 자료를 올릴 수 있다. 여러명의 팀원들에게 각자 맡은 기능을 할당해주고 브랜치를 만들어서 작업을 한 이후에 하나의 파일로 합칠 수 있다

: 하지만 병합 하는 시점을 잘 모르겠다. 내가 만든 기능들은 기능 하나가 완료될 때마다 바로바로 설명을 달아서 나의 브랜치에 푸쉬를 했는데 풀을 받을 때는 원격에서 다른 팀원들이 푸쉬한 자료들을 하나로 병합한 후에 나한테 풀을 받아야하나? 이 부분은 여러번 프로젝트를 진행하면서 더 알아보아야 할 것 같다.

- API

: 서버와 웹프로그램이 서로 상호작용할 수 있게 해주는 프로그램이다. GET 방식과 POST 방식이 있다.

-DOM

:Document 그러니까 HTML문서 내에서 어떤 값을 가져와서 사용하는 것이다. id값을 가져와서 사용하거나 class 값을 가져와서 사용할 수 있다. id 값을 가져와서 사용하는 경우는 하나의 정보를 가져와서 사용할 수 있지만 class 값을 가져오는 경우 해당 클래스를 사용하는 태그의 모든 값을 가져오거나 하나의 값(가장 처음 값)만 가져오거나 정할 수 있다.

-Localstorage사용법

:웹종강에서 배웠던 db와는 다른 개념의 스토리지였다. localstorage는 브라우저 내에 저장되는 값이며 key값과 value값으로 나눠서 저장할 수 있다. localstorage는 값을 계속 업데이트하며 저장하기 때문에 자료를 쌓이게 하기 위해서는 먼저 이전에 저장했던 값도 불러오고 새로 저장할 값도 불러와서 함께 다시 스토리지에 저장해주어야 한다.

Localstorage는 임의로 직접 삭제하지 않으면 브라우저가 종료되었다가 다시 켜져도 남겨져있다. localstorage는 주로 지워져도 무방한 자료들을 담아둘 때 사용한다고 한다. 이번 토이프로젝트에서는 투두리스트의 입력값들을 저장할 때 사용했다.

보완해야 할 점

Git 사용법에 좀 더 익숙해져야 할 것 같다. 개인시간에 git 과 관련된 자료들을 더 찾아보고 슬랙에 올라와있는 자료도 다시한번 보면서 연습해봐야 할 것같다.

2. 2차 풀스텍 미니 토이 프로젝트

문제점

프로젝트의 기능을 구현하면서 어떤 것을 우선순위에 두고 작업해야할지 정하지 않고 작업을 하다보니 크게 신경쓰지 않아도 되는 기능에 많은 시간을 써버렸다.

알게된 것

게시글의 댓글쓰기 버튼을 누르면 댓글 창이 열리게 하고 싶었는데 display:none과 display:block 을 활용해서 토글형식으로 만드는 방법을 배웠다.

<div id = 'CommPop' class="Commcard" style="width: 18rem;display: none;">

var popup = document.getElementById("CommPop");

if (popup.style.display === "none") {
    popup.style.display = "block";
} else {
    popup.style.display = "none";
}

전에 했던 토이프로젝트에서와 다른 방식으로 토글 코드를 만들 수 있었다. 코드자체로는 내가 쓴 코드가 더 길고 조잡해보이지만 토글이 어떻게 동작하는지 한눈에 알 수 있어서 좋았다.

보완해야 할 점

저번 토이프로젝트에서는 기능 구현 자체에 문제가 있었다면 이번 토이프로젝트에서는 진행하는 과정에서 문제가 있었다. 문제점에도 적은 것 처럼 작업에 우선순위를 정하지 않고 작업을 하다보니 정작 작동해야 할 기능을 만드는 시간이 너무 부족했다. 다음에 프로젝트를 진행하게 되면 작업의 우선 순위를 먼저 정하고 작업을 진행하면 훨씬 효율적인 작업을 할 수 있을 것 같다.

☆ API(Application programming interface)

API는 서버와 웹프로그램이 서로 상호작용할 수 있게 해주는 프로그램이다. 요청한 값과 응답받은 값을 활용해서 내가 만든 웹에 사용할 수 있다. 요청할 때와 응답받을 때 route 장식자와 요청방식을 일치하게 정해주어야 한다.

GET 방식과 POST방식이 있으며 각각 자료를 어떻게 사용할 지에 따라 정해진다.

토이프로젝트를 진행하기 전에 각자의 API를 적어서 제출하는 시간이 있었는데 직접 내가 필요한 기능에 사용될 API를 정하는 것이 생각보다 어려웠다. 하지만 기능을 구현하기 전에 API를 확실히 정해두고 코딩을 시작하니 수월했다.

저작자표시