도록

구매한 도메인을 vercel에 연결하기    끝!  참고) 설정 후에 조금 시간이 걸림!refresh 버튼을 눌러도 반응 없이 다 빨간 불 들어와있는데, 한 5분정도 지나면 아래처럼 refresh 스스로 하고 정상화됩니다

무한 스크롤 구현하려고 하니 너무 막막해서 하나씩 적어보려고 한다. 0. 무한 스크롤은 어떤 순서로 동작할까?일단 무한 스크롤의 동작을 상상해보았다. 아래처럼 움직이면 되지않을까?  // 1. 최초 list 로딩  // 2. scroll 최하단 감지  // 3. hasNextPage 여부 체크 -> false일 때 fetch 요청하지 않도록  // 4. fetch해서 리스트 불러오기  // 5. 화면에 뿌리기 ==> react는 fetch한 데이터 set하면 된다.  1. 최초 list 로딩  const [posts, setPosts] = useState([]);   useEffect(() => {    (async () => {      api.getRecentPosts().then((list) => ..

컨벤션 구조[적용 범위(선택 사항)]: [본문(선택 사항)][꼬리말(선택 사항)] 사용 예시 feat: 무한 스크롤                                              // :         // 필수 규격feat(api): email 전송 기능 추가                        // 타입[적용범위]: 설명feat!: 배송 완료 시 고객에게 이메일 전송        // 타입!:설명          // !는 단절적 변경을 강조*단절적 변경(breaking change) : 다른 것에 영향을 끼칠 수 있는 변경  각 영역에 들어가는 정보들타입- feat : 새 기능 추가- fix    : bugfix- 그 외 : 앵귤러 컨벤션 기반 타입들 (build, chore..

postscol namedata typekeynullalbedefault비고idintPKnot nullauto increment titletextPKnot null  contenttext nullable (empty)  writertext  nullable (null) user_id 와 매칭 (FK는 걸지 않음)created_attimestamp  now() tagtext   , 기준으로 끊기 (예시 : a,b,c,d,e)likeint not null0 viewint not null1   userscol namedata typekeynullalbedefault비고idintPKnot nullauto increment created_attimestamp not nullnow() idtextPKnot null..

useEffect  useMemo컴포넌트 또는 데이터의 생애 주기에 따라 값을 업데이트하고 싶을 때 사용 dependencies가 mount 될때useEffect : 함수를 실행한다. (mount, unmount 실행은 반드시 paint 1회 후에 이루어진다. --> 화면 깜빡 거림 등이 동반)useLayoutEffect : 함수를 실행한다.useMemo : 값을 할당한다.useCallback : 함수를 할당한다.언제 useMemo와 useCallback을 사용하는가?컴포넌트, 데이터의 생애주기에 맞춰 값을 업데이트하고 싶을 때리렌더링 될 때마다 새롭게 값을 계산하거나 새로운 함수를 정의하는 것이 문제가 될 때새로운 값의 게산이나 새로운 함수의 정의가 무거울 때값, 함수의 참조값을 유지하는 것이 중요할 ..

필수 자바스크립트구조분해할당배열 구조 분해 할당const array = [1, 2, 3, 4]; const [a, , , b] = array;                     // a=1, b=4const [c, ...rest] = array;                  // c=1, rest=[2, 3, 4] const [d, e=10, , , f =20] = array;    // d=1, e=2, f=20 객체 구조 분해 할당const obj = { a: 1, b: 2, c: 3 };const {a, rest} = obj;                       // a=1, rest={b:2, c:3}const {a: first, b : num} = obj;         // first=..

리액트의 장점1. 단방향 바인딩 (명시적 상태 변경)2. JSX3. 배우기 쉽고 간결함4. 강력한 커뮤니티 +) 넷플릭스가 리액트 vs 백본으로 프로토 타입을 만들어보며 느낀 리액트의 장점1. 자바스크립트 코드의 크기가 줄었다.2. 상대적으로 배우기 쉬움3. 빠른 기능 추가

소스 코드 : 실행가능한 코드 ; executable code)종류전역 코드함수 코드eval 코드모듈 코드 자바스크립트 엔진은 소스코드를 평가와 실행으로 나누어 처리한다. 소스코드의 평가1) 선언문 실행2) 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록소스코드의 실행 = 런타임 시작1) 실행 컨텍스트가 관리하는 스코프에서, 실행에 필요한 정보를 검색해서 취득한다.2) 실행 컨텍스트가 관리하는 스코프에, 실행 결과를 등록한다.  실행 컨텍스트: 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 스택(stack) 구조로 관리한다. 역할1. 전역 코드 평가: 전역 코드의 선언문 실행 후, 결과를 컨텍스트의 전역 스코프에 등록한다. 2. 전역 코드 실행: 전역..