본문 바로가기

분류 전체보기222

[React.js] 제로초 웹게임 - 4. 반응속도체크 (useRef) 강의를 통해 알게된 것 useRef의 용법 중 DOM 요소 조작이 아닌, 변수 컨테이너로 사용하는 용법에 대해 알아보았습니다. 이걸 알았다면 부트캠프에서 진행한 팀 프로젝트가 한층 더 완성도가 높았을텐대 많이 아쉽네요. 어찌 보면 프론트엔드 공부를 아직 많이~ 못했기에 그럴수도 있겠죠. 매일 매일 부족함을 많이 느낍니다. React.memo를 사용해서 props가 변하지 않을 때 리렌더링 되지 않게 시도해보았지만 잘 되지 않았다. 내가 모르는 부분이 더 있나보다. 일단 진도를 쭉쭉 나가서 한 사이클 돌린 뒤에 생각해봐야 할 문제인것 같다. 프로페셔널 프론트엔드 개발자가 되고자 하는 사람이 아직 리액트 1회독도 못했다니 😭 얼른! 한사이클 돌리고 오겠습니다. 고지가 얼마 안남았네요. 화이팅! 처음에 내가 .. 2022. 10. 24.
[React.js] 제로초 웹게임 - 3. 숫자야구 (shouldComponentUpdate, React.memo) 강의를 통해 배운 것 리액트 데브 툴을 활용하면 어디서 ReRendering이 발생하는지 확인 할 수 있다. 이를 통해 성능 최적화가 가능해지고, 이 때 불필요한 리렌더링을 막는 방법이 "shouldComponentUpdate, PureComponent, React.memo"이다. 이전 까진 리렌더링 최적화에 대해선 생각해본적이 없었고, 또한 함수 컴포넌트만 사용하다 보니 setState에 같은 값이 들어가면 (참조형 변수 포함) 리렌더링이 되지 않는다는 것 까지만 알고 있었다. 하지만 class형 컴포넌트를 사용하는 경우 shouldComponentUpdate와 PureComponent를 알아야 하고, 함수 컴포넌트를 사용한다 해도 자식 컴포넌트에서 props가 변경되지 않을 때 부모 컴포넌트의 리렌더.. 2022. 10. 24.
[Javascript] (프로그래머스 level 0) 특이한 정렬 [Javascript] (프로그래머스 level 0) 특이한 정렬 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(numlist, n) { return numlist.slice().sort((a, b) => { distA = Math.abs(a - n); distB = Math.abs(b - n); if (distA === distB) { return b - a; } else { return distA - distB; } }); } 다른 사람 풀이 참고한 풀이 function solution(numlist, n) { return numlist.slice().sort((a, b) => Math.abs(n - a) - Math.ab.. 2022. 10. 24.
[React.js] 제로초 웹게임 - 2. 끝말잇기 (Webpack, Babel) 강의를 통해 배운 것 리액트를 배울 때 애초에 CRA로 시작했고, 그렇기 때문에 파일 구조가 컴포넌트 단위로 또는 페이지 단위로 분리 되어있다는 걸 크게 의식하지 않고 사용했었다. 하지만 실제로 "index.html"에 script 태그 안에 파일을 다 밀어 넣는다는 생각을 먼저 하고, 해당 소스코드를 파일로 나누는걸 어떻게 하는거지? 라는 생각을 해보니 "webpack"의 중요성이나 webpack이 나오게 된 계기를 알게 되었다. 끝말잇기 컴포넌트는 1강 구구단과 크게 다를 게 없어서 만드는게 엄청나게 간단했는데, 웹팩 설정하는건 정 말 오래 걸렸다. 분명히 강의를 보면서 따라하는 것인데도 에러가 계속적으로 나왔고, 심지어 강의 구조도 2019년 강의에서 2020년 강의로 2021년 강의로 다시 201.. 2022. 10. 22.
[React.js] 제로초 웹게임 - 1. 구구단 (react, babel) 강의를 통해 새로 알게 된 것들 CRA없이 html 파일 하나에다가 react, babel을 script로 세팅해서 React SPA 페이지를 만들어 보았습니다. 리액트를 처음 만났을 때 분명히 이런 방식을 접해봤었고, JSX가 아닌 이전 문법도 접해보았습니다. 하지만 그 당시엔 새로운 지식을 다량 접하다 보니 제대로 못 알아들었었습니다. 제로초 님 강의를 보면서 다시금 Babel이 JSX를 변환해준다는 것도 알게 되었고, index.html에다가 직접 React Component를 만드는 경험도 해보았습니다. 한번씩 "남이 만들어 둔 CRA 없이는 Page하나 못만드는 바보" 라는 생각을 하곤 했는데 마법의 뒷부분을 알게 되니 기분이 좋네요. 아주 간단한 구구단 만들기였지만, 기본을 다시 다지는 꽤 의.. 2022. 10. 21.
[React.js] to-do-app, fetch => Axios 마이그레이션 과정 Axios 마이그레이션 다른 사람이 만든 to-do-app을 보니?! react.js로 만든 to-do-app을 TypeScript로 성공적으로(?) 마이그레이션했다. 무수한 에러를 이겨내고 마침내 정상 동작하는 App을 보는 기쁨을 충분히 만끽하며 즐거워 하고 있었다. 그러나… 다른 사람들의 코드를 보다 보니 통신 부분이 너무나도 깔끔한것이었다. 비결이 무엇일지 살펴보니 깔끔함의 비결은 이것도 저것도 아닌 AXIOS 라이브러리를 사용하고 있기 때문이었다~!!!!! 나도 한번 써볼까 ⁉️ 사실 이전에 프로그래머스에서 과제 테스트를 할 때 “Axios가 아닌 기본 fetch 함수를 사용해주세요.” 라는 문구를 본적이 있었다. 그래서 “axios를 사용하지 말고 기본 fetch만으로 통신을 잘 해내자!” 라.. 2022. 10. 20.
[Javascript] (프로그래머스 level 0) 로그인 성공? [Javascript] (프로그래머스 level 0) 로그인 성공? 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(id_pw, db) { for (let i = 0; i < db.length; i++) { let userInfo = db[i]; if (userInfo[0] === id_pw[0]) { let loginResult = id_pw[1] === userInfo[1] ? &#39;login&#39; : &#39;wrong pw&#39;; return loginResult } } return &#39;fail&#39; } Array.forEach 또는 Array.filter()로 풀려고 했으나, 그럼 로그인 정보를 찾은.. 2022. 10. 20.
[Javascript] (프로그래머스 level 0) 등수 매기기 [Javascript] (프로그래머스 level 0) 등수 매기기 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(score) { const scoreOrder = score.map((x, i) => [x[0] + x[1], i]) scoreOrder.sort((a, b) => b[0] - a[0]) const result = []; for (let i = 0; i 0) { let prevTotalScore = scoreOr.. 2022. 10. 20.
[Javascript] (프로그래머스 level 0) 치킨 쿠폰 [Javascript] (프로그래머스 level 0) 치킨 쿠폰 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(chicken) { let coupon = 0; let service = 0; while (chicken-- > 0) { coupon++; if (coupon % 10 === 0) { chicken++; service ++; } } return service; } 시간계산 없이 무지성으로 풀었네요! 😅 치킨 갯수를 하나씩 뺴면서, 쿠폰을 더하고 쿠폰이 10개가 될 때마다 먹을 수 있는 치킨 갯수를 +1, 서비스 받은 갯수도 +1 뭔가 직관적이긴한데, 그만큼 알고리즘 없이 완탐으로 푼거라 시간 복잡도에서는 좋지 않은 결.. 2022. 10. 20.
[Javascript] (구름 먼데이 챌린지) 1주차 1번 문제 [Javascript] (구름 먼데이 챌린지) 1주차 1번 문제 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solve() { const nums = lines[1].trim().split(&#39; &#39;); const answer = nums.reduce((acc, cur) => BigInt(+cur) * BigInt(acc), 1n).toString(); return answer; } 배운 점, 느낀 점 테스트 케이스 10번이 계속 안풀려서 한참을 고생했습니다. 결국 BigInt를 사용해서 풀었는데요, 해당 개념을 4개월전에 사용은 해봤지만 제대로 알지 못해서 한참을 고생했네요. 프로그래머스 문제를 풀때는 그냥 단순히 구현만 해도 .. 2022. 10. 14.

티스토리툴바