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

목차 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..

목차 어제 하루 종일 지도만 그렸다.. 후.. 그럴필요 없었는데 퀄리티 높이고 싶어서... svg path svg는 저번 포스트에서 다룬 적 있다. html 그리기 Svg / Canvas SVG 데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써 벡터를 기반으로 한 그래픽을 표현하는 언어이다. 벡터 : 기준좌표로부터 방향과 크기를 가진 물리량 즉 선을 그으면 A(x,y)위치 / 각도 sirong.tistory.com path는 안다뤘.. 는데, path는 선으로 만든 오브젝트이다. 요런 느낌 코드는 이런 식인데 자주 쓰는 방식으로 예를 들면, 검은색(#000)으로 채우기, M(절대좌표 이동) x/y { (100, 100) -> (100, 0) -> (0, 100) }으로 선 그리기이다. 일러스트로 ..

목차 자동 스크롤 오늘은 함수로 자동 스크롤 이동을 포스팅하려 한다. 사소하긴 한데 페이지에 한 번씩은 쓰이는 것 같다. 기본적인 함수 모양은 이렇다. element.scrollTo(x-coord, y-coord) 첫 번째 인자는 x축(가로) 두 번째 인자는 y축(세로)이다. window.scrollTo(8000, 0); x축으로 8000px 이동 window.scrollTo(0, 8000); y축으로 8000px 이동 코드 import React from "react"; import styled, { createGlobalStyle } from "styled-components"; function App() { function ToBottom(e) { window.scrollTo(0, 8000); } ..

목차 쿠키 쓰는 법에 대해 적으려 했다가 개념을 먼저 적었다 후후... 설명하는 방식으로 블로그를 쓰니 이렇게 개념을 짚고 넘어가게 된다. 쿠키와 세션 목차 쿠키 사용법을 포스팅하려는데 쿠키와 세션의 차이점에 대해 명시를 하고 적는 게 좋다고 생각되었다. 쿠키와 세션 HTTP 목차 CORS와 Representational를 알아가면서 계속 나왔던 것은 HTTP 였다. sirong.tistory.com React cookie 쿠키에 대해 알아보았으니, 쿠키를 쓰는 법에 대해 알아보자! npm install react-cookie 일단 패키지를 다운받자 import React from 'react'; import ReactDOM from 'react-dom'; import { CookiesProvider }..