100일은 해야지

해시태그를 구현해 보려고 함 📝 형식 해시태그 글자의 수는 10글자 이하 엔터키로 넣기 최대 5개 => 더 입력하려고하면 modal이나 alert 띄워주기 태그한 목록 띄워주기 해시태그 지울 수 있게 하기 엔터일 때만 값을 추가 해야 되기때문에 e.key === "Enter"를 넣었다. const tagDown = (e) => { if (e.key === "Enter" && tagLists.length === 5) { setInputValue(""); console.log("5개임 바이"); } else if (e.key === "Enter") { setTagLists([...tagLists, inputValue]); setInputValue(""); } }; 태그 setInputValue(e.targe..

카카오로그인 예전에 개인 프로젝트를 하면서 firebase로 일반 로그인과 구글 로그인을 구현한 적이 있었는데, 카카오 로그인은 안 해봐서 이 부분을 내가 맡아보겠다고 했다. 처음에 내가 해야 할 일은 아래 이미지에서 step1. 까지, 카카오에서 인가 코드를 받고 백에다가 그 인가 코드를 넘겨주는 것이라 생각했다. 하지만 백엔드분과 프론트엔드의 다른 분과 회의를 했을 때 step2. 토큰까지 받아서 그 토큰을 백에다가 넘겨주는 것까지 해야 한다고 하셔서 일단 하기는 함. 보안을 강화해야 할 카카오 액세스토큰과 리프레쉬토큰을 프론트에서 다룬다? 조금 의아하긴 하지만 뭔가 백에서도 자체 로그인할때 액세스토큰과 리프레쉬토큰을 프론트에 넘겨주고 그것을 프론트에서 관리해야하니까 맞는것 같기도.. 그래서 이부분은..

새로 시작한 팀프로젝트. 6주간 진행되는 거였지만 이번에 명절이 포함되어서 7주 동안의 프로젝트가 되었다. 내가 속한 팀은 BE 4명, FE 2명의 구성으로 총 6명이다. 이번에 같이 하시는 프론트엔드 분이 css관련 라이브러리를 한번도 안써보셨다고 했다. 라이브러리의 편리함을 이미 수없이 많이 느껴본 나는.... 음… 라이브러리를 안쓰고 어떻게 했더라? 일단 나만 라이브러리를 써봤으니 그냥 선택권을 같이 하시는 분께 넘겼다. 라이브러리를 안쓰신다고 하면 이왕 이렇게 된거 css 다시 공부하고 좋지 뭐 라는 생각했기 때문에 상관이 없긴 했다. 결론은 ui 라이브러리 안쓰고 그냥 scss(sass)로 하기로 결정. 1주차에는 개발기획을 짜고 개발을 들어가는 주여서 와이어 프레임짜고 UI 디자인을 하느라 c..

헤더를 만들면서 생각이 많아졌다. 라이브러리들을 사용해서 애니메이션 효과를 줄 것인가 내가 직접 할 것인가... 결론은 그냥 깔끔한 포트폴리오를 만들자로 결정... 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 폴더에 다 넣어놨음 원래 오늘 헤더마무리 하려고 했지만 약속이 있어서... 내일 헤더..

🧐 Type Annotation(타입 표기)란? 👉 변수나 함수 반환 값 등에 명시적으로 타입 정보를 제공하는 것을 말한다. 👉 식별자 또는 값 뒤에 콜론 ( : )을 붙여 value : type의 형태로 표기한다. 👉 타입표기는 코드의 가독성을 높이고 디버깅을 용이하게 하며, 컴파일러가 코드를 빌드할 때 타입 오류를 찾아내는 데 도움을 준다. 🧐 TypeScript의 기본 타입 🌀 원시 타입 👉 string : 문자열을 나타내는 타입 👉 number : 숫자를 나타내는 타입, NAN과 infinity등도 포함한다. 👉 boolean : true와 false값을 나타내는 타입 🌀 객체 타입 👉 속성(property)과 해당 값으로 구성되어 있다. const obj : {x:number, y:string}..

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

next build에 대해 적어놓기 위한 글 😳 왠 build? 👉 용량이 크다는 것은 비효율적이고 보안상에 문제가 생길 수도 있다고 한다. 👉 build 하나로 용량이 차이가 얼마나 나는가? 개발자 도구에서 network탭을 열어서 새로 고침을 누르고 맨 아래쪽을 보면 6.6MB resources라고 나오는데 서버에서 클라이언트로 전송한 용량이 6.6MB나 된다. 👉 이부분은 package.json에 "scripts" 쪽에서 유지보수 할 수 있는데 "build"라는 명령어는 실제로 배포할때 배포판을 만들어주는 명령어이고, "start"는 배포판을 실행하기 위한 명령어이다. build를 사용하면 최적화 해주기 때문에 용량을 줄일 수 있다고함. 👉 일단 해본다. npm run build 로 빌드를 해보면 ..