아싸지만 1일1글 하고싶어

Mac에서 Expo start / npm start를 하여 브라우저까지 떴는데, 결과물이 실행이 안될 때가 있다. 그럴 땐 watchman을 설치해줬는지 확인해보자. mac유저는 watchman을 설치해달라고 하고 있다. 링크를 누르면 설치방법도 나온다. 이번 기회에 homebrew를 써보는 것도 좋다. HomeBrew 목차 HomeBrew HomeBrew는 패키지 관리자로써, 비슷한 프로그램 으로써 리눅스의 yum / apt-get 윈도우의 choco 등이 있다. 장점으로는 리눅스의 패키지 관리자(apt-get)와 비슷한 사용법을 가지고 있다는 것 sirong.tistory.com mac에선 홈페이지에서 친절하게 설치 파일을 준비한 게 아니라면, homebrew를 쓰는 게 편하다. 설치하고 다시 exp..

목차 이전 포스트에서 Input value를 이용한 예제를 만들던 도중 정규표현식을 알게 되었다. 이번 주제도 같은 채널에서 정보를 얻게 되었다. 정규표현식 정규표현식은 문자를 효율적으로 탐색할 수 있는 방식이다. 오 책까지 나와있다. 구성 /regex?/i // ' / ' slash를 이용하여 정규표현식을 열고, 닫는다. // slash 사이에 찾고하고자 하는 패턴을 기입한다. // slash 뒤로 옵션(flag)를 설정 할 수 있다. 패턴 정규식을 구성하는 특수문자를 정리하였다. 양이... 많다..... | /apple|banana/g if문에서 or로 쓰이는 이 문자는 여기에서도 or로 통용된다. 앞의 패턴과 뒤의 패턴 둘 다 찾아준다. () /Mi(ke|x)/g 괄호 안에 있는 패턴을 그룹으로 묶..

목차 이쁜 코드를 짜는 규칙 구독하고 있는 채널에서 관심 있는 주제(코드 퀄리티를 높이는 방법)에 대한 영상이 올라왔다. 이 글은 이영상에 대한 정리이다. DRY Don't Repeat Yourself (반복하지 마라) 반대말로는 Write Everything Twice (모든 걸 두 번씩 적는다) 반복되는 코드를 계속 하나하나 적음으로써 가독성이 줄어들고 코드 덩어리가 커지는 방법이다. 즉 다른 말로 하자면 DRY 방법을 쓰면 가독성을 향상하고, 후에 코드를 보완하는 유지보수에 대한 비용이 줄어든다. 제일 간단한 예로는 css 변수 설정을 들 수 있다. 해당 코드로 이 결과를 얻을 수 있다. 하지만 같은 style을 WET방식으로 반복하여 적었으므로, 배경색을 변경하려면 하나하나 수정해야 한다. 이를 ..

목차 React Native JavaScript는 운영체제를 가리지 않고 구동할 수 있는 언어이다. 이 장점을 극대화한 것이 React Native이다. 안드로이드 앱 개발에는 Kotlin / Java가 필요하고 IOS 앱 개발에는 Objective-C / Swift가 필요하다 즉 양쪽의 플랫폼 개발을 위해서는 두 가지 언어를 숙지할 필요가 있는 것이다. 하지만, React Native를 통하면 하나의 언어를 통하여 모든 플랫폼에 개발이 가능하다. 이는 회사의 개발비용 절감으로 이어진다. 원리 그림으로 깔끔하게 정리되는데, JavaScript의 프레임워크가 React이다 이와 Native( Android / IOS 개발언어) 사이를 연결해주는 게 React Native Bridge이다 즉 JavaScri..

목차 ... redux에 대해 또 쓸게 생겼다. 저번에 마지막이라고 하지를 말껄 redux를 쓰면서 여러 가지 데이터를 한 번에 수정(dispatch)하려는데 그런 상황에 대한 예제가 없었다 다른 action을 각각 실행시켜도 되긴 하는데, 그렇게 하면 한번 dispatch 하는 것보다 비효율적인 것 같아 어떻게든 도전하다가 성공시켰다. Redux 데이터 여러 개 수정하기 코드는 저번 포스트에서 응용할 것이다. Redux-slice 목차 역시 학은 쉽고 습은 어렵다. 그래도 해결했으니 다행이다. "학(學)과 습(習)"의 차이를 아시나요? 오늘도 생뚱맞은 질문으로 포스팅을 시작해 보겠습니다. "학(學)과 습(習)"의 차이를 아시 sirong.tistory.com //index.js import React ..

목차 에러 Imported JSX component text must be in PascalCase or SCREAMING_SNAKE_CASE 라고 경고가(warning) 떴다 JSX 컴포넌트를 불러올 땐 PascalCase(대문자) SCREAMING_SNAKE_CASE(대소문자 혼합)으로 써야 한다 란 뜻이다. 프로그램에 직접적인 영향을 주는 것은 아니지만, 다른 중요한 warning이 묻힐 수도 있고, console을 볼 줄 아는 사람들에게 보이기에도 안 좋으니 수정하는 게 좋다. JSX JSX는 JavaScript에서 확장된 문법이다. React에서 JSX사용이 필수는 아니지만, 더욱 상세한 에러 및 경고 메시지를 표시할 수 있게 해준다고 한다. JSX 소개 – React A JavaScript l..

목차 역시 학은 쉽고 습은 어렵다. 그래도 해결했으니 다행이다. "학(學)과 습(習)"의 차이를 아시나요? 오늘도 생뚱맞은 질문으로 포스팅을 시작해 보겠습니다. "학(學)과 습(習)"의 차이를 아시나요? ... blog.naver.com Slick Slick은 createReducer와 createAction 두 개의 함수를 createSlice 하나의 함수로 관리하는 방식이다. 설치 포스트 한지 좀 됐으니 설치부터 다시 가보자. 터미널에 입력하면 된다. npm i redux redux 설치 명령어이다. npm i @reduxjs/toolkit redux 코드를 간편화 시켜주는 toolkit 설치 명령어이다. npm i react-redux redux를 react에 접목시켜주는 패키지 설치 명령어이다. ..

목차 제목을 쓸 때 해당 함수(패키지) 명을 써야 사람들이 들어오기 편할까, 해당 오브젝트가 하는 일을 적어야 들어오기 편할까? 으음... 내가 뭔가 모르는데 이러한 툴을 쓰고 싶어서 검색한다면 함수나 패키지 명보다는 하는 일을 적는게 더 편할 것 같긴 한데 갑자기 제목을 어떻게 써야 할지 고민됐다. 익숙했던 것을 돌아볼 수 있다는 건 좋은 일인 것 같다. PropTypes 금액 데이터를 받았는데 숫자가 아닌 문자로 다른 자료형으로 되어있다. 그래서 계산식에서 에러가 떴는데 어디서 문제가 생겼는지 알려주는 것, 그것이 PropTypes의 용도이다. 코드 //App.js import React from "react"; import PropTypes from 'prop-types'; function User..