Archive

2021-03-25 TIL

25 Mar 2021 | 로그포스

2021-03-25 TIL

  • 오늘 한 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 폴더 구조 정리 - 지금껏 나와 다른 팀원이 따로 페이지를 만들고 있다보니 css나 js, html 중에 겹치는 부분을 페이지마다 가져다 쓰고 있었다. 성능 최적화는 물론이고 상당히 비효율적이라고 생각해서 그런 부분들을 모듈화시켜서 import해서 사용하는 식으로 정리하기로 했다. 페이지마다 들어가는 gnb나 footer를 모듈로 빼고 그에 연관되는 css, js도 share라는 폴더에 빼서 정리했다. 그 밖에도 폴더를 main / subpages로 나누고 공통되는 부분은 share라는 폴더에 넣어서 사용하기로 했다.
  • 내일 할 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 event 페이지 마크업


  • 끝으로

정리 싸악 하고나니 후련하다

오늘의 한 줄 총평 : 프로젝트 빌드의 중요성

2021-03-24 TIL

24 Mar 2021 | 로그포스

2021-03-24 TIL

  • 오늘 한 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 map 페이지 연결 - 미리 만들어 놓은 map 페이지를 연결하는 작업을 했다. 카카오 open api를 이용하였고 하는김에 기능을 약간 추가했다. 내 반경 1km 내에 검색 결과가 없으면 목록에 표시하지 않는 기능이다. 이전에 만들어놓은 지도는 이동시마다 중심 좌표로 투썸플레이스를 검색해서 목록에 표시했는데 그 반경이 어디까지인지 몰랐었다. 죄다 나오는걸 보니 꽤나 넓었던듯 싶다. 예제도 별로 없고 카카오 디벨로퍼스에 있는 문서로는 정보가 불충분했지만 열심히 고생한 결과 구현에 성공했다. 다음번 디벨롭 때에는 목록을 조금 더 투썸(?)스럽게 꾸며봐야겠다.
    4. 팀 프로젝트 테이블 설계 - 테이블 설계는 계속해서 추가해야할 것도 많고 어려운 부분이지만 우수한 팀원 덕분에 그럭저럭 짜여지고 있다. 테이블은 어느정도 구조가 나왔으니 이제 프론트단은 프로젝트 개시에 맞춰 폴더 구조나 css, js 모듈화 등을 신경쓰면서 작업을 진행해야겠다.


  • 내일 할 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 폴더 구조 정리


  • 끝으로

요즘 같은 학원의 학생들한테 mark-up에 대해 이것저것 질문을 받고 답변을 해주는데, 나도 아직 기초적인 css, html 부분이 부족하다는 것을 느끼고 있다. 간과하고 넘어갔던 부분들은 다시금 정리하는 시간을 가져야겠다.

오늘의 한 줄 총평 : 프론트도 해야할 일이 엄청 많음

2021-03-23 TIL

23 Mar 2021 | 로그포스

2021-03-23 TIL

  • 오늘 한 것
    1. 인터렉티브 웹 개발 - css에 perspective라는 속성이 있다는 것을 처음 알았다. translate3D 등과 같이 써서 스크롤에 따라 페이지가 입체적으로 움직이는 효과를 내는 방법을 배웠다.
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 빌드 페이지 연결 - 지금까지 따로 html로 만들어놓은 페이지들을 Spring MVC 프로젝트로 빌드한 패키지의 view(JSP)에 넣는 작업을 진행하고 페이지들을 연결하는 작업을 진행했다. 우선 JSP 내에서의 페이지 이동에서 1차적인 어려움을 겪었고 여러 사람이 작업을 진행함에 있어 Git 충돌이 일어나서 2차 어려움을 겪었다. 이제 연동하는 작업을 진행했으니 만들어진 Spring 프로젝트에 html mark up을 하도록 해야겠다. 평소 vs code로 코딩을 주로 하는편인데 eclipse로 작업을 해야해서 조금 번거롭기도 하지만 어쩔수 없다.
    4. 관리자 메인 페이지 마크업 - 관리자 페이지는 부트스트랩 템플릿으로 가기로 하고 적당한 템플릿을 골라서 틀을 만들었다. 안에 들어가는 콘텐츠는 차차 만들어야겠지만 시작이 반이라고.. 틀을 잡았으니 열심히 마크업하는 일만 남았다.
    5. 개인 포폴 약간 수정 - 포폴용 웹사이트의 skill 부분을 countUp.js 플러그인을 써서 숫자가 카운팅되며 올라가는 애니메이션 효과를 주었었는데 폰트가 마음에 들지 않아서 수정했다. 또, 게이지바가 차오르는 것을 단색으로만 구현해놨었는데 그라데이션 색을 입혀서 살짝(?) 디자인적인 요소를 주었다.


  • 내일 할 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 회의 - 테이블 설계
    4. 관리자 메인 페이지 마크업


  • 끝으로

인터렉티브 웹 개발 새로운 인강을 구매했다~ 새로운 것을 배울 생각에 신이 난다😅

오늘의 한 줄 총평 : 인터렉티브~!

2021-03-22 TIL

22 Mar 2021 | 로그포스

2021-03-22 TIL - 팀 프로젝트 3차 회의

  • 오늘 한 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 3차 회의 DB설계 - DB설계를 위해 일찍 모여 회의 시간을 가졌다. 기본적인 쇼핑몰 형태의 DB와 유사하여 여러 예시들을 참고하면서 꼭 들어가야하는 테이블들을 정리했다. 모두 익숙하지 않은 부분이라 꽤나 시간이 걸렸고 하루이틀 내로 끝낼 수 없다는 것을 직감했다. 사용자 자체는 어느정도 틀이 잡혔는데 문제는 여기에 관리자를 추가하는 것이다.. 다음 회의때 이어서 계속..
    4. 개인 포트폴리오 page 4 - 스크롤을 내리다 특정 부분에 걸리면 트리거가 발동돼서 게이지가 차오르는 효과를 스크롤의 이동에 맞춰 움직이도록 구현하려고 했는데 생각처럼 되지 않았다. 결국 스크롤이 특정 지점을 지나면 display가 block으로 바뀌면서 시간차를 둬서 게이지라 차오르는것처럼 보이도록 구현했다. 그에 맞춰서 게이지의 퍼센트를 나타내는 숫자가 카운팅되는 애니메이션은 countUp.js 플러그인을 사용해서 구현했다.


  • 내일 할 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀 프로젝트 개발 환경 세팅
    4. 관리자 페이지 구도 잡기


  • 끝으로

생각한대로 구현하고 싶다ㅏㅏㅏㅏ

오늘의 한 줄 총평 : 미숙함.. 연습연습!

2021-03-21 TIL

21 Mar 2021 | 로그포스

2021-03-21 TIL

  • 오늘 한 것
    1. 인터렉티브 웹 개발
    2. 회원가입 폼 유효성 검사 - 어제 회원가입 유효성검사 부분을 끝내지 못해서 오늘 이어서 했다. 정규표현식을 이용해서 각 폼의 유효성을 체크하고 keyup과 blur 이벤트를 걸어 유효하지 않은 값을 넣거나 그 상태로 focus 이동을 했을때 에러메시지가 출력되도록 구현했다. 또, 이메일 인증 버튼을 눌렀을 경우 화면에 타이머가 출력되고 시간이 초과되면 다시 버튼을 누를 수 있도록 유도했다. 우편번호 검색은 다음 api를 이용해서 구현하고 주소를 누르면 값이 입력되면서 상세주소 입력창에 focus가 맞춰지도록 구현했다.


  • 내일 할 것
    1. 인터렉티브 웹 개발
    2. 학원 대면수업(15:30~22:00)
    3. 팀프로젝트 3차 회의 - DB설계


  • 끝으로

회원가입 하나에도 이렇게 많은 고민과 궁리가 들어간다니.. 세상에 쉬운게 없다.

오늘의 한 줄 총평 : 내일은 대망의 DB설계