좋은 SW 개발자되기

위에 보이는 것 처럼 토글 스위치를 켜면 아래 로그차트에 공부한 시간이 기록되는 것을 시각화 해주어야 한다. 그러기 위해서는 토글을 켜고 끌 수 있는 로직을 만들어야하고, 두개 이상이 동시에 켜지면 안되도록 해줘야 한다. 이 기능을 구현하는 과정을 기록해보고자 한다. 토글 디자인을 다 마치고 토글을 켜고 끄는 로직, 하나 켜져있는 상태에서 다른 토글을 키려고 할 때 켜져있던 것을 꺼지도록 해주는 로직을 만드는 과정에서 문제가 생겼다. 어떤 문제인가요? 기본적으로 하나의 토글을 켜면 다른 토글은 꺼져야한다. 하나의 토글을 켜면 다른 토글은 꺼지는 것이 구현은 되었으나, 해당 토글만 켰다 끄려고 할 때 끄는게 안된다. 현재 코드 const [toggleBox, setToggleBox] = useState([..

KEEP 오늘의 좋았던 경험 gsap 사용해서 SideLog가 애니메이션으로 나오게 하는것, 토글 움직이게 하는 것을 구현했다. 아주 간단한 애니메이션이라 어렵지않게 할 수 있었던 것 같다. 조금 더 복잡한 애니메이션을 구현하려면 더 공부해야 할 듯 하다. redux-persist로 로그인 상태를 로컬에 저장해서 로그인 상태 유지시키는 것을 가능하도록 만들었다. 로그인 상태 뿐만 아니라 유저 정보같은 것도 로컬에 저장해서 사용하면 편리할 수도 있을 것 같다. PROBLEM 고쳐나갈 경험 오늘 오후에 merge하는 과정에서 conflict가 나서 merge를 못하다가 다른 팀원이 혼자서 해결해서 더 큰 문제가 생기지는 않았지만, conflict가 나기전에 각자 하고있는 업무가 어떤건지 잘 파악하고 있다가 ..

KEEP 오늘의 좋았던 경험 타입스크립트를 사용하려 했지만, 생각보다 쉽게 써질 것 같지 않아서 나중에 리팩토링 하는 것으로 결정했다. 빠르게 결정해서 진행한 점이 좋았다. 지루한 SR 단계가 끝났고 코드작업에 들어갔다. 다사다난했던 초기셋팅을 마쳤고 기능구현을 시작했다. Modal Component를 만들었고, Signin 메일인증, OAuth 부분은 남기고 마쳤다. commit 메시지 규칙이 더 상세해져서 쓰는데 조금 편했던 것 같다. PROBLEM 고쳐나갈 경험 2주차 프로젝트를 진행하면서 쌓인 피로가 파이널 프로젝트로 까지 이어진 듯하다. 빨리 털어내고 컨디션을 회복할 수 있도록 노력해야겠다. 오랜만에 코드작업을 해서 그런지 버벅거리는감이 있다. 빠르게 적응하도록 노력이 필요하다. TRY 시도해볼..

KEEP 오늘의 좋았던 경험 파일 구조를 정리했고, Task카드 작성해서 해야할 업무를 정리했다. 그리고 어떤 전역 상태가 필요할지 고민해봤는데, 생각보다 많이없었다. 필요한게 있는데 인지를 못 한 것일 수도 있다. 그리고 다른 컴포넌트에서 필요한 상태가 무엇이 있을 지, 어떻게 존재해야 할지를 고민했는데 너무 어려웠다. 특히 공부 시간을 기록하기 위한 토글 상태와, 로그 상태를 어떻게 만들어 줘야할 지가 감이 잘안왔다. 그래도 같은 포지션 팀원이 토글 상태는 분야를 속성으로 같는 객체로, 로그 상태는 타입, 시간, 색깔 속성을 같는 객체를 담은 배열로 만들면 될 것 같다고 해줘서 어떻게 사용할 지가 감이 왔고, 다 같이 데이터베이스 스키마를 짜면서 어떻게 상태를 사용하면 될지가 그려졌다. 아직까지는 단..

KEEP 오늘의 좋았던 경험 프로토 타입 작업 완료. 만들어나가면서 수정될 부분이 많겠지만, 기본적인 틀은 완성했다. 최대한 처음 완성된 프로토 타입대로 구현할 수 있도록 해보자. issue template 작성. 이제 Github에서 TIL, Error Handling 관리를 할 수 있게 되었다. PROBLEM 고쳐나갈 경험 할 수 있을까? 라는 생각보다는 이렇게 하면되지라는 생각 갖기. 내일 하루도 고생하기. TRY 시도해볼 일 파일구조, 상태, 재사용 컴포넌트 상세화

KEEP 오늘의 좋았던 경험 SR단계에 돌입했다. 아이디어를 하나 정해서 프로토타입을 만드는 과정에 있다. 막연하게 구상했던 모든 기능들을 프로토타입을 완성해놓고 세세하게 기능들을 정리해 나가야할 것 같다. 여러 아이디어를 낸 것 중에서 빠르게 정해서 진행해 나간 점이 좋았다. 조금 더 참신한 아이디어를 생각하는 데 시간을 쏟는 것 보다 확실한 기능 구현을 하는 것에 초점을 두고 기획 단계에서 시간을 더 벌어서 완벽하게 구상하는 것이 좀 더 효율적이라고 생각했다. PROBLEM 고쳐나갈 경험 일을 벌려놓고 할 수 있겠지 하면서 프로토타입을 만들고 있긴 한데, 정말 가능 할 지 신중하게 고민할 필요는 있을 것 같다. 고쳐나간다기 보다는 한 번더 상기하는 의미로, 기획단계에서 철저하게 하나하나 구상해서 코드..

Keep (유지할 항목) 큰 문제 없이 first project 프로젝트를 잘 마무리 했듯이 final project도 잘 마무리 하기. Bare minimum 기능 구현에 그치지 않고 적극적으로 서비스 발전 시도하기. 공동 노션에 각자 TIL 작성하기 Problem (문제라고 생각하는 항목) 작업을 하다보면 밤늦게까지 잡고있는 경우가 있는데, 무리하지 않고 컨디션 관리 잘하기. SR 단계에서 초기에 정해주어야 하는 것 확실하게 잡고 가기. ex) 파일구조, 재사용 될 컴포넌트, 상태, 사용할 스택 등 Try (Action Items) SR 단계에서 꼼꼼하게 정하기 수면시간 철저하게 확보하기 redux-persist 사용하기, 반응형 웹페이지 제대로 구현하기

KEEP 오늘의 좋았던 경험 책장에 책 색깔 렌더링 될 때마다 색깔 변하던 것 안바뀌게 수정. 색깔 배열을 만들어서 배열안에 있는 색깔을 랜덤하게 추출 해서 styled component에 props로 전달해 주었는데, 매번 랜덤한 색깔을 넘겨주다보니 렌더링 될때마다 색깔이 변하는 현상이 발생했다. //아래처럼 해줘서 매번 같은 색깔이 들어가도록 해줘서 색깔이 매번 바뀌는 것을 고정된 색깔로 해주었다. const color = [ "#e76438", "#4f8f91", "#e48365", "#2c5854", "#eebb3a", "#3a506b", ]; //중략 {shelf.map((book, idx) => ( reviewHandler(book)} idx={idx} > {book.title.length >..

KEEP 오늘의 좋았던 경험 처음 기획한 기능구현을 모두 마치고, 클라이언트를 동작시켜 보면서 에러를 하나씩 해결해 나갔다. 그 중 만났던 에러는 delete API 요청이었는데, axios delete 요청에는 인자가 2개 들어 들어갈 수 있다. url, options이고, 어떤 값을 전달해 주고 싶다면 {data : {value : newValue} }이런 식으로 작성해주면 된다. 마이 페이지에서 읽고있는 책 부분에 최대 6개까지만 추가할 수 있도록 처음에 기획했지만, 더 들어가는 경우 select 창에 리스트화 해서 6개 이상도 들어갈 수 있도록 해주었다. select 에서 option을 선택하고, 다시 맨 처음 option이 보이도록 해주고 싶었고, e.target.selectedIndex = 0..