HTML input에 focus주고, 마지막 글자에 커서 위치

게시글을 수정하는 폼을 만들고 있는데 input 에 focus 를 주어야했다. focus 는 그냥 ref 에 focus 메소드를 사용해서 구현했다. 코드는 다음과 같다. const TextArea = ({ Edit, value, onChange }) => { const ref = useRef(null); useEffect(() => { ref.current.focus(); }, []); return ( ); }; export default TextArea; 문제는 커서가 다음과 같이 앞에 생긴다는 것이다. 해결 방법은 다음과 같다. setSelectionRange를 사용하는 것이다. ref.current.setSelectionRange(value.length, value.length); 해결 완료..

[eslint] Failed to load config "react-app" to extend from.

Failed to compile. [eslint] Failed to load config "react-app" to extend from. Referenced from: /Volumes/T7/DongYoung/Among-Front/packages/frontend/package.json ERROR in [eslint] Failed to load config "react-app" to extend from. Referenced from: /Volumes/T7/DongYoung/Among-Front/packages/frontend/package.json webpack compiled with 1 error 코딩 잘 하고 있었는데 다음과 같은 오류가 났다. 다음 명령어를 사용해서 package를 설치하니 문제를..

useCallback, useMemo, createSelector

useCallback useCallback을 사용해야하는 이유는 다음과 같다. 다음과 같은 코드에서 input 으로 value 라는 state 를 변경하게 되면 리렌더가 많이 발생하게 된다. 이때 h1 태그 onClick 에 있는 () => console.log('aa') 함수는 리렌더링 될때마다 다시 생성되게 된다. 이는 간단한 함수일때는 괜찮지만 함수의 덩치가 커지면 문제를 야기할 수 있게 된다. import "./styles.css"; import React, { useState, useCallback } from "react"; export default function App() { const [value, setValue] = useState(""); const onChangeValue = (..

Styled-components로 CSS 덮어쓰기 (feat.createGlobalStyle)

내가 만든 css 파일이라면 쉽게 변경이 가능하겠지만, 라이브러리의 css 를 건드려야하는 경우가 있을 수 있다. 이미 다음과 같은 css 모듈 파일이 있다고 하자. 이 css 가 라이브러리의 css 라고 생각을 해보자. .App { font-family: sans-serif; text-align: center; color: blue; } 다음과 같은 화면을 볼 수 있었다. 다음처럼 createGlobalStyle 을 사용해서 styled-components 를 사용해서 css 를 적용할 수 있다. import "./styles.css"; import { createGlobalStyle } from "styled-components"; const Global = createGlobalStyle` .App..

png 파일 색 변경하는 방법

혁명이다. 이건.. 비상.. flaticon 에서 아이콘을 받았지만 정작 필요한 회색은 없었다. 그래서 포토샵으로 바꿔야하나 싶었는데 , 포토샵을 설치해야되서 그러고 싶진 않았다. https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color Added License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute... codepen.io 위 코드펜으로 들어가서 다음 input 에 원하는 색상을 입..

조금의 sass 그리고 css module

https://codesandbox.io/s/pedantic-darwin-jvgioy?file=/src/styles.module.scss pedantic-darwin-jvgioy - CodeSandbox pedantic-darwin-jvgioy by ehddud1006 using node-sass, react, react-dom, react-scripts, styled-components codesandbox.io sass 에 대해 조금 배웠다. 변수를 선언할수도 있고, if문 for 모두 사용할 수 있었다. 가장 와닿았던 것은 mixin 기능인데 다음처럼 sample 이라는 mixin 을 만들면 재사용이 가능하게끔 만들어져있다. @content 를 추가하면 @include 한 class 에서 css 를..

[웹 게임을 만들며 배우는 React] 6장

반복문을 기점으로 컴포넌트를 쪼개기 render() { const { winBalls, bonus, redo } = this.state; return ( 당첨 숫자 {winBalls.map((v) => )} 보너스! {bonus && } {redo && 한 번 더!} ); } setTimeout을 배열에 넣어서 한꺼번에 unmount runTimeouts = () => { console.log('runTimeouts'); const { winNumbers } = this.state; for (let i = 0; i { this.setState((prevState) => { return..

[웹 게임을 만들며 배우는 React] 5장

클래스 컴포넌트의 라이프 사이클 componentDidMount (처음 렌더가 실행되고 componentDidMount 가 실행된다.) componentDidUpdate (리렌더가 발생하고 실행된다.) componentWillUnMoun (컴포넌트가 제거되기 직전에 실행된다.) constructor -> 렌더링 -> ref -> componentDidMount -> (setState/props 바뀔때)-> shouldComponentUpdate -> render -> componentDidUpdate // 부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸 Closure 문제 비동기 함수인 setInterval 안에서 비동기 함수 밖에 있는 변수를 참조하면 Closure 가 발생..

[웹 게임을 만들며 배우는 React] 4장

4장에서 다시한번 상기시키면 좋을 것은 다음과 같다. import React, { useState, useRef, useCallback, useMemo } from 'react'; const ResponseCheck = () => { const [state, setState] = useState('waiting'); const [message, setMessage] = useState('클릭해서 시작하세요.'); const [result, setResult] = useState([]); const timeout = useRef(null); const startTime = useRef(0); const endTime = useRef(0); const onClickScreen = useCallback(() ..

[웹 게임을 만들며 배우는 React] 3장

import , require const React = require('react'); import React from 'react'; module.exports = NumberBaseball export default NumberBaseball; // export default 차이 export const hello = 'hello'; // import {hello} from './[파일경로]' export default NumberBaseball; // import NumberBaseball from './[파일경로]' // default 는 한번만 사용가능 Key 에 index 를 써도 되는 경우는 요소가 추가만 되는 경우이다. 복잡하고 긴 부분 컴포넌트로 따로 빼기 전체코드 더보기 import R..