영프로 개발

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트중 커뮤니티 댓글(CRUD) 에서 추후에 리팩토링 하면 좋을것? 작성해보겠습니다. 1. 댓글에 이모티콘을 사용 - 다양한 이모티콘 라이브러리를 검색하다보니 Emoji-Picker-React 라는 라이브러리를 찾았고 사용법을 LiveDemo를 해보면서 익혔습니다. - React-hook-form 을 사용했기에 이모티콘을 클릭해서 넣었을때 바로 들어갈수 있게끔 setValue를 이용하여 값을 변경 시킨 후 Emoji창을 닫도록 하였다. 2. 댓글 읽기,등록, 수정, 삭제 - 댓글 읽기 : 콘텐츠 페이지에 들어오자마자 댓글을 읽어 들일수 있게끔 설정하였습니다. - 댓글 수정 : 대댓글은 로그인 한사람만, 댓글 작성자만 수정,삭제할수 있게끔 설정하였습니..

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트중 커뮤니티 게시글(CRUD) 에서 추후에 리팩토링 하면 좋을것? 작성해보겠습니다. 일단 커뮤니티 페이지에서 들어가야할 기능을 알아봅시다. 1. 커뮤니티 페이지 네이션 - 처음에는 공부한다는 생각으로 라이브러리 없이 구현을 했었습니다. 구현 방법은 아래와 같이 이용하여 만들었습니다. 총 페이지가 만들어지는 수를 구한후 Array를 만든다 slice를 사용하여 보여주기 원하는만큼 자른다. 10보다 크면 block 넘버를 증가시켜 슬라이스 되는 범위를 재조정 랜더링 - 다만 데이터가 얼마 없을경우에는 프론트엔드에서 처리를해도 성능에 크게 차이가 없지만 백엔드 개발자 분과 얘기해본 결과 페이지네이션에 필요한 값들을 보내주겠다고 하셔서 더 손쉽게 구현할..

한 스타트업에 서류 합격을 하였다. 이후 면접전 2일의 기간이 있는 사전과제를 부여받았습니다. 사전과제 내용은 회원가입, 로그인, 게시판 작성 및 보기 를 구현하는 것이 과제로 주어졌고 API명세서는 Swagger를 통하여 제공해 주셨습니다. 이전 파이널 프로젝트때 회원가입, 로그인, 커뮤니티를 맡아서 개발해본 경험이 있어서 정말 수월하게 코드를 작성할 수 있었습니다. 신입으로써 처음 받아보는 사전과제이기도 하였고 처음 풀어보는 사전과제었기에 굳이 Redux를 안써도 될것 같지만 내가 이정도는 쓸줄 안다 라는걸 어필하기위하여 안써도 될것 같은데 사용하기도 하였고, 이전 프로젝트때 나중에 사용법을 알게된 customAxios 등을 적용해보기도 하였고 꽤 재미있는 과제였습니다. 제가 느끼기엔 난이도가 크게 ..

보통 서버와 통신을 할때 Token으로 유저정보를 확인하거나 인증정보를 확인하는 경우가 있는데 이럴때에 customAxios를 사용하면 상당히 편하고 코드가 좀더 간결해진다. 아래는 사용법 입니다~! 공식 깃헙 : https://github.com/axios/axios

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트중 회원가입 에서 추후에 리팩토링 하면 좋을것? 작성해보겠습니다. 일단 react-hook-form 을 처음 사용해보았습니다. 처음 접한걸 바로 학습하고 사용하다보니 공식문서를 통하여 학습 및 적용을 하였는데 공식문서가 친절하게 잘 안내해주어 사용하는데에 크게 문제가 없었던것 같습니다. onChange를 사용하게되면 매번 바뀔때마다 렌더링이 되어 불필요하다고 생각이 들었습니다. 나중에 리펙토링할때는 굳이 렌더링되게끔 하지말고 Submit 버튼을 눌렀을때 하이픈(-) 에 따라 값을 바꾸어서 서버에 보내준다면 불필요한 렌더링 없이 사용할 수 있지않을까? 생각이 듭니다. 처음 회원가입부터 작업하다보니 여기서는 AsyncThunk를 적용하지 못했었습니다..

2022.10.31 - [분류 전체보기] - 파이널 프로젝트 후기 -1- 내가 프로젝트를 하면서 생겼던 의문 Q. API Post나 Get 요청들을 보통 Store의 액션에 지정해놓고 쓰나요? 아니면 컴포넌트에 바로 Axios를 이용해서 쓰나요?? A. 컴포넌트에서는 해당 Action을 호출하기만 해야하고 직접 API를 호출할 필요가 없다! AsyncThunk 를 이용하여 axios 를 이용하여 비동기적으로 API를 호출할 수 있다. 저는 왜 이런 고민을 하고 질문을 했냐면 백엔드분이랑 카카오 로그인을 진행하기로했었는데 카카오 로그인 같은경우는 카카오로그인을 누르면 카카오서버를 통하여 로그인을 한 후 "인가 코드" 를 받아 이 인가코드를 이용하여 유저정보를 받을수있는 "카카오토큰" 을 받아야합니다. 이후..

1달 기간의 한 기업의 웹페이지 리뉴얼 하는 파이널 프로젝트가 끝이났다. 나는 로그인, 회원가입, 커뮤니티(CRUD) , 댓글(CRUD) 초기의 메인 Carousel 을 맡아서 진행하였다. 위의 기능들은 다 내가 처음 구현을 해보는 것 들이라 상당히 많은 삽질을 하였다 ㅜㅜ.. 프로젝트를 하면서 팀원들을 많이 가르쳐 보기도하고 도움을 많이 줘보기도 하고 작은 감정상함? 디자이너, 백엔드 와의 소통을 해보는 귀한 경험을 했다. 이러한 과정속 어떻게 소통했는지? 어떻게 해결해나갔는지, 어떤 고민을 하였는지 앞으로 리펙토링의 방향 에 대해 나눠서 서술을 해보려고 합니다. 아래 사진들은 제가 구현한 홈페이지의 사진들 입니다.

프로젝트 진행도중 회원가입에 성별을 선택하는 필드가 있었다 나는 react-hook-form 을 사용하고 있었고 바로 radio 속성을 이용해서 버튼을 custom 해서 쓰면 될거라고 생각하고 CSS스타일을 바꿔보고 시도해 보았으나 내가 원하는대로 잘 안되었는데 번뜩 머리를 스쳐가는 Button에 onClick 이벤트에 SetValue('gender' , 'male or female') 이런식으로 하면 될거 같은데? 라는 생각으로 바로 수정을 해보았다. 위와 같이 잘 작동하는 모습 위와 같이 해결하였습니다.

2022.08.04 - [JS] - 뉴스 API를 이용하여 뉴스 검색기 만들기 (1) 뉴스 API를 이용하여 뉴스 검색기 만들기 (1) https://developer.nytimes.com/docs/articlesearch-product/1/overview https://developer.nytimes.com/docs/articlesearch-product/1/overview developer.nytimes.com 우리는 위 링크 API를 이용하여 아래와 같.. youngpro95.tistory.com 1탄에 이어서 기사 불러오는 방법을 작성해보겠습니다. 기사를 불러오기전에 요구사항 리스트중 검색히스토리를 먼저 만들어봅시다. function addDiv(targetVal) { searchArray.uns..

2022.08.07 - [JS] - 클로저 문제 클로저 문제 Document Click me! 클로저 개념을 활용하여 "Click me!" 버튼을 2번이상 클릭시 0으로 초기화 되게끔 작성해주세요. youngpro95.tistory.com 정답은 const button = document.querySelector('button') button.addEventListener('click', (function(){ let count =0; return function(){ count += 1; if(count ===2){ alert("0으로 초기화 됩니다.") count = 0; } } })()); button.addEventListener('click',counter()) function counter(..