본문 바로가기

전체 글

 (152)
[REACT] 심화주차 - JSON Server JSON Server란?JSON Server는 간단한 REST API 서버를 실행할 수 있는 툴입니다.데이터베이스를 따로 구축하지 않고, JSON 파일을 이용해 서버 역할을 수행할 수 있습니다.리액트 앱에서 서버 요청 테스트를 할 때 매우 유용합니다.1. 설치npm install -g json-server2. 데이터 파일 작성: db.json이라는 파일을 만듭니다{ "posts": [ { "id": 1, "title": "Hello World", "content": "Welcome to JSON Server" }, { "id": 2, "title": "Learning React", "content": "React is awesome!" } ]}3. 서버 실행: 아래 명령어로 JSON Ser..
[REACT] 심화주차 - 비동기, 동기 1. 비동기 - 비동기, Promise1)  비동기란?비동기는 작업이 끝날 때까지 기다리지 않고 다른 작업을 진행 할 수 있는 방식입니다.왜 비동기가 필요할까?서버에서 데이터를 가져오거나(예: 게시글 불러오기), 파일을 읽는 작업은 시간이 걸립니다.이 작업들이 끝날 때까지 기다리면 앱이 멈춘 것처럼 보일 수 있습니다.비동기를 사용하면 이런 작업이 끝나기를 기다리는 동안 다른 작업을 계속할 수 있습니다.동기 vs 비동기 예시동기 작업 (일이 순서대로 처리됨)function task1() { console.log("Task 1 시작"); for (let i = 0; i  2. 비동기 작업 (끝날 때까지 기다리지 않음)function task1() { console.log("Task 1 시작"); se..
[REACT] 강의 모르는 용어 언마운트(Unmount)란?React에서 언마운트(Unmount)란, 컴포넌트가 화면에서 제거되는 순간을 의미합니다.즉, 컴포넌트가 더 이상 필요 없거나 사용자에게 보이지 않아 렌더링되지 않을 때 발생합니다.팬딩(Pending) 처리란?비동기 작업에서 작업이 완료되지 않은 중간 상태를 처리하는 것을 말합니다.
[REACT]JSON const profileimgUrl = JSON.parse(userData.user_profile_image);자꾸 프로필 업로드를 하면 alt가 렌더링이 되어서 문제였다. 콘솔창에 찍어보니 객체형태로 url이 떴고 여기서부터 막혀서 다른분께 자문을 구했다.Supabase에 저장된 값이 {"publicUrl": "https://..."} 형식의 JSON 문자열이었기 때문에, 단순히 setProfileImage(userData.user_profile_image)로는 제대로 처리되지 않는다. 그래서 JSON.parse로 이 문자열을 객체로 변환해야 publicUrl을 사용할 수 있었다.........진짜 왜 이걸 모르냐구..const profileimgUrl = JSON.parse(userData.user_..
[REACT] SUPABASE 수퍼베이스에서 초대를 받고 테이블을 생성하여 앞으로 쓰게 될 스키마를 생성해주었다. 참고해서 useEffct로 필요한 것만 가져와서 렌더링해주었다.useEffect(() => { const fetchData = async () => { try { // 1. `users` 테이블에서 닉네임 가져오기 const { data: userData, error: userError } = await supabase.from('users').select('user_nick_name').single(); if (userError) throw userError; setNickname(userData.user_nick_name); // 닉네임 설정 ..
가운데 글자 가져오기 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.재한사항s는 길이가 1 이상, 100이하인 스트링입니다   function solution(s) { let answer = ''; if(s.length%2===0){ answer=s[s.length/2-1]+s[s.length/2] }else{ answer=s[Math.floor(s.length/2)] } return answer }
[REACT] ROUTER-NAVIGATE navigate('/home'); // '/home' 경로로 이동navigate(-1); // 이전 페이지로 이동
[REACT] REDUX 총 정리 (연습다시하기) 리덕스(Redux)란?JavaScript 애플리케이션의 상태 관리를 위한 라이브러리로, 주로 React와 함께 사용된다. 리덕스는 애플리케이션 상태를 전역적으로 관리하고 컴포넌트 간의 상태 공유를 쉽게 해준다. *용어 설명*스토어(Store): 애플리케이션의 전역 상태가 저장되는 곳. 스토어는 createStore 함수를 사용하여 생성할 수 있다.액션(Action): 상태 변경 요청을 나타내는 객체로, 반드시 type 속성이 포함된다.리듀서(Reducer): 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수다.디스패치(Dispatch): 액션을 리듀서에 전달하여 상태 변경을 트리거하는 함수다.구독(Subscribe): 스토어의 상태가 변경될 때마다 특정 콜백 함수가 실행되도록 하는 함수다. 1...

티스토리툴바