본문 바로가기

TIL

 (75)
TIL 23.08.18 [App router] layout Layout layout 페이지는 앱 라우터에서 공통된 설정을 적용하는 페이지로 itle, description 은 제목과 내용을 설정해주면 제목에 들어간다. import "./globals.css"; import Link from "next/link"; export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( WEB {children} ); } 메인페이지 import Image from "next/image"; export default function Home() { retu..
TIL 23.08.14 [벼락샌드] 팀프로젝트 회고 1. 한 주의 흐름 1) 한 일 프로젝트 명: 벼락샌드 필수 작업: 로그인 , SUPABASE DB 사용 , user에 따른 권한, 통계, 로그인 인증 추가 작업: 소셜 로그인, 결제 기능 , 멤버십 변경 및 추가 기능 2) 느낀점 김윤수 - 프로젝트가 우당탕탕 완성이 다 되었지만 최종 전 마지막 프로젝트라서 긴장을 많이 했던거 같습니다. 프로젝트 사이즈가 많이 크다고 생각해서… 나름 챌린지를 해본건데 그래도 으쌰으쌰해서 완성단계까지 끌어올릴 수 있어서 좋았습니다~~ 이은한- 포기하지 않으면 따라갈 수 있다. 이우정 - 모바일, 웹 버전의 웹사이트를 제작해서 새로운 도전을 했다는 느낌이었다. 정승하 - 기능에대한 코드설계의 아이디어가 잘 생각나지않는점이 부족하다고느꼇습니다. 2. Keep 구체적으로 진행..
TIL 23.08.11 React 스와이퍼 구현 바닐라자바스크립트 할때 제일 힘들게 했던건 스와이프 기능 구현하기였다. 힘들게 만든 스와이프 기능도 CORS 에러로 잘 구현이 안됨 🙃리액트는 스와이퍼 라이브러리로 간단하게 스와이프 기능을 구현할 수 있다. 리액트 스와이퍼 공식문서 https://swiperjs.com/react Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 1. 기능구현에 필요한 스와이퍼 라이브러리 먼저 설치한다. yarn add swiper 2. 필요한 모듈을 impor..
TIL 23.08.09 React 아임포트/ 포트원 카드 결제창 구현하기 1. 포트원 (구 아임포트) 회원가입 https://portone.io/korea/ko 포트원, 온라인 비즈니스를 위한 통합 결제 솔루션 코드 한 줄로 세상 모든 방식의 결제를 경험해보세요 portone.io 2. index.html 에 다음과 같이 추가 3. 원하는 pg 등록하기 결제 연동 > 결제대행사 설정 및 추가 4. 컴포넌트에 다음 로직 추가하기 리액트 아임포트 공식문서 참조 https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT.md const onClickPayment = () => { if (!window.IMP) return; /* 1. 가맹점 식별하기 */ const { IMP } = window; IMP..
TIL 23.08.08 supabase 데이터 불러오기 데이터 불러오기 다음과 같이 데이터를 불러올 수 있고, 해당하는 데이터 테이블 이름에 있는 데이터를 불러온다. const fetchData = async () => { try { const { data, error } = await supabase.from('데이터테이블이름').select(); if (error) { console.error('Error fetching Data:', error); } else if (data !== null) { setData(data); } } catch (error) { console.error('Error fetching Data:', error); } };
TIL 23.08.07 Supabase 설정 문제점 supabase 로 데이터베이스에 값을 추가한 후, fetch 했는데 401 에러 뜨면서 데이터가 불러와지지 않는 현상이 있었음. 401 에러는 인증과 관련된 문제였기에, api 키나 url 이 잘못 작성되었거나 권한에 문제가 생겼거나 원인이라고 생각하였다. 시도해본것 1. 인증 : 코드 문제인가 하여 코드도 처음부터 지웠다가 다시 써봤고, API 키 혹은 URL 도 다시 작성했으나 이것 문제는 아니었다. 2. 권한 : 권한 문제는 보통 api 키를 사용하기 전에, 사용하고자 하는 서버 도메인을 작성하거나 해서 localhost:3000 을 넣어야 할 곳을 찾아보았다. 그치만 아니었음 해결방안 Supabase RLS (Row-Level Security)은 데이터베이스 시스템에서 사용되는 개념으로,..
TIL 23.08.04 Mockterview (11)~(13) 11. Arrow Function 이란 무엇인지 설명해주실 수 있을까요? const ArrowFunction = () => {} 의 형태로 작성되는 함수로 기존 함수생성 방식보다 간편하게 작성할 수 있다. 매개변수가 하나뿐인 경우 괄호는 선택사항이고, 매개변수가 없는 함수는 괄호가 필요하다. 유의해야하는 부분은 this 나 super에 대한 바인딩이 없고, 생성자로 사용할 수 없다. 12. ‘==’와 ‘===’ 연산자의 차이는 무엇인지 설명해주실 수 있을까요? == : 동등연산자로 두개의 피 연산자가 동등한지 확인한지 확인한다. 비교대상의 타입이 다르더라도 형변환 된 값이 같으면 true 를 리턴 2 == "2" === : 일치연산자로 두 개의 피 연산자가 일치한지 확인한다 동등연산자 보다 엄격하며, 타..
TIL 23.08.03 Mockterview (4)~(9) 4. CORS란 무엇이고 어떻게 허용할 수 있나요 ? Cross Origin Resource Sharing 의 약자로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근한다는 뜻이다. 이는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여할 수 있다. 5. 사용자 패스워드를 전송하고 보관하는 방법을 설명해주실 수 있을까요? (이해필요) 유저의 패스워드를 받은 클라이언트는 평문으로 서버로 전송합니다. 평문을 받은 서버는 패스워드를 단방향 해시 함수로 암호화하여 보관합니다. 단방향 해시함수는 수학적 연산에 의해 원본 데이터를 완전히 다른 암호화된 데이터(다이제스트)로 변환하는 것을 말합니다. 원본 데이터로는 다이제스트를 구할..

티스토리툴바