1. 회원 프로필 정보보기
앞에서 했던 회원목록보기랑 똑같이하면 될듯했는데, 좀 다르다
일단 사용자아이디를 누르면 링크가 잘되어야하는거같은데
<a herf="/userList/{{userId}}">{{userId}}</a>
라고 사용자아이디를 수정했더니 입력했더니 아래와같이나온다
요렇게 나오긴하는데 링크가 안먹힌다 글자색만 파란색임..ㅠ
<a herf="">{{userId}}</a> 이렇게 했을 때랑 결과가 같음. 뭔가 문법을 잘못입력한거같은데 어떻게 찾아야할까?
이름에다가 링크를 붙이니까 잘 작동한다.
<tr>
<th scope="row">{{userId}}</th>
<td><a href="/userList/{{userId}}">{{name}}</a></td>
<td>{{email}}</td>
<td><a href="#" class="btn btn-success" role="button">수정</a></td>
</tr>html파일은 위와같은데 음..링크를 {{userId}}에다가 했을떄는 작동하지않았다. 왜그런거지? 일단 다음 단계로..
proifle을 출력하는 부분에서 return 할때 return 값이 그냥 그대로 나온다. 회원목록구현할때는 리턴값에 list 라고하니까 template 에 있는 list.html이 나왔는데 말이다. 이것도 모르겠다 패스!
html 중복줄이기
handlebars 문법을 이용해서 중복을 줄이는건데..잘 모르겠지만 일단,
- 일단 내가 시도해보자
- 다른사람 코드를 보자
- 완성
의 느낌으로 한번가보자.
html 중복줄이는방법
먼저 templates에 중복 html 코드가 들어갈 베이스 html파일을 만든다. handlebars 에서 안내해주는 예제 코드에는 base.html 이니까 base.html이 무난할듯싶다.
그리고 중복으로 쓰일 html코드를 다음과 같이 감싼다.
// base.html
{{#block "header"}}
<head>
[...]
</head>
{{/block}}
{{#block "content"}}
{{/block}}
{{#block "footer}}
<footer>
[...]
</footer>
{{/block}}그리고 위와 같이 감싼 코드를 사용하기 위해서 다른 html파일로 이동한다
{{#partial "content"}}
<div>
[...]
</div>
{{/partial}}
{{> base}}해당 페이지에서만 쓰일 코드를 위와 같이 block 으로 감싸면 끝!
2. 질문하기 구현
3. 클라우드 입문
클라우드란?
클라우드 컴퓨팅 또는 클라우드 ㅅㅓ비스를 줄인 말
개인 사용자를 위한 클라우드
내가 내돈으로 직접 컴퓨터를 사지 않고, 서비스로 제공을 받는 것을 말한다.
하드 디스크를 사는 것보다 클라우드를 사용하는게 초기자금이 들지않고 관리를 안해도 된다는 장점이 있다.
기업을 위한 클라우드
기업이 물리적인 서버를 사지 않고 서비스로 제공받는 것을 말한다
기업도 마찬가지로 초기자금이 적게 들고 관리를 ㅇㅏㄴ해도 ㄷㅚㄴ다는 장점이 ㅇㅣㅆ다.
클라우드 ㅅㅓ비스 ㅈㅔ공업체는
- AWS
- Azure 등이 있다.
요약하면 클라우드란 컴퓨터 리소스를 직접 ㄱㅜ매하지 않고 인터넷을 통해서 서비스로 제공받는 것.
컴퓨터를 조립할때 필요한 부품이 여러있듯이 클라우드를 사용할때도 단순히 저장 장치만을 제공하는게 아니라 CPU,memory, 그래픽카드,네트워크를 제공한다.
가장중요한 세가지는 컴퓨팅, 스토리지, 네트워크이다.
이 세가지는 기본적으로 ㅋㅡㄹ라우드 ㅇㅓㅂ체에서 제공해준다
IaaS -> 가상의 ㅋㅓㅁ퓨터를 ㅇㅝㄴ하는 ㅅㅣ간만큼 빌려온다.
직접구매와 IaaS 사용시 차이점은?
직접구매하면 큰 비용, 공간, 전기세, 유지 관리비용, 확장 축소의 ㅇㅓ려움이있다
Iaas는 필요한 수량과 기간을 ㄴㅐ가 ㅈㅓㅇ하고 ㄱㅗㅇ간이 필요없다 구매비용에 관리 비용이 포함된다.
AWS를 이용해서 PC를 ㅁㅏㅈ춰보자?
PC라기보다 ㅅㅓ버
EC2
- CPU + 메모리로 ㄱㅜ성
- GPU가 포함된 ㄱㅕㅇ우도있따
EBS
- EC2에 연결해서 사용하는 SSD
- OS 및 필요한 프로그램과 데이터의 ㅇㅣㄹ부를 ㅈㅓ장
VPC
- EC2fㅡㄹ 연결하기 위한 네트워크 망
- VPC와 인터넷을 연결해야 서비스 사용가능
AWS를 사용한다면
컴퓨팅(CPU + Memory)은 EC2
스토리지는 EBS 네트워크는 VPC
4. 시온리뷰 질문
시온 코드보고있는데 줌으로 개인질문하긴 좀 그런거같아서 dm 보내요
4-1. 그 데이터 담는 객체? 패키지 이름이 domain 이잖아요.
이름이 왜 domain인지 궁금해서요 특별한 이유가 있을거같은데 어디서 다른분이 쓰는것도봐서요.
shion 답변
제가 알기론 도메인은 예를들어 질문하기 기능이 있다고 치면
질문, 댓글, 회원 이런 것들을 도메인이라고 하더라구요
그리고 서버랑 웹브라우저랑 데이터들이 왔다갔다 해야되는데 (질문, 댓글, 회원관련 데이터) 그 데이터를 담을 객체(질문, 회원 등)를 domain 패키지에 모아주었는데ㅔ요
4-2. html파일 전부 static에서 templates 로 옮기셨잖아요..
그럴경우에는 예를들어서 질문하기 버튼 눌렀을때 templates에 있는 html파일을 어떻게 불러오는거에요?
shion 답변
url에 localhost:8080/question/ask를 입력하게되면
콘트롤러에서 /question/ask 와 일치하는 메소드를 찾아서 (@GetMapping) return해주는 String과 일치하는 html파일을 templates에서 찾는 걸로 알고 있어요
return "index" 하게되면 template/index.html 을 오픈하는거죠
4-3. prifile 부분 동작방식?
shion, august
GetMapping 이 부분이 URL을 실제 서버의 리소스(,html)에 맵핑 해주는 부분입니다.
각 회원의 프로필 페이지가 따로 생기는게 아니라 html 기본 페이지는 그대로 있고, 변수부분만 바뀌어서 화면에 출력된다
4-4. 그렇다면 prifle 부분 작동방식이 호눅스가 설명해준 루카스 방식?
No!
august
기본 틀에 해당하는 html구조는 그대로 둔 채로 일부 데이터만 받아서 처리하는 동작을 한다. 그 데이터를 받아서 클라이언트 사이드에서 동적으로 렌더링 해준다. (AJAX)
4-5. static에 있는 html파일은 어떤경우?
아마 옛날 홈페이지들? 관공서나 그런것들?
august 답변
요즘 느낌 나더라도 static으로 가능은 합니다. 다만 코드 중복이 많고 템플릿엔진을 사용할 수 없는
여러가지 문제가 많으니 저런식으로 유지보수가 용이한 형태로 변경되고 있는거같아요
K 답변
프론트 개발도 요즘 모듈로 개발하고
나중에 합친 후에 스태틱으로 배포하거나 할수 있어요
Me to Everyone (21:31)
그렇군요.. 스태틱으로 배포하는 이유는 동작이 더 빨라서 그런건가요?
K (백엔드) to Everyone (21:33)
그런것도 있을거고
클라이언트에서 렌더링 하는 경우면
서버가 렌더링할 필요 없으니까요
서버에서는 static html로 틀만 보내주고
K (백엔드) to Everyone (21:35)
나머지 데이터는 클라이언트에서 따로 요청해서 json 이나 xml등등으로 보내주는거죠
5. 상대경로와 절대경로의 중요성
// 코드 1
<li><a href="/user/login" role="button">로그인</a></li>
<li><a href="/user/form" role="button">회원가입</a></li>코드 1 되어있으면 절대경로이기때문에 링크에서 링크를 타도 의도한대로 작동한다.
// 코드 2
<li><a href="user/login" role="button">로그인</a></li>
<li><a href="user/form" role="button">회원가입</a></li>코드 2 처럼 되어있으면 상대경로이기때문에 링크에서 링크를 타면 로그인에서 회원가입 링크를 타고 넘어갈때 localhost:8080/user/user/form 형식으로 나온다
느낀점
오늘은 막히는 부분이 너무 많아서 미션도 하기 싫고, 오만가지 생각이 다 나면서 스트레스 만땅이었어요.
아예 코드를 따라치자는 맘으로 팀원들 코드보면서 좀 해봤는데 따라치는 것도 이해가 있어야 가능하더라구요?
그때 시온코드 보고있었는데 시온한테 궁금한점 하나하나 다 물어가면서 결국엔 구현하기 힘들었던 것들 한번에 잘 해결이 됐어요.
MVC가 어떻게 동작하는지 이제는 조금 알것 같은 느낌?
내일은 점심밥먹기전에 미션1은 끝낼수있지 않을까 조심스레 기대해봅니당.
