삐옹

새로 기획한 팀노트 프로젝트의 뷰가 다시 어느정도 잡혔다 원래 있던 기획에서 디자인적으로나 기능적으로나 간소화해서 다시 만들고있다. 원래 기획대로하면 취업하는 동안엔 못 끝낼 것 같아서.. 가장 큰 문제는 메인페이지에 들어가는 컨텐츠가 너무 많아서 완성도가 많이 떨어져보였다. 내일부터는 메인페이지, 보드페이지, 채팅페이지, 달력페이지 차근차근 기능을 개발해가면 된다. 이번에는 구현에만 집중말고 내가 지금 치고있는 코드가 왜 필요한가에 대한 고민을 하면서 만들어보자!

8월 12일을 끝으로 3개월 간의 항해 7기 과정 수료! 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻 개인적인 후기 주의 지금 느끼는건 고생 끝!이 아니라 또 다른 고생길이 또 열려있는 느낌이다. 그간의 노력들이 빛을 낼 수 있도록 해온 모든 것들을 잘 다듬고 보충해야지만 기어코 취업의 기회를 잡을 수 있을 것이다. 힘들게 달려온만큼 7기 동기들 모두 마무리도 잘 해서 건승하길 바라는 마음이다. 도움이 될지 모르지만 언젠가 예비 항해 수강생이 될지도 모르는 분들을 위해, 짤막후기를 남겨보고자 한다. 좋았던 점 매니저님의 꾸준한 관리 매니저님이 긴 시간을 게더(지겹게 쓰게 될 메타버스 기반 서비스)에 상주해 계신다. 문제가 생기면 바로바로 이야기를 나눌 수 있고 언제든 수강생들의 이야기와 고충들을 진심으로 들어주셔서 힘들때..

원하는 방에 입장한 후 board, calendar, talk 페이지로의 이동을 구현해야했다. 사전에 방에 입장 할 떄마다 그 방의 고유 id 값을 이용해 동적 라우팅 처리를 해두었다. 그과정에서 일어난 이슈를 정리해보았다. Trouble Shooting 라우터가 동작하지 않는 현상 발생😵‍💫 고치기 전 코드 return ( ... // map을 이용해 3개의 Link를 뿌려주고 있다 {{pages.map((page, idx) => { const pageNameToLower = page.toLowerCase(); return ( handleSelectedPage(e, idx)} className={`list-item ${ selectedPage[idx] ? "list-item_clicked" : "" }..

오늘 고맙게도 개발자 지인에게 코드리뷰를 받을 기회가 있었다. 코드리뷰 내용을 페이지 별로 정리해보았다. 공통 1. 에러처리 => 토스트 2. 라우터에 스피너 처리 => 라우터에 스피너 없어도 될듯 차라리 로고 넣는게 낫다. 부분적으로 스피너 넣기 (컨텐츠 들어가는부분) 3. props로 넘겨주는 함수들은 해당 컴포넌트에서만 봐도 알 수 있도록 명시적으로 작성해준다. => state, setState 넘겨주기 x, onclickGoToLogin() 처럼 이벤트로 넘겨주기 o => True/false 값은 is- 로 시작한다. 4. 문자열 입력시 js에선 싱글쿼트(''),jsx에선 더블쿼트("") 로 구분하는 것도 좋은 방법 5. 객체분해 상단에서 쓰는거 조심 => 없을 때 에러 날 수 있음. 옵셔널 체이..

react에서 새로고침 시 지역 혹은 전역 state값들이 초기화되는 문제를 해결하기 위해 redux-persist를 써야하는지 고민이 생겼다. okky와 개발자 아는 형들에게 물어본 결과 redux-persist를 쓰는 걸 추천하지 않았다. 지금 상황에서 가장 간편한 방법은 localstorage에 토큰을 저장시켜놓고 그 토큰으로 매 새로고침 때마다 요청을 해서 상태값으로 저장을 시키는 것이다 난 지금까지 localstorage에 토큰, 사용자의 이메일, 이름을 저장해서 필요할 때마다 쓰고 있었는데 사용자의 정보를 localstorage에 저장하는 것은 좋지 않다고 한다. 공용피씨에서 로그아웃하지 않은 상태가 된다면 다른 사람이 localstorage에 접근해 정보를 볼 수 있기 때문인걸까. 결론 l..

출시 꼴등? 출시가 많이 늦어지고 있다. 출시일을 맞추기 위해 밤을 샌 날도 많았지만 결국은 이렇게 됐다. 출시일을 맞추지 못 했다는 아쉬움과 부족한 실력에 눈 앞에 것들을 해결해나가는데만 급급해 중요한 것 들을 놓친 것만 같은 찜찜함이 섞여 무기력해지는 순간이 종종 찾아왔었다. 늦었지만. 하루 더 밤을 새서 월요일 오전에는 출시를 할 생각이다. 비록 가장 늦게내는 조였다 하더라도 너무 좌절하지 않기로 했다. 결과물도 마감기한도 중요하지만 내가 열심히 했다는게 가장 중요하니까. 수료가 코 앞 이제 정말 얼마 남지 않았다! 오늘 서버배포를 하고나면 트러블 슈팅을 꼼꼼히 정리해야겠다. 난 참 옛날부터 뭔갈 기록하고 메모, 분류 해놓는걸 잘 못하는데.. 그런걸 잘 하는 사람들을 보면 정말 부럽다.. 나도 잘 ..

문제 소속된 워크스페이스 목록을 조회하는 요청과 내가 받은 초대장 목록을 조회하는 요청(GET요청 x2)이 2개의 useEffect 안에서 실행되고 있다. 전역 state를 이용해 같은 slice의 다른 키 값으로 업데이트 요청을 보내는데 소속된 워크스페이스 목록의 값을 잘 불러왔다가, 또 어떤 때는 값이 들어왔다가 다시 초기값으로 돌아가는 상황. Redux로 저장한 배열의 값이 여러번의 렌더링을 거친다. 초깃값 -> 업데이트 -> 초깃값 or 초깃값 -> 업데이트 패턴으로 리렌더링 할 때마다 들어오는 값이 달라짐 그래서 어떤 때는 배열 값이 비어있어서 에러가 뜨고 또 어떤 때는 잘 읽어온다. 예) 첫 렌더링 - arr = Array(0) / 두 번째 렌더링 - arr = Array(3 ) / 세 번째 ..

상황 워크스페이스를 누르면 해당 워크스페이스의 이름을 가져와 화면에 뿌리고 새로고침 했을 때도 유지되게끔 하기 문제 const [workSpaceName, setWorkSpaceName] = useState(""); // 2 useEffect(() => { localStorage.setItem("workspace", workSpaceName); // 3 }, [workSpaceName]); ... return ( ... workspaceList.map( ... return { setOpenDropdown(false); setWorkSpaceName(item.split("+")[1]); // 1 }} > ...) ... ) li태그 클릭 -> state 업데이트 -> ls(local storage)에 저장..

나만 이럴까 어느덧 프로젝트를 시작한지 벌써 1달이 되었다. 실력은 정체된 느낌으로 마구잡이로 하고있다는 생각이 많이 드는 요즘이다. 아무래도 백엔드 팀원들의 속도를 맞춰주고픈 조급함과 부담감때문에 팔다리는 바쁘게 움직이지만 앞으로 한 발짝도 나아가고 있지 못 하는 사람이 된 느낌이다. 이럴때일 수록 조급함을 내려놓고 좀더 여유를 갖고 가는게 맞는걸까. 결국엔 발표날이 끝이 아니니까. 그러면서도 한편으론 발표날 꽤나 완성도있는 작품을 보여주고 싶은 욕심에 또다시 조바심이 드는건 어쩔 수 없다. 여유를 갖고 후회 없이 열심히 하는게 답인가보다. 내일은꼭...! 워크스페이스 유무, 워크스페이스 선택 유무에 따라 다른 화면을 보여주는 과정이 요 며칠 나를 미치게하고 있다. 이게되면 저게 안되고, 저게되면 이게..

로그인을 어떻게 유지하고 있냐는 멘토님의 기본적인 질문에 답하지 못 했다. 정말 창피하다.. 한참 전에 로컬스토리지에 로그인 유저 정보를 담아 그 정보의 유무로 App.js에서 라우팅을 해줬었는데, 그 후 로그인, 회원가입 부분에서 큰 코드 수정이 있었다. 리덕스에 상태관리를 했던 것 같기도 했는데.. 내가 써놓고 내가 기억도 못 한다니 참 답답했다. 멘토님도 그 부분을 캐치하시고 처음부터 로직이 명확하게 짜여지지 않은게 문제라고 하셨다. 로그인을 하고나서 새로고침을 했을 때 그 상태를 저장하는 로직이 보이지 않는데, 지금 어떻게 로그인 유지를 하고있나요? 머리를 세게 맞은 느낌이었다. 아파.. 그래서 로그인을 하는 플로우와 방법을 명확하게 다시 정리해본다.