TIL30 [항해 99 주특기 주차 13일차] 오늘은 팀원들과 함께 인피니티 스크롤을 구현하는 시간을 가졌다. 그래서 인피니티 스크롤을 어떻게 구현할 수 있을지 조사를 하면서 얻은 정보가 있다. 그래서 오늘은 이 정보에 대해서 같이 공유를 하는 시간을 가질까 한다. 1. scrollHeight, scrollTop , clientHeight 넌 도대체 머니??.. scrollHeight는 말그대로 scroll 높이 이다. 여기서 중요한 것은 누구의 높이 즉 주어가 누구냐 이다. 내가 이번 로직을 작성할 때는 document가 그 주소가 되었다. 이렇게 scrollTop , clientHeight 모두 document의 Height다. 그렇다면 이를 가지고 어떻게 인피니티 스크롤을 구현할까? 이를 알려면 먼저 인피니티 스크롤이 무엇인지 부터 알아야 한다.. 2023. 7. 8. [항해 99 주특기 주차 12일차] 오늘은 어제 했던 리엑트 3주차 프로젝트에 대해서 내가 몰랐던 부분들에 대해서 정리를 해볼려고 한다. 바로 react portal이다. 지난번에 내가 portal을 만들때는 root와 portal-target이렇게 2개를 만들고 이 2개 내에서 진행을 했었다. 하지만 이런 방식은 App 컴포넌트와 동일한 선상에서 제작하는 것이기 때문에 App 컴포넌트와의 상태 관리를 같이 하는 것이 굉장히 어려웠다. 그래서 매니저님께 내가 한 것을 보여드리면서 이런 부분들은 어떻게 고치는 것이 좋냐라고 물어보니 react portal이라는 것을 추천해주셨다. 그래서 오늘은 react portal에 대해서 다뤄볼려고 한다. 1. portal 그래서 내가 아는 그거야?! portal은 한국말로 포탈 즉 우리가 게임, 영상,.. 2023. 7. 7. [항해 99 주특기 주차 11일차] 오늘은 어제하던 과제를 이어서 진행했다. 즉 항해 99 3주차 과제(모달창 구현)을 진행했다. 그래서 오늘은 이 모달창을 구현을 진행하면서 어려웠던 점들 그리고 이를 어떻게 해결했는지에 대해서 작성해볼려고 한다. 1. 모달창 너무 만만하게 봤다.... ㅎㅎ : 모달창을 구현할 때 어려웠던 점은 크게 2가지 정도가 있던거 같다. 첫번째는 이 모달창을 어떻게 하면 전체 화면에 출력할 수 있을까? 두번째는 모달창을 여러개를 만들 때는 어떻게 처리하는 것이 좋을까? 이렇게 2가지다. 각각 자세하게 설명하겠다. 1-1) 모달창을 전체화면으로 띄우는 것 모달창을 전체화면에 띄울려면 body 밑에 자식 요소로 들어있어야지 가능하다. 이 말을 이해하기 위해서 다음과 같은 예시를 준비했다. 만약에 다음과 같은 구조에서 .. 2023. 7. 5. [항해 99 주특기 주차 10일차] 오늘은 클린 코드를 직접 작성해보는 시간을 가졌다. 자세히 말하자면 저번에 항해 99 주특기 주차 9일차에서 내가 설명한 부분들을 직접 구현해보는 시간을 가졌다. 클론 코딩할 대상은 항해 99 주특기 주차 3주차 과제이다. 오늘은 내가 이 과제를 클론코딩하면서 어려웠던 점들 그리고 이를 어떻게 해결했는지에 대해서 써볼려고 한다. 1. 추상화 정말 못살아... ㅠㅠ 주특기 3주차에서 구현해야할 페이지에는 크게 4가지 정도의 컴포넌트가 있었다. 1. 버튼, 2. 인풋, 3. 모달, 4. select 이렇게 4가지로 이루어졌있었고 나는 여기서 오늘은 1. 버튼 컴포넌트를 만들어보았다. 버튼 컴포넌트를 분석한 결과 다음과 같이 컴포넌트를 분리할 수 있었다. 1. 버튼 컴포넌트 제목 2. 버튼 컴포넌트 내용 2-.. 2023. 7. 4. [항해 99 주특기 주차 9일차] 오늘은 2주차 과제에 대한 클린 코드로 리펙터링을 하는 시간을 거쳤다. 이렇게 클린 코드를 작성하게 된 이유는 디자이너 즉 혜경님이 디자인을 바꾸자 , 어떤 요소를 수정해줘라 등 변화가 많이 일어나는 때마다 그 변화에 유연하게 대처하는 코드를 작성하지 못한다는 문제점이 있었다. 그 분만 아니라 항해 99에서 태현님께서 클린코드를 작성하는 방법에 대해서 올려주셔서 더욱더 클린 코드가 무엇인지를 연구해보는 시간이었다. 그래서 오늘은 메니저님께 물어본 클린 코드와 이를 작성하는 기준에 대해서 조금 살펴보려고 한다. 1. components 도대체 어떻 기준으로 나누지? components를 나누는 기준과 관련해서 정말 많은 사람들이 헷갈리는 경우가 많다.(이 글을 쓰는 저자도 그랬다...). 컴포넌트를 나누는.. 2023. 7. 3. [WIL 항해 99 3주차 #2] 이번 주는 우리 팀원들 중에 정백님과 많이 친해지는 시간을 가졌다. 그 뿐만 아니라 혜경님과 함께 리엑트 2주차 과제를 하면서 정말 많이 배운 주였다. 기억에 남는 것은 redux의 불변성 유지, 리엑트 성능 최적화, 리엑트 리렌더링 과정, ui,ux편의, flex와 grid등 정말 많은 것을 배운거 같다. 특히 redux의 불변성 유지와 리엑트 리렌더링 과정에서 정말 많은 시행 착오들이 있었다.예를 들어 렌더링 되면 안되는 것들이 리렌더링 되거나 redux에 불변성 관리를 안해줘서 데이터가 업데이트 되지 않는다던가 flex shrink, flex grow등을 통해서 반응형 디자인을 만들다던가 정말 많은 것들을 이번주에는 했던 것 같다. 그리고 이를 블로그에 녹여내서 정말 좋은 주였다. 앞으로 다음주에는.. 2023. 7. 2. 이전 1 2 3 4 5 다음