부모에서 자식으로 값을 전달하는 건 자식 컴포넌트로 props 전달을 해주면 된다. 그러나 자식에서 부모로 값을 전달할 때는 그 방법이 다르다. 자식 → 부모 1. 먼저 부모 컴포넌트에서 함수를 정의하고 이 함수를 자식 컴포넌트에 props로 내려준다. ⬇️ 부모컴포넌트 import React, { useEffect, useState } from "react"; import styles from "./List.module.css"; import { useImmer } from "use-immer"; import ListItem from "./ListItem"; export default function List() { const [list, updateList] = useImmer(initalList);..
분류 전체보기
1. “build.command” failed 1번째 시도: 프로젝트 패키지 파일내 scripts 수정 [React] "build.command" failed (Netlify 배포) 나와 같은 에러를 겪은 경우인데 package.json을 다음과 같이 설정해두었더니 해결했다고 한다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "predeploy": "CI npm run build", "deploy": "gh-pages -d build" }, 그러나 실패 2번째 시도: 배포 사이트 내에 빌드 명령어 수정..
문제 리액트로 투두리스트 프로젝트를 하고 있는데 위와 같이 한글로 입력하는 경우에는 입력한 문자열 중 마지막 문자가 한 번 더 등록되는 문제가 발생했다 { enterkeyEvent(e); }} /> 원인 한글, 한자처럼 컴퓨터 자판에 있는 글자보다 수가 더 많은 문자를 계산하거나 조합하여 입력해 주는 시스템 소프트웨어인 입력 방식 편집기(input method editor, IME) 자체 오류로 비단 한글뿐만 아니라 일본어, 중국어도 텍스트 입력과정에서 두 번 입력되는 오류가 생긴다고 한다. 해결방법 1) onKeyDown -> onKeyPress onKeyPress 이벤트의 경우 문자가 실제로 입력됐을 때 반응한다고 한다. 그래서 두 번씩 입력되는 오류를 해결할 수 있다. input 태그 내에 onKe..
Error Messge Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in ' /vercel/path/node_modules/@fortawesome/react-fontawesome React로 npm start해서 개발하는 과정에는 문제가 없다가 해당 프로젝트를 Vercel로 배포하는 과정에서 위와 같은 오류 메세지가 떴다. 원인 아이콘을 작동시키는데에 있어서 핵심 패키지인 @fortawesome/fontawesome-svg-core을 배포할 프로젝트에 설치하지 않아서 생긴 오류이다. 해결방법 @fortawesome/fontawesome-svg-core 패키지 설치 npm i --save @fortawesome/fon..
1 ① Vercel에 로그인한 다음 Add New... 버튼 클릭 ② Add New... > Project 클릭 2 ① 배포할 프로젝트가 저장된 원격저장소의 계정을 선택 ② 해당 계정에 저장된 repositories 중에서 배포할 repository 선택 3 Deploy 버튼 클릭 후 대기화면 4 에러가 없는 경우에 배포 성공 📌 Vercle로 배포한 프로젝트 보러가기 👉 https://github-profile-finder-of-kimgoat.vercel.app/
이전에 동아리 활동을 하면서 만들었던 토이프로젝트 [github profile finder]는 미완인 상태로 배포하고 끝냈었다. 해당 프로젝트의 기능은 이러하다. 검색바에 깃허브 유저의 닉네임을 검색했을 때 해당하는 유저가 있는 경우 유저의 닉네임과 팔로잉, 팔로워수, Repository의 수를 보여준다. 그러다가! 갑자기 생각이 나서 그때 구현하지 못했던 기능을 구현하고 끝내자고 결정한 다음 원격저장소에 저장해놨던 해당 프로젝트를 clone해서 리팩토링이라 하기엔 소소하게 기능 몇가지를 추가해보았다. 폴더 구조 🛠️ 추가한 기능 UI 디자인 수정 해당 User의 Github 방문 버튼 추가 Repository List 페이지 Result Card 창 닫기 github-profile-finder 코드를 ..
1. node.js 설치하기1-1. 해당 사이트에서 OS에 맞는 버전을 다운받기 Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 1-2. 터미널에서 명령어를 사용하여 다운받기 설치가 되었는지 확인하려면 '설치한 패키지 이름 -v' 을 통해 확인 가능하다. 💡 React 프로젝트에서 사용하는 tools 종류node JS: 자바스크립트를 실행할 수 있는 환경, 자바스크립트로 프로그래밍을 가능토록 하는 프레임워크npm: 패키지 매니저, 라이브러리들을 쉽게 관리(설치, 삭제, 버전관리)할 수 있도록 도와준다.npx: 설치하는 것이 아닌 우리가 원하는 라이브러리를 실행할 수 있도록 도와준다.yar..
⚠️ 공부한 내용을 정리하는 공간입니다. 설명이 부족하거나 옳바르지 못한 부분이 있을 수 있습니다. 옳바르지 못한 내용을 발견하셨다면 댓글로 알려주시길 부탁드립니다. 수정하도록 하겠습니다. 더보기오늘의 사족Happy New Year~! 2024년 새해를 맞았습니다! TMI이지만 저는 사실 별 감흥이 없습니다. 크리스마스라 해서 들뜨고 새해라 해서 새롭게 리프레시하는 감정을 잘 느끼지 못합니다. 그냥 평소와 같습니다. 제가 생각하기에 순간의 행복은 순간입니다. 행복이라는 감정이 저에게 있어서 오래 머물러주지 않습니다. 그나마 성취감은 제가 목적을 이루기 위해 노력한 과정이 있기에 오래 머물러주는 것 같습니다. 그러니 제가 이렇게 되도록이면 글을 매일 올리는 것이랄까요? 어찌 됐든 새해를 맞이한 건 사실이니..
class MODE_Algorithm { public static void main(String[] args) { int[] array = {1, 2, 3, 3, 3, 4}; int mode = 0; // 최빈값을 담을 변수 int[] index = new int[1000]; // 0~999까지 인덱스의 카운터 int max = 0; // 최대값 저장을 위한 변수 for(int i=0; i
MyArrayList.java public class MyArrayList { int initCapacity = 10; int[] elementData; int size; // # of data added int currentCapacity; int result; public MyArrayList() { elementData = new int[initCapacity]; size=0; currentCapacity = initCapacity; } public int get(int index) { return elementData[index]; } public void add(int data) { if(size == currentCapacity) { // array size 확대
