[1주차 과제]
1️⃣ 비밀번호 표시 기능
<2가지 방법 By 스터디장 허세임 & 닿>
자바 스크립트 코드 사용
input type(text 타입) show/hide 방식 사용
2️⃣ 닉네임 실시간 유효성 체크
regex 기능 사용 >> 걸러낸 문자의 수가 ‘0’이면 text ‘닉네임 형식이 올바르지 않~’ 보여주기
[ html: ifram 활용]
<api 없이 버블 내/외부 양방향 데이터 공유 방법 연습하기 첫 단계>
1️⃣ 이전에 구현해두었던 네이버 블로그 검색 api 활용
파라미터 중 일부(검색어, 정렬기준, 결과값의 수)를 특정 셀의 값을 변수로 지정
응답 결과를 엑셀에 정리
2️⃣ HTML- iframe 요소 활용
‘display as an iframe’ 항목 체크
html 입력란에 {공유할 URL}과 {기본적인 레이아웃} 입력
<단점>
보안에 취약한 정보를 표시하기엔 매우 부적절한 방법
(버블 내/외부 양방향 데이터 공유를 위한 방법들 연습 과정 중 하나 )
[api 응답 결과 버블에 display하기]
1️⃣ 미리 받은 api 응답 구조 파악
2️⃣ 응답을 임시 저장 할 state 생성 & 리피팅 그룹에 display 하기
api 요청을 여러번 반복 할수록 응답 수도 많아질테니 ‘List’ 체크
리피팅 그룹 데이터 소스= state ‘api_res~’ 의 items의 item(제목, 링크, …)들
[api 요청 워크플로우 설계하기]
1️⃣ 버튼 클릭 트리거로 api 호출하기
2️⃣ 요청 파라미터 값 지정하기
변수: 검색어 {query}, 정렬 기준 {sort}
(start= 시작점, display= 가져올 블로그 글의 수..끝점)>> 정보의 범위 지정
3️⃣ 가져올 정보 중복 방지하기
- 요청 파라미터 값을 state ‘검색정보저장’에 저장하기
state 설정
요청했던 파라미터 값 담기
[프로젝트 관리 페이지]
1️⃣ 뉴프로젝트 생성하기
시작일과 마감일 설정 가능
DB 저장 후, 인풋 리셋과 함께 ‘생성완료’ 알람 표시
2️⃣ 저장 된 프로젝트 리피팅 그룹에 DISPLAY 하기
기한 표시 기능
체크박스 구성: toggle element~ 기능 사용으로 원할 시에만 보이도록 설정
메모보기 기능: 메모보기 아이콘을 누르면, 해당 셀의 메모가 보이도록 설정
3️⃣ 페이지네이션
워크플로우로 구현
!!다음 주 과제!!
✅[api 요청 워크플로우 설계하기] - 중복 방지하기
state ‘검색정보저장’ 확인하고, {start} 값 조정하기
{query}가 같고, {sort}는 다를 때: {start} 값 1 유지
{query}와 {start}가 같고 {sort}도 같을 때: 이전 요청 {start} 값 +20
검색 결과가 실시간 변동이 많은 경우 >> API CALL ITEM: ‘link’로 중복 체크하기
✅[ html: ifram 활용]- iframe 값을 버블 내에서 조정 가능하게 하기
버블의 인풋값을, (iframe으로 공유된 시트의)변수로 지정한 셀로 전달하기
(test 모드를 제거하고) 개발자도구에서 요소 추출 >> 해당 셀에 값을 전달하기 위해 버블의 인풋과 어떻게 연결해야 하는지
실시간 연동을 위한 트리거 설정하기
외부(시트 자체에서)에서 변동된 값은 실시간으로 버블(내부)로 공유되지 않는 문제
ex) 시트에 트리거 셀 만들기 & 버블에서 트리거 버튼 만들기(>> 셀로 전달 >> 변동된 셀 값을 트리거로 스크립트 실행)
✅ [api 응답 결과 버블에 display하기] - 응답 결과를 state에 ‘저장’ >> ‘리피팅 그룹에 DISPLAY’, ‘DB에 저장’, ‘삭제(숨기기)’
<목적은>:
원본 데이터 보존
화면 표시 관리 용이
복원 기능 구현 가능
DB 저장 시 필요한 전체 정보 접근 가능
담고 싶은 블로그 글만 체크박스 체크 >> 체크 해제된 api call item (items item x.. 제목이나 링크만 지우는 게 아니라 아예 해당 블로그 글의 모든 정보를 삭제)은 state에서 삭제 >> 저장하기 버튼 클릭 >> 데이터 타입 ‘select_result’에 저장.
질문: 리피팅 그룹에 게시된 블로그를 확인하기 위해 링크를 열었다가 다시 버블 현재 페이지로 돌아오면, state에 저장된 내용이 사라지겠..죠?
<저장 & 삭제>
체크박스 체크 후
- > 저장하기 > 체크 해제된 셀의 item( item의 각각의 items 아님)은 STATE 에서 제거 후 나머지만 저장
- > 삭제하기 > 해당 셀 숨기기 (STATE에서 삭제 X)
* 참고: 리피팅 그룹의 셀에는 각 api call item(개별 블로그 글의 모든 정보)이 담긴 것이고, 그 안에 보이는 텍스트 요소들은 각각의 item의 items(블로그 제목 , 링크 등)임.
<복원하기>
버튼 클릭 > 숨겨졌던 요소들 모두 보이기 (숨겨졌던 셀들만 체크박스 활성화/ 주변과 레이아웃 다르게 설정하기..투명도나 컬러 등) >
체크박스 체크 후 > 복원하기 > 체크된 셀 다시 보여주기
✅ [DB 설정하기]- DB에 담길 정보들 필드 설정하기
api call (api call item이 선택적으로 담긴)을 DB에 저장하기 위한 필드 생성
추가로 고려해야 하는 점은: 데이터 타입 ‘project’에 개별 블로그 글(api call item)을 담을 수 있어야 함.
✅ DB에 담긴 셀렉_블로그글을 프로젝트로 정리하기
체크박스 체크 > 커런트 셀(데이터 타입 ‘selected_…’)의 each 블로그글s(각 블로그글) 저장
(item list 아님!!!!!! 개별 블로그 글만 담아야 하기 때문.)
✅ [프로젝트 관리 페이지]- d-day 설정하기
‘마감일’과 ‘current date/time’ 활용하여 d-day 표시 하기
소감
: 특정 목표 없이 생각나는 기능들을 만들어봤는데, 어떤 일을 하기 전 명확한 목표 설정이 얼마나 중요한 일인데 깨달았습니다. 시간 날 때마다 조금씩 하다보니, 끝까지 구현이 안 된 작업들이 많네요. 이번에 세운 다음 주 과제도 열심히 수행해야겠습니다.
끝으로 밤낮 가리지 않고 스터디원들의 질문에 열렬히 답변해주신 스터디장님 두 분의 열정에 감탄하고 갑니다💪
감사합니다.