삐옹

next.js는 SSR로 렌더링 방식을 차용한 리액트 프레임워크이다. 기껏 CSR로 꿀빨았는데 왜 다시 SSR로 돌아온걸까? 그 이유는 next는 상황에 맞게 둘다 쓸 수 있기 때문이다. 예를 들면 어떤 페이지는 SSR방식으로 렌더링이 되고 또 어떤 페이지는 CSR방식으로 렌더링 되는 식이다. 쉽게 말해 SPA로 이루어진 앱에 SSR방식을 적용시키기 위해(+ 검색엔진최적화) Next.js를 쓴다고 볼 수 있겠다. Next.js에 'Learn' 코스를 요약하며 정리해본다. 항상 공문을 읽자. https://nextjs.org/learn/foundations/about-nextjs Learn | Next.js Production grade React applications that scale. The wor..

어젯밤부터 멈추지 않고 비가 내린다. 본격적인 여름을 알리는 비인걸까. 시원하니 좋구나. 오늘 뭐 할거냐면, 코테2문제 리액트로 만드는 뽀모도로 영상 보기 home 페이지 기능넣어서 커밋 카카오 로그인 넣기

맘에 쏙 드는 빗소리 armr 영상을 발견했다 . 밤에 공부할 때 틀고해야지. 오늘 뭐 할거냐면, 프로그래머스 3문제 타이머 기능 버그 해결 + 트러블 슈팅 카카오 로그인 볼 것, 재귀함수 https://velog.io/@jeongin/Javascript-재귀함수 [Javascript] 재귀함수 재귀함수 함수가 자신을 다시 호출하는 구조로 만들어진 함수이다. 재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게된다. 재귀함수로 작성이 되는 코드는 velog.io 피드백, 상황에따라 재귀함수가 유용할 수도 아닐 수도 있다.

사실 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 엘리먼트..

일 다녀와서 낮잠까지 때려 밤 늦게 공부 시작 오늘 할 건 블로그 정리 플젝 home 화면 타이머 구현(타이머 작동, 설정 값 동기화 잘 되는지까지

어제 잔 낮잠 때문인지 오늘은 일찍 눈을 떴다. 역시 난 아침형인간인걸까? 오늘 뭐할거냐면. 코테 day6 프젝 진행 setting, home 페이지 mvp 완성 하여 커밋 배운 것 Javascript 얕은 복사: 기존 값과 복사한 값이 같은 주솟값을 참조한다. 그래서 복사한 값을 변경하면 기존 값에도 변경이 일어난다. 단 원시형은 항상 깊은 복사가 일어난다(slice로 실습해보면 1차원 배열or객체에 변경을 하면 기존값에 변경이 일어나지 않아 slice가 깊은 복사를 하는건가 싶을 수 있지만, 앞의 이유 때문에 그런 것이고 그 외 경우엔 모두 얕은 복사를 일으킨다.) ex) slice, Object,assign(), spread operator 깊은 복사: 복사한 객체는 객체 안의 객체까지 원본 객체와..

useEffect, useMemo, useCallback에 대해서 다시 공부했다. useEffect: 컴포넌트 마운트 시, 컴포넌트 언마운트 시, 특정 props가 업데이트 시(deps에 특정 값 넣었을 때) 작업을 할 수 있다. https://react.vlpt.us/basic/16-useEffect.html useMemo: deps배열에 넣은 값이 바뀌지 않으면 이 전에 값을 재사용한다. useCallback: useMemo는 값을 재사용한다면 useCallback은 함수를 재사용하게끔 해준다. 렌더링 시 함수가 함께 호출되는게 큰 메모리누수를 일으키진 않지만 결국 이도 필요한 작업이다.