우리 fisa 2기 '클라우드 서비스 개발' 3주차

벌써 다음 주는 4주차가 다가 오는구나 ~
 
이번 주도 정말 바쁘게 살아간거 같다. 하긴 왕복 4-5시간이면 ㅋㅋ 그냥 순삭이긴 하겠다아!
여전히 운동을 하고 지내고 치열하게 살고 있다. 하지만, 자칫 하루라도 스케줄에서 벗어나면 체력적으로 문제가 생긴다는 것도 깨달았다 ㅋㅋ(물론, 주말이 있어서 보충이 가능하지만!)
 
이번 주는 내가 맥북을 잘못 다루면서 생겼던 문제가 있었다. Vitest라고 내가 만든 코드가 제대로 동작하는지 테스트해보는 방법을 배웠다.
잘하다가 도중에 계속해서 오류가 걸리는 것이다.
 

 
ㅋㅋㅋ 이제는 이 에러를 보면 해결 대책이 있겠지만, 아직도 울렁거린다 ㅋㅋ
 
아무튼 이 문제는 내가 잘못 설정한 파일 이름 때문에 생긴 문제였다. 들어가면 안 되는 특수문자 '/'가 있었던 것이다.
이는 vitest를 할때 경로를 찾아가는데 방해를 준다.
 
아무튼 알았고 해결했으면 되었다. 솔직히 윈도우로 너무 넘어가고 싶었는데 이미 맥북에 빠져들었고, 또 오기가 생겼다 ㅋㅋㅋ
앞으로도 오류가 발생할 수 있지만, 해결해서 조금 더 맥북의 유저로서 성장해야겠다. 하지만 무턱대고 하는 건 미련한 짓이니 더 대책을 세우고 윈도우도 다루면서 맥북을 다뤄야겠다. 
 
 
이 번주 갑작스럽게 블로그 관련해서 소식이 있었다~!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이번에 '우수 블로그 작성자'로 뽑혀 스타벅스 기프티콘을 받게 되었다 ㅎㅎ
나는 평소에 블로그 작성하는 편이라 그냥 신경을 안 쓰고 있었지만, 받게 되니까 괜히 뿌듯하다!
(그리고 ㅋㅋ 만천하에 나의 블로그가 공개 되었다. eslint를 활용해서 '~~했당' 금지, '명언 금지' 설정해야겟다 ㅋ)
 
 

 
우리 '클라우드 서비스 개발' 팀들 저녁 6시에 마치고도 공부를 하겠다고 다들 9시까지 열정적이다.
우리 반에 여장군이 있는데 엄청 열정적이다. 이분은 노는것도 열심히 놀거 같다. 이 사진은 그 여장군의 제안에 의해서 자체 보충을 끝내고 집가는 길에 촬영했다 ㅋㅋ
 

 
버스타고 집가는 길에 짬내서 코딩테스트를 공부한다. 직접 내가 먼저 풀고 강사님의 풀이와 비교해서 블로그에 작성한다.
나도 나름 생각해서 의사코드를 생각하고 코드를 짜는데 역시 강사님의 짬밥은 이길 수가 없다. 매번 놀랍고 많이 배워간다.
저 장면은 나의 풀이를 지우고 강사님 풀이를 작성해보고 있다.
 

 
이번 주는 두 번 biz특강이 있었다. 실제적으로 우리금융에서 it 부서가 하고 있는 일에 대해 배울 수 있었다.
확실히 실제 업무에 대해 들어보니 은행은 어떻게 돌아가고 우리 it 직무는 어떤 것이 있는지 알 수 있었다. 
아직 입문자다 보니 명확하게 이해는 어려웠지만, 전체적인 흐름을 배울 수 있었고 입사를 하게 되면 이런 분야를 공부하게 되겠구나 할 수 있었다. 또한 강사님께 면접 준비에 대해 충고를 받을 수 있어서 좋았다. 여기서 받은 교육자료를 통해 면접 준비하면 도움이 크게 될거 같다.
 

 
여기는 mbc근처 '탕반'이라는 음식점이다. 강사님의 추천으로 동기들과 함께 들렸는데 정말 맛있었다. 되게 깔끔했다. 김치전 역시 막걸리가 생각나게 하는 음식이었다 (막걸리 먹고싶다 ㅠ)
 

 
수업을 마치면 6시이다. 이때 개인적인 공부를 하다보면 저녁을 생략하고 나중에 먹게 되는데, 뒤에 있는 멋진 누나가 먹으면서 해라고 김밥 한 줄을 사주셨다 ㅠㅠ 정말 감동이었다. 달걀은 우리 반의 여장군님이 주셨다 ㅋㅋㅋ 장난스럽게 얘기했는데  이렇게 싸주셨다 ㅠ 은근 섬세하신거 같다. 다들 열심히하고 서로 돕고하는 모습이 너무 인상적이고 화이팅 넘친다. 다들 너무 좋아서 오랫동안  교류하고 지냈으면 한다.
 
 
1. 이번 주 배운 것
이 번주는 vitest와 React에 대해 배웠다. 
특히나 SPA관련해서 본격적으로 배우기 시작했다.

*우선, vitest는 개인적으로 공부 더 하고 블로그
올리겠다
내가 블로그에 올리는 글은 70퍼 이상 이해도가 확보 되었을 때이다.
 
SPA(Single Page Application) : 최초 요청시 서버에서 첫 페이지를 처리하고 이후, 라우팅은 클라이언트에서 처리하는 웹 어플리케이션을 의미한다.
 
SPA의 장단점
 
장점:
1. 페이지 로딩속도가 빠르다.
 - 클라이언트가 최초 요청에 서버로부터 모든 재료(html, css, js)를 가져오기 때문에 사용자의 요청에 대해 클라이언트 사이드에서 랜더링하기 때문에 서버로부터 테이터를 매번 가져올 필요가 없어 페이지 이동 간에 딜레이가 거의 없다.
 
2. 사용자 경험이 우수하다.
 - 빠른 로딩속도는 사용자ㅏ 경험을 증대시키고, 사용자가 웹사이트에 머무는 데 있어 로딩으로 인한 피로도도 적을 것이다.
 
단점:
1. 최초 페이지 로딩속도가 느리다.
 - 클라이언트가 최초로 서버에 요청할 때 모든 데이터를 가져오기 때문에 상대적으로 최초 요청에서 속도가 MPA에 비해 상대적으로 느리다. 그러나 스마트폰 앱을 작동할 때 최초 로딩시간을 기꺼이 기다리는 사용자라면 이는 큰 문제가 안 된다.
 
2. SEO에 적합하지 않을 수 있다.
--------------------------------------------
--------------------------------------------
--------------------------------------------
 
커스텀 컴포넌트 생성

1. JS 코드를 작성할 수 있는 HTML 파일 or JS 파일 생성
2. 내가 생각하는 의미있는 단위로 구성될 HTML Element, CSS, JS 코드 작성
3. 작성한 코드들을 하나의 컴포넌트로 그룹화시켜줄 컴포넌트 생성 문법 사용
4. 컴포넌트 사용(or 컴포넌트를 외부에서 사용할 수 있도록 export)

컴포넌트 네이밍 규칙

1. 일반적으로 커포넌트는 대문자로  시작해야 한다.

 
React : SPA 방식으로 UI를 구현할 수 있도록 지원하는 기술이다. React에서는 자신들의 기술을 Framework(밀트킷)가 아닌, Library(재료)라고 명시하고 있다. 
 
React는 Virtual DOM(가상 돔)을 활용한다. 실제 DOM이 아닌 가상으로 관리하는 별도의 DOM 개념을 활용하여 이전 UI의 상태를 메모리에 보관해두었다가, 새롭게 변경될 특정한 UI 일부와 비교하여 변경이 있는 곳만 부분적으로 갱신할 수 있으며, 그에 따라 업데이트 처리 비용이 줄어드는 효과가 있다.
 
-> 원래 react 없이도 SPA 방식을 활용할 수 있으나 React로 좀 더 효율적이로 할 수 있다. 또다른 효율적인 방식 역시 존재한다.
 
JSX : JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
 
즉, JS코드 내에서 HTML 코드를 편리하게 작성하기 위한 편의성 제공 문법이기 때문에 HTML in JS라고도 한다.
 
이것이 있기 때문에 가독성이 떨어지는 기존의 방식에서 훨씬 간편하고 가독성을 높일 수 있다.
 
useState

const { useState } = React;

 
리액트가 가지고 있는 유용한 함수이다. 이를 활용해서 최초 값을 등록 후, 업데이트 값을 넣어 최초값을 변형을 준다.

const Counter = () => {

console.log('rendered');

// [상태를 보관하는 '변수', 상태 값을 갱신하는 '함수'] = useState('초기값');

const [count, setCount] = useState(0);

// 초기값 0이 count에 할당됨

 

const clickHandler = () => {

// count += 1;

setCount(count + 1); // setCount()를 통해 count의 값을 변경

// state가 변경되면 react는 변경을 감지하고, 새롭게 렌더링시킴

}

 

return (

<div>

<p>You clicked {count} times</p>

<button onClick={clickHandler}>Click me!!</button>

</div>

);

}

이렇게 클릭시 이벤트가  발생할 수 있도록 할 수 있다.
 
--------------------------------------------
--------------------------------------------
--------------------------------------------
 
<추가적인 자바스크립트 문법>
구조 분해 할당
 

const {imgUrl, name, price} = props;

 
자바스크립트 문법인데 props라는 객체가 있다면 그 객체 안에 있는 키값을 저렇게 빼올 수 있다. 저렇게 하면 굳이 props.imgUrl 할 필요 없이 바로 사용이 가능하다. 
 
이를 활용해서 props 자리에 바로 {} 안에 있는 값을 넣을 수도 있다. 처음 이용하면 헷갈릴 수도 있지만, 나중에는 당연하다고 생각한다.
 
 
2. 이번 주에 겪은 시행착오와 극복
 
이번 주는 아직 잘 다루지 못하는 맥북으로 인해서 혼좀 났다. 나는 애플 생태계에 들어와서 자연스럽게 맥북을 접하게 되었지만 개발자까지 맥북으로 갈줄 몰랐다. ㅋㅋ 이왕 산거 맥북으로 한 번 해보자 했던거였는데 가끔 힘들 때가 있다. 하지만, 이는 어디까지나 내가 아직 잘 다루지 못하는 것이고, 현재까지 문제를 돌이켜 보면 그냥 내가 잘못 입력해서인 경우가 많았다. 그래도 끝까지 포기하지 않고 수업 마치고 집에 돌아와 다시 해결해보면서 극복했고 맥북을 다루는 능력이 점점 향상되고 있다. 특히나 eclipse 부분에서 문제가 있다고 하는데 내가 미리 접해서 경험 해봐야겠다.
 
3. 앞으로 어디에 적용
 
React를 활용해서 향후 스크롤 내릴 때 자연스럽게 페이지가 추가되는 형태를 만들어 보고 싶다. 기존에는 페이지가 새로 생길 때마다 새로고침이 발생하였지만, 부드럽게 형태를 만들어 제작하고 싶다. 당장 우리fisa 홈페이지만 보더라도 구현이 되어있는 것을 볼 수 있다. 아직 완벽하게 다루지 못하지만, 꾸준히 공부하고 적용하는 연습을 통해 나중의 프로젝트에는 꼭 적용해보는 것이 목표다. 
 
vitest는 향후 나의 코드의 신뢰성을 향상시킬 수 있는 수단이므로 이 역시도 아직 적응이 안 되지만 꼼꼼히 나의 코드를 테스트 하며 나의 코드의 신뢰성을 높이고 싶다.
 
4. 현재까지의 학습 평가 및 다음 학습을 위한 다짐/목표
 
아직까지 내가 완벽히 적용할 수 있는 것이 없지만, 시아를 넓혀가며 어떤 것을 배우고 공부를 해야할지 전체적인 흐름은 어떻게 될지 방향을 잡아가고 있다. 꾸준히 배운 것들을 복습하고 이를 바탕으로 블로그 작성하여 배운 것을 정리할 것이다. 주말에는 최대한 이해 못했던 것 위주로 하여 다시 복습해서 내것으로 만드는 시간을 가질 것이다. 
 
이제, 정처기를 따기 위한 필기 준비를 할 예정이다. 스터디 그룹을 형성해서 진행할 것이다. 현재 코딩테스트 cs공부도 하고 있는 지라 시간 분배가 매우 중요해졌다. 버스타고 오면서 정처기를 공부하고 집에 오면서 코딩테스트 2개를 풀 예정이다. 그 사이 수업 끝나고 6-9는 cs 공부 30분 나머지 2시간은 배운 것을 복습할 예정이다.
 
일단 해보고 조정할 것이지만 cs같은 경우는 주말을 활용해서 틈틈히 복습할 예정이다.
 
너무 바쁠거 같다 ㅋㅋ 일단 해보자. 해보고 안 되면 바꾸는 거다.