본문 바로가기

TIL

 (100)
RTK, RRD, Supabase 🧐 느낀점오늘 숙련주차 강의를 완강했다. 리덕스 부터 리액트라우터 돔.. 내용이 어렵고 집중이안되서 손으로 써가면서 최대한 이해하려고 노력했다.supabase를 활용한 CRUD 로직은 여러번 더 쳐봐야겠다. 내일은 강의 전체를 한번 더 훑어보면서 복습할 생각이다. 학생때 이렇게 오랫동안 책상에 앉아있었던 적이 없었던 것 같은데...쫌만 더 힘내자.
타임어택 과제 보완 ■  많이 놓쳤던 개념  ⚬  화살표 함수 - 사용법 숙지해서 익숙해질 것// 화살표함수 뒤 중괄호 사용 시 return 까먹지말것!todos.map((todo) => {return ...})// 바로 리턴해도 좋은 경우, 중괄호 없이 바로 리턴값 써줄것! 이때 리턴문은 한줄이어야 함!todos.map(todo => ...)  ⚬ 이벤트핸들러 함수// 이벤트 핸들러 함수는 매개변수로 이벤트 객체를 받는다.onClick={handleCountDown} === onClick={(event) => handleCountDown(event)}// 이벤트에 함수를 바로 넘기면 인자를 넘길 수 없다.onClick={handleCountDown};// 인자를 넘기려면 함수명(인자)로 써주고 이벤트가 들어갈 부분에는 받..
useEffect useEffect 는 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 Hook.컴포넌트가 화면에 처음 보여지거나, 사라질 때를 제어할 수 있다. (컴포넌트 렌더링 프로세스 관리)  ■  특징useEffect는 useEffect가 속한 컴포넌트가 최초 렌더링 된 이후 실행된다.➜  컴포넌트의 상태가 바뀌어서 업데이트 되기 전과 될 때에도 실행되고 리렌더링 될때에도 실행된다.2개의 인자를 받는다.➜  첫번째 인자 : 콜백함수➜  두번째 인자 : 의존성 배열(어떤 state가 변경되면 실행할 지 정해준다) ■  렌더링 순서최초 렌더링  ➜  useEffect 내부 함수  ➜  set함수 실행  ➜  state 변경  ➜  리렌더링 ■  사용방법import { useEffect } ..
React key 중복 오류 발생 ■  타임어택을 진행하면서 콘솔창에서 발생했던 키값 중복 오류Warning: Encountered two children with the same key, `16`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.내용을 읽어보니 키가 중복되니까 키를 고유한 값으로 유지해라 같은 내용으로 이해했다. 일단은 시간이 부족해서 콘솔창 오류는 해결 못하고 제출했었는데, 이후에 왜 ..
개인과제 - 올림픽 메달 트래커 (240808~240814) 2024 파리 올림픽에서 각 나라가 획득한 메달 수를 추적하는 Olympic Medal Tracker ■  배포링크 👉 바로가기 1. 프로젝트 셋업Vite 를 이용해서 리액트 프로젝트를 셋업하였다.  2. 기본 UI 레이아웃 작성// App.jsximport React from "react";import "./App.css";const App = () => { return ( 2024 Paris Olympic 국가명 금메달 은메달 동메달 국가추가 업데이트 {/* 메달 집계 리스트가 표시될 자리 */} ..
React github page 배포 오류 해결 Vite로 생성한 리액트 프로젝트를 깃허브에서 배포(settings - page) 했는데 링크는 생성되었지만 아무것도 없는 흰 화면이 떴고, 개발자도구에는 404 오류 경고가 떴다.그래서 이것저것 방법을 찾아봤는데 오류 해결이 안되어 결국 튜터님의 도움을 받았다.나중에 비슷한 오류가 났을 때 참고하기 위해서 기록해보자. yarn 으로 패키지 환경을 세팅했고 깃허브에서 배포를 하니 오류가 났다. yarn build 를 했더니 아래와 같이 오류가 발생했고 튜터님의 컴퓨터에서 했을 때는 오류가 발생하지 않아서 작성했던 코드엔 문제가 없는것으로 확인이 되었다. 시간이 많지않아서 yarn 버전을 튜터님이 사용하고 계시는 berry(yarn classic의 업그레이드 버전)로 변경해서 진행하기로 했다.명령어를 입력..
두 정수 사이의 합 문제 설명두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요.예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. 제한 조건a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요.a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다.a와 b의 대소관계는 정해져있지 않습니다.입출력 예abreturn35123335312  ■  작성한 코드function solution(a, b) { var answer = 0; // a가 b보다 크거나 같을 경우 if (a >= b) { for (let i = b; i   ■  Math.min, Math.max 를 사용한 풀이function..
Math.pow(), Math.sqrt() ■  Math.pow() - 제곱값 구하기Math.pow(base, exponent)Math.pow(2, 3); // 8 base^exponent처럼 base에 exponent를 제곱한 값을 반환base값이 음수이고 지수(exponent)값이 정수가 아닌 경우 NaN을 반환  ■  Math.sqrt() - 루트값 구하기Math.sqrt(x)Math.sqrt(4); // 2 주어진 숫자의 제곱근을 반환매개변수가 음수라면  NaN 반환(제곱근은 음수가 나올 수 없으므로!)  [정수 제곱근 판별하기]문제 설명임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다.n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 ..

티스토리툴바