썬이의 IT세상

VS Code에서 중괄호, 대괄호로 선언하는 함수나 object 등 코딩할 때 자동 들여쓰기가 되지 않아 불편할 때가 있다. 불편한 예시는 아래와 같다 temp 라는 함수를 선언할 때, 중괄호 사이에서 엔터를 누르면 위 예시처럼 나오게 되는데 이렇게 되면 한번 더 줄바꿈을 해주고 다시 빈공간으로 커서를 옮겨 들여쓰기를 해주어야 하는 번거로움이 있다. 세팅 방법 세팅 방법은 의외로 간단하다. 1. VS Code 설정 > json으로 열기 ctrl + , 이나 cmd + , 혹은 VS Code 설정 창을 열면 다음과 같은 화면이 나올텐데 우측 상단을 보면 이런 아이콘이 나올텐데, 가장 왼쪽 아이콘을 클릭하면 설정을 json 파일로 열 수 있다. 2. 자동 들여쓰기 설정해주기 우리는 json 파일에서 "edi..

보통 서버에서 데이터를 받아와서 화면에 뿌려줄 때, 정해진 디자인 형식대로 오지 않아 프론트단에서 수정해야 하는 경우가 생긴다. 예를 들어, temp_dt : 'yyyy-mm-dd' 이런 식으로 들어오는 Date 데이터가 있다고 가정해보자. 서버에서는 yyyy-mm-dd 로 날려주는데 기획 상에서는 yyyy.mm.dd 형식을 원한다면 이 때마다 백엔드 팀에 형식을 고쳐달라고 말하기 애매할 때 (당연히 프론트에서 수정해야죠!) 이를 수정하기 위해 data.temp_dt.replace('-','.') 으로 코딩한다면 결과값은 아래와 같을 것이다. result : 'yyyy.mm-dd' ㅎㅎ.. 문자열 전체를 검증하고 모든 값을 바꾸려고 할때는 replace보다 split과 join을 같이 사용하면 간단히 해..

react-native에서 chart UI를 구현할 때 주로 react-native-chart-kit 라이브러리를 사용하는데, GitHub - indiespirit/react-native-chart-kit: 📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart 📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap) - GitHub - indiespirit/react-native-chart-kit: 📊React Native Chart Kit: Lin... ..

어떠한 객체 temp_obj에, 특정 key의 value값을 검색해서 boolean값을 반환하고 싶을 때, Javascript의 some() 함수로 쉽게 데이터를 검색할 수 있다. // Test Data const temp_obj = { a : { state : 'ready' }, b : { state : 'ready' }, c : { state : 'complete' } } 위와 같은 형식의 객체가 있을 때, temp_obj 안에 각각 들어있는 객체 중 complete가 한개라도 있다면 True를, 아니면 False를 반환하는 함수는 아래와 같다. // 데이터를 검증하는 함수 function checkApprovalStatus(data: TDataProps): boolean { // 해당 key들의 상..

JavaScript 또는 TypeScript로 회원가입 기능을 작성할 때, 반드시 들어가야 하는 부분 중 하나가 ID(혹은 Email) 을 입력하는 부분에 유효성 검사를 해주는 것이다. 이는 주로 정규식과 .test(id) 함수를 사용해서 검증하곤 하는데, 이번 포스팅에서는 ID에 (@ 이하 부분) 영문과 숫자, 그리고 일부 특수문자만 허용하게 하는 정규식을 다뤄보고자 한다. 조건 1. ID에는 영문과 숫자, 일부 특수문자만 허용한다. 2. ID에는 영문만 또는 숫자만 입력 가능하나 '특수문자만' 입력할 수 없다. 위 조건에 해당하는 정규식과 함수는 아래와 같다. export function isValidId(id: string): boolean { const validCharacters = /^[a-z..

페이징 기능이 들어가는 View의 경우에는, FlatList의 onEndReached 속성을 사용해서 스크롤의 하단에 닿았을 때 pageSize를 늘려주거나 page를 변경해주어 api를 새로 호출해주게 되는 페이징 기능을 주로 사용하게 되는데, 필요에 따라 flatList가 아닌 ScrollView에서 이 기능을 사용해주어야 할 때가 있다. 다만 ScrollView에서는 onEndReached 속성이 없기에 따로 구현해주어야 하는 단점이 있는데, 이럴 때 ScrollView의 onScrollEndDrag 속성을 잘 활용하면 문제없이 구현이 가능하다! onScrollEndDrag 는 사용자가 ScrollView 안에서 스크롤 동작을 끝냈을 때 발생되게 되는 이벤트인데, 이 동작이 끝나는 타이밍을 스크롤의..

앱 개발을 하다보면 자주 맞닥뜨리게 되는 이슈 중 하나인, 디바이스마다 폰트 크기가 달라 특정 디바이스에서 UI가 깨져보이는 현상이 종종 발생하곤 한다. 이럴 땐 별도의 라이브러리를 사용해서 디바이스의 폰트 설정에 맞추어 size를 분기하는 방법도 있지만 리소스가 많은 프로젝트의 경우 이미 선언한 텍스트 크기를 하나하나 다시 바꾸기에는 시간도 많이 걸리고 하나의 컴포넌트라도 놓치는 순간 오히려 더 이상해보이는 결과를 초래할 것이다. 이에 나는 사용자의 디바이스 폰트크기 설정에 관계없이 지정한 FontSize를 랜더링해주는 방법을 선택했는데, 해결 방법은 아주 간단하다 Solution index.js ... import {Text} from 'react-native'; // add this Text.def..

문제점 보통 iOS 앱을 빌드하여 스토어에 등록하거나, testfilght에 올릴 때 위 이미지처럼 General > Identity > Version, Build 를 수정해서 올리곤 한다. 하지만 최근에 아카이브한 앱들이 아무리 빌드번호를 올려도 이전 번호로 고정이 되어 이슈가 있었는데, (Version만 올리고 빌드번호는 올리지 않아도 업데이트는 된다) 그래도 되던 기능이 안되고 이게 계속 올라가지 않으면 또 진짜 이슈로 번질 수 있기 때문에, 이를 해결하기 위한 방법을 적어본다. 해결 방법 평소 진행하던 방법대로 General > Identity > Version, Build 를 수정한 후에, 이에 따른 빌드번호(Build)를 info.plist의 Bundle version을 같이 맞춰주면 정상적으..

매번 스크립트 파일을 새로 작성할 때, import React from 'react'; 부터 export default 파일이름까지 일일이 작성해줘야하는 번거로움을 덜어주는 VS Code의 기능을 다뤄보도록 하겠다. 🟨 Code Snippet ? - VS Code에서 새로 파일을 만들고 해당 파일에 들어가는 기본적인 코드들, 즉 거의 대부분의 파일에서 공통적으로 사용되는 코드들을 일일이 작성할 때 이를 간단한 명령어 하나로 작성해주는 기능이다. 예를 들어 앞서 적어놓은 부분을 좀 더 자세히 보면 import React from 'react'; import {View, Text} from 'react-native'; const filename = () => { return ( This is new file..

카톡이나 문자를 주고받을 때 예전에는 '^^' 같은 이모티콘을 요즘엔 😄