코딩쌀롱

✱커스텀 훅 - 커스텀 훅의 state는 독립적, 호출될 때마다 state는 아예 독립적이다. 그렇다면 커스텀 훅이 호출돼서 종료되면 그 내부의 state값은 더 이상 수정하거나 사용할 수 없고 끝?(커스텀 훅이 종료되면 내부로 들어갈 수 없으니까 - 커스텀 훅의 state는 async 함수 반환값이 promise객체라 리턴값 활용을 못 할 때 유용. setState로 값을 저장하고 return state하면 되니까. ✱history API - pushState: 주소가 바뀐다. 뒤로가기 버튼이 활성화된다. 페이지는 새로 갱신되지 않고 주소만 바뀐다!! - replcaceState: 주소가 바뀌지만, 뒤로가기 버튼은 활성화되지 않는다. 마찬가지로 페이지 갱신은 안 된다. 이전 주소를 지우기 때문에 더는 ..

✱Hook의 규칙 - 최상위(at the Top Level)에서만 Hook 호출! - 오직 React 함수 내에서 Hook 호출! ( 컴포넌트 함수, 커스텀훅) ✱useEffect에서 async 함수 사용하기 - async 함수는 promise 객체를 반환. - 첫 번째 인자인 부수 효과 함수는 함수만 반환할 수 있다. - 반환된 함수는 부수 효과 함수 호출 직전, 컴포넌트가 사라지기 직전에 호출된다. - useEffect에서 async 함수를 사용하려면 useEffect 내에서 async 함수를 만들어서 호출해야 한다. ✱mount와 render의 차이 - 맨 처음 컴포넌트가 렌더될 때 mount, - props, state가 변경되어 리렌더링될 때는 mount가 아니라 render 참고📚 리액트 공식..

console.dir(location)해봤을 때. - location.pathname: 요청한 url의 path값 - match.path: 정의한 라우트의 path값 - match.isExact: 요청한 path와 정의한 라우트의 path가 같은지 - location.search: 쿼리 스트링 window.location.search를 queryString.parse에 전달해주면 객체로 만들어준다. location.search하니까 리액트+타입스크립트에서 에러가 나서 window.을 붙여줬더니 해결됐다. import queryString from "query-string"; const MyPageModal = ({ onClick }: Props) => { const query = queryString.p..

📌 event.target 타입 지정 event.target을 typescript로 어떻게 해줘야할지 모르겠었는데 카일이 도움을 줘서 해결했다. 위 코드에 주석을 붙여 설명해보았다. 아직 타입단언이 뭔지 감이 안 온다...😥 📌 달력 기능 구현 완료.. 오늘 드디어 달력을 마무리했다. 크게 단계를 나누자면 1. 달력을 띄우는 것: new Date()와 여러 메서드들 사용 2. 캐로셀: 화살표 버튼 클릭에 따라 duration, position, 내용이 바뀐다. 3. 날짜 선택: 사용자의 클릭에 따라, 호버에 따라.. 1단계인 달력을 띄우는 건 바닐라로 해봤어서 확실히 수월했다. 바닐라 자바스크립트로 할 때 참고했던 블로그가 즐겨찾기에 있어서 다행히..ㅎㅎㅎ 2단계는 큐랑 세미페어할 때 캐로셀 코드를 봤어..

Authentication: 누가 ‘누구’라고 했을 때 맞는지 확인하는 것, 내가 나인지 확인 Confirms users are who they say they are Authorization: 권한 부여 Gives users permission to access a resource +--------+ +---------------+ | |--(A)- Authorization Request ->| Resource | | | | Owner | | || Authorization | | Client | | Server | | || Resource | | | | Server | | | jwt.io에서 디코드 가능 방법 중 Authorization Code는 서버가 있을 때만 가능

state가 바뀌면 리렌더링된다. 컴포넌트에 props를 넘겨주냐마냐와는 관련이 없다. (props로 넘겨주는 컴포넌트만 리렌더링된다고 오해하고 있었음)

✘✘✘ 문제 발생 코드 ✱ 익스프레스 서버 app.js const express = require('express'); const app = express(); // 생략.. const indexRouter = require('./routes/index.js') const itemsRouter = require('./routes/item-list.js') app.get('/', indexRouter) app.get('/item-list', itemsRouter) //생략.. ✱ itemsRouter 라우터 객체를 exports하는 routes/item-list.js const express = require('express'); const router = express.Router(); const ite..

✱ pipe 함수 const pipe = function() { let fns = [...arguments]; return function(arg) { return fns.reduce((arg, fn) => fn(arg), arg); } } pipe함수를 위처럼 작성했었는데 화살표함수로 표현해보라는 리뷰를 받아 수정했다. const pipe = (...fns) => arg => fns.reduce((arg, fn) => fn(arg),arg) 이렇게나 코드가 간단해졌다!!! 화살표함수에는 elements 객체가 없어서 어떻게 인자들을 받아와야할까 했는데 디코에게 rest parameter 힌트를 얻었다. 그래서 여기에 커링을 한 스푼 더해 화살표함수로 pipe함수를 만들 수 있었다. 오늘 제일 뿌듯했던 ..

✱ES Modules export default 할 때는 넘기는 게 딱 하나일 때 export default ref; import ref from './ref.js' 넘기는 게 여러 개 라면 export { ~, ~, ...} export { a, b, c } import { a, b, c } from './ref.js' 넘기는 게 여러 개이고, 받을 때 한 변수에 담아서 받고 싶다면 export { a, b, c, d, e, f } import * as elements from './ref.js' ✱ 배열에 비동기 작업 처리 배열을 가지고 〔원소1 처리 - (1초 뒤에) - 원소2 처리 - (1초 뒤에) - 원소3 처리 .... 〕이렇게 해보려는데 방법을 모르겠어서 구글링을 했다. forEach는 순..

✱ translate() 원래의 위치를 기준으로 이동하고, 원래의 위치 정보는 남아있다. 값을 하나만 넣으면 x축 이동, y축은 그대로(이동X) position translate 해당 요소의 컨테이너를 기준으로 해당 요소의 본래 위치를 기준으로 absolute의 경우 레이아웃의 다른 요소들과 완전히 별개의 존재가 되어 영향을 미치지 않음 본래 차지하고 있던 공간을 그대로 유지 주로 레이아웃을 짤 때 주로 hover, active와 같은 트리거 이벤트에 top, left는 각 프레임을 그려내는 데 너무 많은 시간을 소요한다. 그 결과 약간 뚝뚝 끊어지는 듯이 전이가 이루어진다. 반면에 translate는 요소가 GPU(RenderLayer)상에서 자기 자신의 레이어 위에 놓여지도록 만든다. GPU 상에서 ..