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

우리FISA 1주차가 끝났다. 이번주는 완전 적응기간이었다.
평소 오전 10시~11시쯤에 일어났던 내가.. 매일 아침 6시에 일어나 7시에 직장인들과 함께 버스를 타고 상암으로 행하는 게 뭔가 부지런한 갓생러 된 것 같으면서 몸은 힘들었던... 그치만 점차 적응해져간다.
그리고 하루종일 앉아 있다 보니 운동을 꼭 해야겠다고 생각이 들었다..
근데 운동할 시간이 정말 촉박한 건 사실이다 흑흑 할게 너무 많아.
 

1일차 2024-12-30-MON

두근두근한 1일차!
1일차는 개강식과 OT를 진행했다.

개강식은 우리금융타워에서 진행했다. 건물 짱 웅장👍🏻👍🏻
 
떨리는 개강식 시작!!!

개강식에는 1기 선배분들이 오셔서 조언과 Q&A 타임을 가졌는데 유익하고 좋은 말들을 많이 해주셔서 의욕이 뿜뿜 생겨났다.

개강식이 끝나고 교육 장소인 상암IT타워로 갔다.
개인별로 노트북이 대여되고 강사님과 다른 교육생 분들이 이름을 잘 외우고 부르실 수 있도록 이름표도 주셨다.

내가 좋아하는 코코호도...💕
 

📝강의 기록 모음📝

적절한 기술 선택
문제 해결과정에서 필요한 기술이 무엇인지 빠르게 파악할 수 있는 능력 향상
타당성
해당 기술을 선택한 이유와 그 이유가 타당한지에 대해 설명할 수 있는 능력 향상
활용 역량
선택한 기술을 활용하여 문제를 해결하고, 다른 기술들과의 의존 관계 및 영향도를 고려할 수 있는 능력 향상
 
금융권 도메인을 많이 쌓아두자(금융테크실무 열심히 듣기)
코딩테스트 미리미리 하자(지금부터라도!)
가독성 있게 자소서를 작성하자.(다른 사람들한테 보여주면서 객관성 있는 피드백 받기)
 
No Problem(안정성) - 작성한 소스 코드가 문제 없이 동작하는지 테스트, 예상되는 상황들에 대한 예외 처리
Easy(편의성) - 차별화된 서비스 기획, 기획한 내용을 기반으로 기능 요구사항 정의 
Fast(가용성) - 다양한 테스트 도구를 활용하여 서비스의 성능을 측정하고 개선
Attractive(기밀성) - 서비스 시제품을 개발하여 사용자에게 지속적으로 피드백과 개선
 
이 날은 ot가 끝나고 git 관련 명령어 활용 및 협업 시 사용되는 git 명령어 실습을 진행했다.
항상 git 관련해서는 gui로 보통 진행을 했어서 이번에는 cli로 진행해서 익숙해지려고 한다.
하지만.. 깃크라켄 활용이 너무 편했어서 cli로 푸쉬하면 손에 땀이 난다....
 

🔗 학습 일지

[Git/Github] 협업하기 위한 필수 git 명령어 정리 (+ 자잘한 개념 정리)

 

2일차 2024-12-31-TUE

이 날은 오전에 github의 다양한 기능을 활용해보는 시간을 가졌다.
 
효율적인 협업을 위한 Issue, PR 템플릿 생성법,
업무 현황을 한눈에 확인해볼 수 있는 Projects 탭 활용법,
Github Pages를 통한 정적 호스팅 실습,
Github Actions을 통한 개발 Workflow 자동화(with React App)
 
등의 실습을 진행했다.
생각보다 정리할 것이 많아보여서.. 정적 호스팅과 github actions 관련한 포스팅을 추후에 다룰 듯 하다.
 
그리고 오후에는 html, css 수업을 진행했다.
프론트엔드 개발만 해왔던 사람이라 이미 알고 있는 내용들이었지만 중간중간 몰랐거나 까먹었던 부분들을 체크하면서 꼼꼼히 수업 내용을 들으려 했다.
 
강사님께서 재밌는 사이트를 많이 소개해주셨다.
사이트 구경하고 게임하는데 정신 없었던 것 같다ㅎㅎ
 
다음 링크는 국내 및 해외 웹 사이트의 현재부터 과거까지의 모습을 구경해볼 수 있는 사이트다.
우리 학교 홈페이지도 구경해봤는데 옛날 사이트 모습이 매우 구려서 놀랐다.
https://web.archive.org/

Wayback Machine

 
다음 링크는 CSS 선택자를 연습하기 위한 미니 게임 사이트다.
https://flukeout.github.io/

CSS Diner

 

🔗 학습 일지

[Github] Issue, PR 템플릿 생성법 및 Projects 활용법 정리

 

3일차 2025-01-02-THU

html, css 수업을 이어서 진행하셨는데 강사님께서 또 재밌는 미니게임을 소개해주셨다.
display 속성 및 배치 관련 속성에 대해 연습해볼 수 있는 사이트였다.
근데 위에서 언급한 선택자 미니게임이랑 같은 제작사인 듯하다.
 
https://flexboxfroggy.com/#ko

Flexbox Froggy

 
다 맞추면 개구리들이 반겨준다ㅎㅋ

 
html css 수업을 마무리하고 이후에는 파파고 클론 코딩을 진행했다.
 

⭐️나의 파파고 클론 코딩 완성본⭐️

빼도 될 것 같은 건 빼고 그냥 보이는대로 코드를 작성했다.
그랬더니 뭔가 코드가 좀 더럽고 중복되는 것이 많아보이기는 하는데..
html, css 연습용이라 생각해서 리팩토링은 안했다ㅎㅎ
 
강사님이 칭찬해주셔서 매우 뿌듯뿌했다. ( ⸝⸝⸝˙꒳˙ ⸝⸝⸝ )
 
파파고 클론코딩이 끝나고 html, css 추후에 js 까지 얹일 미니 프로젝트 팀플을 시작했다.
벌써 첫 팀플!!!! 조금 떨리면서도 두근두근 설렜다.
 
주제는 진짜 쓸모 없어도 되고 진짜 쓸모 있어도 되는ㅋㅋㅋㅋㅋ 자유 주제였다.
나랑 팀원 분들은 일반적인 클론 코딩이나 딱딱한 주제보다는 정말 가볍고 재밌게 만들 수 있을 거 같은 퀴즈 프로젝트를 진행하기로 했다.
약 2시간 만에 기획과 피그마에서 내키는대로 디자인해서 기획 디자인을 끝내고 마음 편히 집에 갈 수 있었다.
팀원 분들과 재밌는 기획 이야기를 많이해서 시간이 훅 지나갔다ㅎㅎ
 

4일차 2025-01-03-FRI

이 날은 하루종일 미니 프로젝트 html, css 개발 시간!!!
 
우리는 크게 페이지 구조를 홈 화면과 퀴즈 화면 그리고 결과 및 게임 설명을 보여주는 모달 담당으로 3명이서 나누었다.
나는 퀴즈 화면을 담당했다.

무슨 사이트게요~

후훗 정말 투박하지만 난 맘에 든다.
 
브금도 넣고~ 애니메이션도 추가하고~ 해볼 수 있는 건 다 해보고 싶었다.
자바스크립트 없이 순수 html과 css로 만들 수 있는 걸 최대로 만들려다 보니 꽤 막혔던 부분도 있었다.
label을 이용해서 checked가 되면 해당 클래스의 CSS(모달)을 보여준다던가
conic-gradient를 이용하여 타이머 시간에 맞춰서 파이 타이머 애니메이션을 구현하는 작업이라던가...
 
덕분에 많이 배울 수 있는 시간이었던 것 같다.
 
lighthouse가 금요일에는 다 90점 이상이었던 걸로 기억하는데 주말에 확인해보니 생각보다 낮은 기록이 나와서..!
개선이 필요해보여 성능 최적화를 진행했다.
 
라이트하우스는 검사할 때마다 점수가 약간씩 달라지지만.. 대부분 비슷한 점수들이 나와서 개선이 필요해보였다.
 
1. 검색 엔진 최적화 91점을 끌어올리고자 메타 태그 추가
2. 이미지 webp로 이미지 포맷 최적화
3. 이미지 및 폰트 preload 설정
4. 웹폰트 로드 전 대체 텍스트로 나타내기 위한 font-display: swap; 코드 추가
 
위 작업을 통해 라이트하우스 점수를 다음처럼 개선시켰다.
 

요랬는데

 

요래됐슴다~

 
 
상암동... 리틀 판교 느낌이다.
다음 2주차도 파이팅하자!!!!