코딩 (166) 썸네일형 리스트형 당근마켓 :6 Authorization 프론트엔드에서 인증된 유저를 확인하여 페이지 접근을 제한하는 비공개 , 공개페이지를 구분 할거임 비공개,공개 핸들러 swr fetching data 인증되지 않는 요청으로부터 핸들러 보호 e.g) login 하지 않은 상태에서 api/user/ 접속하지 못하게 인자가 많아지면 객체 형식으로 표현해주는것이 가독성에 좋다 `fn('GET', handler, true) -> fn({method:'GET', handler, isPrivate:true})` withHandler.tsx interface ConfigType { method: "GET" | "POST" | "DELETE"; handler: (req: NextApiRequest, res: NextApiResponse) => void; isPrivate.. 깃헙 프로젝트 관리하기, 팀에 들어가기전 확인하면 좋을 글 깃헙 프로젝트 관리하기 https://applecider2020.tistory.com/27 업무를 계획대로 진행할 수 있는 프로젝트 계획을 수립하는 방법 https://asana.com/ko/resources/project-management-plan Do you actually need a project plan? Short answer: yes Project plans do more than organize your work—they set you (and your team) up for success. Plus, they show stakeholders exactly what and when your project will achieve. Learn how to make your own for yo.. 당근마켓 5 : authentication 인증- 유저가 누군지 알아내기 권한 -유저가 보려는 데이터에 접근 권한이 있는지 ### Auth Logic `phone # --> check exist --> it does, Send Token(connected with User) to the Phone (use Twilo) --> Client submit that Token --> If is correct,토큰에 연결된 UserID 세션에 저장 (Authentication)->인증 후, 사용된 토큰 삭제 (+ 인증된 유저와 연결된 모든 토큰 삭제) type alias와 interface의 차이 type-alias는 모든 타입을 선언할 때 사용될 수 있고, interface는 객체에 대한 타입을 선언할 때 사용될 수 있다. 둘 다 객체에 대한 타입을 선.. 당근마켓 4 :Refactoring react hook form의 여러가지 기능 https://react-hook-form.com/api/useform/formstate/ validate 유효성을 검사할 인수로 콜백 함수를 전달하거나 콜백 함수의 개체를 전달하여 모든 유효성을 검사할 수 있습니다. ``` value === '1' })} / > ``` https://react-hook-form.com/api/useform/register/ mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit' 이 옵션을 사용하면 사용자가 form을 제출하기 전에 유효성 검사를 할 수 있습니다(onSubmit.. 당근마켓 3: database setup interface InputProps { label: string; name: string; kind?: "text" | "phone" | "price"; //세가지 종류의 인풋 [key: string]: any; //input에 원하는 prop을 전달하고 싶을 때 } export default function Input({ label, name, kind = "text", ...rest }: InputProps) { return ( {label} {kind === "text" ? ( ) : null} {kind === "price" ? ( $ KRW ) : null} {kind === "phone" ? ( +82 ) : null} ); } https://www.prisma.io/docs/concepts.. 당근마켓 2:Tailwind css utility 우선 프레임워크 TailwindCSS 마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있는 flex, pt-4, text-center 및 rotate-90과 같은 다양한 클래스로 가득 찬 유틸리티 최초의 CSS 프레임워크입니다. https://tailwindcss.com Tailwind CSS IntelliSense (확장 프로그램) Tailwind CSS IntelliSense는 Visual Studio Code 사용자에게 자동 완성, 구문 강조 표시 및 린팅과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상시킵니다. https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss TailwindC.. 당근마켓 :1 NextJs, Tailwind setup NextJS 프로젝트 초기화 (Node.js 12.22.0 이상) npx create-next-app@latest --typescript https://nextjs.org/docs/getting-started ``` 소프트웨어 배포 생명 주기 (Software Release Life Cycle) 1. Alpha: 소프트웨어 테스트를 시작하는 첫 단계 2. Beta: 알파의 뒤를 잇는 소프트웨어 개발 단계 3. RC(Release Candidate): 최종 릴리즈 후보 4. RTM: 완성된 버전 Tailwind CSS설치 및 초기화 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p (-p를 붙이면 postcss.config.js.. gh-pages 빌드 오류 시 확인 해야 할 것들, gh-pages readme가 나올 때 gh-pages 빌드 오류 시 확인 해야 할 것들 1.hompage의 주소가 맞는지 확인한다 (대소문자도 유의!) package.json에 "homepage":"https://{github아이디}.github.io/{repository이름}" 필자는 repository 작성 시 대소문자 상관없을 줄 알고 레포지토리 twitterC를 twitterc로 작성하였다가 며칠을 고생하였다.. 복사해서 작성하도록! 2.setting > pages > branch를 gh-pages로 수정하기 3.작성 browserRotuer 사용 시에! 4. 이전 1 2 3 4 ··· 21 다음
