JAMIE LOG

Programming/React

배칭 (Batching) const [value, setValue] = useState(0); const handleClick = () => { setValue(value + 1); setValue(value + 1); } handleClick은 value를 두 번 변경하기 위한 핸들러 함수이다. 하지만 막상 실행된 뒤 값을 확인하면 예상했던 값인 2가 아니라 1로 설정된 것을 확인할 수 있을 것이다. 위처럼 상태를 변경하는 세터 함수가 예상했던 것처럼 동작하지 않는 이유는 리액트가 세터 함수들을 모아 일괄적으로 처리(Batch Update)했기 때문이다. 일반적으로 리액트는 상태가 변경되면 변경된 내용을 반영하기 위해 컴포넌트를 다시 렌더링한다. 그런데 만약 페이지 내에 존재하는 수많은 상태값 하나하나..

2022. 7. 26.

회고/Codesquad

🥲 마지막 프로젝트 시작 벌써 마지막 프로젝트라니 진짜 말도 안 된다...ㅠ 수료까지 3주밖에 안 남았다니.. 체력적으로 힘들어서 빨리 끝났으면 싶다가도 끝나고 나면 미션도 없고 중간중간하던 수업도 없고,, 혼자 덩그러니 남겨지는 기분일 것 같아서 안 끝났으면 싶기도 한 것 같다. 그래도 일단은 남은 기간 동안 집중해서 잘 마무리해보고 싶다..! 이번 프로젝트는 칸과 함께하게 됐다. 항상 랜덤으로 페어가 정해지다가 이번엔 팀 희망 조사를 받았는데, 같이 하면 재밌을 것 같다고 얘기가 나와서 신청하게 됐다. 이전까지는 평소에 잘 이야기를 나눌 일이 없던 새로운 분들과 매칭이 됐었는데 이번엔 또 색다를 것 같아서 기대도 되고 칸의 속도나 열정을 못 따라갈 것 같아서 솔직히 걱정도 좀 되는 것 같다..ㅎㅎ 비..

2022. 6. 26.

회고/Codesquad

💦 에어비엔비 프로젝트 마지막 주차! 어쩌다 보니 한주씩 밀려서 쓰고 있는 것 같은데 일주일 지나서 쓰려고 하니까 잘 기억이 안 난다 ( ･ᴗ･̥̥̥ ) 다음 회고부턴 밀리지 말고 써야지 ㅠㅠ 🎉 고차 컴포넌트 적용 const SearchBar = ({ size = SEARCH_BAR_SIZE.LARGE }: SearchBarPropsTypes) => { ... return ( ); }; 검색바의 요금 영역 부분을 구현하면서 상태를 관리하기 위해 Context API를 사용했다. 컨텍스트를 사용하기 위해서는 검색바 컴포넌트에서 해당 영역을 Provider로 감싸야하는데, 만약에 각 영역마다 Provider가 하나씩 있다고 하면 저렇게 들어가야 하는 건가 싶어서 이 부분이 좀 맘에 들지 않았다.. 이 부분..

2022. 6. 19.

회고/Codesquad

🤦‍♀️ 벌써 2주차가 지나갔다니.. 이번 주는 중간에 선거날이 껴있어서 그런가 되게 금방 지나간 것 같다. 크게 한 건 없지만 간단하게라도 정리해봐야겠다. 🤔 어떻게 재사용해야 할까? 이번 주에 그나마 가장 많이 고민한 부분이 컴포넌트 재사용에 관한 부분인 것 같다. 지난주에 만들다 말았던 검색바를 마저 만들었는데, prop으로 검색바의 크기를 받아서 분기 처리하다 보니 전체적으로 좀 복잡해지는 것 같아서 최대한 깔끔하게 정리하려고 했다. 또 크기에 따라 보여지는 내용이 달라야 해서 return문도 삼항 연산자로 다른 내용을 반환하도록 했는데, 이 부분도 깔끔하게 만들고 싶어서 따로 파일을 만들어서 분리해볼까 하는 생각이 들었다. 그런데 이렇게 사용해본 적이 없어서 리뷰어님께 질문을 했고, 답변을 받는..

2022. 6. 12.

Programming/Web

글을 시작하기 전에 나름대로 많이 찾아보고 정리했으나 정확하지 않은 부분이 있을 수 있다는 점..! 미리 말씀드리며 잘못 작성한 부분이 있다면 지적해주시면 감사하겠습니다 🙇‍♀️ 이번 프로젝트에서 캔버스로 그래프를 그리다가 유난히 캔버스로 그린 게 좀 깨져 보인다고 해야 할까.. 흐릿하게 보이는 것 같아서 찾아보다가 DPR이라는 개념을 알게 돼서 간략하게 정리해보려고 한다. 픽셀 (Pixel) & 해상도 우선 이 주제를 위한 기본적인 개념인 픽셀과 해상도에 대해 먼저 살펴보자. 픽셀은 이미지를 이루는 가장 작은 단위를 말한다. 이미지를 계속 확대하다보면 네모 모양의 점들로 이루어진 것을 확인할 수 있는데, 이 점들을 픽셀이라고 한다. 이러한 픽셀들의 수가 늘어날수록 이미지를 더 자연스럽게 표현할 수 있게..

2022. 6. 7.

회고/Codesquad

👊 갠플 끝 팀플 시작 이번주부터 다시 3주간 새로운 프로젝트를 진행하게 됐다. 이번 프로젝트는 지니랑 백엔드 헤이호와 함께하게 됐는데 다들 친절하시고 API 관련해서 이야기를 나눌 때도 나름 수월하게 잘 진행이 됐던 것 같다. 물론 새롭게 구현해야 하는 기능이 많아서 기술적으로는 안 수월하긴 했지만.. 그리고 타입스크립트를 처음 적용하게 돼서 걱정 반 두려움 반이었던 것 같은데 역시나 ㅎㅎ 개발 환경 세팅은 쉽지 않았다.. 지난주에도 스토리북과 ESLint 등등 설정하느라 오래 걸렸었는데, 이번에는 타입스크립트를 적용해서 그런지 달라지는 부분도 있어서 생각만큼 수월하진 않았던 것 같다. 이번에도 ESLint 설정할 때 절대 경로 설정이 안돼서 첫번째 PR 보내기 전날에 지니랑 헤매고 있었는데 파크랑 비..

2022. 6. 5.

회고/Codesquad

👏 드디어 첫 회고..! 첫 회고를 이제야 쓰기 시작하다니.. 좀 부끄럽다...ㅠㅠ 계속 써야겠다고 생각만 하고 미루고 있었는데 더 미루다간 코드스쿼드 끝나버릴 것 같아서 지금부터라도 틈틈이 써야 할 것 같다. (블로그에 이렇게 대놓고 써놓으면 그래도 안 까먹고 쓰겠지..?) 코드스쿼드 하면서 여러모로 배우거나 느낀 건 많았는데 기록하지 않으면 다 휘발되는 것 같아서 적어둬야겠다고 생각했다. 그리고 얼마 전에 깃허브에서 다른 개발자분들의 이력서를 봤는데 프로젝트를 어떤 식으로 진행했고 문제가 생겼을 때는 어떻게 해결했는지 등이 잘 정리되어 담겨있는 걸 보고 기록의 필요성을 더 느꼈던 것 같다. 앞으로는 까먹지 않게 꾸준히 잘 정리해둬야겠다..! 🔥 오랜만의 개인 프로젝트 시작 지난 프로젝트에서부터 리액트..

2022. 5. 25.