목록전체 글 (887)
치춘짱베리굿나이스
그룹과제 #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시간이라….. 상호작용은 이전 과제보다 많지 않고 대신 그래픽적인 요소 + 수치 ..
코드리뷰 + 코드예시 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 태그에 어트리뷰트 한번 더 지..