개발이 즐겁다!

Testable Code - 테스트 커버리지 100% 가 목표가 아니라, 각 요구사항에 대해서 정확히 기능을 하는지 테스트 하는 것을 목표로 한다. [너의 코드는] - 어떻게 하면 Testable 한 테스트 코드를 작성할 수 있을까? - 어떻게 테스트 가능한 코드를 작성할 수 있는지에 대한 발표이다. - 모델 : 해당 레이어(계층)에서 사용하는 데이터를 표현하는 객체 - 커플링을 줄이기 위해서는? - 이렇게 커플링을 줄이면 도메인을 엔티티로 전환시키는 비용이 든다. - 루즈한 커플링은 달성했지만 불필요한 작업이 생겼다. - 간결함을 갈 것인가 VS 결합도를 낮출것인가? - 케이스 1번 : 개발 불가 ㅋㅋㅋ 케이스 2번 : DDD 도메인을 JPA 모델이나 케이스 3번 : DB에서 나는 원하는대로 데이터를 ..

[EntityManagerFactory 오류 가능성] org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/autoconfigure/orm/jpa/HibernateJpaConfiguration.class]: Class org.springframework.orm.jpa.vendor.SpringHibernateJpaPersistenceProvider does not implement the requested interface jakarta.persistence.spi..

안녕하세요 강정호입니다. 오늘은 인스타그램클론코딩을 하면서 경험한 삽질을 정리해서 올려보려고 합니다. [문제 상황] Confirm.js 시크릿 코드로 인증을 하여 토큰을 받는 화면에서 인증을 정상적으로 완료 했음에도 불구하고 Home 화면으로 이동하지 못하고 Confirm 화면에만 계속 머물게 되는 오류가 있었습니다. 서버에서 출력해보니 토큰은 정상적으로 발급이 되었고, Confirm은 성공적으로 실행되었습니다. [원인] 강제로 isLoggedIn 변수를 false로 세팅을 해주고 있었다. 그렇다보니 AuthNavigation을 계속해서 호출하게 되었던 것이다. [프로그램 흐름] 1. Confirm.js 에서 시크릿 코드를 입력하고 Confirm 버튼 클릭. 입력한 시크릿코드와 해당 유저에게 발급된 시크..

안녕하세요 강정호입니다. 오늘은 인증을 확인하는 기능을 개발하겠습니다. [화면] Confirm.js import React from "react"; import styled from "styled-components"; import { TouchableWithoutFeedback, Keyboard } from "react-native"; import { TouchableOpacity } from "react-native-gesture-handler"; import AuthButton from "../../components/AuthButton"; import AuthInput from "../../components/AuthInput"; import { useState } from "react"; imp..

오늘은 2일간의 개발 삽질에 대해서 작성해 보려고 합니다. [undefined is not an object (evaluating 'navigation.navigate') 오류] 문제 상황 : Login 버튼을 누른 후 서버의 requestSecret 모듈을 호출하여 이메일을 받은 후 Confirm 화면으로 넘어가야 한다. 그러나 계속해서 "Check your email box" 오류가 발생했다. 원인 : navigation 컴포넌트가 undefined 된 컴포넌트였기 때문이다. navigation 컴포넌트가 undefined 되었는데 navigaion.navigate로 화면 이동을 하려고 하니 오류가 발생했던 것이다. undefined is not an object (evaluating 'navigat..

안녕하세요 강정호입니다 오늘은 로그인 폼을 마무리 짓는 작업을 진행해 보겠습니다. 수정한 프로그램은 useInput.js, AuthInput.js, Login.js 자바스크립트 파일입니다. TextInput 컴포넌트 스타일 입혀주기 // TextInput에 대해서 스타일 입혀주기 const TextInput = styled.TextInput` width: ${constants.width / 2} background-color: ${props => props.theme.greyColor} border : 1px solid ${props => props.theme.lightGreyColor} border-radius: 4px; padding: 10px; `; 1) width : 스크린 화면의 너비값을 가져와..

안녕하세요 강정호입니다. 오늘은 로그인 인증 초기화면과 로그인 화면을 만들어보겠습니다. AuthHome.js import React from "react"; import styled from "styled-components"; import { TouchableOpacity } from "react-native-gesture-handler"; import constants from "../../constants"; import AuthButton from "../../components/AuthButton"; /** View 컴포넌트의 스타일 지정 */ const View = styled.View` justify-content: center; align-items: center; flex: 1 `; co..

안녕하세요 강정호입니다. 오늘은 초기 화면에서 로그인 페이지, 계정 생성 화면으로 이동하는 화면을 구성해볼게요. [초기화면] [각각의 버튼을 클릭하여 이동한 화면] import React from "react"; import styled from "styled-components"; import { TouchableOpacity } from "react-native-gesture-handler"; import constants from "../../constants"; /** View 컴포넌트의 스타일 지정 */ const View = styled.View` justify-content: center; align-items: center; flex: 1 `; const Image = styled.Imag..

안녕하세요 강정호입니다. 오늘은 메시지 네비게이션을 만드는 작업을 해보겠습니다. 메시지 네비게이션 화면을 만드는데 앞서서 기존 화면상의 한계에 대해서 말씀드리겠습니다. 기존 하단 탭바 화면의 한계 한계점 : 하단의 탭바는 각각의 탭이 화면 1개의 역할을 한다. 즉 각 탭 화면 1개가 전부이고, 추가적인 화면 로딩을 할 수 없다. 해결방안 : 하단의 탭바 위에 스택 화면을 로딩하여 여러개의 화면을 보여줄 수 있도록 한다. import React from "react"; import { createAppContainer } from "react-navigation"; import { View, Text } from "react-native"; import { NavigationContainer } from ..

안녕하세요 강정호입니다 오늘은 네비게이션을 활용하여 화면을 만드는데요 계속해서 아래와 같은 오류가 발생했습니다. 에러 : TypeError: undefined is not an object (evaluating 'Object.keys(routeConfigs)') 해결방법 : 이것은 네비게이션 라이브러리의 버전 차이에서 발생한 오류였다. 변경 전 : import { createStackNavigator } from "react-navigation-stack"; 변경 후 : import { createStackNavigator } from "@react-navigation/stack"; 이렇게 변경하니 해결이 되었다. 내가 참고한 stack overflow의 답변이다 stackoverflow.com/ques..

안녕하세요 강정호입니다. 오늘은 리액트 Tab navigation에 대해서 알아보겠습니다. TabNavigation.js import React from "react"; import { createAppContainer } from "react-navigation"; import { View } from "react-native"; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Home from "../screens/Home"; import Notifications from "../screens..

React Native Gesture Handler docs.swmansion.com/react-native-gesture-handler/docs/ Getting Started | React Native Gesture Handler Gesture Handler aims to replace React Native's built in touch system called Gesture Responder System. docs.swmansion.com 사용 목적 : 리액트 네이티브에 내장된 React Native's Gesture Responder System을 개선하기 위한 라이브러리. 터치에 대한 반응 시스템을 개선하였다. 예를 들면 Pinch, Rotation 등등 다양한 터치 반응에 반응하기 위해 사용하..

안녕하세요 강정호입니다. 오늘은 로그인 여부에 따라서 화면을 보여주는 프론트 로직을 구현해보았습니다. import React, { createContext, useContext, useState } from "react"; import AsyncStorage from "@react-native-async-storage/async-storage"; export const AuthContext = createContext(); export const AuthProvider = ({isLoggedIn: isLoggedInProp, children}) => { const [isLoggedIn, setIsLoggedIn] = useState(isLoggedInProp); /** logUserIn 함수 호출 : A..

안녕하세요 강정호입니다. 오늘은 앱에서 캐시를 사용하여 데이터를 로딩할 수 있도록 구현해보겠습니다. github.com/apollographql/apollo-cache-persist apollographql/apollo-cache-persist 🎏 Simple persistence for all Apollo Cache implementations - apollographql/apollo-cache-persist github.com import { StatusBar } from 'expo-status-bar'; import React, { useState, useEffect } from 'react'; import { Ionicons } from "@expo/vector-icons"; import { Te..

안녕하세요 강정호 입니다 오늘은 이미지들을 Preloading 하는 것에 대해서 알아보겠습니다. 먼저 다운로드해야 할 라이브러리 입니다. npm install @expo/vector-icons npm install expo-app-loading npm install expo-font npm install expo-asset npm add @expo/vector-icons npm add expo-app-loading import { StatusBar } from 'expo-status-bar'; import React, { useState, useEffect } from 'react'; import { Ionicons } from "@expo/vector-icons"; import { Text, View ..

안녕하세요 강정호입니다 react native를 사용하여 안드로이드 iOS 앱을 만드는 프로젝트 환경설정을 해보겠습니다. 1. npm install -g expo-cli expo 클라이언트 설치 2. expo init sunflower-app expo 프로젝트 생성. 템플릿은 blank 선택 3. npm add styled-components 스타일 컴포넌트 라이브러리 추가 4. npm add react-navigation 리액트 네비게이션 라이브러리 추가(reactnavigation.org/docs/getting-started) 5. npm add apollo-boost apollo-boost 라이브러리 설치 6. npm add graphql Graphql 설치 7. npm add react-apoll..

안녕하세요 강정호입니다. 오늘은 인스타그램클론코딩에서 검색창 UI 개발 관련하여 포스팅을 작성 해볼게요. UI 작성시에는 styled-component를 주로 사용합니다. UserCard.js UserCard는 아래와 같이 검색했을 때 각 유저의 프로필 사진과, 이름, 팔로잉 버튼을 카드형식으로 보여주는 것입니다. const Card = styled.div` ${props => props.theme.whiteBox} display: flex; flex-direction: column; align-items: center; padding: 20px; `; const EAvatar = styled(Avatar)` margin-bottom: 15px; `; const ELink = styled(Link)` c..

안녕하세요 강정호입니다 오늘은 useMutation을 사용하여 좋아요 기능을 구현해보겠습니다. PostQueries.js 좋아요와 댓글 추가 Graphql 쿼리를 호출하는 함수를 만듭니다. import { gql } from "apollo-boost"; export const TOGGLE_LIKE = gql` mutation toggleLike($postId: String!){ toggleLike(postId: $postId) } `; export const ADD_COMMENT = gql` mutation addComment($postId:String!, $text: String!){ addComment(postId: $postId, text: $text){ id text user { userName ..

안녕하세요 강정호입니다 오늘은 인스타그램 클론 코딩에서 슬라이더 기능을 개발해보겠습니다. 슬라이더 기능 : 사진이 여러개일떄 일정 시간이 지난 후에 자동으로 다음 사진이 보여질 수 있도록 하는 것. 슬라이더 구현 로직을 살펴보겠습니다. PostContainer.js import React, { useState, useEffect } from "react"; import PostPresenter from "./PostPresenter"; import PropTypes from "prop-types"; import useInput from "../../Hooks/useInput"; // 입력받은 매개인자 const PostContainer = ({id, user, files, /** 사진id, url이 배열..

안녕하세요 강정호 입니다 오늘은 Post를 게시판에 보여주는 기능을 개발하면서 배울 개념들에 대해서 작성해볼게요. useState useState는 가장 기본적인 Hook 이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해주는 기능이다. 즉 한마디로 요약하자면 "함수형 컴포넌트 내부에서 특정 변수의 값을 변경시키는 것" 이라고 생각하면 된다. useState에 대한 예시입니다. (출처 : 리액트를 다루는 기술 Velopert 김민준 저서, 8장 Hooks) import React, { useState } from 'react'; const Counter = () => { //1) value : 상태를 변경할 변수 //2) setValue : useState 함수를 호출하여 반환 받은 상태를 변..