치춘짱베리굿나이스

그룹과제 #3 공식적인 내생각 프론트엔드 공부하면서 어려운건 마크업이나 자바스크립트 뭐 이런것보다 API나 JSON 데이터와의 싸움이 아닐까.. 하하하 일단 레이아웃이랑 디자인, 광고 데이터 출력까진 끝났고 드랍다운만 만지면 될 것 같다 드랍다운 좀 귀찮네 작업 내용 숫자 3자리마다 쉼표 찍어주기 n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') 데이터의 값은 일반 number 형식인데 이걸 세자리마다 콤마도 찍고 자리수마다 ~천 ~만도 출력해야 했다 천의자리랑 만의자리에 천, 만 문자열 넣어주는 건 C언어 예외 잡듯이 숫자를 그냥 나눠서 조건문 분기 처리로 진행했다 3자리마다 쉼표 찍는 건 굳이 split 하고 join할 필요 없이 정규식을 사용했다 \B: \b..

코드 예시 Netlify로 배포하기 Netlify: Develop & deploy the best web experiences in record time Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com 특징 & 장점 깃허브 계정 연동해서 자기 레포를 자동화로 쉽게 배포를 할 수 있다 포트폴리오용으로 간단하게 배포하기 정말 최적임 warning 도..

그룹과제 #2 종료 + 그룹과제 #3 시작 공식적인 내생각 이래저래 두 번째 그룹과제도 끝이 났다 제출 전까지 이슈대응 하고 쉬느라 (??) 공부는 따로 많이 안 했다 페이지 구성요소 자체는 간단한데 상호작용이 다양해서 생각치 못한 예외상황이 많이 나왔던 것 같다 프론트엔드 특성상 상호작용도 구현에 매우 중요한 요소인데 꼭 C 과제 할 때 악착같이 예외 찾아서 처리하는 거랑 비슷한 느낌… 그리고… 코드리뷰를 구경하는데 다들 생각보다 다양한 방법으로 Fuzzy Matching이랑 데이터 요청을 구현하셔서 꽤 재미있었다 리액트 쿼리랑 리덕스에도 익숙해질 수 있는 기회여서 좋았던 과제 내일부터 새로운 과제 시작인데 제한시간이 72시간이라….. 상호작용은 이전 과제보다 많지 않고 대신 그래픽적인 요소 + 수치 ..

코드리뷰 + 코드예시 react-query useInfiniteQuery: 무한스크롤 구현할 때 좋음 useQuery 등의 식별자에 함수 넣지 않기 useQuery([foo, bar], ...); 웹팩으로 빌드되는 과정에서 함수명이 그대로 남아있는 게 아니라 a, b 등의 간결하고 짧은 함수명으로 바뀌어버린다 예상치도 못한 이상한 함수가 저 자리에 들어가버릴 지도 모른다… useQuery에서는 [’식별자', 변수1, 변수2…] 가 가장 정석적인 사용법이다 redux useAppSelector 주의사항 export const getTheme = (state: RootState) => state.theme; ... const theme = useAppSelector(state => state.theme); ..

그룹과제 #2 공식적인 내생각 모든 작업물을 머지하고 붙이기까지 완료했다 이제 리드미 이쁘게 작성하고 폴더구조 약간 수정하고 조금씩 다듬는 과정만 남았다 그리고 강의 추가정리까지…. 이번주는 그래도 꽤 널널한 편이었던 것 같아서… 대신 공부 외적으로 이런저런 일이 많았어서 정신없긴 마찬가지였다 다음주가 두려워진다………. 생각해보니 5월도 끝이네 슬슬 ㅎ.ㅎ;; 취업하고싶다 작업 내용 깃허브 Readme 중앙정렬 적용하기 // 내용 p 태그를 이용하면 태그 내의 문자열을 중앙정렬 할 수 있다 그냥.. 마크다운 문법 쓰면서 html 문법이 먹힌다는 걸 망각해서 기록차 적어봄 검색어 추천이 있는 검색 창 구현 p 태그 내에 h1 등 헤더 태그에는 중앙정렬이 적용되지 않으므로 h1 태그에 어트리뷰트 한번 더 지..

그룹과제 #2 공식적인 내생각 오늘 서로의 작업물을 다 Merge하고 합치는 작업을 진행했다 생각보다 뜬금없는 에러 (깜짝!) 가 많이 나와서 당황스러웠지만 팀원들끼리 머리 맞대고 진행하니까 나름 금방 잡혔다 필수 기능은 다 구현 및 머지해 놨으니 추가적인 기능 구현만 좀 더 생각하면 될 것 같다 겸사겸사 안 쓰는 파일 및 코드 삭제랑 린터 오류 잡기도 완료했다 다음주부턴 훨씬 바빠질 것 같아서 무섭다… 사실 4인 1팀 체제가 9인 1팀보다 조금 더 편안했던 것 같다 Github 실수로 다른 브랜치에 머지했을 때 깃허브에서 revert를 누르자 그러면 revert 브랜치가 생성되면서 (이전에 만들었던 변경사항을 무로 되돌린다) 이 브랜치를 풀리퀘스트를 날릴 수 있게 된다 만약 dev에 머지했어야 하는데 ..

그룹과제 #2 공식적인 내생각 밤에 잠이 쏟아져서 작성하다 말고 그냥 자버렸다... 리액트 쿼리를 사용하면서 같은 단어를 검색하면 캐싱이 되도록 분명 설정을 해놨었는데 이상하게 이전에 검색했던 단어를 또 입력했음에도 불구하고 데이터를 다시 불러오는 현상이 있었다 refetch() 이 함수때문이었다 ㅡㅡ 쓰지말자 작업 내용 리액트 쿼리 훅으로 만들기 export const useFilteredQuery = () => { const searchText = useAppSelector(getSearchText); const { data, refetch } = useQuery( ["#diseaseData", searchText], () => getDiseaseDataFiltered(searchText), { re..

그룹과제 #2 공식적인 내생각 과제 요구사항 중 로컬 캐싱은 리액트 쿼리, API 호출 횟수 줄이기는 디바운싱을 사용하면 될 듯 하다 API 응답 속도는 정말 너무나도 느린데, 제공받은 XML을 JSON으로 변환한 뒤 사용하니 1900개 가량의 데이터에서 filter 작업까지 해도 아주 짧은 시간 안에 응답이 돌아와서 아무래도 검색어 출력 및 Fuzzy matching을 위해서라면 로컬 파일을 사용하는 게 나아보인다 어째 과제를 하면서 API와의 싸움 비중이 더 커 보인다…. 솔직히 Fuzzy matching이 일종의 검색어 유추 시스템인데 API 응답 속도도 느린 상황에서 사용자의 검색어를 어떻게 바로바로 예측하고 퍼지매칭이 가능한지 잘 모르겠다 로컬 파일을 사용하지 않는 퍼지매칭 구현 방법이 궁금하다..