좋은 SW 개발자되기

KEEP 오늘의 좋았던 경험 Viewer, Studeamer 페이지 목업 구현을 했다. 화면 송출 데이터만 잘 연결되면 우리가 하려는 기본 기능들은 모두 구현이 완료된다. PROBLEM 고쳐나갈 경험 Slider에 일정 시간마다 이미지 파일을 바꿔주는 식으로 slide를 구현했는데, 이렇게 하다보니 매 일정 시간마다 get요청을 해야하는 문제가 있었다. 그냥 구현만 하는데 집중해서 하다보니 이런 문제는 신경쓰지 않았던 것 같다. TRY 시도해볼 일 CSS 작업 Slide 다시 만들기

KEEP 오늘의 좋았던 경험 기능이 잘 되는 것을 보니까 뿌듯하다. 기능이 제대로 작동 안하는 것이 생각보다 많았지만 모두 찾아서 해결이 잘 된듯 하다. 토글로직을 리팩토링 해보았다. 조금 더 변수명을 직관적으로 어떤 흐름인지를 파악할 수 있도록 다시 작성해 보았다. 전에 썼던 코드보다는 좀 더 보기 좋아진 것 같다. PROBLEM 고쳐나갈 경험 사용자 권한(회원, 비회원, 소셜로그인, 게스트로그인)을 구분지어서 명확하게 해놓지 않아서 기능을 구현하면서 어떻게 해 놓아야할지 헷갈리는게 많았다. TRY 시도해볼 일 사용자 권한 명확하게 구분하기 fuzzy 자음만 쳐도 일치하는 목록 나오게하는 옵션찾아보기

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 로직 구현하기.