Front-End Dev.
-
[React] React 18 의 달라진 점들Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 18. 01:15
올해 3월, React v18.0 이 정식 릴리즈가 되었다. (2020년 10월, v17.0 이 릴리즈된지 약 1년반) 업데이트 소식과 베타버전은 작년부터 리포트 되어왔으며, 최근 정식 릴리즈됨에 따라 이 포스팅을 한 번 정리하면 좋겠다는 생각이 들었다. 지난 React v17.0 은 호환성, 안정화 정도의 간단한 업데이트라면, v18.0은 주요 기능들이 많이 추가되어 이례적으로 작년에 알파버전까지 릴리즈하기도 했다. 이번 기회를 통해 React를 버전업하는 방법, 그리고 이번에 추가된 주요 기능들에 대해 알아보도록 하겠다! 💙 React 18 시작하기 이번 React 18 버전에서 추가된 주요기능은 크게 아래 3가지로 소개된다. automatic batching : 여러 개의 상태 업데이트를 한 번에 ..
-
[CodeKata] 프로그래머스(Lv3) : 공 이동 시뮬레이션Algorithm 2022. 4. 17. 18:49
🥋 Oooth More!! (Level 3) 쿼리 실행 애니메이션은 문제 링크를 참고해주세요! 🧮 풀이 단순히, 모든 칸을 방문하며 쿼리를 순회하는 코드를 만들어보았고, 예상했듯이 시간초과가 미친듯이 터졌다!! function moveQuery(now, query, n, m) { let [x,y] = now const [cmd,v] = query if (cmd === 0) y = y-v m-1 ? m-1 : y+v else if (cmd === 2) x = x-v n-1 ? n-1 : x+v return [x,y] } function solution(n, m, x, y, qu..
-
[React] 컴포넌트 렌더링 최적화Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 13. 04:40
React를 사용하면 렌더링 성능에 대해 고민할 수 밖에 없다. 최적화를 위해선, React 컴포넌트의 리렌더링 조건을 먼저 복기하자! 본인의 state가 변경될 때 부모 컴포넌트로부터 받아오는 props가 변경될 때 부모 컴포넌트가 리렌더링 될 떄 shouldComponentUpdate(), forceUpdate() 등 강제 업데이트 메서드 호출 지금까지 나도 state, props를 단순히 데이터를 다루기 위해 적용하다보니, 데이터의 할당이나 위치가 부적절했을때 불필요한 리렌더링이 유발되었을 거라고 생각한다. 리렌더링을 하면 컴포넌트를 reflow & repaint 를 함에 따른 브라우저 성능 저하가 발생할 뿐만 아니라, 다른 이슈도 동반된다. 함수형 컴포넌트의 경우, 리렌더링을 할 경우 내부 로직들..
-
[CodeKata] 프로그래머스(Lv3) : 파괴되지 않은 건물Algorithm 2022. 4. 10. 19:00
🥋 Oooth More!! (Level 3) 입출력 예 #2 케이스는 문제 링크를 참고해주세요! 🧮 풀이 매 skill 마다 해당하는 영역을 이중순회 하는 것은 비효율적일 것이라고 예상했다. 그래서 반대로, 매 칸을 순회하면서 각 칸마다 skill들의 적용여부에 따른 남은 내구도를 판단하는 방법을 구현했다. 정확성 테스트는 통과했으나, 효율성 테스트를 역시 통과하지 못하며 더 나은 방법을 공부해야했었다. function solution(board, skill) { let answer = 0 for (let i = 0 ; i < board.length ; i++) { for (let j = 0 ; j < board[0].length ; j++) { let life = skill.reduce((acc,cur..
-
[React] Hooks - useRef()Front-End(Web)/React - 프레임워크(React, Next) 2022. 4. 3. 17:21
회사에서는 Vue를 주로 사용하다보니, 개인공부나 토이 프로젝트에서는 React를 꾸준히 적용하고있다. 이번에 MBTI 사이드 프로젝트를 진행하면서, 페이지 컴포넌트에서 질문 리스트를 불러와서 각 질문들을 인덱스에 따라 렌더링하는 화면을 만들어야했다. 리스트, 인덱스, 질문 데이터들을 모두 useState()에 담아도 당연히 동작은 잘 하겠지만, 리스트 데이터에 대한 고민이 있었다. 첫 번째는, 리스트 데이터는 페이지 리렌더링에 아무런 연관성이 없다. 단순히, 리스트 정보들을 가지고 있고, 질문에 응답한 결과만을 저장하면 되기 때문에 state의 취지에 맞지 않는다고 할 수 있다. 두 번째는, 리스트 데이터가 수정(결과값이 입력)될 때마다 컴포넌트가 리렌더링된다. 각 질문에 대답할때 마다, 질문 리스트의..
-
[CodeKata] 프로그래머스(Lv3) : 양과 늑대(KAKAO)Algorithm 2022. 4. 2. 19:25
🥋 Oooth More!! (Level 3) 🧮 풀이 이진트리 문제이기 때문에 난이도가 있을거라고 생각했지만, DFS를 적용해서 풀 수 있었던 문제였다. 🖇 리뷰 function solution(info, edges) { let answer = 1; const length = info.length; const graph = Array.from({length}, () => []); for(let i = 0; i { let [currentNode, sheep, wolves] = current; const newN..
-
[HTML] 이메일 폼 퍼블리싱Front-End(Web)/HTML, CSS 2022. 3. 30. 03:06
현재 회사에서 진행하는 통합멤버십 프로젝트 관련해서, 각종 안내 이메일 발송폼을 퍼블리싱하는 작업을 담당하였었다. 우선 처음 작업하는 부분이다보니 백엔드 Github에서 기존에 웹 퍼블리셔님이 제작해주신 이메일 폼 코드를 공유받았고... 충격에 빠지게 되었다!! 자주 사용해보지 않았던 태그의 등장.... 납득하기 힘든 Inline CSS....!! 매우... 매우 당혹스러웠다...🤪🤪 위 문법을 준수하여 작업하더라도, 이전에 왜 이렇게 작업되어야 하는지 그 취지를 이해해야겠다는 생각에 이메일 폼 퍼블리싱에 관한 글들을 참고하게 되었고, 나와 비슷한 피해자(?)들은 조금이라도 이 길을 쉽게 지나갈 수 있는 가이드같은 포스팅을 작성하고자 글을 시작하게 되었다. 📙 배경 주로, 서비스를 사용하는 회원에게 관련..
-
[CodeKata] 프로그래머스(Lv3) : N-QueenAlgorithm 2022. 3. 26. 21:10
🥋 Oooth More!! (Level 3) 🧮 풀이 DFS를 통해 문제를 풀이해보았다. 처음엔 n x n의 2차원 board를 넘기려했으나 n에 따라 시간복잡도가 제곱배로 증가할 것으로 예상되었고 1차원 배열로 Queen들의 좌표를 관리했다. function solution(n) { let answer = 0; function dfs(queens, row) { if (queens.length === n) { answer++; return; } for (let col = 0 ; col Math.abs(qc-col) === row - qr).length > 0) continue; dfs..