컴포넌트 재사용 하기 리액트로 마카오 페이 기능 구현중 버튼에 들어가는 이름만 다르지 똑같은 형태인 버튼 컴포넌트가 여러 개가 존재하는 일이 발생했다. 리액트의 장점 중 하나가 컴포넌트 기반으로 이루어져 있기 때문에 코드의 재사용성이 좋다는 건데 그 장점을 전혀 활용하지 못하고 있었다. 이름만 다른 똑같은 형태의 컴포넌트가 존재하면 범용적인 컴포넌트를 하나 만들어서 이 컴포넌트를 재사용하는 게 좋다는 리뷰를 받았다. 근데 하나의 버튼 컴포넌트가 어떤 이름이 들어오는지 어떻게 알게 할 수 있을지 생각을 해봤다. 상위 컴포넌트가 하위 컴포넌트로 데이터를 주는 props를 이용하면 될 것이라고 대충 짐작하고 시작했다. 그래서 처음에는 name이라는 props를 만들어서 하위컴포넌트에 전달해주는 방법을 사용했다..

어젯밤에 자바스크립트를 자바처럼 사용하고 있다는 이야기를 해주셨다. 아직까지도 자바스크립트가 익숙하지 않아서 그런 것도 있지만 4개월 정도 주구장창 자바만 작성하던 몸이라 그런지 자바스크립트로 어떻게 코드를 작성해야 할지 모르겠을 때 본능적으로 자바에서 썼던 방법을 쓰려했던 것 같다. 그리고 자바스크립트에서는 for를 쓸 일이 없다는 이야기를 듣고 놀랐다. 사용하기 단순해서 제일 많이 사용하는 for문을 쓸 일이 없다니.. 그럼 뭐를 사용해야 하는 의문과 동시에 바로 해결방안을 말씀해주셨다. 자바스크립트는 forEach, map, reduce 이 3개만 제대로 사용하면 대부분 해결이 가능하다고 하셨다. 하지만 저 3개 중 제대로 사용할 수 있는 건 단 하나도 없었다. 저 3개 중에 그나마 map을 tod..

체크리스트 만들기 12주 차의 퀘스트인 마카오 페이를 처음 봤을 때 요구사항이 많아 약간 쫄았다.. 하지만 일주일간 갈고닦은 react를 활용할 수 있는 기회라 설레기도 했다. 퀘스트 요구사항이 많아서 안 잊어버리게 체크리스트를 만들었다. 왜냐하면 저번에 빈틈없는 회원가입 퀘스트를 진행할 때도 요구사항이 많았었는데 그때 요구사항 몇 개를 빼먹은 적이 있었다. 머릿속으로 다 한 줄 알았지만 내 머리가 나빠서... 퀘스트의 기본적인 요구사항에 대한 리뷰를 받은 적이 있어서 이번에는 최소한 기본적인 요구사항은 놓치지 않기 위해 눈으로 확인하고 체크할 수 있는 체크 리스트를 만들어서 진행했다. 체크리스트를 만들었을 때의 이점은 요구사항을 빼먹은 게 없는지 확인하는 것뿐만 아니라 작업 단위로 커밋할 때도 매우 유..

코딩 테스트 문제를 풀다 중복을 제거할 일이 생겼었는데 분명 며칠 전에도 코딩 테스트 풀면서 중복 제거할 일이 있어서 중복 제거하는 방법을 찾고 사용까지 했었던 기억이 났었는데 오늘 다시 하려니까 생각이 1도 나지 않았다. 인간은 망각의 동물이라는 것을 다시 한번 깨닫게 되는 순간이었다. 그 당시에 중복제거 방법을 찾아보고 사용만 했었지 따로 정리를 하거나 추가적으로 더 공부하지 않았었다. 그래서 그런지 중복 제거했었던 것만 기억이 나고 어떻게 하는지는 모르는 상황이 발생했었다. 몰라서 찾아보는 것까지는 좋았지만 내 것으로 만들지 못해 결국에는 안 찾아본 것과 똑같은 결과를 초래했다... 잊어버리지 않게 한번 더 공부하고 정리하는 JS에서 배열 중복 제거하는 방법 Set 이용하기 set은 중복되는 데이터..

잊을만하면 찾아오는 나태함 과정을 쉬면서 9시까지 출석하지 않아도 돼서 좋기도 하지만 9시까지 일어나지 않아서 점점 나태해지는 느낌을 받았다. 그리고 강제적인 시간표가 없다 보니 집에서 공부하다 보면 공부하는 시간과 쉬는 시간이 규칙적이지 않아 쉬는 시간이 길어지는 경우가 종종 있었다. 어떻게 하면 이 나태함을 극복할 수 있을까 생각하다 나는 익숙하고 편안한 환경에서 공부하는 것보다 불편한 환경에서 공부가 더 잘되는 걸 알기에 쉬는 날 동안에는 최대한 나가서 공부를 하려 했다. 장소는 두 군데로 낮에는 스터디 카페, 오후에는 카페를 가서 공부 했다. 스카에서 졸고 있는 나를 발견하면 바로 일어나서 장소를 바꿔 카페를 가기도 했다. 나름 쉬는 날 동안 나만의 루틴을 잘 따라서 공부해왔는데 오늘의 나는 나태..

이전에 react를 처음 배울 때 useState, useEffect 등등 여러 가지 개념이 많이 나왔었는데 사용법도 제대로 못 익히고 아샬님이 하는 대로 무지성으로 외우고만 넘어갔었는데 이번에 어떻게 작동하는지 왜 사용하는지 알기 위해 여러가지 실험을 해봤다. 우선 오늘은 useState에 대해서 공부를 했는데 useState를 왜 쓰는지 알기 위해서 useState를 사용해서 만든 것을 useState를 안 사용하고 만들어 보기로 했다. 너무 복잡한 건 힘드니까 아주 간단한 기능인 버튼을 눌렀을 때 버튼을 누른 횟수만큼 count가 증가하는 것을 만들어봤다. 즉, useState를 사용하지 않고 상태 값이 변화하는 것을 화면에 바로 보는 것을 목표로 했다. 어떻게 하면 setState 같은 값을 주지..