좋은 SW 개발자되기

KEEP 오늘의 좋았던 경험 서버랑 연결해서 토글을 켜면 로그가 잘 기록되도록 구현했다. 중간중간 고쳐야할 에러가 많았지만 잘 고쳐서 잘 되는 것을 확인했다. 이제 비로그인일때 어떻게 해줘야할지 조금 더 생각해서 마무리 하면 될 것 같다. 정보를 받아오거나 요청을 할 때 반복적으로 해줘야하는 것을 한번에 처리해줄 수 있는 axios interceptor를 사용해서 한 번에 처리해줄 수 있도록 만들어주었다. 해주는 방법이 없을까 했는데, 다른 팀원이 할 수 있는 방법을 금방 찾아줬고, 그걸 참고해서 적용해 줄 수 있었다. interceptor라는 것을 알게돼서 Loading을 구현하는 것도 interceptor로 한번에 처리해줄 수 있게 되었다. PROBLEM 고쳐나갈 경험 중간중간에 발생한 에러를 기록을..

우선 CSS로 글자를 자르기 위해서는 글자가 출력될 너비가 필요하다. 그리고 너비를 가질 수 없는 경우에는 너비를 가질 수 있게 변경해야 한다. 요소는 block값으로 변경하면 요소의 너비는 부모 너비의 100%를 차지하도록 변경된다. 만약 inline-block으로 변경하면 직접 요소의 너비를 설정해야 한다. 즉, 일정한 고정된 너비를 가지는 것이 전제 조건이다. 글자수가 해당 너비를 넘어서게 되면 자동으로 줄바꿈이 이루어지는데, 줄바꿈을 안하게 하려면 white-space 속성을 nowrap 으로 하면 줄바꿈이 되지않는다. 그러면 너비를 벗어나서 글자가 나오는데 넘치는 부분을 안보이게 해주는 overflow 속성에 hidden을 주면 넘치는 부분을 화면에서 숨긴다. 그리고 숨겨진 부분을 text-ov..

KEEP 오늘의 좋았던 경험 뒤로 미뤄놓았던 Home 페이지에서 스트리밍 목록 fuzzy를 이용한 검색기능, 필터기능을 추가했다. 목록 데이터만 받아오면 된다. 근데 꼭 fuzzy로 스트리밍 목록을 검색해야하는지 고민해보고, fuzzy에 대해서 좀 더 알아볼 필요가 있을 것 같다. 스트리밍 목록 그리드 정렬을 대폭 수정했다. 수정하면서 css로 글자가 박스를 넘어가면 ... 처리 해주는 방법을 배웠다. CSS로 글자 자르기 PROBLEM 고쳐나갈 경험 자잘자잘한 오타나 기능구현 에러가 있어서 같은 작업을 여러번 해야했다. 특히 사이드 로그 깜빡거리는 문제를 해결하려고 사이드로그의 offset 위치를 변경했는데, 이게 더 큰 문제를 일으켰다. 사이드 로그를 켜놓은 상태에서 화면을 줄이거나 늘리면 사이드 로..

KEEP 오늘의 좋았던 경험 LogChart 부모 컴포넌트의 크기에 맞게 맞춰지도록 구현하는데 성공했다. 그래서 LogChart 컴포넌트를 재사용하기가 용이해졌다. 근데 조금 아쉬운점이 부모 컴포넌트의 높이가 290px 이하로 작아졌을 때 그 이하로 작아지지 않는게 조금 아쉽다. SideLog 모바일 버전과 웹 버전을 다르게 만들어 주었다. gsap이 어떻게 작동하는지 조금 더 이해할 수 있게 되었다. 클라이언트에서 crypto를 사용해서 보안을 더 높여줄 수 있다고 생각했는데, 오늘 리플렉션 시간에 피드백을 듣고 아닐 수도 있다는 것을 알게 되었다. PROBLEM 고쳐나갈 경험 cryptojs를 사용하는 데 있어서 보안을 더 높여줄 수 있겠다는 생각을 했는데, 너무 시야를 좁게 생각했다. 새로운 스택을..

KEEP 오늘의 좋았던 경험 클라이언트 배포를 했다. 내가 직접하지는 않았지만, 다같이 보면서 생각보다 수월하게 성공해서 마음 편하게 코드작업만 해나가면 될 것 같다. 어제부터 고민하던 로그차트 로직구현을 완료했다. 로직을 만들면서 과연 api요청하는 것도 잘 연결할 수 있을까 걱정했지만, 잘 한 것 같다. 직접 테스트는 못해봤지만, 잘 될 것 같다. 서버 요청 관련해서 벡엔드 포지션인 팀원과 소통이 잘 되었다. 수정이 필요한 부분을 이야기 했을 때 바로바로 적용이 됐고, 어떤 파라미터가 필요한지, 어떤 값을 주는지 이런것들에 대한 소통이 잘 이루어져서 api코드 작성도 수월하게 할 수 있었다. PROBLEM 고쳐나갈 경험 지금 나눠져있는 태스크 중에서도 새로 추가해야하거나 새로 생기는 경우가 있는데, ..

토글 아래 보이는 것 처럼 시간을 기록하면 차트에 막대 그래프 처럼 채워지는 10 minute chart를 구현해야 한다. 처음 구상한 로직은 하루를 분으로 계산하면 1440분 이니까 차트를 144개 박스로 나눠서 시간 정보를 받으면 분으로 환산해서 10으로 나누면 144개 박스에 대한 index로 해당하는 박스에 막대를 채워주면 될 것이라 생각했다. 그 결과는? Uncaught RangeError: Maximum call stack size exceeded 144개의 빈 배열에 시간 정보가 있으면 그것에 해당하는 색깔을 값으로 넣어주고, 없으면 빈 문자열을 넣어줘서 한칸 한칸 채워주는 식으로 로직을 짜다보니, 매번 시간 정보를 받아올 때 마다 144번의 계산이 이루어지고, 쓸데없는 작업을 시켜주고 있었..

KEEP 오늘의 좋았던 경험 현재까지는 문제없이 git을 잘 사용하고 있다. TopBtn을 원하는 기능에 맞게 만들었다. PROBLEM 고쳐나갈 경험 Slider 넘어가는 것 처럼 보이는 애니메이션 구현하는 것을 시도해보다가 벽을 느꼈다. css를 다뤄야하는 부분이라 잠시 미뤄뒀다가 모든 기능 구현을 마치고 시간이 남으면 다시 시도 해봐야 겠다. 그렇게 급하지 않는 것에 계속 매달려있지 않아야겠다. LogChart 로직 구현이 너무 어렵다. 처음 10분 단위로 박스를 만들어서 구현해보려고 시도했는데, 너무많은 리렌더링을 한다고 에러가 나서 다른방식으로 구현해야할 것 같다. 어떻게 해줘야할지 아직 떠오르지가 않는다. TRY 시도해볼 일 LogChart 로직 구현하기.

KEEP 오늘의 좋았던 경험 Slide 구현. 유투브 영상보고 따라서 만들어봤는데 잘 된다. 가만히 있어도 상태를 바꿔줄 수 있는 방법을 배웠다. setInterval을 사용하면 된다. clearInterval도 잘 사용해 주어야 한다. 반응형 Grid 구현. 페이지 크기마다 Grid를 잘 나누어서 만들었다. 근데 데이터를 받아와서 넣었을 때 원하는 대로 구현이 될지가 조금 걱정이다. first project 할 때는 쉬는시간 거의없이 작업했는데, final project는 틈틈이 쉬는시간을 잘 가지면서 무리하지 않고 잘 해나가고 있는 것 같다. PROBLEM 고쳐나갈 경험 코드를 작성할 때 체계적으로 작성을 잘 못하는 것 같다. 만들다 보면 앞에 작성한 걸 수정할 때가 생기는데, 찾는게 힘들어지는 경향..

KEEP 오늘의 좋았던 경험 토글 로직을 완성했다. 하나의 토글을 켜면 다른 토글은 꺼지는 것까지 구현했었는데, 해당 토글만 켰다 끄려고 할 때 끄는게 안됐었다. 그래서 차근차근 왜 안되는지 원인을 찾으려고 코드를 하나하나 뜯어봤다. 내가 누른 토글이 어떤 것인지를 명확하게 알아야 했고, id값을 부여해서 해결해 줄 수 있었다. 파일 업로드를 구현해봤다. 생각보다 간단했다. 앞에 같은 포지션 팀원이 잘 만들어놔서 따로 찾아보지 않아도 만든 것을 참고 해서 쉽게 만들 수 있었다. 컨디션 조절을 잘하고 있는 것 같다. PROBLEM 고쳐나갈 경험 토글 로직만 생각하다보니 서버에 요청해야하는 것을 깊게 생각안하고 코드를 작성했다. 그래서 서버요청하는 것을 추가하면 뭔가 많이 잘못될 것 같은 느낌이 들었는데, ..