어리둥절 분석가 그리고 개발자

1. 개념 vi는 파일의 내용을 보여주면서 동시에 파일의 내용을 편집할 수 있게 해주는 텍스트 에디터이다. vim이란 vi improved의 약자로 vi의 업그레이드 버전인데, 설정파일의 특정 위치에 있는 단어나 의미있는 특별한 단어를 다른 색으로 표시해 더욱 보기 쉽게 해준 버전이다. 대부분 유저들은vim 을 사용하지만, vim으로 쓰기보다는 alias 명령어로 etc/bashrc나 .bashrc에서 vi로 등록해서 사용하기 때문에 통틀어서 vi라고 부르곤 한다. 2. 단축키 행에 번호(number) 붙이기 : :set nu 행에 번호(number) 제거 : :set nonu 라인 이동 : :n, 숫자 + shift + g 복사붙여넣기 줄 바꿈 형태 : :set noai :set paste [ 입력모드..

React Native ScrollView에서 중앙정렬하기 내가 하고 싶었던 것은 가로로 Scroll할 수 있는 영역을 설정하고, 그 속에 있는 컴포넌트들이 중앙에 위치한 형태를 만들고 싶었다. 하나도 안 어렵지 하면서 아래와 같이 align-itmes를 중앙으로 설정했는데 에러가 발생했다. import React from 'react'; import Styled from 'styled-components/native'; const Container = Styled.ScrollView` flex-direction: row; align-items: center; `; 문제해결 : attrs() 활용 이 때에는 import React from 'react'; import Styled from 'styled-..

TypeScript 에러 발생 Styled-Component를 활용해서 배경이미지 레이어 컴포넌트를 생성하고, 이를 스크린에 적용하려고 하는데 알 수 없는 에러가 발생했다. import React from 'react'; import Styled from 'styled-components/native'; const ImageBackground = Styled.ImageBackground` height: 100%; weight: 100%; `; const Background = () => { return ( ); }; export default Background; 빠른 수정을 사용할 수 없음.... 당황스러움 문제 해결 : props 추가 배경이미지 컴포넌트가 특정한 props를 받는 것은 아니지만 아래..

필요성 리액트 네이티브에서 이미지를 배경으로 만들고 싶을 때가 종종 있다. 이미지를 배경으로 사용하고 싶을 때에는 를 활용하면 되는데 styled-component를 함께 활용할 때는 아래와 같이 사용하면 된다. 주의해야 할 점은 height와 weight를 반드시 적어줘야 이미지가 보인다 import React from 'react'; import Styled from 'styled-components/native'; const ImageBackground = Styled.ImageBackground` flex: 1; height: 100%; weight: 100%; opacity: 0.8; `; const Background = (props: any) => { return ( ); }; export ..

에러 발생 react-native를 처음에 시작하고 나서 가장 당황스러웠던 에러고, 처음에 잘 모르는데 고생을 너무 했다. react-native-vector-icons 를 설치하고 나서 아이콘의 이미지가 나타나지 않았을 때 이 유형의 에러를 처음 보게 되었는데, 이미지나 아이콘을 불러올 때는 공통적으로 유사한 에러가 발생한다. 에러 해결 VScode와 같은 에디터에서 ios 폴더 > [프로젝트명] 폴더 > Info.plist 파일을 연다. 내부에 아래와 같은 내용을 와 를 붙여넣기 한 이후 저장한다. UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5..

tailwindCSS에서 배경이미지 사용하기 https://tailwindcss.com/docs/background-image#background-images Background Image - Tailwind CSS Utilities for controlling an element's background image. tailwindcss.com div 태그에서 내가 원하는 이미지로 배경을 만들기 위해서는 tailwindCSS 문서를 읽고 진행하면 된다~ group-hover로 배경이미지 없애기 다른 element와 배경을 group으로 묶은 뒤 hover 효과로 배경이미지를 없애고 다른 요소가 나타나게 하고 싶은데, 이 배경이미지가 안 없어진다. CSS를 뜯어보니, 배경이미지가 !important로 박혀..

fusionCharts에는 도데체 왜 rounded-bar 옵션이 없나 https://www.fusioncharts.com/dev/chart-attributes/column2d Chart Attributes | FusionCharts www.fusioncharts.com 옵션이 정말 많은 fusionCharts에 정말 놀랍게도 bar그래프의 모서리를 둥글게 만들어주는 rounded-bar 옵션이 없다. 매우 놀랍고, 매우 스트레스 받는다. 하지만 fusionCharts는 chart-js와 달리 그래프 구성 요소 하나하나가 분리되기 때문에 개발자 모드를 활용해서 개별 CSS를 활용할 수 있다. (chart-js는 차트 element가 통으로 들어간다.) element 찾기 개발자도구에서 select ele..

타이핑 애니메이션 화면에서 글자를 보여줘야 하는데 타이핑되는 애니메이션이 필요한 경우가 종종 있다. 이 때 쓰기 좋은 라이브러리가 typewriter-effect이다. 아래 npm에 예제도 굉장히 설명이 잘 되어 있어서 쓰기가 쉽다. https://www.npmjs.com/package/typewriter-effect typewriter-effect [](https://circleci.com/gh/tameemsafi/typewriterjs) www.npmjs.com 기본 예제 글씨가 적힌 다음에 잠깐 쉬거나, 다시 글자를 지우거나 하는 효과를 chain 형태로 엮어서 사용할..

Fullpage 란? 요즈음, 스크롤을 한 번 슥슥 내릴 때마다 화면 전체가 슬라이드처럼 내려가는 효과를 입힌 웹사이트를 여러 곳에서 발견할 수 있다. 최근에 개인적으로 가장 인상깊었던 사이트는 티맵모빌리티 웹사이트인데, 동영상과 fullpage를 적절히 잘 사용했다고 생각했다. 리액트 fullpage 에러 모듈 '@fullpage/react-fullpage'에 대한 선언 파일을 찾을 수 없습니다. '[프로젝트명]/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js'에는 암시적으로 'any' 형식이 포함됩니다. 해당 항목이 있는 경우 'npm i --save-dev @types/fullpage__react-fullpage'을(를) 시도하거나, 'd..