[우리FIS아카데미 4기] 클라우드 서비스 개발 과정 2주차 회고

2주차 시작!!! 이번주는 JS 주차였는데 꽤나 정리할게 많았다.. 후...
실습 정리하고.. 프로젝트하고 하느라 다소 정신 없는 한 주 였지만 그래도 주차별 회고는 빠질 수 없으니 정리를 빠르게 해보도록 하겠다.

6일차 2025-01-06-MON

미니 프로젝트 발표를 시작으로 JS의 기본 문법을 쭈욱 나간 날이다. JS란 어떤 특징을 가진 언어인지부터 실습과 함께 기본 문법들을 다져볼 수 있었다.

 

발표 FISA에서 처음한 날인데... 안떨어야지 안떨어야지 하면서 말하다보면 갑자기 목이 파르르 떨릴 때가 있다. 왜그러냐 서채연.

원래 발표할 때 안떤다고 생각했는데 요근래 들어서 말을 많이 안해서 그런가(노트북만 보고 있으니...) 깔끔하게 말하는 연습을 해야겠다.

 

유창하게 말하는 사람이 되고 싶다. 연습을 많이 하면서 발표 역량을 키워가야지

 

자바스크립트와 자바의 차이점

- 코드를 실행했을 때(런타임 때) 타입이 결정된다. => 자바스크립트 => 동적 타입 언어다.
- 코드를 입력했을 때(컴파일 때) 타입이 결정된다. => 자바 => 정적 타입 언어다.
 
그 유명한 햄과 햄스터의 차이 === 자바와 자바스크립트의 차이 라고 보면 된다ㅎ
 
오전에는 열심히 자바스크립트의 변수, 자료형, 연산자, 조건, 반복, 배열 부분까지 들었다.
변수 부분 관련하여 정리했던 포스트가 있어 밑에 학습 일지 링크에 올려두겠다.
 

틈새라면 빨계떡... 콧물 줄줄 흘림

점심은 랜덤으로 다른 교육생 분들이랑 좀 멀리 나가서 틈새라면 가게로 갔는데 와 여기도 틈새라면 있는 줄 몰랐다.
혜화에 있는 틈새라면 가게만 갔었는데.. 맛났다. 근데 참치 주먹밥은 혜화가 더 나았다..
너무 매운데 중독적이라 콧물이랑 땀 흘리면서 들이켰다.
 
오후에는 함수 파트부터 Web API와 이벤트 부분까지 배우고 실습까지 진행을 했다.
 
함수 부분도 예전에 정리한 것이 있어 밑에 학습일지 링크에 올려두겠다.
 

💡 일급 객체 정리

const fruits = ["apple", "banana", "coconut"];
const fruitsPrinter = (fruit) => console.log(fruit); // 일급 객체
fruitsPrinter(fruits);
fruits.forEach(fruitsPrinter);

// 별도의 변수로 두지 않고, 인라인으로 작성
fruits.forEach((fruit) => console.log(fruit));

 
일급 객체란, 프로그래밍 언어에서 특정 요소(함수, 객체, 값 등)가 다음과 같은 특징을 만족할 때 일급 객체라고 한다.
 
1. 변수에 할당 가능
2. 함수의 인자로 전달 가능
3. 함수의 반환값으로 사용 가능
4. 데이터 구조에 저장 가능
 
사용자의 마우스 클릭 이벤트에 따라 동작하는 실습 두가지를 진행했다.

⭐️Flipper 실습 완성본⭐️

⭐️Counter 실습 완성본⭐️

그리고 승한오빠랑 같이 스터디 방향에 대해 이야기를 헀다.
자바 인 액션과 스프링 5, TCP/IP 북 스터디인데 매우 빡셀 거 같아서 나는 자바 인 액션과 TCP/IP만 하기로 했다.
프론트엔드 관련해서도 읽고 싶은 책이 많기에... 부지런하게 읽어주어야겠다.
 

🔗 학습 일지 링크

[JavaScript] var, let, const 비교 (+ 호이스팅 이해하기)

[JavaScript] 함수 정의(함수 선언문, 함수 표현식, Function 생성자, 화살표 함수)

[JavaScript/HTML] script 태그의 defer와 async 속성 알아보기

 
 

7일차 2025-01-07-TUE

이 날은 파파고 작업 이벤트 이용해서 구현(with 디바운스), node express 서버 작업을 진행했다.

사실 1주차 수업 들으면서 쉬는시간에 옆 교육생 분들이랑 웰컴키트 이번엔 안주는건가.. 받고 싶다... 이런 얘기했었는데ㅋㅋㅋㅋ
오늘 딱 웰컴키트를 이렇게 받게 되었다. 아니 구성품이 너무 알차고 저 위비 프렌즈 키링이 너무너무 귀여워서 좋았다. 위비 프렌즈가 여섯 종류 정도 있었던걸로 기억하는데 주변 교육생 분들 뭐 받았는지 구경하고 서로 교환하고 그랬다ㅎㅎ
 

점심 멘쇼우 라멘 먹고 돌아가는 길 MBC 사옥

아니 밥 먹고 돌아가는 길에 저 사진 밑에 누워있는 동상이 너무 무서웠다.
 

🔗 학습 일지 링크

[JavaScript] Debounce와 Throttle에 대해 알아보자

[NodeJs / Express] nodeJS Express를 이용하여 서버 구축해보기(+ 파파고 번역 구현)

 
그리고 오늘은 저녁 늦게 특강까지 들었는데 진심.. 배고파 죽을 거 같았는데
강사님의 에너지바를 GET했다. 최근 들어 제일 맛있는 에너지 바였다... 감사합니다...

 

8일차 2025-01-08-WED

이 날은 동기 비동기(Syncronous & Asynchronous) 그리고 Ajax와 XMLHttpRequest를 통해 파파고를 연결시키는 실습을 진행했다.
 
그리고 4시쯤부터 저번 HTML과 CSS로 진행했던 미니 프로젝트에 JS 기능을 어떻게 구현할지 팀원들과 회의하는 시간을 가졌다.
이때 팀원 분들과 어떻게 기능 구현할 지 로직을 짜보고 너무 금방 구현될 것 같아서 다른 아이디어가 무엇이 있을지 고민하며 강사님의 조언도 받아보면서 기획에 대한 이야기를 계속해서 진행해나갔다.
 
결론적으로는 기존 기획에서 조금 방향을 틀어서 게임 룰 및 진행 과정을 변경했다. 설레는 마음으로 기획 이야기를 다 마치고 내일 목요일 프로젝트 개발 과정에서의 역할 분담도 마치고 집에 갔다.
 
참고로 이번에는 백엔드 했던 사람은 프론트(HTML CSS JS)를 담당하고 프론트를 했던 사람은 백엔드(NodeJS 서버)를 담당했다.
나는 후자였다. (추후 엄청난 고난이 벌어지는데...)
 

⭐️파파고 번역 구현 실습 완성본⭐️

🔗 학습 일지 링크

[JavaScript] Ajax & XMLHttpRequest을 이용하여 서버 요청하기

 

9일차 2025-01-09-THU

이 날은 어제 수업 끝나기 전 이야기했던 미니 프로젝트에 대해 하루종일 구현하여 완성하는 시간을 가졌다.
 
내가 담당한 것은 NodeJS와 Express를 이용해서 서버를 만들어 API 구현을 하고 MySQL을 통해 데이터베이스를 구축하고 dataGrip이라는 워크브랜치와 서버를 연결시키는 작업이었다.
 
진짜 서버 관련한 작업은 처음 해보는거라 팀원분들이랑 gpt한테 질문을 엄청 했다..
속도가 좀 느리긴 했지만 그래도 재밌었다!!!
내가 API를 만들다니......

히히 데이터들이 제대로 들어오는 것 확인!!!!💗
 
점심은 오늘 프로젝트 팀원들이랑 먹었는데 내 옆자리 팀과도 같이 합석해서 먹었다ㅋㅋㅋㅋ
JTBC 구내 식당으로 가보았다. 이 날 진짜 너무너무너무 추워서 죽는 줄 알았다.

아파트 단지를 통해 가면 사옥이 보인다.

회사 근처 식당들이라 가격이 싸지 않은 음식들만 먹다가... 구내식당 먹으니 너무너무 좋았다..
자주 이용해야지ㅠㅠ 너무 배부르게 잘먹었다.
 
그리고 저번 1주차 회고 작성해서 학습일지 챌린지 제출을 했는데 1주차 우수 작성자로 당첨이 됐다 ('. • ᵕ •. `)

감사합니다..🥰

주차별 당첨자는 한달에 한 번만 당첨될 수 있다. 그래서 1월 안으로는 이제 우수당첨자에 못들겠지만!
25주차 내내 잘 쓰는 것이 목표기에 꾸준히 열심히 쓸 것이다ㅎㅎ
 
미니 프로젝트 JS 구현 작업으로서 내가 담당했던 부분을 다 끝내고 아직 미완성된 부분을 담당했다.
아무래도 프론트 작업이 좀 복잡한 미니 프로젝트라... 프론트를 많이 안해보셨던 팀원 분들이 이번에 구현하시면서 정말정말... 많이 고생하셨을 거 같다ㅠㅠㅠㅠ 내가 도와드릴 수 있는 부분은 도와드리려고 노력했다. 그래도 너무너무 다들 잘만들어주셔서 감사했다.
이후 애니메이션 부분이 작업이 제대로 해결되지 않아 내가 최대한 마무리할 수 있는 부분까지 하고 너무 졸려서 그대로 쓰러졌다.
그래도 다음 날 아침에 마무리할 수 있는 정도로 끝내고 자서 다행이었다 휴~
 

10일차 2025-01-10-FRI

잠을 4시간 자고... 3_3 이 상태로 아침 버스행.... 그래도 가야지 어떡해 마인드로 갔다.
 

우리의 게임 화면ㅎㅎ

오전에는 바로 미니 프로젝트 발표를 진행했다. 발표 직전까지도 리드미 고치고 완성 덜된 부분 최대한 완성하려고 하고... 너무 정신 없었다ㅋㅋㅋㅋㅋ 그래도 발표를 무사히 마쳤다.. 마지막에 랭킹 부분 GET url을 localhost로 설정한채로 둬서ㅠㅠㅠ
그 부분 못보여드린게 아쉽지만 그래도 코드는 다시 고쳐놨다.
 
팀원 분들 너무너무 수고 많으셨습니다.. 우리 모두 최고...⭐️
그리고 이슈로 좋은 평 남겨주신 분들 모두 감사합니다😊 히히 바로 하트로 반응해드렸다.
 
점심시간 시작 전에는 프론트엔드 기술 세미나 팀빌딩을 했다. 다들 하고 싶은 주제를 최대 5가지 적고 공통적인 관심 주제를 가지는 팀원들을 모아 팀빌딩을 진행했다. 나는 렌더링 최적화를 주제로 팀빌딩이 이루어졌다. 앞으로 방향성을 세부적으로 정해야 하지만!! 재밌을 거 같다ㅎㅎ 열심히 공부해보며 이후 프로젝트에 적용 시켜보고 싶다.
 
점심 시간 이후에는 JavaScript Promise와 Callback에 대한 수업을 진행했다.
 
다음 링크는 자바스크립트를 실행했을 때 내부적으로 동작이 어떻게 흘러가는지 확인을 해볼 수 있는 사이트다.
시각적으로 흐름을 한눈에 차근차근 확인해볼 수 있어 너무 좋은 사이트 같다.
https://www.jsv9000.app/

JS Visualizer 9000

 
그리고 파파고 프로젝트에서 vitest라는 테스트 도구를 사용해봤는데 이에 대해서도 한 번 포스팅 정리를 해봐야겠다!
우테코 프리코스를 했을 때 jest를 이용해서 테스트 코드를 짜봤었는데 vitest랑 코드 부분에 있어서는 비슷해보였다.
 
집에 오면 맞이해주는 나의 솜뭉치로 2주차 회고를 마치겠다. 다음주도 파이티이잉🔥🔥