전체 글
-
context API, Redux개념카테고리 없음 2023. 4. 25. 16:14
Context API란? 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 리액트 어플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요할 경우 최상위 컴포넌트인 App의 state에 넣어서 관리한다. function App() { const [myName, setMyName] = useState("") const onChangeNameHandle = (e) => { setMyName(e.target.value) } return ( 이름 : ); } export default App; App이 가지고 있는 myName값을 f컴포넌트와 j컴포넌트에 전달하려면 F의 경우 : App → A → B → F J의 경우 : App → H → J 이렇게 복잡..
-
알고리즘 [5명씩] Feat.chunked카테고리 없음 2023. 4. 24. 23:32
문제 설명 최대 5명씩 탑승가능한 놀이기구를 타기 위해 줄을 서있는 사람들의 이름이 담긴 문자열 리스트 names가 주어질 때, 앞에서 부터 5명씩 묶은 그룹의 가장 앞에 서있는 사람들의 이름을 담은 리스트를 return하도록 solution 함수를 완성해주세요. 마지막 그룹이 5명이 되지 않더라도 가장 앞에 있는 사람의 이름을 포함합니다. 제한사항 5 ≤ names의 길이 ≤ 30 1 ≤ names의 원소의 길이 ≤ 10 names의 원소는 영어 알파벳 소문자로만 이루어져 있습니다. 입출력 예 names result ["nami", "ahri", "jayce", "garen", "ivern", "vex", "jinx"] ["nami", "vex"] 입출력 예 설명 입출력 예 #1 앞에서부터 5명씩 두 ..
-
면접질문 스터디 2회차 [생명주기(LifeCycle),useEffect]카테고리 없음 2023. 4. 23. 00:43
LifeCycle(생애주기==생명주기) 생애주기란? 일반적으로 시간에 흐름에 따라 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정 Mount란? DOM이 생성되고 웹 브라우저상에 나타나는 것 Update란? 컴포넌트를 업데이트할 때 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this , forceUpdate로 강제로 렌더링을 트리거할 때 forceUpdate()란? 컴포넌트의 렌더링을 강제로 트리거하는 메소드 ------------------------------------ 트리거란? 특정 이벤트를 처리하기 위한 코드를 동작시키는 것 예를 들어, 이벤트가 발생하면 다른 이벤트를 동작시키거나, 코드에서 특정 함수를 호출하여 다른 함수를 실행시키는 것 ex)총의 방아쇠라고 생..
-
React에서 input에 숫자만 찾기, 천의단위로 표시하기카테고리 없음 2023. 4. 22. 19:02
Input에 들어올 값을 숫자만 들어오게 하려고 여러가지 시도를 해봤는데 const onChangeHandle = (e)=>{ if(isNaN(e.target.value)){ setState(state.price) return; } setState({ ...state, [e.target.name]:e.target.value }) } 이렇게 value값이 숫자열이 아니라면 이라는 조건을 주고 state값을 변경시키지 않게 하려고 하면서 이렇게 했더니 문자열은 안적히게 잘 되지만 type기본 기능인 숫자를 업다운 시킬수있는게 나오게되기도 하며 문자열이 아니여서 천의단위로 , 를 넣으려고 했던 toLocaleString()도 쓸 수 없게 됬다. 그래서 찾은게 정규식으로 간단하게 표현할 수 있는걸 알게되었다. ..
-
개인프로젝트 과제 에러1카테고리 없음 2023. 4. 19. 21:15
Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null. TypeError: Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null. at LinkWithRef (http://localhost:3001/static/js/bundle.js:40481:5) at renderWithHooks (http://localhost:3001/static/js/bundle.js:25970:22) at updateForwardRef (http://..
-
[React]useParams() 파라미터카테고리 없음 2023. 4. 18. 18:16
useParams란? 리액트에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다. URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 한다. 참고로 useParams를 사용하기 위해서는 라우터 설치가 필수다. 라우터 설치방법 npm install react-router-dom 1. useParams를 원하는 페이지에 import한다. import { useParams } from 'react-router-dom' 2. 변수에 할당해서 사용할 수 있다. const {params} = useParams() console.log({params}) 이렇게 했을 경우 객체의 Key, Value가 없다면 정상적으로 params: undefined 로 콘솔에 찍힌다.
-
알고리즘 공던지기카테고리 없음 2023. 4. 17. 23:44
문제 설명 머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요. 제한사항 2 1 이라고 봤을때 현재까지의 index가 배열의 길이를 넘었을때를 조건문으로 주고 현재 index값에서 배열의 길이를 빼주면 원하는 값이 나온다. 알고리즘은 알다가도 모르겠다 증말로다가