치춘짱베리굿나이스

구글 애널리틱스 내 웹 사이트에서 사용자들이 무슨 행동을 했고 어떤 페이지에 몇 분 이상 머물렀는지, 사용자의 유형이나 국가는 어느 쪽이 많은지, 어느 경로를 통해 유입되었는지 등을 알 수 있다 토이 프로젝트 급은 방문자가 많지 않으니 유의미한 결과가 나오지 않을 수 있어도… 호기심이 나잖아 주소만 설정해서 간단한 데이터를 보고, 라이브러리를 이용하여 세부 이벤트를 측정해보자 주소 Redirecting... Redirecting... analytics.google.com Redirecting… 이라고 뜨는거 굉장히 멋없긴 한데 어쩔수없다 웹에서 설정하기 1. 새 계정 만들기 저 킹받는 라인브레이크 측정 시작 버튼을 눌러 계정을 만들자 계정 이름과 유형을 명시하자 아래 세개정도만 체크되어있어도 괜찮을 것 ..

그룹과제 #4 공식적인 내생각 과제에서 제공되는 데이터가… 아주.. 매우 복잡해서 컴포넌트를 재활용할 수 없는 상황에 직면한지라 과제 데이터를 개조했다 객체배열로 개조하니까 해결됐다 스타일까지 적용하니 할일이 모두 끝났다 개인과제를 열심히 두들길 시간이군 작업 내용 커스텀 훅으로 데이터 정제하기 useEffect(() => { if (!healthData) return setMyData([ { title: '체질량지수', ... detail: healthData.wxcResultMap.boj.resBMI, }, ... ])}, [healthData]) return { myData } 데이터 정제하는 함수는 만들고 싶고 함수내에서 useState나 useRecoil*은 못쓰고 그와중에 전역 데이터는 필요하..

그룹과제 #3 종료 공식적인 내생각 과제가 생각보다 예외라던가 생각할부분이 많아서 조금 어려웠지만 재미있었다 무엇보다 피그마도 주고… 코멘트도 잘 달아준 편이었고… 😇 (피그마의 소중함을 절실히 느끼는중) 다음 과제는 빠르게 구현하고 넘어가고 개인과제에 시간을 많이 쏟기로 했다 작업한 내용 배열 내에서 조건에 맞는 원소 하나라도 있는지 체크하기 const arr = [{id: 1, name: 'john'}, {id: 2, name: 'dave'}]; arr.some(v => v.name === 'john')) // true arr.some(v => v.name === 'jade')) // false filter 메서드를 사용하고 길이를 체크하는 방법도 있지만 길어진다 그리고 some 메서드는 조건에 부합..

그룹과제 #3 공식적인 내생각 가끔 삘받아서 지금 코딩하지 않으면 안될 것 같은 때가 있다 오늘이 그날이었다… 새벽 6시까지 작업하고 풀리퀘 넣고 8시인가 9시에 잤다 덕분에 예정했던 구현내용은 다 끝나고 삭제버튼만 남아서 일어나서 마저 하니까 끝났다 수정 삭제 추가까지 구현했으니 더 추가할 건 없어보인다 이제 리드미 열심히 작성하자…. 다음과제들 분량 많아보이던데 이번주보다 빡셀 것 같다 언제쯤 필라테스를 다시 갈 수 있을까요 작업 내용 Array.reduce를 통해 새 배열 만들기 const newAds: IAd[] = prevData ? adsData.ads.reduce((acc: IAd[], curr: IAd) => { if (curr.id !== newAd.id) acc.push(curr) el..

그룹과제 #3 공식적인 내생각 내 파트에서 할 수 있는 건 다 해서 추가 기능을 구현했다 광고 만들기 버튼을 누르면 진짜로 광고를 만들 수 있게 만들고 싶었는데 어찌저찌 작성하다보니…. 기본내용 구현보다 광고추가 기능 하나가 더 빡셌던 것 같다 중간중간 컴포넌트 분리나 합치기 등 리팩토링도 해가면서 했더니 밤을 꼴닥 새버렸다 하하 작업 내용 숫자 3자리마다 쉼표 찍어주기 - toLocaleString() const number = 1234; number.toLocaleString(); // 1,234 이렇게 쉬울수가 정규식은 다시 잊어버리도록 해야겠다 프로그래머 최악의 적 정규식 인자를 추가함으로써 숫자를 아라비아어, 한자 등 특정 언어로 바꾸거나 스타일을 추가할 수 있다 (달러, 엔화, 한화 등…) p..

그룹과제 #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시간이라….. 상호작용은 이전 과제보다 많지 않고 대신 그래픽적인 요소 + 수치 ..