2021-04-16 TIL

• 오늘 한 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 이벤트, 이벤트 상세 게시판 동적 구성 - 어제 로직을 갈아엎는 작업을 이어서 진행했다. 이벤트 게시판은 해당 탭의 데이터를 받아서 뿌려주고 해당 탭에서 더보기 버튼을 눌렀을때 어느 탭에서 눌렀는지를 알아야했다. 탭이 눌려있으면 active class가 추가되는데 더보기 버튼을 눌렀을때 active가 있는 탭을 찾아서 그 탭에 데이터를 6개씩 더 추가한다. 문제는 이벤트 상세 구현시 백엔드에서 이전글,다음글 포함 데이터 세 개를 받아야하는데 진행중, 종료된 이벤트의 첫번째, 마지막 데이터는 2개가 나와야한다. 백엔드에서 진행중, 종료된 이벤트를 오늘 날짜를 기준으로 구분해서 처음과 끝을 정해야하는데 나오는 데이터는 전체 데이터를 기준으로 뽑아서 문제가 발생했다. 백엔드 담당 팀원이 이 부분을 모르는것 같아서 다음 주에 만나서 직접 설명을 해야겠다.
  3. QnA, QnA 등록, QnA 상세 게시판 동적 구성 - QnA 게시판은 댓글기능도 있고 잠금여부에 따라 비밀번호도 붙는다. 이 부분을 같이 작업하는 백엔드 팀원이 잘 이해를 하지 못한것 같아서 진행이 좀 더뎠다. 어찌어찌 리스트는 뽑았다해도 댓글부분이 구현되지않아서 상세페이지는 안나온다… qna 등록도 form 태그로 submit하도록 로직을 짰는데 어찌된 일인지 잘못된 접근이라고 나온다. 오늘 학원을 안가서 이 부분을 form 태그로 쏘는지 JSON으로 쏘는지 상의를 해보고 결정해야 될 듯하다.

• 내일 할 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 어드민 페이지 구현
  3. 알고리즘 공부

• 끝으로

감기기운이 좀 있어서 학원 하루 쉬고 집에서 작업했다.

학원만 안갔다뿐이지 집에서 공장 돌렸다.

오늘의 한 줄 총평 : 이것이 개발자의 삶인가

2021-04-15 TIL

• 오늘 한 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 어드민 회원리스트 상세페이지 구현 - 회원리스트 항목 클릭시 그 회원의 상세페이지 모달이 출력되도록 구현했다. 백엔드가 작업을 시작하면 나도 여기서 정보를 수정할 수 있도록 자바스크립트 로직도 구현해야한다.
  3. 어드민 회원리스트 엑셀 다운로드 기능 구현 - 회원리스트를 엑셀로 다운로드 받는 기능을 구현했다. xls 확장자로는 엑셀에서 잘 보이지만 xlsx로 확장자명을 바꾸면 파일이 깨지는 이슈가 발생했다. 찾아본 결과 JSP에서는 xlsx를 지원하지 않는듯하다. xls로 일단 해두었지만 나중에 더 찾아봐야겠다.
  4. 이벤트 게시판 동적 구성 - 백엔드 없이 더미데이터로 짜놓은 로직이 애초에 설계가 잘못되었다. 탭이 3개라 모든걸 세 개로 나눠로 짰는데, 생각해보니 한 개의 로직으로 충분히 돌려쓸 수 있다는 사실을 알았다. 진행중, 종료된 이벤트도 클라이언트 쪽에서 나누는 것이 아니라 요청하는 URL을 두 곳으로 나눠서 그에 맞는 데이터만 가져오면 된다.
  5. 알고리즘 공부 - 인프런 알고리즘 강의를 들었다. 후.. 개발자들도 알고리즘 공부를 기피하는 이유를 알 것같다. 너무 어렵고 무슨 소린지 모르겠다ㅋㅋ. 그래도 코딩을 하는 사람이라면.. 알고리즘, 자료구조도 빠삭해야겠지.. ㅠ 공부하자..

• 내일 할 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 이벤트, 이벤트 상세 게시판 동적구성
  3. qna, qna등록, qna 상세 게시판 동적 구성

• 끝으로

이번주 목표는 어드민 페이지 마크업 완성

오늘의 한 줄 총평 : 주말 공장 풀가동 예정

알고리즘 기초 with 인프런 [영리한 프로그래밍을 위한 알고리즘 강좌]

1. 알고리즘의 분석

   • 알고리즘의 자원(resource)사용량을 분석
   • 자원이란 실행 시간, 메모리, 저장장치, 통신 등

2. 시간복잡도(time complexity)

   • 실행시간은 실행환경에 따라 달라짐 (하드웨어, 운영체제, 언어, 컴파일러 등)
   • 실행시간을 측정하는 대신 연산의 실행 횟수를 카운트
   • 연산의 실행 횟수는 입력 데이터의 크기에 관한 함수로 표현
   • 데이터의 크기가 같더라도 실제 데이터에 따라서 달라짐
     • 최악의 경우 시간복잡도 (worst-case analysis)
     • 평균 시간복잡도 (average-case analysis)

3. 점근적(Asymptotic) 분석

   • 점금적 표기법을 사용 : 데이터의 개수 n 일 때 수행시간이 증가하는 growth rate로 시간복잡도를 표현
   • Θ-표기, Ο-표기 등을 사용
   • 유일한 분석법도 아니고 가장 좋은 분석법도 아니나, 간단하고 비의존적이라 광범위하게 사용됨

4. 상수 시간복잡도

   • 입력으로 n개의 데이터가 저장된 배열 data가 주어지고, 그 중 n/2번째 데이터를 반환한다

   int sample( int data[], int n )
   {
    int k = n/2 ;
    return data[k] ;
   } 
   

   • n에 관계없이 상수 시간이 소요된다. 이 경우 알고리즘의 시간복잡도는 Ο(1)이다

5. 선형 시간복잡도

   • 입력으로 n개의 데이터가 저장된 배열 data가 주어지고, 그 합을 구하여 반환한다.

   int sum(int data[], int n)
   {
   int sum = 0 ;
   for (int i = 0; i < n; i++)
   sum = sum + data[i];
   return sum;
   } 
   """ 이 알고리즘에서 가장 자주 실행되는 문장이며,
   실행 횟수는 항상 n번이다.
   가장 자주 실행되는 문장의 실행횟수가 n번이라면
   모든 문장의 실행 횟수의 합은 n에 선형적으로 비례하며,
   모든 연산들의 실행횟수의 합도 역시 n에 선형적으로 비례한다 """
   

   • 선형 시간복잡도를 가진다고 말하고 Ο(n)이라고 표기한다

6. 순차탐색

   • 배열 data에 정수 target이 있는지 검색한다.

   int search(int n, int data[], int target)
   {
    for (int i=0; i<n; i++) {
    if (data[i] == target)
    return i;
    }
    return -1;
   }
   """ 이 알고리즘에서 가장 자주 실행되는 문장이며,
   실행 횟수는 최악의 경우 n번이다. """
   

   • 최악의 경우 시간복잡도는 Ο(n)이다.

7. Quadratic

   bool is_distinct( int n, int x[] )
   {
    for (int i=0; i<n-1; i++)
    for (int j=i+1; j<n; j++)
    if (x[i]==x[j])
    return false;
    return true;
   }
   

   • 최악의 경우 배열에 저장된 모든 원소 쌍을 비교 하므로 비교 연산의 횟수는 n(n-1)/2이다.
   • 최악의 경우 시간복잡도는 Ο(n2)으로 나타낸다.

참고 자료

영리한 프로그래밍을 위한 알고리즘 강좌 - 인프런

2021-04-14 TIL

• 오늘 한 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. moment.js 달력 수정 - 어드민 회원리스트 검색에서 오늘, 1주일, 1개월 등등 기간 선택 버튼을 클릭하면 현재 날짜 기준 계산된 날짜가 input창에 표기되는 것을 구현했다. 날짜 계산을 어떻게 할까 생각을 하다가 moment.js를 활용하기로 했다. 이 라이브러리로 아주아주 간단하게 날짜 계산이 가능하다.
  3. 어드민 페이지 화면 구현 - 회원리스트의 버튼들을 예쁘게 꾸미고 배치했다. 초기화, 검색 버튼들에 기능도 추가했다. 초기화는 말 그대로 초기화인데 form 태그를 사용하지 않아서 reset 기능을 쓸 수 없어서 직접 구현했다. 검색 버튼에도 AJAX 요청 메소드를 연결했는데, 먼저 입력한 데이터들을 JSON으로 포장하여 서버에 전송하여 받은 응답의 결과를 리스트에 다시 뿌려준다.
  4. 뉴스 상세 페이지 동적 구성 - 뉴스 게시판에서 게시글을 클릭하여 상세 페이지의 데이터를 서버에 요청한다. 이 부분에서 500 서비스 에러가 나서 에러를 찾는데만 엄청 시간을 쏟아부었다. 로직 자체에 문제가 없어보여서 다른 팀원에게 실행을 부탁했더니 이게 뭔일.. 나만 안되는것이 아닌가. 이것저것 엄청 찾아헤매이다가 이클립스를 껐다가 다시 켰더니.. 실행이 정상적으로 되었다. 이클립스의 캐시에 저장되었던 데이터가 문제였던것인지.. 깃허브에 누가 잘못 올렸던것인지.. 확실하진 않지만 아무튼 해결했으니 됐다.

• 내일 할 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 어드민 회원리스트 상세 페이지 구현
  3. 어드민 페이지 구현
  4. QnA or 이벤트 게시판 동적구성
  5. 알고리즘 공부

• 끝으로

알고리즘 + 면접 인터뷰는 아무런 준비를 한 적이 없다. 내일부터 짬을 내서 짧게라도 공부를 시작해야겠다.

오늘의 한 줄 총평 : 알고리즘 +인터뷰 공부 시작하자

2021-04-13 TIL

• 오늘 한 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. map 페이지 대폭 수정 - 다른 팀에게 카카오맵 api 사용법에 대해 알려주면서 내가 만든 맵 페이지도 대폭 수정하게 되었다. 원래 있었던 오류도 고치는겸해서 infowindow의 이미지를 없애고 전화번호, 주소, URL 링크를 대신해서 넣었다. drag 이벤트도 날리고 검색하면 검색 목록의 첫 번째 데이터의 좌표로 무조건 이동하던 이벤트도 날렸다. 대신 검색으로 이동은 하는데 setBounds를 제거해서 지도 범위가 재설정되는 것을 막았다.
  3. 어드민 회원관리 회원리스트 화면 구현 - 아직 미완성이지만 90% 정도는 진행했다. 어드민 페이지의 나머지 페이지들도 공통적으로 들어가는 리스트라서 이게 완성되면 나머지는 편하게 할 수 있을듯하다.
  4. 뉴스 게시판 AJAX 동적 구성 - 백엔드와 협업하여 AJAX 요청으로 받은 데이터로 뉴스 게시판에 뿌려주는 작업을 했다. 이전 공지사항과 로직은 같으나, 한 가지 추가 된 것은 이미지였다. JSON 데이터의 이미지 경로, 이미지 파일명, 이미지 확장자를 받아서 클라이언트 쪽에서 합쳐서 이미지를 불러왔다.
  5. 어드민 회원관리 달력 - Tempus Dominus bootstrap 4 를 이용해서 기간 선택의 달력을 구현했다. 기존에 사용하던 bootstrap template과 CSS가 겹쳐서 달력이 출력되지 않는 현상이 발생해서, Tempus Dominus bootstrap 4의 css는 CDN 호출을 포기했다.

• 내일 할 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. moment.js 달력 수정
  3. 어드민 페이지 화면 구현

• 끝으로

이번 주 안으로 어드민 페이지 마크업 끝내기

오늘의 한 줄 총평 : 자잘하게 많이 작업한 하루