목록코드스테이츠 FE/프로젝트 (16)
On a couch
버튼 컴포넌트 만들기 드디어 피그마로 세팅을 픽스하고 작은 컴포넌트 만들기를 시작했다. 가장 많이 쓰이고 기초적인 요소는 아무래도 버튼과 창이어서, 도시님과 각각 나누어 맡았다. 일단 Globalstyle에서 되도록 공통적인 스타일을 미리 정해두고, 각 페이지의 중간 단계 컴포넌트마다 사용하는 특징적인 형태에 맞춰 덮어썼다. 사용처 별 사용 방식을 생각해서 짜다 보니 생각보다 오래 걸렸다. props로 값을 받아 재사용시켜야 하는 경우도 있고, 데이터 배열에서 map 돌려서 텍스트를 넣는 경우도 있고.. 이 단계에서 자연스럽게 페이지 구조와 컴포넌트 구조도 나누게 됐다. * 검색한 것 : 버튼에 이모지 삽입하는 방법. 이모지도 결국 유니코드로 표현되는 것이라 텍스트로 취급하면 되는 거였다. https:/..
배경 프리 프로젝트 때는 '일단 스스로 사용 방법을 익히고 본다'는 심정으로 styled-component를 이렇게 저렇게 만지고 고민해가면서 사용방법을 익혔다. 그런데 아무래도 이걸 사용하는 best practice를 모르다 보니 긴가민가 하면서 헤메는 데 시간이 많이 들었다. 예를 들면 styled component를 각 레벨별로 따로 만들어야 하는지, 아니면 하나의 컴포넌트 안에서 내부 element를 class로 선택해야 하는지 몰라 갈팡질팡했다. 그래서 이번 main project에 들어서면서는 아예 처음부터 best practice를 따라하며 사용법을 배우고, 여기에서 우리에게 필요한 부분만 따 오고 싶었다. 튜토리얼 기준은 이 영상으로 잡았다. https://www.youtube.com/wa..
기술 회고 이슈 노트 : 잘 이해되지 않았던 개발 기술이나 부족했던 기술 Http / Https, 쿠키, 세션, 토큰 등 통신/보안 과정을 이해하고 코드로 구현하는 것 React 상태 변경과 의존성, 컴포넌트 렌더링 순서에 대한 이해 Redux 의 reducer와 store 관리 방식 sementic한 HTML 마크업과 CSS 컨벤션 적용 좋았던 점 백엔드와의 협업을 통해 Http 통신이 코드에서 실제로 표현되는 방식을 알고 사용 가능한 기능을 완성했다. React-redux, redux-persist 등 필요한 기능이 있을 때 스스로 검색해서 공부하고 적용하는 과정을 통해 자신감을 얻었다. Styled component의 활용 방식에 조금 더 익숙해졌고, login, tab, tag 등 자주 쓰이는 U..
배운 것 게시판의 글 작성/수정 부분을 요소로 작업해 두었는데, 이걸 에디터 라이브러리로 교체했다. 에디터 라이브러리가 이렇게 많은 줄도 처음 알았고, WYSIWYG이 특정 라이브러리 이름이 아니라는 것도 처음 알았다. html 파싱 돕는 라이브러리도 너무 많아서 가장 많이 사용되는 걸 검색해서 dompurify로 썼다. 에디터 적용하면서 참고한 튜토리얼 [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ① 인터페이스 에디터는 글에 적용된 스타일 태그를 포함한 string 덩어리를 주므로, 이걸 db에 저장했다가 페이지를 열 때마다 가져와서 파싱해야 한다. 이 때 파싱한 결과를 div에 주입하면서 innerHtml을 직접 수정하게 되는데(위험하니까 하지 말라고 배운 거..)..
배운 것 글 수정 기능을 구현하던 도중 다음과 같은 오류를 만났다. 구현하려던 것 : 위에 있는 input (textarea) 창에서는 자유롭게 수정을 하고, 밑에 있는 Original Body 부분에서는 기존 글 내용이 보여져야 한다. 만난 오류 : 기존 글 내용을 useEffect 안에서 axios로 받아온 뒤, 해당 내용을 input 의 body 상태로도 넣었다. 그 뒤 다시 body 상태의 내용을 value Original Body의 내용으로 넣었다. const [body, setBody] = useState('') let originalPost = body const getOriginalPost = () => { axios .get(`/v1/${mode}/${id}`) .then((res) =>..
01 기초 만들어 둔 목업에 맞게 html, css부터 만들고 class 다 지정해둬서 작업할 때 편했다! 1-1 기본 구조 익명함수 안에서 모든 기능을 구현하는 방식 (변수 선언, 외부함수 선언은 별개) button.addEventLIstener( 'click' , function(event){ (if event.target.classname === number){ 기능 } (if event.target.classname === operator){ 기능 } (if event.target.classname === enter){ 기능 } }) 1-2 화면 상 값 변경하기 직접 html node를 끌어와 새 값 대입 외부 함수에 인자를 넘겨줘서 -> 함수 실행 후 그 결과로 값 바꾸기 1-3 조건 나누어 생..