좋은 SW 개발자되기

프로젝트를 시작할 때 가이드 해준 프로젝트 평가 기준 및 당부사항을 기반으로 프로젝트에 대한 것과 느낀점을 회고해 보고자 한다. 1. 프로젝트 문제해결 및 기획 UI보다는 UX를 고려했는가? 확실히 UX를 많이 고려해서 만들었다. 회원가입시 메일인증 링크를 타고 오면 정회원이 될 수 있고, 로그인을 할 때 랜딩페이지에서 로그인을 하면 바로 홈 화면으로 이동하며, 비로그인으로 서비스를 이용하다가 로그인이 필요한 서비스를 이용할 때 그 자리에서 바로 로그인을 할 수 있도록 유도해 놓았다. 핵심기능을 완성해서 구현해냈는가? 우리의 핵심기능은 스트리밍 서비스이고 우리가 할 수 있는 선에서 문제없이 잘 구현해내었다. 스트리밍을 시작한 본인 포함 총 5명이 한 곳에 모여서 채팅이 가능하고, 스트리머가 송출하는 화면..

KEEP 오늘의 좋았던 경험 마이페이지의 사이드바에 브라우저 창을 줄이면 디자인이 깨지는 것을 해결했다. 원래 해주고 싶었던건 스크롤을 생기게해서 깨지는 것을 없애주고 싶었지만 x축도 같이 스크롤이 생겨서 원하는 방향이 아니어서 높이를 반응형으로 조절해줘서 해결해 주었다. 계획했던 기능 구현을 마무리했다. 필요없는 파일정리, 코드 정리를 하고 발표준비에 돌입했다. 눈에 보이는 버그나 에러가 조금 있지만 일단은 발표준비에 집중해서 잘 마무리 한뒤에 수정해 줘야할 것 같다. PROBLEM 고쳐나갈 경험 점점 프로젝트를 진행하면서 잠이 늦어지는 것 같다. 그러다보니 늦잠을 자게되는 경향이 있다. TRY 시도해볼 일 발표 자료 정리하기

KEEP 오늘의 좋았던 경험 스트리머 페이지의 방제목 변경 기능과 방송종료 버튼을 만들어 주었다. 민수형은 소켓 서버쪽을 작업해주고 나는 클라이언트 쪽에서 작업을 해서 기능을 완성시켰다. 메인 컨텐츠에서 스트리밍 목록에 타이틀 길이가 범위 밖으로 벗어날 때 (...)잘림 처리 해줬는데, 그 부분이 이상해진 것을 해결해주었다. css로 글자를 자를 때, 높이나 너비를 정해줘야하는데 타이틀이 각 컨텐츠의 자식엘리먼트로 있다면 높이나 너비 설정을 해주지 않는 것이 더 자연스럽게 글자를 잘라줄 수 있다는 것을 알게되었다. 기획했던 bare minimum 기능은 모두 구현을 완료했고, 랜딩페이지도 마무리 했다. 배포 환경에서 다같이 채팅 테스트도 했는데, 로컬에서 했을 때는 메시지를 7개 정도 왔다갔다하면 반응이..

KEEP 오늘의 좋았던 경험 스트리밍에 참여해서 들리는 소리를 끄고 켤 수 있는 기능을 구현했다. audio 엘리먼트를 만들고 useRef를 활용해서 소리를 끄고 켜는 기능을 만들었다. 기본으로 기획했던 기능은 모두 구현이 완료된 듯 하다. 하나씩 미뤄놨던 기능이나 디자인을 완성해줬고, 이제 만들고 나서 보이는 에러나 디테일적인 부분을 수정해주면 될 것 같다. PROBLEM 고쳐나갈 경험 오디오 끄고 켜는 기능을 구현할 때, 기능을 완성하긴 했지만, 기존에 방법이 왜 안되는지 명확하게 설명하라고 하면 못할 것 같다. 그냥 느낌상 정지시켜줘야할 오디오가 어딨는지 명확하게 구분되어있지 않아서 잘 안된거라고 생각이 들어서 audio 엘리먼트를 만들어서 해결해 준 것이다. 무언가를 해결하더라도 어떻게 해결이 된..

KEEP 오늘의 좋았던 경험 DrawSVG로 welcome intro 구현. gsap에서 사용하면 유료인데, css로 구현하는 방법을 찾아서 할 수 있어서 좋았다. 가장 기본적인 방법으로 만들었어서 좀 더 다른 애니메이션이 추가된 DrawSVG를 만들고 싶었지만 그러지 못했다. Home 화면 디테일 작업을 했다. 슬라이더 사진을 꽉찬 사진으로 바꿔줬다. 바꿔주니 홈 화면이 더 괜찮아졌다. 각 스트리밍 리스트에 스트리밍이 언제 시작되었는지 알려주는 timestamp를 만들어서 추가해주었다. 만든지 1분이 안됐을 때 방금 전이라고 표시해주는 디테일을 살려주었다. Streamer 페이지 디자인 완료. 금방 할줄 알았는데 생각보다 시간이 많이 걸렸다. 그래도 전체적인 부분에서는 건들 부분이 없을 정도로 만들어놔..

KEEP 오늘의 좋았던 경험 배포 클라이언트와 서버를 연결시켰다. 여러 명이 동시에 접속해서 송출화면을 볼 수 있었고 채팅도 칠 수 있었다. 근데 조금씩 문제점이 보였고, 하나씩 수정해 나가야 한다. 점점 프로젝트가 완성에 가까워 지고있다. 랜딩 페이지 CSS작업을 더 진행했다. 3번째 랜딩 섹션에서 웹 크기를 줄였다 늘리면 위치가 이상해지는 문제가 있었는데, pin 효과를 주면 pin-spacer라는 것이 생겼는데, 여기서 inset 속성이 자동으로 바뀌면서 위치가 이상해지는 문제가 발생한듯 해서 inset: none을 해주니 해결이 된 듯 하다. CSS로 wiggle 효과주는 방법을 배웠다. gsap의 DrawSVG를 이용해서 첫 페이지 시작을 멋있게 하고싶었는데, 알고보니까 유료로 사용할 수 있는 ..

KEEP 오늘의 좋았던 경험 랜딩 페이지 애니메이션을 구현했다. 혼자할 때는 어떻게 해야할지, 뭘해야할지 감이 잘 안왔었는데, 같은 포지션 팀원과 같이하면서 gsap에 대해 더 잘 이해를 할 수 있었다. 랜딩 페이지가 점점 완성되어 가고 원하던 애니메이션을 구현해내서 뿌듯하다. ScrollTrigger, pin 속성을 사용해보았다. 내가 뭔가 찾을 때는 뭔가 없어보였는데, 같이 작업한 팀원은 뚝딱뚝딱 잘 찾아오는 것 같다. 그래서 수월하게 애니메이션을 잘 만들 수 있었다. 저녁에 바람쐬고 오니까 머리가 맑아 지는 기분이 들었다. PROBLEM 고쳐나갈 경험 아직 배포환경에서 테스트를 못해본 것이 조금 걱정이된다. 남은 시간 동안 침착하게 잘 해나가면 잘 되리라 믿는다. 랜딩 페이지 애니메이션을 주고 하나..

KEEP 오늘의 좋았던 경험 채팅 자동완성 후 엔터키를 누르면 보내지도록 기능을 수정했다. 처음에는 입력할 필요가 없어서 굳이 input 태그로 만들지 않고 div로 만들어서 채팅을 구현했었다. 근데 이렇게 했을 때 Enter키로 채팅을 보내는 것이 안됐고, 다시 input태그로 바꿔주는 작업을 했다. 그리고 input에서 readOnly라는 속성을 주면 아무것도 입력할 수 없도록 만들 수 있었다. 랜딩 페이지 작업을 시작했다. 점점 프로젝트 마무리가 다가오고 있다는게 느껴진다. 지금까지 해온 것 처럼 끝까지 해나가면 좋은 결과물이 나올 것 같다. PROBLEM 고쳐나갈 경험 리액트에는 수많은 기능들이 있는데, 좀 더 알아보려고 하지 않고 그냥 알고있는 선에서 해결하려고 하는 느낌이 있다. 몰라서 안쓰는..

KEEP 오늘의 좋았던 경험 Slider를 수정했다. 기존에는 일정 시간이 지나면 img file을 변경해주는 식으로 구현했는데, 수정 후는 이미지를 필요한 부분 외에는 숨겨서 translate 해주는 식으로 바꿨다. 이렇게 해 줬을 때 브라우저에서 일정 시간이 지날 때마다 이미지를 불러오는 것을 막아줄 수 있었다. Viewer 페이지 목업을 마쳤다. 스트리머가 송출한 화면을 잘 받아오고, 채팅 기능만 완성하면 된다. PROBLEM 고쳐나갈 경험 거의 다 한 것 같으면서도 할 게 많이 남은 것 같은 느낌이 든다. 지금 남아있는게 무엇인지 꼭 해야하는 것이 무엇인지를 잘 인지하고 있어야겠다. Slider를 다시 수정할 때 다른 코드를 참고해서 만들었는데, useRef를 사용해서 만들어 놓은 부분이 아직 명..