100일은 해야지

헤더를 만들면서 생각이 많아졌다. 라이브러리들을 사용해서 애니메이션 효과를 줄 것인가 내가 직접 할 것인가... 결론은 그냥 깔끔한 포트폴리오를 만들자로 결정... framer motion이나 lottie files같은 것들도 사용해볼까 했지만, daisyui도 안쓰겠다고 해놓고 저것들을 쓰는 건 조금^^ 무튼 생각이 많아져서 만드는게 조금 늦어졌지만! 헤더만들면 이미 포트폴리오는 다 만든거라고 볼 수 있다. 특별한 애니메이션을 안 넣을것이기 때문에 ? 이제 포트폴리오에 넣을 것들을 촤라락 넣고 포트폴리오 내용을 채워가야하는데... 뭐 어떻게든 되겠지하면서 header 투척 // data.ts export const links = [ { title: "Home", url: "#home", }, { tit..

일단 파비콘과 타이틀을 먼저 작성... 처음에 이렇게 작성하니 도저히 안뜨는거임 를 해봐도 안됨. 안나오다가. 공식문서 찾아보니까 이런 식으로 쓰라고 해서 이름바꿔주고 위 처럼 작성하니 잘 뜸 tailwind를 쓰면서 daisyui를 같이 쓰려고 했는데 그냥 tailwind만 사용하려고 함 요즘 너무 의존하는 것 같아서 다시 혼자 해보려고... 그래서 tailwind-styled-components도 설치했다. 그러면 tailwind랑 styled-components랑 같이 쓸 수 있어서 style들은 따로 빼서 관리할 예정이다. 일단 나는 한 페이지에 다 보여줄 것이기 때문에 폴더는 app폴더 안에 components 폴더에 다 넣어놨음 원래 오늘 헤더마무리 하려고 했지만 약속이 있어서... 내일 헤더..

리액트로 포트폴리오를 만들겠다고 한지 어언 몇개월 아직도 안만들어진 내 포트폴리오 오늘부터 다시 만들려고 한다. 이번에는 next.js로 만들어 보려고 한다. 포트폴리오 만들면서 내가 했던 것들도 수정하고 UI쪽을 손 봐야 해서 한 이주정도 걸릴 것이라 예상 중... 13버전을 사용할 것이기 때문에 app Router 기반으로 할 예정 yarn을 사용해서 설치를 했는데 npx를 사용한 것보다 시간이 오래걸리는 데 처음에 155.55s 잘못본줄... 내 컴터가 살짝 열받아있어서 그런걸 수도 있을것 같아서 다시 깔아보니 58.21s 뭔가 느린감이 있어서 npx create-next-app@latest로도 깔아봄 27s 근데 여기서 내가 크나큰 착각을 하고 있었음@@! 나는 yarn과 npx로 설치를 했고 비..

랜덤기능 없는 랜덤밀 랜덤 선택 기능을 넣으려했는데 까먹고 안넣고 있었다.. 이름이 랜덤밀인데 다른 거 신경쓰다가... 마치 홍철이 없는 홍철팀이랄까... 너무 오래된 밈인가 그럼 문어없는 문어빵 랜덤 선택은 간단한 거라서 나중에 해야지하고 생각하다가 이제야.... 나는 선택된 것들을 dialog에 넣어줬기 때문에 useRef를 사용해 modal을 띄워줬다. 카운트는 최대 숫자가 5가 되게 했고 0이 기본값. 만약 숫자가 0인데 버튼을 클릭하면 갯수를 골라달라는 모달이 뜨게 했다. const [count, setCount] = useState(0); const [items] = useRecoilState(ItemsState); const [randomArray, setRandomArray] = useSt..

프로젝트 설계의 중요성을 또다시 느낌 괜스레 디자인 바꿔보겠다고 건드렸더니 엄청 엉켜서 할 일도 못하게 만드는 내 개인프로젝트 router들도 다 엉망진창이 되버려서 다시 원상복구시키고 파이어베이스를 이용한 것보다 Restful API 사용이 확실히 쉽고 프로젝트 적용시키기 전에 공부는 확실히 해놓고 설계도 힘들게 해야 하고, 찜하기를 구현하는데 로컬스토리지에 저장하고 로컬스토리지에 있는 것을 불러와서 리스트를 아래 그림과 같이 나열 했는데 삭제가 다 잘되다가 마지막 하나가 로컬스토리지에서는 지워지고 화면에는 그대로 남아있어서 해결하느라 조금 애먹었다. const [items, setItems] = useState([]); const [wish, setWish] = useRecoilState(WishS..

와이어프레임 개인프로젝트에도 와이어프레임이 필요한가... 에 대해서 잘 모르겠지만 보는 눈을 기르는 건가... 싶지만 협업할때의 중요성을 알기 위해서인가.... 도 싶지만 일단 다시 만들기는 했다. 그냥 만들었던 것 조금 다듬어서 만드니 시간이 별로 안 걸리기는 했다. 이제 개인프로젝트 고치러 가야지...

나의 개인프로젝트인 RandomShop을 살려보려고 한다. 포트폴리오에 넣을 수 있을 정도로는 만들어 놔야하니까... 일단 초반 기술 스택은 TypeScript , React, Vite, Firebase, styled component 다섯 개다. 여기에 나는 tailwindcss & daisyUI를 더할 예정이다. 기능은 원래 firebase : 백엔드 서비스 연동, 회원가입 및 로그인, 구글 소셜로그인 음식 검색 및 검색 키워드 자동완성 음식 필터링(카테고리 분류) + 페이지네이션 카트 담기 위시리스트 이 정도이고, 와이어 프레임 초안은 아래에 있다. 너무 초... 라해 https://www.figma.com/file/sOrN4ihZAG0myOJTVpGYLn/wireframe?type=design&n..

저는 포트폴리오는 나중에 만들어야지 생각을 했습니다. 금방 만들 것이라 생각을 했기 때문이죠. 템플릿 많이들 나오잖아요? 사용해 본 적은 없지만 그냥 될 거라 생각했었죠. 하지만 프레임워크 과제를 하다가 싸한 느낌이 들었습니다. 이러다가 자소서나 포트폴리오 못만드는거 아닌가 하고요. 타입스크립트.... 리액트..... 어려워요...... 그래서 부트캠프가 끝나기 전에 틈틈이 시간을 내어서 포트폴리오를 작성해 보려고요. 만드는 과정도 올릴 예정입니다. 그리고 참고로 vite를 이용해서 react 포트폴리오 만들려고 했는데 처음부터 오류 났어요^^ 이렇게가 아닌가??? npm start 하면 뭔가 떠야 하는데.... 강의로만 이해한 거죠 제가 하하핳하하하 A complete log of this run ca..