전체 글 (21) 썸네일형 리스트형 React-Table을 이용하여 자유자재 Custom 컴포넌트 만들기 사실 자유자재는 아니고.. 리액트 테이블로 여러가지는 만들어야하는 상황이 생겼었다 ! 짜여진 리액트 테이블에 커스텀을 더한 테이블 컴포넌트로 분리하고자 하니까 꽤 많은 시간이 걸렸고, 공식 문서를 많이 찾아봐야했다 .. ! ⏤ React-table v7을 이용했습니다 ⏤ 공식 독스에는 문제를 해결할 수 있는 제안이 나와있지 않아서 여기 저기 코드를 붙여보며, 해결했습니다 ! 먼저, 여러 페이지에서 사용되는 테이블을 [테이블 인터랙션/테이블] 2 개의 컴포넌트로 분리하고자 했습니다. ( 동일한 템플릿의 인터랙션을 사용한다면 인터랙션+테이블 1개의 컴포넌트로 분리해도 되지만, 동일한 테이블 디자인과 기능에 interaction 의 기능과 ui가 달라지는 경우가 있어서 2개의 컴포넌트 분리 후, 더 큰 단위(.. 프로젝트에 Cypress 도입해보기 ⏤ CRA, 타입스크립트 vanillaJavascript를 이용해서 이메일와 비밀번호를 검증할 일이 있었는데, 매번 테스트케이스들을 치고 시도해보는 일이 귀찮게 느껴졌다. 그래서 해왔던 프로젝트에 Cypress를 도입해보고 싶어서 공부한다. (사실 예제에서 적용시키는 프로젝트는 개인 레주메라 cypress가 필요없지만 연습용으로 써봤다.) 🥹 다른 것보다 Cypress 공식문서를 보는 것이 좋았다. 리액트에 도입할 것이기 때문에 Cypress quickStart- React를 보고 설치해주었다. / 적용한 프로젝의 개발 환경 - CRA - Typescript Cypress 설치 및 초기 설정 yarn add cypress -D - cypress open 하는 명령어 npx cypress open 이렇게 매번 치는 것이 귀찮아서 .. [넘블] 2022년 럽쇼츠(LuvShort) 리액트 프로젝트 회고록 럽쇼츠 프로젝트 주소 ✔️ 프론트엔드 관련 기술이 담겨있는 회고록입니다. ✔️ 프로젝트는 [크롬 개발자 도구] - [모바일] - [Samsung Galaxy S8+] 에 모바일에 최적화 되어있습니다. 프로젝트 미리 보기 자세한 동작 구현 노션 보기 👀 ⚒ Tech Stack ✔️ 프론트엔드 ReactJS Javascript Redux Styled-component ✔️ 백엔드 Spring boot 2.6.6 JPA mysql AWS EC2, RDS, S3 👩🎓 배운점 좋아요 toggle 여러 번 연타로 누르면 서버에 많은 요청이 갈 수 있을 것 같아서 debounce 방식을 도입했다. 쓰로틀링 대신 디바운스를 이용한 이유는 아래 이슈에 올려놨습니다. 구현은 lodash 라이브러리를 썼습니다. 확실히 s.. JS로 알고리즘하기 자바스크립트로 알고리즘 풀기 외길 인생을 즐기고 있습니다 .. ✨ 자바스크립트로 알고리즘을 풀면 가끔 너무 외로운 순간들이 있습니ㄷr .. 예를 들면 2022 카카오 테크 인턴십 - 두 큐 합 같게 만들기 파이썬 Queue 로 굴리면 정답인데, JS 배열 이용하면 광탈인 문제가 있다 class를 이용해서 직접 구현해서 풀어야 정답인 그런 문제들.. 🔕 하지만 자식같은 자바스크립트를 내칠 수 없길래 차근차근 구현을 정리해보려고 한다 🫶 Queue - 추천 문제 : 2022 카카오 테크 인턴십 - 두 큐 합 같게 만들기 push, pop은 기존 배열에서 O(1)로 가능하지만, 큐와 같은 경우에는 push 는 O(1)이지만, shift 는 O(n)이다. 배열을 사용하면 큐를 편리하게 구현할 수 있을 것 같은데.. [JS | 알고리즘] BFS 와 0-1 BFS 기본 BFS 기본 BFS는 최단 거리를 고려해줄 때 알맞는 알고리즘이다. 1 ) 로직 표에서 움직일 수 있는 동서남북이 필요하다 동서남북은 dx, dy 로 표현하게 된다. 2차원 배열 [1][1]을 기준으로 남쪽은 [1+1][1] (=[2][1]) 이 되는 셈이다. 추천 문제 | 1687 숨바꼭질 5014 스타트링크 10026 적록색약 0-1 BFS 기존에 있는 BFS 보다 시간복잡도가 낮아서 잘 활용한다면, 유용하게 쓸 수 있다. 0-1 BFS는 가중치를 고민해주는 방법이다. 가중치가 낮은 것(0) 은 가중치가 높은 것(1) 보다 비용 없이 이동할 수 있으니 먼저 고려해주는 것이다. 1 ) 로직 ( Queue) 가중치가 낮은 것은 unshift 가중치가 높은 것은 push 추천 문제 | 1261 알고스.. 2023년 자바스크립트의 최신 문법 알아보기 👀 React, Vue, Svelt 와 같은 프레임워크를 이용하여 보다 더 편리한 프론트엔드 개발이 가능해졌지만, 그 기반에는 항상 자바스크립트가 있다. 자바스크립트는 초기 비개발자를 위한 언어를 모토로 생성되었기 때문에 쉽게 사용할 수 있지만, 그로 인해 생기는 불편한 점이 있었다. ⏤ 예를 들면 var 를 이용하여 중복 선언과 호이스팅을 통해 선언 전에 사용이 가능했지만, ( 오류를 저하시켜야 비 개발자들이 잘 사용할 수 있을 것이란 믿음에 ) 실제로 개발하다 보니 디버깅이 어려워서 let, const 를 해결책으로 발전 ⏤ 그래서 자바스크립트를 꾸준히 발전시키는 사람들이 있다. TC39 문서를 통해서 자바스크립트가 변화하는 동향들을 확인할 수 있다. (Proposal 칸을 확인해야 최종적으로 자바스크립.. 2022년 회고 2022년 회고를 4일이 지나서야 쓰는 게으름뱅이 바로 나에요. 연말 휴가와 함께 온 감기 때문에 늦게 썼다고 나를 위로하며 .. 01 , 인턴 생활 시작 부트캠프가 끝나가면서부터 다양한 회사에 많이 지원했었다. 상반기에는 기술적인 면에서 스스로 준비 안되어있다는 걸 알면서 지원했다.(그럼에도 서류 합격을 대부분 할 수 있었던 것 일이 매우 감사했다.) 하반기는 나를 설명하고 설득하는 능력이 부족했던 것 같다. 그래서 최종에서 떨어지는 일이 잦았고, 많이 슬퍼했던 것 같다. 마지막으로 남은 인턴 ..✨ 면접이 원래 2번이었다가 1번으로 바뀌어서 굉장히 마음이 편안했다. 기술에 대한 개념을 물어보는 질문들이 주가 아니라, 내가 그 기술에 대해서 어떻게 생각하는지에 대해 물어봐주셔서 편하게 답변할 수 있었던.. 리액트의 VirtualDom 이 어떻게 실제 DOM 에 반영할까 1 - Diffing 알고리즘 리액트를 사용하시는 이유 중 하나가 가상돔 때문이라고 생각이 드는데, 리액트의 가상DOM 이 실제 DOM과 어떻게 비교를 해서 실제 DOM에 반영을 하는지 궁금해서 찾아보게 된 내용입니다. 이 글을 통해서 왜 리액트에서 Key 를 유니크한 값으로 설정해야하는지에 대해 알게되실 수 있을 것 같습니다 🙏 Heuristic 알고리즘 VirtualDom과 실제 Dom 을 비교할 때 따지고 보면 전체 Dom을 순회하는 것인데 오히려 성능 저하가 일어나지 않을까라는 생각이 듭니다 🤔 이런 고민에 대해 리액트는 휴리스틱 알고리즘으로 해결했습니다. 해결법이 정확히 해결되는가에 대한 문제를 배제하고, 경험과 직관을 통해, 일반적으로 좋은 해결법이나, 보다 간단한 해결법을 찾고자 하는 방법이다. 휴리스틱에 대한 정의가 와.. 이전 1 2 3 다음
