코딩연습장

토요일부터 상태가 좋지 않았다. 일요일에 강의를 다 듣고 코딩작업을 늦어도 월요일에 시작해야지 했는데 일요일에 상태가 매우 안좋아지더니 월요일에도 좋지않아 이틀 내리 쉬었다. 아무래도 목요일까지 과제 완성이고, 금요일부터 미니프로젝트 시작이다보니 더 쉴수는 없을 것 같아 오늘 다시 참석하여 강의를 듣고 코딩을 시작했다. 재정님께서 내 분량도 많이 도와주셔서 팀프로젝트는 많이 진행된 상태였다. 하지만 나는 강의도 듣지못했어서 일단 빠르게 thunk부분까지 듣고 코딩을 진행했다. 아직 optimize, customhook, s3배포를 듣지 못했는데, 이는 어느정도 코드를 완성하고 들어야겠다. 오늘 강의를 어느정도 듣고, 재정님과 다른분들이 진행하신 코드를 먼저 읽었다. 이해가 가지않는 부분은 강의와 비교해가..

오늘은 VIEW를 좀 더 수정하고, 잘못 설정되어있던 수정버튼의 용도를 고쳤다. 수정버튼을 누르면 특정 div가 보이고, 원래 보이던 div는 안보이도록 해서 댓글을 수정할 수 있는 공간이 나타나도록 했다. 물론 아직 axios와 json server를 사용하지 못해서 기능구현은 아직 멀었지만, 그래도 뭔가 강의를 듣고 정리를 해보니까 어느정도 감이 잡히는 것 같다. 어렵긴하지만 뭐 매주 어려웠으니 이젠 그러려니 한다. 일요일에는 남은 thunk, optimizing, customhook, s3 서버배포를 마무리하고, 시간이남는다면 팀과제 프로젝트에서 기능까지 어느정도 만들고 싶다. 끝

오늘 리액트 심화주차가 시작됐다. 첫날은 SA를 작성하고 역할을 분담하고, API명세서를 작성하고, 기초적인 View를 만들어두었다. 강의도 별로 못들었다. 코로나검사를 받느라 몇시간을날렸고, 상태도 좋지않아서 집중도 잘 안됐다. 아마도 이번주는 힘든 한 주 가 될 것 같다. 오늘 협업을 하면서 처음으로 브랜치를 나누어봤다. 브랜치를 나눠 자신이 작업을 하고, 그걸 main에 merge하는 형식으로 진행했는데, 해본적이 없던 거라 너무 어려웠다. 그리고 github desktop을 사용했었는데, 이런 걸 어떻게 해야 할 지를 몰라서 내 브랜치에 push하는 용도로만 사용하고, 터미널에서 git remote update, git pull origin main으로 메인을 pull해오고, 깃헙 웹사이트에서 직..

오늘은 주특기 숙련주차 시험을 봤다. 문제는 개인과제에서 구현한 Todo리스트 추가, 제거, 변경, 상세보기페이지 기능구현이었다. 직접 개인과제에서 작성한 코드들이 있던 터라 문제에서 원하는 방향으로 풀지 못한 것 같다. 특히 상세보기페이지에서 useEffect를 사용해서 리듀서에서 action에대한 state를 가져오고, 그 state를 보여주는 걸 했어야 했는데 하지 못했다. useEffect를 사용하지 않다보니 생각도 안나서 그냥 과제에 했던대로 find를 사용하여 컴포넌트자체에서 useSelector을 사용해 특정 요소를 찾는 형식으로 풀었다. 끝

오늘 드디어 개인과제를 마무리했다! 제거하기와 변경하기 기능을 작성하는데 애를 먹었다. 리듀서에서 해야하는 일을 컴포넌트단에서 함수로 해결하려고하니 오류가 발생했었다. onClick속성안에 함수를 넣는 방식이 틀려서 렌더링시 Todo들이 삭제되는 일이있었다. 화살표함수로 넣도록 하자 컴포넌트에 이름을 붙일 때 좀더 생각하고 붙여야겠다. 컨벤션같은게 있는 것 같은데 아직은 잘 모르겠다. 불린값을 비교할 때, 예를들어 map 안에서 비교할때, ! 느낌표를 좀더 잘 사용해야겠다. 실무에서도 ~~ === false 보다 !~~ 로 많이 작성한다고한다. 직접 보기에도 가독성도 좋아서 좀 더 생각하고 코드를 작성해야 겠다는 생각이 들었다. 리덕스, 리액트 라우터 돔, 스타일드 컴포넌트 다 솔직히 어려웠다. css를..

오늘은 숙련주차 개인과제를 더 다듬었다... 일요일부터 해결되지 않았던 삭제와 isDone변경버튼에 대한 오류를 해결했다. 컴포넌트단에서 State값을 변경해서 리듀서에서 값을 그대로 입력하려 했지만, State의 구조가 배열속 객체여서 뭔가 중간에 자꾸 어긋나는 부분이 있어 잘 작동하지 않았다. 팀원분인 성배님께 질문했을 때 리듀서에서 분류를 하는게 어떻겠냐는 조언을 받아서, 리듀서에서 filter과 특정 메소드들을 사용해서 삭제와 변경함수를 완료했다. 그리고 onClick에 함수를 넣는 방식에도 문제가 있었다. 이런 형식이었는데, 이렇게 작성하면 자동으로 onClick을 실행하게되어 모두 삭제가 됐었다. 그래서 아래처럼 표현방법을 바꿨고, 정상적으로 작동했다. handler(todo.id)} /> h..

오늘은 주특기 숙련주차가 시작되었다. 저번주에 배운 내용을 복습하고, styled component와 redux에 관해 배웠다. styled component는 어느정도 예제를 보면 CSS와 매우 흡사하기 때문에 감이 왔는데 redux는 너무 어렵다... 여기갔다 저기갔다 데이터 옮겼다가 받았다가 보냈다가 표시했다가 어지러웠다. 어렵다. 저번주가 쉬운거였따. 공부하던 중 저번주에 궁금했던 것이 풀려 남기려고한다. batching 저번 개인과제에서 추가하기 버튼에 콘솔을 찍어 works 배열이 잘 추가되는지 확인해보려고 한 적이 있었다. 근데 추가버튼을 눌렀을때 이전 works값이 나오고, 다음껄 추가하면 그때서야 콘솔로그에 보였었다. (1개씩 밀려서 해당번차에 추가한건 안보임) 이때는 왜인지는 몰랐고, ..

[1,2,3]이라는 배열이 RAM에 저장되고, arr이라는 변수는 그 공간을 통하는 길을 담는다. 따라서 얕은 복사를 하게되면 통하는 길이 같기 때문에, 배열, 객체의 요소를 우리가 바꿨다고 생각하더라도, 그 길은 변하지 않아서 컴퓨터는 State값이 변하지 않았다고 판단하여 리렌더링하지 않는다. {works .map((work) => { if(work.isDone === false) { return ( ); } else { return null } })} 이 코드에서 오류가 발생했을 때, 아마 isDone을 변경하는 함수인 changeWorkHandler에서 얕은 복사를 하고 isDone을 변경하는 형식으로 작성했던 것 같다. 정확히 어느부분에서 State의 변경을 인식하지 못한 것인지는 모르겠지만, ..

오늘은 팀과제를 마무리했다. 양방향 데이터 바인딩에 관하여 이해가 안가서 슬랙에 질문해보았고, 아직 Vue.js에 대해 알지 못하기 때문인 것 같아, 개념정도만 이해하고 넘겼다. 스터디 팀원분의 코드를 보고 새로 알게 된 것에 대해 정리하고, 기술매니저님의 코드리뷰에대해 써보려고 한다. function Child({ a, b, c}) => { } function Child(props) => { const { a, b, c} = props } 위는 자식 컴포넌트의 매개변수에서 props를 구조분해할당한 것이고, 아래는 const를 이용하여 따로 구조분해할당을 한 것이다. 저런 방식으로하니 더 깔끔해 보여서 남기려고 했다. 기술매니저님의 코드리뷰 //Work 추가하기 버튼핸들러 const addWorkHan..

오늘 리액트 입문주차 개인과제를 vercel을 이용하여 배포하고, README도 작성해보았다. 그리고 몇가지 코드를 수정한 것이 있어 이걸 작성해보고자 한다. //Work 추가하기 버튼핸들러 const addWorkHandler = () => { const newWork = { id: works.length+1, title: title, desc: desc, isDone: false, }; setWorks([...works, newWork]); //인풋태그value 제거하기위함 setTitle(''); setDesc(''); }; State에 값을 추가하는 버튼에대한 핸들러함수이다. 여기서 id값을 works.length+1로 주는데, 스터디팀원분인 이재정님께서 문제점을 제기해주셨다. 우리는 삭제버튼도 ..