1. 99일간의 회고 저번 주, 무사히 최종 프로젝트를 끝내고나서, 99일간을 되돌아보았다. 항해를 시작하기 전, 나의 모습은 HTML과 CSS로 React로 웹의 구조잡기와 스타일링에 자신이 있었고, api 연결과 기능을 만드는 것에 어려움을 느꼈다. 지금의 나는 그런 어려움을 했다는 것조차 이상하다. 어떤 기능도 만들어낼 자신이 있다. 지금에서의 내가 신경써야할 부분은 프로그래밍 지식의 깊이다. 이 때까지는 레퍼런스로 활용한 블로그에서 깃헙에서 그 기술을 쓰니까 썼었다면 지금은 어떠한 기술을 적용하는 것이 현 프로젝트에 어울리는지 판단해야된다. 판단을 하기 위해서는 다양한 방면에서 지식을 쌓고 깊이를 채워야되는 것을 느꼈다. 이제 정말 개발자가 되기 위한 문턱을 넘었다고 생각한다. 앞으로를 위해 쭉쭉..
1. 머나먼 친척 클래스와 연결시켜주고 싶어라~ 오늘도 레이아웃에 고통받고 있는 1인이다. 오늘은 ck-editor이다. 모바일로 전환하면서 ck-editor의 오류를 잡아나가고 있는데, 해당 클래스가 sticky가 활성화되면 (sticky는 어느지점에서 fixed로 바뀌는 녀석이다.) sticky가 fixed가 될 때, 아주 멀고 먼 친척 클래스에 스타일링을 주고싶은데... 클래스가 부모로 엮여있지 않아서 참 난감하다. 제이쿼리에 hasClass 같은 녀석이 없나 찾아보았지만 결국에는 해결책을 찾지 못하였다. 가내수공업 중....🤣 이건 정말 아닌 것 같아서 도중에 그만뒀다. 해결책.. 찾을 수 있을까? console.log( EditorRef.current.childNodes[1].childNodes..
1. 오류핸들링 컴포넌트에 대한 레이아웃 확장성 고민 기존 오류 핸들링에 대해서는 메세지 컴포넌트가 담당하고있었고, 항상 기본 100vh에서 헤더의 높이를 뺀 나머지 height를 기준으로 50% 위치에 오류메세지가 나타나게 했었다. 기능에 대한 확장성을 이어나가다보니 아래의 문제상황이 나타나게 되었다. 이제는 투표함의 버튼들 밑에 메세지 컴포넌트를 넣어야되는데, 물론 이곳에서만 쓸 것 같다면 전체 height를 calc 사용해서 헤더부터 진행중인 투표까지 px을 뺀 나머지를 height로 사용하자고! 했겠지만 ^^.. 반응형디자인(모바일)과 확장성때문에 고민할 수 밖에 없었다. 그래서, 상황에 맞춰서 유동적으로 계산해줄 순 없을까 싶어서 찾아보게 되었다. 참고자료 https://mommoo.tistor..
1. 다시 불 지피기 이번 일주일간은 참 울고 웃고 화내고 감정기복이 참 심했던 한 주였다. 배려라고 생각했던 것들이 오히려 소통의 부재가 되어버렸고, 그것으로인해 오해와 편견을 끊임없이 쌓아서 거대한 산이 될 줄이야. 그래도 대화가 문제였다면, 대화를 하면 되는 것. 진심은 통했고, 우리는 지금 그 누구보다도 순항하고 있다고 자부한다. 🚤 2. 디자인 작업 중 급하게 디자인을 받기 시작해서, 미친듯이 css작업을 쳐내고 있다. 그래도 나의 든든한 지원군들이 함께하고 있으니, 금방할 수 있을거라 믿어 의심치 않는다. 어쩌다보니 3주차까지 기능작업 밖에 할게 없어서 기능을 뽑아냈더니 디자인작업할 페이지가 엄청나다. 그래서 그런지 더더욱 우리의 팀원들이 어떻게 하면 좀 편하게 스타일링할 수 있을까 고민도 많..
1. url이 바뀌면 메뉴 버튼 닫기 리액트의 기본 훅을 사용하여, 간단하게 해결했다. 링크로 대체했다! https://cheri.tistory.com/181 2. 머테리얼ui의 Date Time Picker와 Moment.js https://cheri.tistory.com/184 이후에도 프로젝트에서 moment.js를 활발하게 사용하고 있었고, 필요할 때마다 검색 해보던 중 이런 링크를 발견하게 되었다. 개발 중단이라니??.. https://medium.com/@yeon22/library-moment-js-%EA%B0%9C%EB%B0%9C-%EC%A4%91%EB%8B%A8-ec64e6709261 (Library) Moment.js 개발 중단 Moment.js 라이브러리(이하 Moment)가 사실상 개..
1. 웹에디터를 어떤걸 사용해볼까? 첫번째 시도 : TOAST UI Editor 공식문서 : https://nhn.github.io/tui.editor/latest/ Editor | TOAST UI :: Make Your Web Delicious! ui.toast.com NHN에서 만들어서, 한글에 최적화가 잘 되어있고, 일단 예쁘고, 마크다운 편집기로 핫한 에디터다. 심지어, 코드 하이라이팅이라던가 컬러같은 플러그인들이 잘 되어있다! 설치하는 방법이 너무 간단해서 놀랬다... 😮 아래와 같이 미리보기를 꺼둘 수도 있다. 모바일 사이즈로 가면 이렇게 더보기 버튼이 생긴다. 이제 하위의 버튼들을 클릭해보면..!!! 레이아웃이 깨지는 현상을 발견할 수 있었다... 아... 플러스로 이미지를 첨부하면 기나긴 ..
1. SWR을 쓸까 말까? 간단한 get요청도 리덕스를 사용하면 복잡해지는 마법~ 🤯 차선책으로 SWR을 써보면 어떨까? 팀원들 모두 SWR을 찾아보고, 그에 대한 편리함도 느낄 수 있었지만, 일단은 이제와서 바꾸게되면 프로젝트 기간 내내 사용법 익히다가 끝날 것 같은 느낌! 그래서 팀원 모두 다 같이 사용해왔던 리덕스를 사용하기로 결정했다. 그래도 툴킷을 이용하니, 다소 간단하게 처리할 수 있어서, 나은 편이다. 2. 오류 핸들링 createAsyncThunk를 사용하던 도중, 서버에서 보내주는 에러메세지를 받아서 extraReducer의 rejected로 보내주는 방법을 고민하게 되었다. 아래의 링크를 보며, 해결하게 되었으며, async await와 try catch문을 같이 써야된다는 점이 이상하..
클론코딩중! 저번 주에 뷰작업을 거의 끝내놓고, 기능구현을 서서히 하고있다. 순서를 먼저 정리하고 난다음 그 순서에 맞춰서 진행하다보니, 쉽게 작업되는 것 같다. 이전에는 너무 어렵게만 생각했었는데, 이번에는 순서를 그리고 그 순서에 맞춰서 쉽게 생각하니 쉽게 구현이 되더라 🤔 나한테 맞는 방법을 찾은 느낌. 실전 프로젝트 전에 찾을 수 있어서 정말 다행이다 리덕스 툴킷 저번주는 리덕스액션! 이번주는 리덕스 툴킷이다. 확실히 쉽고, createSlice를 이용하여 만드니 코드량도 적고, 편리하였다. 필요했던 immer와 chunk도 내장되어있다. 이번에는 기존 사용법이 편해서, 따로 createAsyncThunk를 사용하지않았는데, 다음번에는 이것도 사용하리라! 로그인유지 이것 때문에 꽤나 고민을 많이 ..
1. 재정비 그리고 휴식 재정비반에 들어오면서 제일 많이 들었던 말이 있다. 어라? (셰리)님은 재정비가 아니라 무조건 프로젝트반 가실 줄 알았다고, 물론 객관적으로 봤을때는 그 편이 하나라도 더 얻어갈 수 있기 때문에, 당연하다고 생각하겠지만 내 생각은 달랐다. 앞으로 남은 클론코딩과 실전프로젝트를 들어가기 전에, 재정비를 하고싶었다. 무턱대고 들어가서 우당탕탕 만드는 것보단 어느정도 휴식과 머릿 속에서 배운 내용들을 깔끔하게 정리할 시간이 필요했기에.. 2. 목표 일전에 써보았던 axios 연결법 다시보기 심화과정 강의 되짚어보며, 복습하기 * 복습방법 각 내용들을 1~10까지의 점수로 나눈 뒤에 이해도가 높을 수록 점수를 높이기 점수가 낮은 항목들을 집중적으로 공략하기 공부하고 싶었던 것 공부하기 ..
1. 정리 그리고 정리 이번 주는 심화 과정으로, 프론트엔드에 관한 고도의 지식을 얻을 수있었고, 그 지식들을 온전히 제 것으로 만들기 위해 노력하였습니다. 2. 나는야 거북이 저번 주 기본 과정을 지나쳐, 심화 과정을 오고나서 제가 거북이라는 것을 확신하였습니다. 어떻게 다들 그렇게 빨리 강의를 들을 수 있는 것일까요? 저는 코드 한 줄 한 줄 왜 이것이 작동하는지 이해하고, 검색해보고, 정리해나가서 그런거겠죠? 아니면 저는 그냥 이해하기까지 시간이 많이 필요한 사람일까요? 살면서 한 번도 그런 생각을 해본 적이 없었는데 제 머릿 속의 엔진이 의심되었습니다. 😣 사실 거북이로서 이번 주는 정말 고통스러운 한 주가 아닐 수 없었습니다. 정리할 개념들은 산 더미인데, 온전히 제 것으로 만들 시간은 부족하고..
1. 주특기(기본) 완강! 👏 이번주 주특기주차에는 리액트, 리덕스, 리덕스청크, 파이어베이스를 이용해서, 기본적인 CRUD를 구현하면서 서버와 state를 관리하는 방법을 배웠습니다! 🤗🤗 리액트는 너무너무 재밌기도 하지만 짧은 기간동안 많은 내용들을 배워야했어서 부담스럽기도 했습니다 😂 또한 파이어베이스는 서버 쪽이라 배우면서 낯선 함수들을 많이 보아서 그런지 불편함을 느꼈습니다! 하지만 전체적으로 봤을때, 프론트에서 받아올 데이터값은 같기 때문에 맥락은 똑같이 흐른다는 것을 느꼈습니다! 이제 이 낯선 기술들을 앞으로는 자주 사용하게 될 것이니, 눈으로 계속 익혀두고 손으로 익혀두어야지요!! 2. 집중할 때는 종이로! 하나하나 이 코드들이 어떤 작용을 하는지 다 뜯어 보고싶어서 프린트를 했습니다. 이..
1. 알고리즘 주차의 끝!! 해! 방! 이라고 말할 순 없지만 드디어 끝이 났습니다!! 확실히 하루의 알고리즘 푸는 양을 조절하여 공부하니, 전체적으로 능률이 오른 것 같습니다. 예전에는 멍~~ 때리는 시간이 많았다고 한다면 이제는 집중! 딱! 해서 할 거 딱! 하고 끝내는 느낌? 이랄까요? 비록 주차는 끝이 났지만, 꾸준하게 알고리즘을 풀어야 된다는 것을 알고있습니다. 항해 사람들끼리 알고리즘 스터디와 CS 스터디를 운영해볼까 싶습니다. 이렇게 생각은 하지만 실행을 하기가 어렵습니다. 매번 앞에 놓여있는 문제와 과제들을 해결하느라 정신없어서 정말 중요한 것들을 놓치는 것은 아닌지........🤔 일단, 알고리즘 문제의 경우 매일 2문제씩 하는 것을 목표로 하고있는데, 매일 하는 일이 버거운 숙제라면 얼..
