min

오늘은 태현님과 함께 블로그 프로젝트를 진행하면서 내가 협업을 할때 내가 쓰는 코드를 다른 사람이 읽기 쉬운지 내가 쓴 코드가 변화에 유동적으로 대응할 수 있는지를 체크하고 싶다는 마음에 팀원이 태현님과 함께 기술메니저님에 기술 블로그를 만들게 되었다. 그래서 오늘은 협업하면서 겪어던 문제들 그리고 이를 어떻게 해결했는지에 대해서 한번 적어볼려고 한다. 1. 네이밍 문제 내가 이번에 태현님이랑 협업을 하면서 느꼈던 첫번째 문제는 네이밍 문제였다. 둘이 쓰는 네이밍이 다르다 보니 서로의 네이밍을 이해하기가 굉장히 어려웠다. 예를 들어서 나는 ul 태그를 menu라고 지었는데 태현님의 경우는 list라고 지었다. 그래서 나는 이를 해결하기 위해서 components naming convension 을 찾아보..

이번주에는 굉장히 고민을 많이 했던 주였던 거 같다. 내가 어떻게 해야지 다른 사람들과 협업을 할때 내 코드를 사람들이 이해하면서 진행할 수 있을까? 어떻게 코드를 짜야지 나중에 변경에도 유연한 코드를 짤 수 있을까? 정말 고민을 많이 한 주였던 거 같다. 그러면서 내가 느낀 것은 내가 지금 쓰고 있는 코드가 가장 읽기 좋은 코드고 지금 고민해봤자 소용이 없다는 것을 깨달았다.그런 깨달음을 마지막으로 이번 주는 지나간거 같다. 오늘은 라이플 사이클 (함수형 vs 클래스형) , hooks에 대해서 알아보는 시간을 가지도록 하겠다. 1. 라이플 사이클 (함수형 vs 클래스형) 함수형과 클래스형 모두 안에서 돌아가는 원리는 똑같다. 하지만 함수형의 경우 강력한 hook이 있고 클래스형의 경우 프로그래머가 직접..

오늘은 무한 스크롤을 구현하면서 확대를 했을 때 무한 스크롤이 구현되지 않은 이유와 대책에 대해서 설명을 하려고 한다. 1. 확대를 했을때 왜 무한 스크롤이 작동하지 않은 거지?.. 확대를 했을 때 무한 스크롤이 구현되지 않은 가장 핵심적인 이유는 clientHeight때문에 그렇다. 내가 확대 , 축소를 해도 document의 height는 변함이 없다. 하지만 내가 확대 축소를 할 때 clientHeight는 변함이 있다. 즉 확대를 했을때 clientHeight는 기존의 100%보다 훨씬 작아졌을 것이고 이는 결국엔 스크롤의 맨 하단과 document의 가장 하단 사이의 임의의 빈 공간이 생기게 된다. 이는 결국 어떻게든 밑으로 내려도 그 공백을 채울 수 없으며 결국엔 스크롤의 가장 하단을 찾지 못..

오늘은 팀원들과 함께 인피니티 스크롤을 구현하는 시간을 가졌다. 그래서 인피니티 스크롤을 어떻게 구현할 수 있을지 조사를 하면서 얻은 정보가 있다. 그래서 오늘은 이 정보에 대해서 같이 공유를 하는 시간을 가질까 한다. 1. scrollHeight, scrollTop , clientHeight 넌 도대체 머니??.. scrollHeight는 말그대로 scroll 높이 이다. 여기서 중요한 것은 누구의 높이 즉 주어가 누구냐 이다. 내가 이번 로직을 작성할 때는 document가 그 주소가 되었다. 이렇게 scrollTop , clientHeight 모두 document의 Height다. 그렇다면 이를 가지고 어떻게 인피니티 스크롤을 구현할까? 이를 알려면 먼저 인피니티 스크롤이 무엇인지 부터 알아야 한다..

오늘은 어제 했던 리엑트 3주차 프로젝트에 대해서 내가 몰랐던 부분들에 대해서 정리를 해볼려고 한다. 바로 react portal이다. 지난번에 내가 portal을 만들때는 root와 portal-target이렇게 2개를 만들고 이 2개 내에서 진행을 했었다. 하지만 이런 방식은 App 컴포넌트와 동일한 선상에서 제작하는 것이기 때문에 App 컴포넌트와의 상태 관리를 같이 하는 것이 굉장히 어려웠다. 그래서 매니저님께 내가 한 것을 보여드리면서 이런 부분들은 어떻게 고치는 것이 좋냐라고 물어보니 react portal이라는 것을 추천해주셨다. 그래서 오늘은 react portal에 대해서 다뤄볼려고 한다. 1. portal 그래서 내가 아는 그거야?! portal은 한국말로 포탈 즉 우리가 게임, 영상,..

오늘은 어제하던 과제를 이어서 진행했다. 즉 항해 99 3주차 과제(모달창 구현)을 진행했다. 그래서 오늘은 이 모달창을 구현을 진행하면서 어려웠던 점들 그리고 이를 어떻게 해결했는지에 대해서 작성해볼려고 한다. 1. 모달창 너무 만만하게 봤다.... ㅎㅎ : 모달창을 구현할 때 어려웠던 점은 크게 2가지 정도가 있던거 같다. 첫번째는 이 모달창을 어떻게 하면 전체 화면에 출력할 수 있을까? 두번째는 모달창을 여러개를 만들 때는 어떻게 처리하는 것이 좋을까? 이렇게 2가지다. 각각 자세하게 설명하겠다. 1-1) 모달창을 전체화면으로 띄우는 것 모달창을 전체화면에 띄울려면 body 밑에 자식 요소로 들어있어야지 가능하다. 이 말을 이해하기 위해서 다음과 같은 예시를 준비했다. 만약에 다음과 같은 구조에서 ..

오늘은 클린 코드를 직접 작성해보는 시간을 가졌다. 자세히 말하자면 저번에 항해 99 주특기 주차 9일차에서 내가 설명한 부분들을 직접 구현해보는 시간을 가졌다. 클론 코딩할 대상은 항해 99 주특기 주차 3주차 과제이다. 오늘은 내가 이 과제를 클론코딩하면서 어려웠던 점들 그리고 이를 어떻게 해결했는지에 대해서 써볼려고 한다. 1. 추상화 정말 못살아... ㅠㅠ 주특기 3주차에서 구현해야할 페이지에는 크게 4가지 정도의 컴포넌트가 있었다. 1. 버튼, 2. 인풋, 3. 모달, 4. select 이렇게 4가지로 이루어졌있었고 나는 여기서 오늘은 1. 버튼 컴포넌트를 만들어보았다. 버튼 컴포넌트를 분석한 결과 다음과 같이 컴포넌트를 분리할 수 있었다. 1. 버튼 컴포넌트 제목 2. 버튼 컴포넌트 내용 2-..

오늘은 2주차 과제에 대한 클린 코드로 리펙터링을 하는 시간을 거쳤다. 이렇게 클린 코드를 작성하게 된 이유는 디자이너 즉 혜경님이 디자인을 바꾸자 , 어떤 요소를 수정해줘라 등 변화가 많이 일어나는 때마다 그 변화에 유연하게 대처하는 코드를 작성하지 못한다는 문제점이 있었다. 그 분만 아니라 항해 99에서 태현님께서 클린코드를 작성하는 방법에 대해서 올려주셔서 더욱더 클린 코드가 무엇인지를 연구해보는 시간이었다. 그래서 오늘은 메니저님께 물어본 클린 코드와 이를 작성하는 기준에 대해서 조금 살펴보려고 한다. 1. components 도대체 어떻 기준으로 나누지? components를 나누는 기준과 관련해서 정말 많은 사람들이 헷갈리는 경우가 많다.(이 글을 쓰는 저자도 그랬다...). 컴포넌트를 나누는..