치춘짱베리굿나이스

Victory Victory Victory Formidable is a global design and engineering consultancy and open source software organization, specializing in React.js, React Native, GraphQL, Node.js, and the extended JavaScript ecosystem. We have locations in Seattle, London, Toronto, Denver, and Pho formidable.com 설치 $> npm i victory $> yarn add victory npm 링크 victory victory Data viz for React. Latest version: 36...

구글 애널리틱스 내 웹 사이트에서 사용자들이 무슨 행동을 했고 어떤 페이지에 몇 분 이상 머물렀는지, 사용자의 유형이나 국가는 어느 쪽이 많은지, 어느 경로를 통해 유입되었는지 등을 알 수 있다 토이 프로젝트 급은 방문자가 많지 않으니 유의미한 결과가 나오지 않을 수 있어도… 호기심이 나잖아 주소만 설정해서 간단한 데이터를 보고, 라이브러리를 이용하여 세부 이벤트를 측정해보자 주소 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 도..