전체 글 (49) 리스트형 TIL 17 React 별점구현하기(기본) 1. 첫번째로 생각했던 기능구현 팀프로젝트로 영화리뷰사이트를 배정받았고 그중에서 영화상세페이지를 맞게되었다. 가장 처음으로 접근한 방법은 마우스 커서위치에 따라서 별 색깔을 달라지게 구현을 하려고 했다. 자바스크립트에서 pageX, pageY를 통해서 해당 커서위치 좌표를 받아서 그것을 사용해서 조건문을 통해 img의 src를 바꿔주기로 했다. if(e.pageX =430 && e.pa.. TIL 16 MockData 활용하기 위 사진에 나와있는 mockData를 보면 배열안에 하나의 객체안에 키값들로 데이터를 구분해놓은걸 볼 수 있다. 컴포넌트마다 map함수를 통해서 mockData를 뿌려주기 위해서는 해당 키값에 접근을 해줘야하는데 contents를 키에 할당된 배열값들을 뿌려주기 위해서 고민을 많이 했다. 가장 윗줄에 답이 나와있는데 객체내에 큰 데이터 하나가 들어가있기때문에 infos배열의 0번 인덱스에 먼저 접근을 해줘야 객체의 원하는 키에 접근을 할 수 있다. 처음에는 단순하게 infos.contents이런식으로 하다가 json파일을 쪼개서 줄려고 하다가 json파일을 조작하고 이상한 방법을 다 써봤지만 안됐다. 답은 너무나도 간단했지만 과정은 험난했다..... 알고리즘 문제 12 배열을 받아서 0숫자는 전부다 배열의 끝에 옮겨주는 문제이다. const moveZeroes = nums => { let j = 0 for(let i=0; i 알고리즘 문제 11 const minPathSum = grid => { for (let i = 1; i < grid.length; i++) { grid[i][0] += grid[i-1][0]; } for (let i = 1; i < grid[0].length; i++) { grid[0][i] += grid[0][i-1]; } for (let i = 1; i < grid.length; i++) { for (let j = 1; j < grid[0].length; j++) { grid[i][j] += Math.min(grid[i-1][j], grid[i][j-1]); } } return grid[grid.length-1][grid[0].length-1]; }; 일단 가로 세로 부분은 첫번째 반복문과 두번째 반복문으로 전 inde.. 알고리즘 문제 10 const complexNumberMultiply = (a, b) => { let realNum1 = Number(a.split('+')[0]) let fakeNum1 = Number(a.split('+')[1].split('i')[0]) let realNum2 = Number(b.split('+')[0]) let fakeNum2 = Number(b.split('+')[1].split('i')[0]) let answerRealNum = realNum1*realNum2 - fakeNum1*fakeNum2 let answerFakeNum = realNum1*fakeNum2 + realNum2*fakeNum1 return String(answerRealNum) + '+' + String(answerFakeNu.. TIL 15 React LifeCycle 1. 리액트 사이클 리액트에서 화면이 처음 생성될때와 업로드될때 실행되는 함수순서이다. 2. 브라우저 생성 예시 각각의 함수내에는 console로 실행된다는 코드를 넣어줬고 componentDidMount에서는 setState로 state값을 변경해주는 코드를 넣어 줬다. render함수내에도 실행되면 console이 찍히게 해줬다. 이 코드를 npm start로 실행하고나서 처음으로 콘솔창에 찍히는걸 보게되면 어떤 순서로 console이 찍히는지 확인할 수 있다 첫번째로 constructor함수가 실행되고 render함수가 실행되고 나서 componentDidMount 함수가 실행된다. componentDidMount함수는 constructor, render함수가 다 실행되고나서 호출된다. 그래서 보통.. 알고리즘 문제 9 1. 풀이1 function topK(nums, k) { const setArr = new Set(nums) let countObject = {} let answer = [] let valueBox = [] for(const value of setArr) { countObject[value] = 0 } for(const value of nums) { countObject[value] += 1 } for(const key in countObject) { valueBox.push(countObject[key]) } valueBox = valueBox.sort((a, b) => b - a); for(let i=0; iitem === setArr[i] )]; arrCollec.push(numArr); } arr.. TIL 14 React 불변성 1. 불변성이란? let string = '첫번쩨' // 1. string: '첫번째'가 메모리 영역1에 등록. string = '두번째' // 2. string: '두번째'가 메모리 영역2에 등록. 문자열은 값을 바꾸게 되면 '첫번째'라는 문자열이 할당된 주소1이랑 바꿔준 '두번째' 주소2가 달라진다. 리액트내에서 state값이 변경되면 랜더링이 일어나는데 이는 메모리영역의 값이 바뀐걸 인지를 해서 되는 과정이다. 2. 배열 객체는? 리액트 state값중 배열이나 객체 내부의 값이 변경되면 render이 일어나는데 만약 state에 있는 원본배열에다가 그대로 값을 변경하고 state값을 갱신해주면 react내에서 객체 또는 배열의 값이 어디가 변경됐는지 일일이 다 확인을 한 후 랜더링이 일어난다. 이는.. 이전 1 2 3 4 5 6 7 다음
