minkyeong-ko.log

[포트폴리오] 미니 포트폴리오 웹사이트 제작기

Sun, 08 Aug 2021 18:20:17 GMT

제작 배경

컴퓨터공학을 다중전공한 이후 여러 동아리와 팀 프로젝트, 개인 프로젝트들을 나름 열심히 해왔지만

뒤늦게 프론트엔드 개발자가 되겠다는 확실한 진로를 정하게 된 후에 해당 직무에 포트폴리오로 활용할 웹 개발 경험이 많지 않다는 것을 깨달았다.

지원서를 내기 위해서는 포트폴리오가 거의 필수이기 때문에, 어떻게든 제출을 하기 위해 노력해야 했다.

보통의 경우 진행한 프로젝트를 설명하는 형식이 대부분이지만 경험이 다소 부족한 나이기에

HTML/CSS/JS 활용능력과 웹 개발에 대한 열정을 최대한 보여주는 것이 최선일 것이라 생각되어, 조금은 빈약하더라도 나만의 웹사이트를 만들고자 마음먹게 되었다!

따라서 선택한 주제가 '나' 자신을 소개하는 웹사이트이다.

결과물

전체 코드 보기👀

https://github.com/Minkyeong-Ko/IntroWebsite

실제 웹사이트 보기👀

https://minkyeongko.netlify.app

몇 주간 정말 열심히 만들어서, 배포까지 완료했다! 엉성한 점도 많고 아쉬운 점도 많지만,

기존에 계획했던 아래의 4가지 효과를 구현하는 데에 성공했다는 점은 매우 뿌듯하다.

Screen Shots

(1) 텍스트 hover 효과

(2) 이미지 hover 효과

(3) 스크롤에 따른 3D Cube의 회전

(4) Card Flip 애니메이션

반성과 계획의 시간

반성

전환 효과가 매끄럽지 않은 부분이 꽤 있다.
원하는 기능 구현에 급급해 User의 편의를 크게 고려하지 못한 것 같아서 아쉽다.
비슷한 이유로 내가 원하는 감성이나 디자인을 시도해 볼 여유를 갖지 못해서 매우 매우 아쉽다.
오직 chrome으로, 한 기기로만 개발한 아마추어적인 실수를 한 것 같다.
제작에 예상보다 시간이 많이 걸렸다.

앞으로의 계획

반응형 웹사이트로 개편하기
Safari, IE 등 브라우저 호환성 높이기
깔끔한 코드 작성법 사용하기
이제 HTML, CSS, Javascript 고급 단계로 퀄리티 높이기

사실 프로젝트를 하다 보면 나의 부족한 점이 계속 더 보이는 것 같지만 그만큼 더 발전할 수 있는 기회가 주어지는 것이라 생각하고, 계속해서 열심히 달려 나가야겠다. 화이팅!

[React Native] 문제 해결 - Scroll View 와 Flatlist 스크롤 버벅거리는 문제

Fri, 25 Jun 2021 07:50:12 GMT

스크롤이 되지 않는 ScrollView

프로젝트 진행 중에 ScrollView 를 사용했는데 스크롤이 되지 않거나 굉장히 버벅되는 현상이 발생했다.

검색을 해 보니 대부분 flex 또는 flexwrap 설정을 바꿔주면 해결된다고 나와 있었지만 나에게는 전혀 통하지 않았다.

그러던 중 StackOverflow에서 TouchableWithoutFeedback 으로 ScrollView를 감싸 보라는 댓을 발견, 적용했더니 바로 해결되어 버렸다!

이유는?

아마도 현재 프로젝트에서 화면 전체를 이미 TouchableWithoutFeedback 으로 감싼 상태였던 것이 문제가 된 것 같다.

ScrollView 를 스크롤을 할 때의 터치 이벤트가 부모 touchable 요소인 TouchableWithoutFeedback 으로 가버린 것으로 추측된다.

이 때 onStartShouldSetResponder 를 사용해서 propagation을 막는 방법도 있다고 하는데 나는 그냥 Touchable로 감쌌을 때 바로 해결이 됐다!

아무튼 ScrollView 내에서, 그리고 Flatlist 의 경우 renderItem 에서 요소를 TouchableWithoutFeedback으로 감싸주면 아주 잘 동작한다ㅎㅎ

...

이런 식으로..!

[React Native] 인스타그램 같은 좋아요 효과 구현하기 (Double tap, Animated)

Thu, 17 Jun 2021 13:48:23 GMT

구현 과정

최근 개인 프로젝트에서 좋아요 기능이 필요했다. 그래서 인스타그램처럼 사진을 두번 클릭하거나 하트 아이콘을 누르면 하트가 떴다가 사라지는 효과를 구현했고, 이를 정리해보려 한다.

간단한 기능 구현이지만 만들면서 만약 내가 SNS를 만든다면..? 하는 질문을 해보게 되었고 만약 만든다면 '필름 사진을 공유 플랫폼' 을 만들지 않을까 하는 생각으로.. 엉성하지만 재밌게 개발했다ㅎㅎ

+오늘도 사진은 저작권 필요없는 photo by 나!

화면 구성하기

//App.js
import React from "react";
import { StyleSheet, View, Text, SafeAreaView, ImageBackground } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';

function App() {
  return (
    

      {/* 제목과 좋아요 버튼 */}
      
        
          The Garden of The Royal Library
          
        
      

      {/* 사진 */}
      
          
        
          
        
      

      {/* 설명과 해시태그 */}
      
        
          
            
             Username 
          
          똑딱이 필름카메라와 함께
          덴마크 여행중
          #fuji200  #copenhagen
        
      
    
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    marginHorizontal: 17,
  },
  section: {
    borderTopWidth: 0.8, 
    borderColor: 'gray', 
    justifyContent: 'center', 
    alignItems: 'center',
  },
  title: {
    width: '90%', 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center',
  },
  titleText: {
    fontSize: 17, 
    fontFamily: 'SpoqaHanSansNeo-Regular',
  },

  user: {
    flexDirection: 'row', 
    alignItems: 'center', 
    marginVertical: 5, 
  },
  userimage: {
    width: 32, 
    height: 32, 
    borderRadius: 32/2, 
    backgroundColor: 'black', 
    marginHorizontal: 5,
  },  
  username: {
    fontSize: 15, 
    fontWeight: '500', 
    fontFamily: 'SpoqaHanSansNeo-Regular',
  },
  text: {
      fontSize: 15, 
      marginVertical: 5, 
      fontFamily: 'SpoqaHanSansNeo-Light',
  },
  tags: {
    fontSize: 15, 
    color: 'green', 
    marginVertical: 5,
  },
}
);

export default App;

간단하게 제목, 사진, 설명으로 나눠진 임시 레이아웃을 구성했다.

제목 옆의 하트 아이콘을 누르거나 사진을 더블 탭 하면 사진 중간의 하트 아이콘이 서서히 떴다가 사라지는 효과를 구현할 것이다.

Double Tap 구현

우선 사진에다가 더블 탭을 해야 하니, 이미지를 TouchableWithoutFeedback으로 감싸서 터치가 가능하게 만든다.

TouchableWithoutFeedback은 말 그대로 터치를 했을 때 opacity가 바뀌거나 하는 효과를 보여주지 않는 것이다.

...

  

...

이제 사진을 터치하면 handleDoubleTap 이라는 함수를 실행하게 되고 그 안에서 터치가 그냥 터치인지, 더블 탭인지 구별해야 한다.

//App.js
...
  var lastTap = null;  

  const handleDoubleTap = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    //두번째 tap이 지난 tap을 한지 0.03초 이내에 이뤄졌을 때 -> Double tap
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
      toggleHeart();
    }
    else {
      lastTap = now;
    }
  }
  ...

빠르게 두번의 터치가 들어오면(여기선 0.03초 이내) 이를 더블탭으로 인식하게 되고, 하트 Animation을 보여줄 toggleHeart 함수를 실행한다.

//App.js
...
const [heart, setHeart] = useState(false);

const toggleHeart = () => {
    setHeart(previousState => !previousState);
    fillHeart();
  }
...

fillHeart 애니메이션

Animation을 위한 코드 수정

우선 애니메이션 코드를 작성하기 전에 heart의 값이 true이면 채워진 하트를, false면 테두리만 있는 하트 아이콘을 보여주도록 코드를 수정한다.

제목 옆의 하트 아이콘은 클릭 했을 때 Animation을 보여줘야 하니 TouchableOpacity로 감싸서 터치 시 toggleHeart 함수가 실행되게 한다.

//App.js
...

  The Garden of The Royal Library

  {/* Touchable로 감싸기 */}
  
    {/* heart값에 따른 아이콘 변경 */}
    {heart ?  : }
  

...

아래의 아이콘은 하트가 보여졌다가 사라지는 효과를 만들고 보여주기 위해, View를 Animated.View로 변경한 뒤 style에 opacity 값을 추가한다.

//App.js
...
{/* Animated View로 변경, opacity 추가 */}

  {/* heart값에 따른 아이콘 변경 */}
  {heart ?  : }


...

이제 Animated 함수를 활용해서 하트가 떴다가 사라지는 효과를 구현할 수 있다.

fillHeart Animation 구현하기

//App.js
...
const opacity = useRef(new Animated.Value(0)).current;

const fillHeart = () => {
    Animated.sequence([
      Animated.timing(opacity, {
        toValue: 1,
        duration: 400,
        easing: Easing.quad,
        useNativeDriver: true,
      }),
      Animated.delay(600),
      Animated.timing(opacity, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }),
    ]).start();
  }
...

이렇게 구현한 하트 애니메이션을 크게 세 가지로 생각할 수 있다.

하트 아이콘이 부드럽게 떠오르고, 잠깐 동안 떠 있다가, 다시 부드럽게 사라진다.

Animated.timing을 사용해 400ms 동안 0이었던 opacity를 1(toValue)로 만들고, Animated.delay를 사용해 600ms 동안 하트 아이콘을 보여주고, 다시 Animated.timing을 사용해 1이 된 opacity를 다시 0(toValue)로 만들어 하트 이모티콘을 사라지게 만든다.

그리고 마지막으로 Animated.sequence를 사용해 위의 세 애니메이션을 연속적으로 실행한다.

여기서 바뀌는 opacity 값은 아까 추가한 Animated.View의 opacity 값에 바로 반영되게 된다.

끝!

전체 코드 보기👀

//App.js
import React, 
{ useRef, useState } 
from "react";
import { StyleSheet, View, Text, SafeAreaView, ImageBackground,
        Animated, TouchableWithoutFeedback, TouchableOpacity, Easing,
} from 'react-native';

import Icon from 'react-native-vector-icons/AntDesign';

function App() {

  const [heart, setHeart] = useState(false);
  const opacity = useRef(new Animated.Value(0)).current;

  var lastTap = null;  

  const handleDoubleTap = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    //두번째 tap이 지난 tap을 한지 0.03초 이내에 이뤄졌을 때 -> Double tap
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
      toggleHeart();
    }
    else {
      lastTap = now;
    }
  }

  const toggleHeart = () => {
    setHeart(previousState => !previousState);
    fillHeart();
  }

  const fillHeart = () => {
    Animated.sequence([
      Animated.timing(opacity, {
        toValue: 1,
        duration: 400,
        easing: Easing.quad,
        useNativeDriver: true,
      }),
      Animated.delay(600),
      Animated.timing(opacity, {
        toValue: 0,
        duration: 500,
        useNativeDriver: true,
      }),
    ]).start();
  }

  return (
    
      
        
          The Garden of The Royal Library
          
            {heart ?  : }
          
        
      
      
        
          
        
        {/* Animated로 변경, opacity 값 */}
        
          {heart ?  : }
        
      
      
        
          
            
             Username 
          
          똑딱이 필름카메라와 함께
          덴마크 여행중
          #fuji200  #copenhagen
        
      
    
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    marginHorizontal: 17,
  },
  section: {
    borderTopWidth: 0.8, 
    borderColor: 'gray', 
    justifyContent: 'center', 
    alignItems: 'center',
  },
  title: {
    width: '90%', 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center',
  },
  titleText: {
    fontSize: 17, 
    fontFamily: 'SpoqaHanSansNeo-Regular',
  },

  user: {
    flexDirection: 'row', 
    alignItems: 'center', 
    marginVertical: 5, 
  },
  userimage: {
    width: 32, 
    height: 32, 
    borderRadius: 32/2, 
    backgroundColor: 'black', 
    marginHorizontal: 5,
  },  
  username: {
    fontSize: 15, 
    fontWeight: '500', 
    fontFamily: 'SpoqaHanSansNeo-Regular',
  },
  text: {
      fontSize: 15, 
      marginVertical: 5, 
      fontFamily: 'SpoqaHanSansNeo-Light',
  },
  tags: {
    fontSize: 15, 
    color: 'green', 
    marginVertical: 5,
  },
}
);

export default App;

[Javascript] 스크롤에 따른 배경색 변경

Fri, 21 May 2021 12:48:58 GMT

index.js

//index.js
var colors = [
    '#F2B705',
    '#F25C05',
    '#0388A6',
    '#0E5929',
    '#F272A1',
]

var container = document.getElementById('container');

var text = document.getElementById('value');    //Scroll Value
var color = document.getElementById('color');    //Color Code

//Wheel Event
container.onwheel = changeBgColor;

var colorIndex = 0;
var scrollValue = 0;    //get mouse wheel value

function changeBgColor(e) {
    scrollValue += e.deltaY * 0.01;
    text.textContent = Math.floor(scrollValue);

    console.log(scrollValue);

    //위로 Scroll
    if (scrollValue > 10) {
        colorIndex += 1;
        if (colorIndex > colors.length-1) colorIndex = 0;
        color.textContent = colors[colorIndex];
        container.style.backgroundColor = colors[colorIndex];    //배경색 변경
        scrollValue = 0;    //스크롤 값 초기화
    }

    //아래로 Scroll
    if (scrollValue < -10) {
        colorIndex -= 1;
        if (colorIndex < 0) colorIndex = colors.length-1;
        color.textContent = colors[colorIndex];
        container.style.backgroundColor = colors[colorIndex];    //배경색 변경
        scrollValue = 0;    //스크롤 값 초기화
    }
       e.preventDefault(); // disable the actual scrolling
}

스크롤 동작이 이뤄질 때마다 e.deltaY 값을 누적시킵니다. 위로 스크롤 시 양수 값을, 아래로 스크롤 시 음수 값을 가집니다.

누적 값이 일정 수준이 넘어가면 colorIndex 값을 증가시켜 colors 배열의 다음 색으로 배경색을 변경합니다.

그리고 부드러운 트랜지션을 위해 css 코드를 추가합니다.

transition: background-color 0.8s;

Date.now()

만약 스크롤을 빠르게 넘긴다면, 한번에 배경 색이 여러번 바뀌게 됩니다. 괜찮을 수도 있지만 저는 정신이 없기도 하고 좀 더 안정적으로 동작하게 하고 싶어서 추가로 Date()를 사용했습니다.

현재 시간을 나타내는 변수 dateNow를 정의하고

var dateNow = Date.now();

스크롤 값이 들어오면 흐른 시간을 비교하고, 일정 시간이 넘어야만 새롭게 배경 색깔을 변경합니다.

timePassed = Date.now() - dateNow;
if (timePassed > 500) {
    ...
}

배경 색이 바뀌는 순간에 다시 현재 시간을 저장합니다.

dateNow = Date.now();

전체 코드 보기👀

!codepen[Mila00a/embed/bGqgJZO?height=517&theme-id=light&default-tab=js,result]

[React Native] 오른쪽 스와이프 시 텍스트 보여주기(Swipeable, Interpolation)

Fri, 21 May 2021 09:08:18 GMT

과정 설명

위의 예시는 제가 직접 찍은 사진을 가지고, 오른쪽에서 왼쪽으로 화면을 Swipe 했을 때 작품 이름이랑 작가 정보가 나타나도록 만든 것입니다.

오늘의 구현 순서

스와이프 할 화면 만들기(Swipeable, ImageBackground)

rightAction 스와이프 동작 정의하기(Interpolation)

이 글을 쓰는 이유?

저처럼 Interpolation이 많이 헷갈리시는 분들, 예시 코드가 많은 왼쪽이 아닌 오른쪽 스와이프를 구현하고 싶으신 분들에게 작은 도움이 되길 바라며..!

스와이프 할 화면 만들기

import Swipeable from 'react-native-gesture-handler/Swipeable';

Swipeable을 사용하기 위해 별도로 import를 해줍니다.(react-native-gesture-handler 필요)

ImageBackground

우선 제일 먼저 화면을 꽉 채우는 이미지를 만들고, 그 이미지를 Swipeable하게 만들어야 합니다. 여러 가지 방법이 있겠지만 저는 ImageBackground 안에 Swipeable을 넣고 width, height을 100%로 만들었습니다.

그리고 오른쪽에서 Swipe가 감지되면 rightAction 함수를 호출하도록 합니다.

rightAction 함수 정의하기

const rightAction = (progress, dragX) => {
      const trans = dragX.interpolate({
          inputRange: [-window.width, 0],   //화면의 왼쪽 끝, 화면의 맨 오른쪽
        outputRange: [0, window.width],   //transitin 0, transition 100% 
      });

      return (
        
          //작품 정보
          
              The Thinker
              Bronze 1900-01 (1880)
          
          //작가 정보
          
            Auguste Rodin (French, 1840-1917)
          
        
      );
}

App.js에 정의한 rightAction 코드입니다.

Interpolation

interpolate는 간단히 말하면 inputRange를 outputRange로 매핑시키는 함수입니다.

const trans = dragX.interpolate({
          inputRange: [-window.width, 0],   //화면의 왼쪽 끝, 화면의 맨 오른쪽
        outputRange: [0, window.width],   //transition 0, transition 100% 
      });

따라서 해당 코드는 input인 dragX에 따라, output인 trans의 값이 매핑됩니다.

dragX

interpolate()의 input이자 오른쪽 <-> 왼쪽 스와이프 정도를 나타내는 값입니다. dragX의 값을 콘솔로 확인해 보면 오른쪽 -> 왼쪽으로 스와이프 시 값이 0에서 마이너스로 변하는 것을 확인할 수 있습니다.

따라서

inputRange: [-window.width, 0]

의 뜻은 화면의 왼쪽 끝과 오른쪽 끝이 Swipe의 범위가 되도록 했습니다.

trans

interpolate()의 output이자 Swipe를 했을 때 화면에 보일 텍스트의 translateX 값입니다.

outputRange: [0, window.width],

translateX가 0 이라면 텍스트를 원래자리 그대로 보여주고, translateX가 window 크기라면 텍스트가 화면의 오른쪽으로 완전히 숨겨지는 상태입니다.

따라서 input과 output이 매핑된다는 것은 스와이프를 화면의 왼쪽 끝(dragX : -window.width)까지 했을 때 텍스트를 보여주고(translateX : 0), 오른쪽 끝(dragX : 0)까지 했을 때는 텍스트를 오른쪽으로 완전히 숨기는(translateX : window.width) 것입니다.

사실 저도 interpolation은 처음이라, interpolation에 대한 설명이라기 보다는 제가 작성한 코드를 설명한 것에 불과한 것 같기도 합니다.. range 구간이 3개 이상인 interpolation도 사용해 보면서 더 공부해야 할 것 같습니다.

전체 코드 보기👀

import React from 'react';
import { View, Animated, ImageBackground, } from 'react-native';

import Swipeable from 'react-native-gesture-handler/Swipeable';
import { Dimensions } from 'react-native';

const window = Dimensions.get("window");
const url = require('./rodin.jpeg')


function App() {
    const rightAction = (progress, dragX) => {
      console.log(dragX);
      const trans = dragX.interpolate({
        inputRange: [-window.width, 0],   //화면의 왼쪽 끝, 화면의 맨 오른쪽
        outputRange: [0, window.width],   //transitin 0, transition 100% 
      });

      return (
        
          
              The Thinker
              Bronze 1900-01 (1880)
            
          
            Auguste Rodin (French, 1840-1917)
          
        
      );
    }

    return (
      
        
          
          
        
      
    );
}

export default App;

[React Native] Drawer와 Stack Navigatior 함께 사용하기

Tue, 18 May 2021 10:55:20 GMT

React Navigation은 앱 안에서의 화면 전환을 지원하는 라이브러리이다. 공식 문서(https://reactnavigation.org/docs/getting-started)를 따라 하면 쉽게 설치할 수 있다.

npm install @react-navigation/drawer

Drawer Navigation은 화면 왼쪽 또는 오른쪽의 화면 리스트를 통해서 화면을 이동할 수 있는 기능. 쉽게 말해 화면을 선택하는 메뉴 같은 느낌이다.

Stack Navigator

npm install @react-navigation/stack

Stack Navigator를 사용하면 새로운 화면으로 이동할 때마다 Stack의 맨 위에 쌓여서, 순차적인 앞뒤 화면 이동이 가능하다.

구현 과정과 개념 설명

사실 Drawer와 Stack을 각각 구현하는 건 어렵지 않을 텐데 프로젝트에 Drawer랑 Stack을 같이 사용했을 때 좀 헷갈렸던 기억이 있어서 제대로 정리하고자 글을 쓰게 됐다.

예시로 만든 앱에는, 간단하게 HomeScreen, DetailScreen, AboutScreen 세 가지 화면이 있다.

Drawer 메뉴에서는 Home, About 화면에만 접근이 가능하고 Details 화면은 Home을 통해서만 접근이 가능하게 만들고자 한다.

따라서 필요한 과정은,

StackNavigator 정의(Home, Details)

DrawerNavigator 정의(Home, About)

App.js에서 DrawerNavigator 호출

StackNavigator (Home, Details)

/* StackNavigator.js */
import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import Home from './HomeScreen';
import Details from './DetailScreen';

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    
      
      
    
  );
}

export { StackNavigator };

StackNavigator.js에 Stack 형식으로 동작할 화면들인 Home과 Details를 정의했다.

import React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

function HomeScreen({ navigation }) {
  return (
    
      HomeScreen

그리고 Details 화면으로 이동하기 위한 버튼을 HomeScreen에 생성. Stack에 화면이 쌓여있기 때문에 Details 화면에서 뒤로 이동하면 HomeScreen이 된다.

DrawerNavigator 정의(Home, About)

import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";
import { StackNavigator } from "./StackNavigator";
import About from './AboutScreen';


const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    
      
      
    
  );
}

export default DrawerNavigator;

Drawer에서 접근 가능한 화면들인 Home, About을 정의했다.

이 때, 리스트에서 Home을 클릭 시 HomeScreen으로 바로 연결되는 것이 아니라, Home과 Details 화면을 모두 포함하는 StackNavigator로 component가 설정되어야 한다.

App.js에서 DrawerNavigator 호출

import React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import DrawerNavigator from './DrawerNavigator';

function App() {
    return (
      
        
      
    );
}

export default App;

최종적으로 App.js에서 DrawerNavigator를 호출하면 끝!!

[HTML/CSS/JS] 이미지 업로드 - 화면에 파일 이름과 업로드된 이미지 보여주기

Mon, 17 May 2021 15:08:07 GMT

구현할 동작은?

버튼을 눌러서 업로드할 이미지 선택 -> 파일 이름 확인하고 제출 -> 화면에 보여지는 이미지 확인

이를 세 가지 과정으로 나눌 수 있다.

form과 label로 이미지 업로드 버튼 만들기

javascript로 이미지 파일 처리하기

submit 버튼 클릭 시 이미지 보여주기

form과 label로 이미지 업로드 버튼 만들기


    
        
            👉 CLICK HERE! 👈

form으로 파일 처리

이미지 파일 데이터를 받아야 하기 때문에 enctype을 "multipart/form-data"_로 설정하고 input 태그의 type을 _"file"_로 설정한다. 그리고 input 태그의 accept 속성을 _"image/*" 로 설정하면 이미지 파일만 선택하도록 만들 수 있다.

input 디자인 바꾸기

이 때, 중요한 점! 그냥 이대로 사용하게 되면 디자인이 너무 안예쁘다. 따라서 label을 div로 감싸서 원하는 모양을 만들어주고 input 태그는 숨겼다.

/* style.css */

/* label 스타일 조정 */
.button {
    display: flex;
    justify-content: center;
}
label {
    cursor: pointer;
    font-size: 1em;
}

/* 못생긴 기존 input 숨기기 */
#chooseFile {
    visibility: hidden;
}

크게 변한 건 없지만 왠지 한결 나아진 기분...

Javascript로 이미지 파일 처리하기

function loadFile(input) {
    var file = input.files[0];    //선택된 파일 가져오기

    //미리 만들어 놓은 div에 text(파일 이름) 추가
    var name = document.getElementById('fileName');
    name.textContent = file.name;

      //새로운 이미지 div 추가
    var newImage = document.createElement("img");
    newImage.setAttribute("class", 'img');

    //이미지 source 가져오기
    newImage.src = URL.createObjectURL(file);   

    newImage.style.width = "70%";
    newImage.style.height = "70%";
    newImage.style.visibility = "hidden";   //버튼을 누르기 전까지는 이미지를 숨긴다
    newImage.style.objectFit = "contain";

    //이미지를 image-show div에 추가
    var container = document.getElementById('image-show');
    container.appendChild(newImage);
};

앞선 HTML의 input 태그에서 onchange="loadFile(this)" 코드를 통해 이미지 파일을 선택하고 완료한 순간, _loadFile_이라는 함수가 실행되게 만들었다. 그리고 이 loadFile 함수에서 파일에 접근해 원하는 동작들을 할 수가 있다.

input.files[0], file.name, URL.createObjectURL(file)

받아온 input 데이터에서 이미지 파일 정보를 가져와서 처리한다. 파일의 이름을 가져와서 HTML에 반영하고, 파일의 url을 가져와서 이미지 div element를 만든다.

newImage.style.visibility = "hidden";

사용자가 아직 submit 버튼을 누르기 전까지는 이미지가 화면에 보여지면 안되니, visibiltiy를 0으로 설정하였다.

submit 버튼 클릭 시 이미지 보여주기

사용자가 이미지 파일 이름을 확인한 뒤 submit 버튼을 누르게 되면 이미지를 업로드 하는 form 부분을 숨기고 업로드한 이미지만 보여줄 것이다.

var submit = document.getElementById('submitButton');
submit.onclick = showImage;     //Submit 버튼 클릭시 이미지 보여주기

function showImage() {
    var newImage = document.getElementById('image-show').lastElementChild;

    //이미지는 화면에 나타나고
    newImage.style.visibility = "visible";

    //이미지 업로드 버튼은 숨겨진다
    document.getElementById('image-upload').style.visibility = 'hidden';

    document.getElementById('fileName').textContent = null;     //기존 파일 이름 지우기
}

사실 지금 예시에서는 newImage를 굳이 lastElementChild로 가져올 필요도 없고 기존 파일 이름을 지울 필요도 없지만, 하지만 대부분의 경우에 한번이 아니라 여러번 파일을 가져오는 경우가 많기 때문에 이를 고려하여 작성하였다!

완성된 전체 코드 보기👀

!codepen[Mila00a/embed/VwpjNGE?height=627&theme-id=light&default-tab=html,result]

[React Native] 이미지에 CSS filter 효과 적용하기(Blur + Brightness)

Sat, 15 May 2021 11:25:12 GMT

React Native에서는 CSS의 이미지 filter 속성을 사용할 수가 없다. 따라서 ImageBackground의 Style Props를 이용해서 Blur 효과를, 그리고 정석적인 방법은 아니지만 추가적인 View를 통해서 이미지의 밝기를 높이는 효과를 구현할 수 있다.

Blur 효과

import React from 'react';
import { View, ImageBackground, } from 'react-native';

function App() {
    return (
      
            
            
      
    );
}

export default App;

위처럼 ImageBackground의 blurRadius 속성 값을 조절하여 원하는 블러 효과를 만들어 낼 수 있다.

예시로 아래의 원본 사진을 가지고,

blurRadius를 10, 50, 30 으로 설정한 결과는 아래와 같다.

Brightness 효과

import React from 'react';
import { View, ImageBackground, } from 'react-native';

function App() {
    return (
      
            
                //View를 추가하여 밝기 조절하기
                

            
      
    );
}

export default App;

Blur 효과를 적용한 상태에서 View를 추가했다.

이미지를 꽉 채우는 View를 만들고, 배경을 반투명한 흰색으로 설정해 이미지가 밝아보이게 만들었다.

반대로 어둡게 만드려면 backgroundColor를 'rgba(0, 0, 0, 0.3)' 으로 (투명도는 자유롭게) 설정하면 된다.