30 Mar 2021
|
로그포스
2021-03-30 TIL
- 오늘 한 것
- 인터렉티브 웹 개발
- 학원 대면수업(15:30~22:00)
- 뉴스, QnA 세부 페이지 구현 - 뉴스 페이지와 QnA 페이지의 상세 페이지를 구현했다. 어제 했던 공지사항 세부 페이지와 로직은 거의 같다. 뉴스 상세 페이지는 이미지를 추가로 불러오고, QnA 상세 페이지는 먼저 게시글 클릭시 잠금 여부를 확인해서 비공개 게시판이면 진입을 할 수 없게 막아놨다. 비밀번호 입력 후 서버의 비밀번호와 대조하는 작업은 추후 진행할 예정이다. 또, 관리자의 댓글이 존재할 경우 댓글도 같이 화면에 뿌려준다.
- map 페이지 기능 업그레이드 - 원래 예정에는 없었지만 map 페이지의 빠진 부분을 업그레이드했다. 먼저, 스타일링을 수정해서 투썸에 맞게 바꿨고 검색 기능을 구현했다. 또, 결과 목록의 해당 리스트를 클릭하면 좌표 이동이 되도록 구현했다.
- 내일 할 것
- 인터렉티브 웹 개발
- 학원 대면수업(15:30~22:00)
- 뉴스, QnA 세부 페이지 구현
‘DOM을 깨우치다’ 책을 구매했다. 앞으로 출퇴근(?) 시간에 틈틈이 정독해야지.
오늘의 한 줄 총평 : DOM을 깨우치자
29 Mar 2021
|
로그포스
2021-03-29 TIL
- 오늘 한 것
- 인터렉티브 웹 개발
- 팀 프로젝트 공지사항 세부페이지 구현 - 공지사항 페이지에서 게시글을 클릭하면 해당 게시글의 index를 parameter로 물고 세부 페이지로 넘어간다. 그 index로 세부 페이지에서 서버에 데이터를 요청하면 받은 데이터로 동적으로 화면을 그려줄 수 있게 로직을 짰다. 다음글과 이전글을 구현하는게 문제인데, 해당 index의 앞, 뒤 번호까지 총 3개의 데이터를 요청하는 식으로 해결했다. 그래서 데이터가 없다면 해당 게시글이 존재하지 않는다는 문구가 출력되고 사용자가 눌렀을 시 경고창이 뜨도록 처리했다. 뉴스, QnA도 비슷하게 가면 될거같은데 QnA는 댓글과 QnA 등록 기능도 구현해야한다.
- 내일 할 것
- 인터렉티브 웹 개발
- 학원 대면수업(15:30~22:00)
- 뉴스, QnA 세부 페이지 구현
‘DOM을 깨우치다’ 책을 구매했다. 앞으로 출퇴근(?) 시간에 틈틈이 정독해야지.
오늘의 한 줄 총평 : DOM을 깨우치자
28 Mar 2021
|
로그포스
2021-03-28 TIL
- 오늘 한 것
- 인터렉티브 웹 개발
- 팀 프로젝트 공지사항,뉴스,QnA 게시판 화면 구현 - 기본적인 게시판 형태의 페이지들은 한 가지 양식으로 돌려서 사용했다. 자바스크립트의 데이터를 화면에 뿌려주는 로직이나 페이징 처리를 하는 로직도 일맥상 통하는 부분이라 돌려서 사용했다.
- 반응형 웹 개발 - 해외 유튜버 영상을 보다가 좋은 예제거리를 찾아서 간단한 SPA를 구현해봤다. 별 기능은 없는 페이지였지만 잘 몰랐던 grid layout이나 SCSS 사용법에 대해 알 수 있었다. 항상 flex만으로 layout을 잡아왔는데 gird도 사용해보니 꽤나 편리한 것 같다. 카드형 레이아웃을 짤 때 요긴하게 쓰일 것 같다. 또, SCSS도 사용해보니 CSS보다 직관적으로 코드를 볼 수 있었다. 이번 예제에서는 간단하게 Nesting하는 방법만 배웠지만 여기에 조건문이나 함수도 같이 사용하면 더 좋을 것 같다. 이 부분은 나중에 더 공부해봐야겠다.
- 내일 할 것
- 인터렉티브 웹 개발
- 학원 대면수업(15:30~22:00)
- 공지사항, 뉴스, qna 세부 페이지 구현
이것저것 다 하면 세부페이지 양이 꽤 많다. 공장 가동해서 얼른 찍어내자.
오늘의 한 줄 총평 : 공장 풀가동
27 Mar 2021
|
로그포스
2021-03-27 TIL
- 오늘 한 것
- 인터렉티브 웹 개발
- 팀 프로젝트 이벤트 페이지 동적 구성, faq 페이지 작성 - 나중에 비동기로 JSON 데이터를 받아서 화면에 뿌려줄 것을 감안해서 하드코딩 되어있는 부분을 싹 날리고 가상의 JSON 데이터를 만들어 넣는식으로 바꾸어 보았다. 먼저 미리 만들어 놓은 이벤트 페이지를 손봤는데, 문제는 더보기 버튼의 구현이었다. 6개씩 미리 화면에 뿌려주고 더보기 버튼을 누르면 6개씩 더 보여주는 식인데 start number를 기억하고 6씩 증가하여 데이터를 slice해오는 식으로 만들었다. 하지만, 버튼은 하나인데 탭이 3개라는 점이 큰 난관이었다. 어느 탭에서는 더보기 버튼을 누르면 해당 탭의 데이터를 가져와야하는데 여기서 헤매다가 결국 버튼을 탭 별로 나누어버렸다.. 버튼 핸들러에 탭의 id값을 파라미터로 넣어서 탭 핸들러나 다른 메소드에서 switch로 구분하여 처리했다. faq 페이지는 단순한 아코디언 형식이라 비교적 간단하게 끝났다.
- 내일 할 것
- 인터렉티브 웹 개발
- 공지사항, 뉴스, qna 게시판 구현
지금 하드코딩으로 만들어 놓은 페이지들을 동적으로 DOM을 생성해서 삽입하는 방식으로 바꾸려면 꽤나 힘든 작업이 될듯하다..
오늘의 한 줄 총평 : 반응형하랴 비동기하랴 퍼블리싱하랴
26 Mar 2021
|
로그포스
2021-03-26 TIL
- 오늘 한 것
- 인터렉티브 웹 개발
- 학원 대면수업(15:30~22:00)
- 팀 프로젝트 event 페이지 마크업 - 이벤트 페이지를 구현했다. 3개의 탭으로 나누어서 진행중인 이벤트, 매장별 이벤트, 종료된 이벤트 각 탭을 클릭하면 그에 맞는 이벤트 리스트가 주루룩 나오는 식이다. 하드코딩으로 만들어서 그냥 해당 탭 클릭시 원래 있던 화면을 display: block 으로 바꿔주는 식인데, 아무리 생각해도 이건 너무 간단하다. 여기에 더 보기 버튼도 추가해야하고 비동기 통신으로 서버에서 데이터를 받아왔을 때에 어떻게 바꿔야하는지도 생각해봐야한다. 주말동안 느긋하게 고민해보자.
- 내일 할 것
- 인터렉티브 웹 개발
- 학원 대면수업(15:30~22:00)
- 팀 프로젝트 fnq 페이지 마크업
- 비동기 데이터 통신 관련 동적 구성
- 이벤트 페이지 더보기 버튼 추가
지금은 모든 페이지를 하드코딩으로 가짜 데이터를 넣어 레이아웃을 잡는 식으로 코딩을 했는데, 나중에 서버에서 데이터를 받아서 동적으로 화면에 출력하려면 이것들을 싸악 갈아엎어야한다. 그 부분은 생각안했었는데 슬슬 짜야겠다. 아예 처음부터 JSON 형태로 데이터를 받아서 출력하는 식으로 자바스크립트를 사용하면 어떨까?
오늘의 한 줄 총평 : AJAX든 AXIOS든 Fetch든 비동기가 중요
