MEI

럽쇼츠 프로젝트 주소 ✔️ 프론트엔드 관련 기술이 담겨있는 회고록입니다. ✔️ 프로젝트는 [크롬 개발자 도구] - [모바일] - [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..

자바스크립트로 알고리즘 풀기 외길 인생을 즐기고 있습니다 .. ✨ 자바스크립트로 알고리즘을 풀면 가끔 너무 외로운 순간들이 있습니ㄷr .. 예를 들면 2022 카카오 테크 인턴십 - 두 큐 합 같게 만들기 파이썬 Queue 로 굴리면 정답인데, JS 배열 이용하면 광탈인 문제가 있다 class를 이용해서 직접 구현해서 풀어야 정답인 그런 문제들.. 🔕 하지만 자식같은 자바스크립트를 내칠 수 없길래 차근차근 구현을 정리해보려고 한다 🫶 Queue - 추천 문제 : 2022 카카오 테크 인턴십 - 두 큐 합 같게 만들기 push, pop은 기존 배열에서 O(1)로 가능하지만, 큐와 같은 경우에는 push 는 O(1)이지만, shift 는 O(n)이다. 배열을 사용하면 큐를 편리하게 구현할 수 있을 것 같은데..

기본 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 알고스..

React, Vue, Svelt 와 같은 프레임워크를 이용하여 보다 더 편리한 프론트엔드 개발이 가능해졌지만, 그 기반에는 항상 자바스크립트가 있다. 자바스크립트는 초기 비개발자를 위한 언어를 모토로 생성되었기 때문에 쉽게 사용할 수 있지만, 그로 인해 생기는 불편한 점이 있었다. ⏤ 예를 들면 var 를 이용하여 중복 선언과 호이스팅을 통해 선언 전에 사용이 가능했지만, ( 오류를 저하시켜야 비 개발자들이 잘 사용할 수 있을 것이란 믿음에 ) 실제로 개발하다 보니 디버깅이 어려워서 let, const 를 해결책으로 발전 ⏤ 그래서 자바스크립트를 꾸준히 발전시키는 사람들이 있다. TC39 문서를 통해서 자바스크립트가 변화하는 동향들을 확인할 수 있다. (Proposal 칸을 확인해야 최종적으로 자바스크립..

2022년 회고를 4일이 지나서야 쓰는 게으름뱅이 바로 나에요. 연말 휴가와 함께 온 감기 때문에 늦게 썼다고 나를 위로하며 .. 01 , 인턴 생활 시작 부트캠프가 끝나가면서부터 다양한 회사에 많이 지원했었다. 상반기에는 기술적인 면에서 스스로 준비 안되어있다는 걸 알면서 지원했다.(그럼에도 서류 합격을 대부분 할 수 있었던 것 일이 매우 감사했다.) 하반기는 나를 설명하고 설득하는 능력이 부족했던 것 같다. 그래서 최종에서 떨어지는 일이 잦았고, 많이 슬퍼했던 것 같다. 마지막으로 남은 인턴 ..✨ 면접이 원래 2번이었다가 1번으로 바뀌어서 굉장히 마음이 편안했다. 기술에 대한 개념을 물어보는 질문들이 주가 아니라, 내가 그 기술에 대해서 어떻게 생각하는지에 대해 물어봐주셔서 편하게 답변할 수 있었던..

리액트를 사용하시는 이유 중 하나가 가상돔 때문이라고 생각이 드는데, 리액트의 가상DOM 이 실제 DOM과 어떻게 비교를 해서 실제 DOM에 반영을 하는지 궁금해서 찾아보게 된 내용입니다. 이 글을 통해서 왜 리액트에서 Key 를 유니크한 값으로 설정해야하는지에 대해 알게되실 수 있을 것 같습니다 🙏 Heuristic 알고리즘 VirtualDom과 실제 Dom 을 비교할 때 따지고 보면 전체 Dom을 순회하는 것인데 오히려 성능 저하가 일어나지 않을까라는 생각이 듭니다 🤔 이런 고민에 대해 리액트는 휴리스틱 알고리즘으로 해결했습니다. 해결법이 정확히 해결되는가에 대한 문제를 배제하고, 경험과 직관을 통해, 일반적으로 좋은 해결법이나, 보다 간단한 해결법을 찾고자 하는 방법이다. 휴리스틱에 대한 정의가 와..

회사에서 너무 바쁜데 잠은 잘 못자서 스프린트에 참석하기로 했다. 개발은 혼자할 수 있어도, 협업은 혼자할 수 없기 때문에 스프린트를 통해 어떻게 디자이너/백엔드/프론트엔드가 효율적(더 많은 커뮤니케이션 비용을 낭비하지 않을 수 있는 방법)으로 협업할 수 있는지에 대해 배웠다. 내가 참여하게 된 프로젝트는 여행과 관련된 프로젝트였다. (2월에 해외여행에서 요기나게 쓸 수 있을 것 같아서) 아이디어 공유 프로젝트 아이디어가 선정되고 본인들이 생각하고 있던 해당 페이지에서의 기능들을 나열하는 일을 했다. fall이 다양한 레퍼런스를 찾아주셔서 수월히 진행할 수 있었다. 처음으로 피그잼을 통해 아이디어 회의를 했는데 좋은 툴인 것 같다 🫶 스프린트는 5일차동안 진행되는 프로젝트여서 결과물을 내기에 헤비한 아이..

카엔프에 인턴으로 입사한지도 벌써 2개월이 지났다 😮 9월부터 썼다 지웠다를 반복하고 있는데 이제서야 탈고를 하게 되었다. (별거 아닌 글이 아닌데 탈고? 라는 단어가 웃기지만) 입사하고 한 달은 오피스 출근하며 지. 본가에서 판교까지 교통이 너무 힘들어서 쉽진 않았지만 버스에서 계속 자면서 오니까 그럭저럭 괜찮았다. 그리고 인턴 처음 시작하면서 배울 것들이 많아서 한 달이 빠르게 지났고, 지금은 재택으로 바꿨다. 재택을 신청해서 모니터가 배송왔다 💻 이 모니터가 맥북 레티나랑 찰떡인 것 같은데 가격 보고 내려놨다. (휴일에는 이 모니터로 넷플릭스도 보고 아주 좋다 >