본문 바로가기

Frontend

 (278)
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. 사용자 패스워드를 전송하고 보관하는 방법을 설명해주실 수 있을까요? (이해필요) 유저의 패스워드를 받은 클라이언트는 평문으로 서버로 전송합니다. 평문을 받은 서버는 패스워드를 단방향 해시 함수로 암호화하여 보관합니다. 단방향 해시함수는 수학적 연산에 의해 원본 데이터를 완전히 다른 암호화된 데이터(다이제스트)로 변환하는 것을 말합니다. 원본 데이터로는 다이제스트를 구할..
TIL 23.08.02 Mockterview (1)~(3) 1. 시간복잡도와 공간복잡도는 무엇인가 ? 둘 다 알고리즘 성능 평가시 사용되는 개념이다. 시간복잡도 : 시간 복잡도란 알고리즘의 절대적인 실행시간이 아닌, 알고리즘을 실행하는데 연산들이 몇 번 이루어지는지 숫자로 표기한 것이다. 공간복잡도 : 프로그램을 실행시킨 후 완료하는 데 필요로 하는 자원 공간의 양을 뜻한다. 그러나 예전에 비해 컴퓨터 성능이 발달하여 메모리 공간에 여유가 생겨 중요도는 떨어졌다. 시간 복잡도와 공간 복잡도는 반비례적인 성향이 있다. 2. 스택과 큐는 무엇인가? 스택 : 웹 브라우저의 뒤로가기 처럼 가장 늦게 쌓인 데이터가 가장 빨리 나가는 후입선출의 자료구조이다. 큐 : 입력된 데이터가 시간 순서대로 처리해야 할 필요가 있는 상황에 사용되며, 가장 먼저 들어간 데이터가 제일 처..
[AWS] 클라우드 서비스 종류 IaaS (Infrastructure as a Service) 하드웨어 인프라를 인터넷을 통해 제공하는 서비스로, IaaS 는 가상화된 하드웨어, 스토리지, 네트워크, 운영체제 등을 제공한다. 사용자는 이를 통하여 자신의 애플리케이션을 실행 가능. 예) AWS EC2, Microsoft Azure, Google Computer Engine PaaS (Platform as a Service) 애플리케이션을 개발, 실행, 관리하기 위한 플랫폼을 인터넷을 통해 제공하는 서비스. PaaS 는 IaaS 에서 제공하는 하드웨어 인프라와 미들웨어를 사용하며, 애플리케이션 개발, 배포, 운영 등에 필요한 환경을 제공한다. 예) AWS Elastic Beanstalk, Heroku, Google App Engine Sa..
TIL 23.08.01 로컬스토리지 데이터 저장/ 조회/ 삭제 로컬스토리지에 데이터 저장하기 localStorage.setItem(key, value) import React, { useState } from 'react'; function App() { const [data, setData] = useState(''); const handleInputChange = (event) => { setData(event.target.value); }; const handleSaveData = () => { localStorage.setItem('myData', data); // 키-값 형태로'myData'라는 키로 데이터를 로컬 스토리지에 저장 }; return ( Save Data ); } export default App; 로컬스토리지에서 데이터 가져오기 localS..
[React] Redux Ducks 패턴 1. Reducer 함수를 export default 2. Action Creator 함수를 export 3. Action Type 은 app/ reducer/ Action_Type 형태로 작성 모듈 파일 한개에 Action Type, Action Creator, Action Value 가 모두 작성된 방식

티스토리툴바