솧디의 개발로그

Typescript란? - Javascript기반의 슈퍼셀 언어, 객체지향 컴파일 언어 JavaScript의 상위 집합으로 JavaScript의 모든 기능이 있음 TypeScript 컴파일러를 사용하여 ts(TypeScript)파일을 js(JavaScript) 파일로 변환, 쉽게 통합 정적 유형 검사 제공 클래스 기반 객체를 만들 수 있음 클래스 기반이므로 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원할 수 있음 Javascript와 Typescript의 차이 - Javascript: function sum(a, b) { return a + b; } >> 정적타입을 지원하지않아 어떤타입의 변환값을 리턴해야하는지 명확하지 않음 - Typescript: function sum(a: number..

리액트네이티브도 리액트 라우터처럼 화면이 이동하는 라우터 설정을 해줘야한다. 여기서 사용되는것은 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..

이번엔 네이티브에서 가장 활용을 잘할 수 있는 CSS? 아이템이다! 바로 FlatList 기존에 데이터를 map을 돌려 사용했다면 FlatList는 renderItem을 이용해 CSS처리하면서 같이 사용할수있는 아이템이다! map처리하는 로직을 줄일수있다!! 위 의 캐러셀이나 리스트를 뿌려줄 때 사용 할수있다! 캐러셀을 hook으로 만들어 컴포넌트에서 재활용 할 수있게 하였다. import React from "react"; import { Dimensions, Image } from "react-native"; import styled from "styled-components/native"; export default function Page({ item, style }) { return ( {/* ..

현재 리액트 네이티브로 어플을 만드는 중!!! 네이티비는 리액트랑 같으면서도 다른특징이 있는데 플젝하며보니 CSS가 가장다르다! import React from "react"; import { ScrollView, StyleSheet, Text, View } from "react-native"; function ScrollViewLayout(props) { return {props.children}; } export default ScrollViewLayout; const styles = StyleSheet.create({ LayoutView: { // backgroundColor: "pink", padding: 20, }, }); StyleSheet.create 메소드를 이용해 스타일 object를 작..

현재 진행하는 플젝에서 위치를 받아오는 부분이다. 이 부분을 expo-location라이브러리로 구현하였다. 하.지.만! 위치 재설정을 해야하는...로직이라... 고민하던 찰나에 재사용성을 위해 hook으로 만들 것으로 결정!!! location 공식문서 https://docs.expo.dev/versions/latest/sdk/location/ Location docs.expo.dev GPS 사용 확인 여부를 물어보는 로직과 실제 위치를 가져오는 로직 이렇게 2가지의 훅을 만들어야했다. import React, { useState, useEffect } from "react"; import styled, { css } from "styled-components/native"; import Theme f..

사용하는 MAC OS에서 React-Native 개발 환경을 구축하는 방법에 대해 정리해놓고자 한다. React-Native 개발 환경에는 크게 Expo CLI와 React-Native CLI, 2가지가 있다. 그 중에서 React-Native CLI를 구축하는 방법을 정리한다. 1. Homebrew 설치 Homebrew는 Mac에서 필요한 애플리케이션이나 개발 환경 등을 설치하는 데 유용하게 쓰인다. Homebrew에 대한 설치 방법은 Homebrew 홈페이지에서도 확인할 수 있다. 다음 코드를 Terminal 에 입력하여 Homebrew를 설치한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/in..

뻔한 블로그 카페리뷰는 그만! 솔직한 우리만의 카페리뷰! 카냐 (나..너...카페 좋아하냐?) 🥰👏🔥좋은 카페를 공유하고, 좋아하는 카페를 자랑할 수 있는 🌈카냐🌈를 소개합니다!🔥👏🥰 ✏️ 서비스 소개 ✏️ 좋은 카페를 찾고 싶고, 좋은 카페를 공유하고 싶으신가요? 카페에 대한 리뷰만을 확인하고 싶고, 상세한 평가가 궁금하신가요? 그렇다면, **카냐(CA NYA)**에서 다녀온 카페 정보를 공유하고, 원하는 카페 리뷰를 검색해보아요! 마음에 드는 리뷰가 있다면 좋아요 기능을 통해 마이페이지에서 한눈에 확인해요. 카페리뷰 외에도 커뮤니티를 통해 카페를 좋아하는 유저간에 자유로운 소통을 할수있어요! 💛 🐥 서비스 환경 🐥 카냐는 현재 PC환경에 최적화 되어있습니다! 모바일은 추후 지원예정입니다.☺️ 💜💛 주..

현재 만들고 있는 사이트의 모습입니다. 사이트 특성상 사진 업로드가 많습니다. 사진을 대용량으로 많이 받아오다보니 속도가 저하되는 이슈가 발생하였습니다. const onChangeImage = async e => { const imageFile = e.target.files[0]; const options = { maxSizeMB: 1, maxWidthOrHeight: 1920, useWebWorker: true, }; try { const compressedFile = await imageCompression(imageFile, options); setcommunityImage(compressedFile); } catch (error) { console.log(error); } let reader = ..