본문 바로가기
반응형

분류 전체보기77

[React] 파일을 컴포넌트별로 구분하기 리액트 공식문서를 보면서 틱택토 게임 만들기를 따라하고 있었는데 Game 컴포넌트가 갑자기 최상위 컴포넌트로 되어야하는 상황이었다. (Square 컴포넌트 빼고는 걍 App컴포넌트에 때려넣고 있었음...)  그냥 App 컴포넌트 안에서 간단하게 하려면 할 수 있었지만 파일들이 기능별로 구분되어있으면 좋겠다는 강박 아닌 강박이 있어서 파일들을 구분하기로 했다.그런데 이미 틱택토 게임 만들기를 따라하면서 App 컴포넌트에 다양한 함수와 state, 변수를 선언해버렸다. 이를 분리하느라 애먹었다. Square 컴포넌트는 시작부터 구분해 놓아서 이미 되어있었다.문제는 App 컴포넌트를 Board 컴포넌트와 Game 컴포넌트로 분리하는 작업이었다.처음에는 이것 저것을 마구잡이로 복붙을 하다가 방법(?)을 터득했다.. 2024. 7. 10.
[React] props로 함수를 넘겨줄때 주의 할 사항 const [squares, setSquares] = useState(Array(9).fill(null));const handleClick = (i) => { const nextSquares =squares.slice(); nextSquares[i] = "X"; setSquares(nextSquares);};...위와 같이 함수를 인수로 전달하게 되면 작동하지 않는다. handleClick(0)은 setSquares를 호출하고 setSquares를 호출하면 App 컴포넌트의 state를 변경하는 것이기 때문에 App 컴포넌트가 '리렌더링'된다.  하지만 이 리렌더링 과정에서 다시 handleClick(0)은 호출되고 무한 루프에 빠진 것이다. 즉, handleClick(0)를 호출하는 것은 .. 2024. 7. 10.
[프로그래머스] 코딩테스트 입문 20문제 1. 최댓값 만들기(1)나의 풀이function solution(numbers) { var answer = 0; var max1 = 0; var max2 = 0; let len = numbers.length; var index = -1; for(let i = 0; i 다른 풀이function solution(numbers) { numbers.sort((a,b)=>b-a); return numbers[0]*numbers[1];}학습 내용sort() 함수는 시간 복잡도가 O(nlogn)이다. 나는 2개의 for문을 사용하였기에 시간복잡도가 O(n)이다. 만약 크기가 상당한 배열에 대해서 이 프로그램을 실행한다면 내가 작성한 코드가 더욱 효율적일 수 있을 것이다.2... 2024. 7. 10.
[React] Props로 데이터 전달하기 React에서는 페이지를 컴포넌트라는 단위로 나누어서 블록을 조립하는 것과 같이 개발합니다. 따라서 react로 어떤 사이트의 해더를 개발한다고 한다면 우리는 이를 컴포넌트로 나누어서 개발해야 할 것입니다. 만약 네이버의 해더를 구현한다고 가정해봅시다. 그렇다면 간력하게 먼저 Search 컴포넌트가 필요할 것 같습니다. 그리고 그 밑에 있는 이동 버튼 들은 아이콘만 다르고 다 똑같이 때문에 하나의 Button 컴포넌트를 이용하면 만들 수 있겠습니다. 그렇다면 각각의 버튼 컴포넌트가 하나는 메일, 하나는 카페, 하나는 블로그를 나타내야할 것입니다.  이를 위해서는 어떤 버튼을 렌더링할 것인지 결정하기 위해서는 우리는 각각의 버튼 컴포넌트에 값을 전달해 주어야 할 것입니다. 함수를 호출할 때 인수를 전달하는.. 2024. 7. 8.
[자료구조] 후위 수식(Postfix) 이번 포스팅에서는 후위 수식에 대해서 알아보겠습니다. 수식을 표현하는 방법은 크게 3가지가 있습니다. infix notation : a * b (연산자가 피연산자 사이에 위치합니다.) prefix nonation: * a b (연산자가 피연산자들 앞에 위치합니다.) postfix nonation: a b * (연산자가 피연산자들 뒤에 위치합니다.) 이 결과들은 모두 a와 b를 곱한 값을 의미합니다. 이중에서 우리에게 익숙한 방식은 infix notation일 겁니다. 하지만 infix notation은 약간의 단점이 존재합니다. 연산자들이 가지는 우선 순위가 있지 때문에 이에 맞춰서 연산을 해야한다는 문제점이 있습니다. 따라서 임의로 연산자의 우선순위를 조정하기 위해서는 괄호를 사용해야하는 번거로움이 생.. 2024. 4. 19.
[자료구조] 큐(Queue)... So cute... 안녕하세요. 오늘은 자료구조 큐에 대해서 알아보겠습니다. 큐는 스택과 비슷합니다. 하지만 작동하는 방식이 약간 다르고 스택의 탑과 바텀을 큐에서는 다른 말로 표현합니다. 스택에서 요소를 스택의 탑에 추가했던 것처럼 큐는 rear(or back)에서 요소를 추가합니다. 또한 요소의 삭제는 스택의 탑에서 일어났지만 큐는 front에서 일어납니다. 큐는 스택처럼 가장 먼저 입력된 데이터가 맨 아래 쌓이고 가장 나중에 입력된 데이터는 맨 위에 쌓이는 구조입니다. 하지만 스택에서처럼 입출력이 맨 위에서만 일어나지 않습니다. 위에서 설명드린바와 같이 입력은 rear 출력은 front에서 일어납니다. 이러한 구조를 FIFO(First in, First out)이라고 합니다. 먼저 들어온 녀석이 먼저 나간다는 것입니다.. 2024. 4. 19.
반응형

티스토리툴바