본문 바로가기

전체 글

 (125)
타임어택 과제 보완 ■  많이 놓쳤던 개념  ⚬  화살표 함수 - 사용법 숙지해서 익숙해질 것// 화살표함수 뒤 중괄호 사용 시 return 까먹지말것!todos.map((todo) => {return ...})// 바로 리턴해도 좋은 경우, 중괄호 없이 바로 리턴값 써줄것! 이때 리턴문은 한줄이어야 함!todos.map(todo => ...)  ⚬ 이벤트핸들러 함수// 이벤트 핸들러 함수는 매개변수로 이벤트 객체를 받는다.onClick={handleCountDown} === onClick={(event) => handleCountDown(event)}// 이벤트에 함수를 바로 넘기면 인자를 넘길 수 없다.onClick={handleCountDown};// 인자를 넘기려면 함수명(인자)로 써주고 이벤트가 들어갈 부분에는 받..
[WIL] 24.08.12 ~ 24.08.16 이번주 회고리액트 입문주차 강의를 학습한 것들을 기반으로 개인과제(올림픽 메달트래커)를 완성해 화요일 제출, 수요일 보완 재제출 하였다.과제를 구현하기 위해 강의를 몇 번이나 돌려봤고, 수많은 구글링과 반복연습으로 정말 낯설었던 리액트가 조금은 익숙해진 것 같다고 느껴진다. 검색도 실력인지.. 원하는 해결방법을 찾는 것도 시간이 꽤 걸렸다. 어떤 키워드로 검색해야 원하는 해결방법을 찾을 수 있는지도 중요한 것 같다. 사실 중간중간에 혼자 코드를 최대한 써보다가 검색해봐도 답이안나오고.. 막히게 되면 튜터님들을 찾아갔었다.그리고 막혔던 것이 해소된 이후 다시 코드를 돌아봤었는데, 그 어려웠던 것들은 좀 더 천천히 생각해보거나 강의에서 학습했던 개념들을 좀 더 복습해서 연습을 많이 해봤다면 나 혼자 해결할 ..
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을 리턴하는 ..

티스토리툴바