135일차(모험 44일차) - 프로젝트(front)

프로젝트 - front 작업

 

프론트 작업을 최소화하기 위해 코드펜을 활용했다.

 

그 과정에서 아래와 같은 에러가 떴다.

 

tweenmax is not defined 에러 해결방법은 

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

 

위 코드를 추가하면 되었다.

 

 

출처 : [“tweenmax is not defined” Code Answer’s]

 

---

아래 코드를 추가하여 글 작성 페이지로 넘겨지기 까지 로딩 버튼으로 바뀌게 하고 싶었는데

무슨일인지 잘 되지 않았다.

 

fa fa-spinner fa-spin

 

 

나와 같은 사람이 있어도 해결방법이 나와 같은 코드이고..

<button type="button" class="btn-lg" id="load2" data-loading-text="<i class='fa fa-spinner fa-spin'></i> 로딩 중 ...">작성하기</button>

 

그래서 대안으로 그냥 페이지 자체를 로딩 중으로 바뀌게 했다. 

코드펜에서 로딩 중 화면 귀여운걸로 하나 가져와서 로딩 화면 html을 따로 만든 후 작성했다.

 

 

먼저, 공감 공간 게시판에서 글 작성하기 버튼을 누르면 loading.html로 변환된다.

<button onClick="location.href='loading.html'">글 작성하기</button>

출처 : [ [HTML] onclick로 페이지 이동시키기 ]

 

 

loading 페이지에서 일정 시간이 지난 후에 글 작성 페이지로 변환된다.

 

<meta http-equiv="refresh" content="3; url=http://localhost:8080/board">

위 코드를 입력하면 3초 후에 다른 페이지로 변환된다. 

 

출처 : [ [Html] 일정시간 후 다른페이지로 보내기 (메타태그 활용) ] 

 

---

공감 공간 페이지

 

1. 10s를 누르면 10s 페이지로 변환

2. 공감공간 버튼 누르면 공감 공간 페이지로 변환

3. 페이지 css 추가

4. 이 글도 공감 해주세요 게시글 추가

5. 작성하기 버튼 추가(로딩 중 화면 → 게시글 작성 페이지로 변환)

 

물론 저 화면 그대로 하지는 못했다. (그냥 저런 느낌? 프론트 너무 어렵다.. 재미 없다..)

 

 

추가로 slack - github 알림 연동해서 front, backend 연결 시켰다.

이제 따로 얘기를 안해도 볼 수 있게 편리해졌다.

 

또, 이 전에 python에서 올린 파일들 중 몇가지를 선발해서 public repository에 정리하고 있다.