삐옹

사실 html 자체에 내장된 멋진 엘리먼트가 있지만은. 좀더 커스텀한 ui를 만들어보고 싶다 할 수 있겠다. 카카오톡으로 뭘 공유할거냐 했을 때 이걸 이용해 무언가 재밌는걸 할 수 있지않을까 싶다. 1. 조사 구글 검색 시작. 검색 1분만에 맘에 드는게 있어 결정해버렸다. 체크 표시로 한 섹션의 완료를 명확히 확인할 수 있는 이것으로 결정. 자 그럼 만들어볼까. 2. 계획 한 섹션의 시간이 끝나면 저 빈 동그라미에 체크표시와 색이 채워져야한다. 데이터를 어떻게 활용할 것인지 생각해보자. 아래는 처음 Home화면에 들어왔을 때 세팅되는 데이터의 모습이다. remainingTime에 있는 프로퍼티들을 이용하여 화면이 그려진다. 900초가 100%의 기준점이 되어야하고, 1초가 줄어들 때

뽀모도로 타이머를 만들고 있다. Setting 페이지에 등록된 데이터를 연산하여 Home 페이지에 알맞게 뿌려주는 작업을 만만히 봤나.. 나름 골머리를 앓았다. const initialValue = [ { time: 15 }, { shortBreak: 5 }, { longBreak: 5 }, ]; 그래도 initialValue를 기반으로 하여 두 페이지의 UI는 완성되었다. 일단 로그인하면 저기있는 시간이 디폴트로 들어온다 할 수 있겠다. start&stop 버튼, 한 섹션이 끝났을 때 알맞은 다음 섹션으로 이동 처리까지 완료했다. 앞으로 만들 기능은: progress bar 기능을 하는 UI만들기 섹션이 끝나기 10초 전에 알림(소리 + 작은 알림창) 카카오 로그인 & 공유하기(뭘?) 하나 씩 글로 정..

cc는 홍콩 사람이고 나의 절친한 친구이다. 오늘부터 10일간 서울에서 놀다가 홍콩으로 다시 돌아갈 예정이다. 3년 만에 볼 생각을 하니 벌써 기분이 좋다. 오늘 뭐 할 거냐면, (코테)프로그래머스 3문제 (프젝)Home 페이지에 timer 기능 구현 (프젝)카카오 로그인과 공유하기를 넣으려고 하는데 이게 왜 필요하진 고민해보고 로그인 기능 시작 셀프피드백 1. 코테 꾸역꾸역 풀어가곤 있지만 시간이 많이 걸린다.(아쉽지만 푼건 칭찬) 그러고 막상 해답을 보면 내가 10줄 넘게 조건문, 반복문을 이용한걸, reduce로 간단히 처리한 경우가 많았다. reduce 함수에 이것저것 넣어서 계속 연습해봐야겠다. https://school.programmers.co.kr/learn/challenges/traini..

렌더링렌더링.. 그 놈의 렌더링 플젝하다가.. 내가 짠 코드에 state나 일반 변수들 이러저리 쓰다보니, 객체에 값이 없다(undefined)는 빨간 메시지를 종종 보게 된다. 리액트의 라이프싸이클을 생각않고 막 쓴거라 할 수 있겠다. 기억을 더듬을겸 관련 내용을 몇 장에 걸쳐 간단히 정리해본다. 렌더링? 렌더링 === (가장 최신 상태의)컴포넌트 호출 === 함수 호출 컴포넌트가 그려지는 과정을 알아야하는데 컴포넌트가 그려지려면 바로 이 렌더링이 필수적이다. 렌더링은 다음과 같은 경우에 일어난다. 앱 초기 실행 시(initial execution) state값이 변경 될 때(re-rendering) 앱 초기 실행시 : 리액트에서 우리가 짠 코드는 모두 App컴포넌트에 담겨 html에 root 엘리먼트..