오늘의 목표

• java 클래스 맛보기2
• 프로젝트 마무리!
• 용어정리

---

---

클래스

---

---

프로젝트

오늘은 미니 프로젝트의 마지막 날이다.
그런 의미에서 제가 프로젝트에서 알게 된 점, 희미하게 알고있는 것, 알아가야하는 점을 정리해 두려한다.

---

처음으로 firebase를 연동하여 데이터를 불러오고,가져오고 또, 없애는 것에 대해서다.
제가 처음 이 부분을 건들땐, 막연하게 데이터 창고? 인 firebase에 웹에 입력된 값을 저장시키고, 필요할 때 가지고온다 의 생각으로 접근했던거 같다.

여기서 알게 된 점과 희미하게 알고있던 것, 알아가야하는 것이 다 겹친다.
해당 기능은 api 를 통해서 가능한 것이고, api는 매체들 사이에 중간 다리에 역할 겸 사용설명서의 역할은 한다는 것이다. ex) api의 메서드로 post를 기용하고, 저장창고인 리소스에 그것들을 저장한다. - > api의 데이터 올리기 기능 ...

---

두번째는 코드의 흐름이 한 줄기라 생각하고 접근한 것이다. 작성 코드나 웹페이지에서 보여질 때에 하나의 흐름으로 보였다.

하지만 코드는 한가지 흐름을 가지고 가는 경우도 있지만 아닌 경우가 있었다. 비동기 라는 것이었다. 제가 생각했던 방식을 통해서만 모든 코드가 돌아간다고 생각했었는데, 튜터님의 말씀을 듣고, 비동기의 중요성을 알게 되었다. 비동기를 함으로써 불필요하게 다시 데이터를 얻어오는 것을 방지할 수 있고, 바로 바로 해당 부분에 변경사항을 수정하는 등의 일이 가능하게 해준다는 것을 알았다. 전에는 '왜 페이지가 새로고침 되는것을 불필요하지' 라고 의아해했었다. 그냥 단순히 새로고침시에 화면에 깜빡임이 불편해서 인줄 알았는데...

비동기에 대해서 더 공부할 필요성을 느꼈고, 현재도 비동기에 대해 공부중에 있다.

async save(obj) {
    await addDoc(collection(db, this.collectionName), obj);
  }

  async findAll() {
    const querySnapshot = await getDocs(collection(db, this.collectionName));
    return querySnapshot.docs.map((doc) => ({...doc.data(), id: doc.id}));
  }

  async findBy(key, value) {
    const q = query(collection(db, this.collectionName), where(key, '==', value));
    const querySnapshot = await getDocs(q);
    return querySnapshot.docs.map((doc) => ({...doc.data(), id: doc.id}));
  }

  async deleteById(id) {
    await deleteDoc(doc(db, this.collectionName, id));
  }

몰랐던 await의 역할! - > 비동기를 제어!(비동기 작업이 완료 될 때까지 코드 실행을 일시 중지)
몰랐던 async의 역할! - > 비동기로~!

---

세번째는 일의 집중이다. 전 단순히 해야할 업무가 생기면 그것에 매달리는 타입이라, 간과한 부분이 있었다. 프로젝트 혹은 일에서도 집중해하는 파트와 아닌 파트가 있다는 것이다. 물론 절대적인것은 아니라 생각한다.

요번 프로젝트는 백엔드 보단 프로트엔드 쪽에 가까웠다고 생각이 든다. 물론 프로젝트가 한쪽으로 편중되있어도, 관련 업무에 관해서만 편중되는 경우가 있다보니 해당 경우에 대해선 이부분을 간과한게 아닌가 싶었다. 다음 프로젝트에서도 해당 프로젝트를 통해서 얻어가려는 것 혹은 보여줘야하는 것을 한번 더 생각해 보면 좋을 거 같다.

---

네번째는 협업이다. 현장 프로젝트 할 때와 차이점이 있었다. 현장에서 만나서 프로젝트를 진행할 땐, 의견을 많이 내고, 다른 조원의 의견을 수렴을 위해 적극적으로 정보를 찾아보거나, 혹은 내가 아는 내용이라면 동조 혹은 '이런식으로도 가능할꺼 같다'는 의견을 많이 내었던거 같다. 그런데 온라인 프로젝트도 처음인데다 이전에 했던 프로젝트는 몇달간 같이 공부한 동료여서 스스럼없이 참여했었는데, 이번엔 그렇치 못한거 같아서 많이 아쉬움이 남는다.

다음 프로젝트는 더 적극적으로 참여를 해보기로 다짐해본다.

KPT

KEEP( 이전과 같이 다음 프로젝트에서도 유지해야할 것들 )

• 업무에 열심히하는 것, 모르는 내용은 밤을 새서라도 무조건 하는 것
• 모르는 것 혹은 오류를 무서워하기 보단 궁금해하고, 찾아보기

---

PROBLEM( 이전 프로젝트에서의 문제점과 해결방안 )

• 협업임을 망각하지말고, 주어진 업무 외에도 모든 업무에 도움을 주고 의견을 주고 받는 것이 부족했음을 느꼈다. (끼어들거나가 아닌 주어진 업무가 1순위 , 주어진 업무를 만약 마쳤다면, 소통하며 더 넣을 기능 추가 혹은 다른 업무에 comment 를 줄 수 있을 정도 다른 업무에 대한 이해도를 높이자!)

이러한 나의 문제를 알아서 정말 다행이라고 생각한다. 프로젝트 내에서 업무 역할을 제대로 안하거나 하지 않았지만, 이런 부족한 부분은 분명 고치면, 나에게 플러스가 될 것 이라는 것을 알기에 다음 프로젝트에선 오늘 쓴 PROBLEM 을 생각하며 문제를 고치려고 노력해야겠다.

---

• 주어진 역할에서 맡은 일이 정답이 없다는 것을 알았으면 한다. 주어진 역할을 맞쳤다고 하더라도, 분명 더 좋은 RESULT를 낼 수 있을 것이라 생각한다. 예를 들면 성능 개선 혹은 오류에 잘 대응하는 등등 많은 부분에 대해서 한번더 생각해보자! 없다고 해도 찾은 내용을 잘 정리하면 나에게 분명 득이 될것이다.

---

TRY( 다음 프로젝트에선 어떤것을 시도(발전)할 지 )

• 다음 프로젝트에선 위에 내가 생각한 문제를 되뇌이며, 다시 돌아가지 않을 것이다!

• 해보고 싶은 것은 API에 대한 전반적인 이해가 되었다고 생각이 든다. 다음에는 더 재밌는 기능 혹은 프로젝트의 목적, 사용자 페르소나 를 생각하며 요구 사항에 맞는 기능을 생각하고 만들어 볼 것이다.

• 그리고 다음엔 프로젝트의 흐름도를 그려 큰 틀과 작은 틀을 만들것이다. 해당 과정을 통해 어떤 식으로하면 유지보수에도 좋고, 성능도 개선 될지를 고민할 것이다.

FEEL( 이번 프로젝트 때 느낌점 )

• 처음으로 하는 온라인 프로젝트 , 많이 부족했지만 부족한만큼 많은 걸 얻어갔다고 생각한다. 이번 KPT를 잘 기억하고 다음 프로젝트에 임한다면, 분명 더 나은 내가 되있것 같아서 한결 기분이 좋아진다.

---

---

용어정리

동기와 비동기

동기 : 한 흐름 순차적 진행 / 한 학업이 시작되면 다른 작업을 할 수 없다./ 흐름은 직렬 과 같다.
/ 단순히 메서드를 이용한다고, 동시에 처리 되는 것이 아니라! - > 해당 메서드 작업이 끝나고, 다시 흐름을 이어간다. - > 쉽게 말하면 한줄기로 된 곡선형의 물기 라고 생각하면 좋을 듯하다.
PS) 자바스크립트는 싱글 스레드 기반 으로 하나의 스레드에서 모든 작업을 처리하도록 되어있다. < - 그래서 병령 형식인 비동기를 쓰려면 비동기 처리를 해야한다!

비동기 : 여러 흐름 으로 진행 / 한 작업중이라도, 구애받지않고 나 하던거 하는 느낌(독립적 시행) / 흐름은 병렬 과 같다.
/ 보통 네트워크 요청, I/O 작업 과 같이 시간이 오래 걸리는 작업에 쓰인다. ( < - 이 부분은 모르는 개념을 더 정리해야 완벽히 이해할 거 같다.)
/ 웹 페이지의 반응성이 향상 되고, 에러처리시에 해당 에러를 처리하는데에(물줄기는 여러개! 에러가 난 물줄기만 보면된다! ) 유용하여 프로그램의 안정성을 높 일 수 있다.

---

REST API : REST는 Representational(표현) State Transfer 의 약자 / SW 프로그램 아키텍처 의 한 형식이다. ( < - 해당 부분의 개념 공부를 해야 더 이해할 수 있을 거 같다.) / 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 것 / URI는 정보의 자원을 표현한다. / 자원에 대한 행위는 HTTP Method (GET, POST, PUT, DELETE 등)으로 표현한다. / 웹의 모든 자원에 고유한 ID인 HTTP URI 를 부여한다.

/ 서버에서 어떤 작업을 하기 위해 상태정보를 기억할 필요가 없고 들어온 요청에 대해 처리만 해주면 되기 때문에 구현이 쉽고 단순해진다.( < - 무상태성 이라 한다.) / 클라이언트와 서버가 분리되어 있기 때문에 중간에 프록시 서버, 암호화 계층 등 중간매체를 사용할 수 있어 자유도가 높다. ( < - 계층화 라 한다.) / REST는 웹 기존 기술과 HPPT 프로토콜을 그대로 활용한다.

/ 자원 기반의 구조 (ROA: Resource Oriented Architecture) 설계의 중심에 Resoure가 있고 HTTP Method를 통해 Resource를 처리 하도록 설계된 아키텍쳐를 의미한다. / Uniform Interface는 Http 표준에만 따른다면 모든 플랫폼에서 사용이 가능하며, URI로 지정한 리소스에 대한 조작을 가능 하게 하는 아키텍쳐 스타일을 말한다./ HTTP URI를 통해 자원을 명시하고, HTTP Method (POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD OPERATION 을 적용하는 것을 의미한다. ( < - 해당 부분의 개념 공부를 해야 더 이해할 수 있을 거 같다.) /월드 와이드 웹(WWW) 과 같은 분산 하이퍼미디어 시스템 을 위한 소프트웨어 개발 아키 텍처의 한 형식 ( < - 해당 부분의 개념 공부를 해야 더 이해할 수 있을 거 같다.) / 현재 시점(나의)에선 RESTful API 와 REST API 는 같다고 생각하자! /

PS) 클라이언트 : 웹에서 정보에 액세스하려는 사용자이다. 클라이언트는 API를 사용하는 사람이거나 소프트웨어 시스템일 수 있다. ( < - 더 자세한건 공부를 해봐야할 거 같다.)

---

알고리즘 자료구조 :
프로그래밍은 알고리즘을 작성하고, 그에 맞는 자료구조를 선택하는 것이다. / 알고리즘은 문제 해결에 흐름도이다. / 자료구조는 컴퓨터에 알고리즘에서 사용하는 자료를 저장하는 것 // 자료구조는 개발자가 데이터를 효율적으로 사용할 수 있도록 정리하는 법이다. /

다음을 기약하자

---

AJAX :

---

non-static < - > static :

---

---

참고링크 모음
1.async/ await 동기 - 비동기
2.동기 - 비동기
3.RESTful API 1 < - 나에겐 더 이해가 좋다!
4.RESTful API _ 2
5. 알고리즘 자료구조 _ 1
5. 알고리즘 자료구조 _ 2
6. 문자열 < - > 숫자 변환
7. 변수의 타입 확인
8. 문자열 다듬기