주말에 쓰는 개발일기

함수형 프로그래밍(Functional Programming)

프로그래밍 패러다임 프로그래밍 패러다임은 어떤 방식으로 프로그래밍 할 것인가에 대한 방식과 기법 중 하나이다. 절차지향프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍, 함수형 반응형 프로그래밍 등이 있다. 함수형 프로그래밍 함수형 프로그래밍 (函數型 프로그래밍, 영어: functional programming)은 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. -위키백과 사람의 사고방식과 비슷한 객체지향, 절차지향 프로그래밍과 다르게, 함수형 프로그래밍은 대량의 데이터를 병렬적으로 안정적으로 처리할 수 있도록 수학적 함수처럼 프로그램을 구현한다. 마치 파이프라인처럼 인풋을 넣으면 처리과정을 거쳐 아웃풋이 나오게 되며, 외부에서는 함수 내부에 ..

[React Query] 적용기2

useQuery를 사용하며 생긴 이슈를 작성해본다. 구현중인 기능 1. 쿼리스트링을 useQuery의 props 로 보내서 데이터를 받는다. 2. useResult(props)로 받은 data를 다른 useResultBestChmi, useResultWorstChmi에 props로 보내어 데이터를 받는다. 3. 이동하기 버튼을 누를 시에 다른 값의 쿼리스트링을 넣어 해당 페이지를 호출한다. 1. useQuery 데이터 undefined //api.ts export const getResult = async (key: string) => { const {data} = await clientApi.get(`/api/result/${key}`) return data; }; //query.ts export co..

[React Query] 적용기

요즘 이직을 위해 react 를 독학하며 여러 프로그램들을 만들어보고 있다. 역시 직접 만들다보니 더 깊게 알아가게 되고 다른 라이브러리들도 많이 사용해볼 수 있게 되었다. 최근 원티드 프리온보딩 프론트엔드 과정을 통해 React Query 라는 라이브러리를 학습하게 되었다. 개념을 숙지하는 것에 많이 헷갈려서 포스팅을 통해 개념을 정리해보고자 한다. Vuex 공식문서 : https://v3.vuex.vuejs.org/kr/ 3년 전 학원을 수료하면서 프론트엔드에 사용했던 기술은 vue.js 였다. 전역관리를 위해 Vue.js 애플리케이션에 대한 상태관리 패턴의 라이브러리인 Vuex 를 사용했는데, 당시에도 javascript jsp를 열심히 배우다가 SPA 프레임워크의 개념을 익히려니 헷갈리고 많이 어..

[react-native] 스플래시 만들기

공통 react-native-splash-screen을 설치한다.ios : cd ios && pod install && cd .. npm install react-native-splash-screen --save App.js 에서 splash screen을 종료시키는 코드를 추가한다. import React, {useEffect} from 'react'; import SplashScreen from 'react-native-splash-screen'; //... const App = () => { useEffect(() => { SplashScreen.hide(); }, []); return ( ); }; export default App; ios 1. open ios/[project_name].xcwo..

[react-native] 안드로이드 aab 파일 추출하기

app/build.gradle 에서 versionCode와 versionName이 현재 배포되어 있는 버전과 겹치지 않게 주의! android/app/src/main 위치에 assets 폴더 생성 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle cd android ./gradlew bundleRelease android/app/build/outputs/bundle/release/app-release.aab 생성 > Task :app:bundleReleaseResources FAILED 에러 android\ap..

[react-native] 안드로이드 디바이스에서 앱 테스트하기

C:\Users\YEJEE\AppData\Local\Android\Sdk 환경변수 ANDROID_HOME 등록 환경변수 Path 에 다음 등록 %ANDROID_HOME%\platform-tools → 이게 필요! %ANDROID_HOME%\emulator %ANDROID_HOME%\tools %ANDROID_HOME%\tools\bin cmd 실행 adb devices ⇒ 연결된 디바이스 확인 (연결된 기기가 보이지 않을 시에는 핸드폰 내 usb 연결 옵션을 midi로 설정) adb kill-server ⇒ 연결된 디바이스 모두 해제 adb -s 디바이스 이름 reverse tcp:8081 tcp:8081 npx react-native run-android

[react-native] 웹뷰 프로젝트 생성 및 초기셋팅

- 프로젝트 생성 npx react-native init 앱이름 - 웹뷰 npm install --save react-native-webview - 네비게이터 (뒤로가기) npm install @react-navigation/native npm install @react-navigation/stack npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view - intent npm install react-native-send-intent --save - 앱 내 데이터 저장소 (자동로그인) n..

[react-native] react-native : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\react-native.ps1 파일을 로드할 수 없습니다.

스크립트 실행 권한이 제한되어 있는 상태이기 때문에 발생하는 에러였다. 즉 스크립트 실행 권한을 변경해주어야 하는 것이다. 확인 방법은 터미널에 ExecutionPolicy를 입력했을 때 Restricted라고 나오면 설정을 변경해 주어야 한다. powershell 관리자실행. get-help Set-ExcutionPolicy를 입력하여 어떤 권한을 설정할 수 있는지 확인할 수 있다. Restricted: 권한 정책 중 기본 설정으로 ps1 스크립트 파일을 로드하여 실행할 수 없는 정책 RemoteSigned: 본인이 생성한 스크립트만 실행 가능하거나 신뢰된 배포자에 의해 서명된 것만 실행 가능한 정책 Set-ExecutionPolicy RemoteSigned 를 입력하여 정책을 변경

[next.js] Next.js 강의노트

*패스트캠퍼스 -한 번에 끝내는 프론트엔드 개발 > Next.js로블로그 만들기 강의 노트* Next.js 시작하기 폴더 생성 cd 폴더 npx create-next-app 프로젝트 구조 pages 프로젝트 안의 화면 모음 _app.js (_app.tsx)Component ⇒각각의 모든 페이지를 의미함. 전역. 여기에 적용한 소스는 전역으로 적용됨. index.js (index.tsx) app.js 안에 있는 첫번째 화면 (실제로 보이는 화면) styles 스타일 모음 pages/index.js 에서 Home.module.css를 사용 모듈로 만든 css는 import 해와서 styles.container 등으로 사용할 수 있다. 라우팅 스테틱 라우팅 라우터를 사용하지 않아도 자동적으로 라우팅을 지원한다..

[Javascript] 이벤트 버블링과 이벤트 캡쳐링

이벤트 버블링 이벤트 버블링이란 부모, 자식 태그에 모두 onclick 이벤트가 있을 경우 자식태그를 클릭하면 부모태그까지 클릭이벤트가 전파시키는 html의 특징이다. 브라우저가 이벤트를 감지할 때 해당 요소에서 최상위 요소까지 이벤트를 전파시킨다. 이벤트 캡쳐링 이벤트 캡쳐링이란 이벤트버블링과는 반대로 최상위 태그부터 자식태그까지 이벤트를 전파하는 방식이다. addEventListener() API에서 옵션 객체에 capture:true를 설정해주어 설정한다. 이벤트 위임 이벤트 버블링을 이용하여 부모태그에 이벤트 리스너를 적용하여 자식태그에서 발생한 클릭이벤트를 감지, 제어할 수 있다. 태그가 부모이고 onclick 이벤트를 가진 태그가 자식일 경우, 이벤트 버블링이 일어나야 한다고 생각했다. 하지만..