솧디의 개발로그

리액트네이티브도 리액트 라우터처럼 화면이 이동하는 라우터 설정을 해줘야한다. 여기서 사용되는것은 react-navigation/stack이다! ▼react-navigation 공식문서▼ https://reactnavigation.org/docs/native-stack-navigator/ https://reactnavigation.org/docs/native-stack-navigator/ reactnavigation.org 설치진행! yarn add @react-navigation/native-stack App.js설정 import "react-native-gesture-handler"; import { NavigationContainer } from "@react-navigation/native"; im..

검색기능이 잘 구현된다면 추천검색어는 아주 쉬워진다! 추천검색어는 만들고 있는 앱특성상 장소가 고정값이기에 장소로 추천검색어를 등록하였다. 현업에서 일하다보니 느낀것은 절대 하드코딩금지!!!!!! 물론 이번플젝은 공부용 팀플이지만 실제 회사에서는 절대 하드코딩을 쓰지않는다는점..!! 데이터 컴포넌트를 만들어 사용하던지 json 파일을 만들어 사용한다! 나는 데이터컴포넌트를 만들어 진행하였다! const RecommendSearchData = () => { const datas = [ { id: 1, name: "세종문화회관", }, { id: 2, name: "부산문화회관", }, { id: 3, name: "예술의전당", }, { id: 4, name: "금호아트홀", }, { id: 5, name: ..

이번 앱에서 검색기능 중에서도 제일 고민했던부분은 추천검색어 부분이였다! 추천검색어 하기전에 검색 기능부터! 추천검색은 다음포스팅에 남길게요!ㅎㅎ 검색기능은 키워드를 담고 서버에 param으로 키워드와 함께 보내는 방식이라고 생각하면된다! 일단 검색기능을 구현하려면 keyword를 작성 후 버튼이벤트가 발생하면 useState에 keyword가 담겨 검색할수 있도록 로직을 구현하였다. 이렇게해야 추천검색어 기능도 할수있기에..ㅎㅎ const onChangeSearch = (keyvalue, e) => { setSearchWord({ ...searchWord, [keyvalue]: e, }); }; ▲ 키워드를 담아주는 로직 리액트네이티브에서는 이벤트와 키밸류를 함께 받아주어함!ㅎㅎ const getSea..

현제 카냐에서 마이페이지를 개발하는 중에 데스크탑 버전을 먼저 만들고 데스크탑부분에서는 outlet처리를 하여 카테고리별 컴포넌트가 나올수있도록 구성하였다. 이 후 미디어쿼리로 모바일 버전을 제작하며 outlet처리한 비지니스로직을 활용하기에 최대한 컴포넌트 재활용을 위해 모바일버전에도 outlet를 살리되 프로필부분을 전역관리해 쓰고자하였다. outlet처리한 로직을 모바일로 바꾸다보니 내가 쓴글을 클릭하면 아래와 같이 프로필과 함께 컴포넌트가 나왔다. 그래서 프로필부분을 전역으로 관리해 카테고리 클릭 시 나오지않게 하도록하였다. boolean타입만 받아오면 되는 로직이라 이것을 현재 사용하는 상태관리 라이브러리인 리덕스에 추가하기위해서는 많은 과정을 걸치게된다. [ REDUX 버전 ] 1. 리덕스 폴..

아래의 코드로 무한 스크롤 구현하니 로그인시 마이페이지 첫 겟요청시 리랜더링 이슈 발생, 새로고침해야 데이터가 캐싱되었습니다. const fetchPostList = async (pageParam) => { const res = await axios.get( `http://localhost:5001/posts?&page=${pageParam}&limit=6`,{ header:{ authorization, }, }, ); const { posts, isLast } = res.data; return { posts, nextPage: pageParam + 1, isLast }; }; function Posts() { const { ref, inView } = useInView(); const { data, s..

import { useQuery, useInfiniteQuery } from "@tanstack/react-query"; import { useInView } from "react-intersection-observer"; import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useDeleteDetailPost } from "../../querys/detail"; import axios from "axios"; import { Box } from "../../components"; import { Board } from "./board"; const MyBoard = () => { const B..

{data && data.length > 0 ? ( {data?.map(item = > { return })} ) : (작성한 게시물이 없습니다.) } ); }; 위 와 같이 프롭스를 보낼 때 삼항연산자로 조건을 걸어 데이터가 있으면 하위컴포넌트로 프롭스를 보내려고하였다. 하지만 계속해서 map 을 돌리려 할때마다 data부분이 오류가 났다. 상위컴포넌트에서는 조건을 걸어 사용하는것이 안되고 프롭스로 전체를 넘겨준 후 하위 컴포넌트에서 조건을 걸어 사용해야한다. {nickname}님이 작성하신 댓글입니다. 위 와 같이 전체를 프롭스로 넘기고 하위폴더에서 조건을 걸어 사용해야한다.

🔍 회원가입시 많은 인풋창들을 넣어 정보를 받게되는데 그때 label태그를 이용합니다. ❌ 라벨태그는 for속성을 넣어 인풋의 id같으면 연결되는데 for로 사용하면 오류가발생하였습니다. 여러분의 나이대를 골라보세요. 10대 20대 30대 40대 이상 🔼 위 와 같이 for를 사용했을때 오류화면발생 회원가입 id 😉 for ⇒ htmlFor로 수정하여 사용하여 오류를 해결하였습니다.

리액트 AXIOS란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다 AXIOS 기능 브라우저 환경: XMLHttpRequests 요청 생성 Node.js 환경: http 요청 생성 Promise API 지원 요청/응답 차단(Intercept) 요청/응답 데이터 변환 취소 요청 JSON 데이터 자동 변환 사이트 간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원 AXIOS 설치방법 vs코드 터미널창 입력! yarn add axios api처리할 컴포넌트에 import import axios from 'axios'; AXIOS 사용방법 import axios from "axios"; const BASE_URL = process.en..

돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. 보통 돔트리형태를 지니고있어 돔트리라고이야기하기도 한다. DOM은 HTML과 자바스크립트를 서로 이어주는 역할을 한다. 가상 돔 (Virtual DOM )이 나오게 된 이유 ? 기존 렌더링 방식은 1. 브라우저는 서버가 보내준 HTML 파일 을 해석(Parsing)하여 DOM 트리 를..