min

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

이번 주는 우리 팀원들 중에 정백님과 많이 친해지는 시간을 가졌다. 그 뿐만 아니라 혜경님과 함께 리엑트 2주차 과제를 하면서 정말 많이 배운 주였다. 기억에 남는 것은 redux의 불변성 유지, 리엑트 성능 최적화, 리엑트 리렌더링 과정, ui,ux편의, flex와 grid등 정말 많은 것을 배운거 같다. 특히 redux의 불변성 유지와 리엑트 리렌더링 과정에서 정말 많은 시행 착오들이 있었다.예를 들어 렌더링 되면 안되는 것들이 리렌더링 되거나 redux에 불변성 관리를 안해줘서 데이터가 업데이트 되지 않는다던가 flex shrink, flex grow등을 통해서 반응형 디자인을 만들다던가 정말 많은 것들을 이번주에는 했던 것 같다. 그리고 이를 블로그에 녹여내서 정말 좋은 주였다. 앞으로 다음주에는..

오늘은 팀원들과 함께 검색창 기능을 구현하는 시간을 가졌다. 그래서 오늘은 내가 검색창 기능을 구현하면서 어려웠거나 헷깔렸던 부분들에 대해서 설명하려고 한다. 1. state 정말 어렵다... : 오늘 검색창 기능을 구현하면서 정말 헷깔렸던 부분은 state와 리엑트 리렌더링이었다. state와 리엑트 리렌더링에 대해서 블로그에 글을 남겨도 백문이 불여일견이라고 직접 해보는 것이 정말 중요하다는 것을 깨달았다. 어떤 부분이 어려웠는지 구체적으로 살펴보겠다. const MainPage = () => { // 해더에서 selectBox 데이터 바뀔때마다 전체 화면 다시 리렌더링 const [article, setArticle] = useState("web"); const onChangeHandler = (e..

오늘은 2시에 김태선 튜터님 께서 연봉 1억 받는 개발자 되는 방법이라는 제목의 강의 들었다. 이 강의에서 가장 중요한 키워드는 메타인지였다. 나는 이 말을 듣고 내 학창 시절이 생각 났다. 잠깐 나의 대한 TMI를 말하자면 나는 중학교까지 정말 노는 사람이었다. 왜 그랬는지 생각해보면 그때 나는 목표가 없었고 그로 인해서 내가 삶을 이어나가는 원동력이 없었던 거 같다. 그러다가 고등학생이 되기 전에 컴퓨터와 접점이 생겼고 그로 인해서 나에게는 컴퓨터와 관련된 직종으로 가야 겠다는 목표가 생겼다. 하지만 목표를 늦게 얻은 나는 앞으로 공부 방향은 어떻게 잡고 공부 방법을 어떻게 잡아야 하는지에 대해서 정말 막막했다. 그러면서 어떻게 공부를 하면 잘할 수 있는지 정말 많은 연구를 했었던 거 같고 그러면서 ..

오늘은 유저테스트로 받은 요구 사항들에 대해서 고치는 시간이었다. 나는 기술적인 컨펌을 담당했으며 해경님같은 경우는 디자인적인 컨펌을 담당했다. 그래서 오늘은 내가 받은 컨펌들과 이를 어떻게 해결했는지에 대해서 쓸려고 한다.(전부 다쓰면 양이 많아지니 조금만.... ㅎㅎ) 1) 글자수 제한 예시(800 / 1000) 이를 구현할 때는 생각보다 어렵지 않았는데 그 이유는 저 800에 들어가는 value가 useState이기에 value가 변할 때마다 리 렌더링이 일어날 것이고 이로 인해서 글자수의 경우에는 계속 업데이트가 된다. 따라서 저 경우에서는 따로 어려운 작업을 해주지 않았다. 2) title 빈칸 alert() 창 띄우기 title이 빈칸으로 만들어진 문자열에 경우에는 validation이 통과하..

오늘은 만든 TodoList의 최적화 작업과 디자인 수정을 진행했다. 나는 최적화 작업을 진행했고 혜경님은 디자인 수정을 맡았다. 그래서 나는 오늘 TodoList의 어떤 부분들을 최적화 작업을 했는지를 설명하려고 한다. 1. Todo Insert Component 위 사진을 보면 working!!! 이라는 Drop Down 박스가 보일 것이다. 그리고 이 박스를 클릭하면 끝난 과제들의 리스트가 보이게 된다. 여기서 문제점은 클릭했을 때 TodoList, TodoToggleContainer는 리렌더링이 되어야 하는 것은 부정할 수 없는 사실이다. 하지만 여기서 TodoToggleContainer에 자식 컴포넌트인 StyledDropDown 컴포넌트는 리렌더링 되어서는 안된다. 이를 말로 설명하는 것 보다..

오늘은 혜경님과 함께 항해 99 2주차 숙제 리덕스를 활용한 Todo List 만들기를 진행했다. 오늘은 시행착오가 크게 2가지 정도가 있었다. 1. 리덕스의 불변성 관리 2. flex 이슈 그래서 오늘은 이 2가지에 대해서 어떤 시행 착오 였고 어떻게 이를 해결했는지에 대해서 써볼려고 한다. 1. redux 정말 못살아.... redux의 불변성은 강의에서도 언급한 정말 중요한 개념이었다. 하지만 나는 이 개념을 듣고 나서 이게 어떤 면에서 중요한지 왜 중요하지에 대해서는 잘 몰랐다. 그리고 이번 숙제를 하면서 왜 중요한지에 대해서 알게 되었다. 1-1) 문제 Todolist에서 완료, 삭제 버튼을 클릭했을 때 완료, 삭제가 적용되지 않는 문제가 발생했다. 자세히 말하자면 완료, 삭제 버튼을 눌렀을 때..

이번 일주일 동안은 정말 많은 것을 배웠다. 특히 저번주의 미션인 팀원들과 소통을 하기 위해서 알고리즘 주차와 이번 주특기 주차에는 여러가지 방안으로 노력해봤다. 간단하게 어떤 노력을 했는지 살펴보자. 1. 내가 먼저 팀원들에게 내가 만든 결과물을 보여주고 그것에 대하여 먼저 피드백을 받았다. 2. 만약에 모르는 개념이 나왔고 그것에 대해 고민해보면서 내가 옛날에 해당 문제와 관련해서 블로그에 적은게 있으면 그것에 대해서 설명하면서 최대한 모르는 개념이 없도록 하였다. 하지만 반대로 내가 아직 미흡한 부분들도 있었다. 1. 처음 팀원들을 만났을 때 거리낌 없이 인사하면서 친해지지 못한 것. 2. 팀원들과 모르는 개념에 대해서 고민하는 시간이 별로 없었던 것. 3. 내가 모르는 부분이 있을 때 자신해서 물..