전체 글

함수형 프로그래밍(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 프레임워크의 개념을 익히려니 헷갈리고 많이 어..

역량강화 로드맵

작년 초에 야심차게 작성한 것이 있다. 김예지 역량강화 로드맵..! ㅋㅋㅋ 풀스택으로 근무하며 역량이 빠르게 강화되지 못하고 전문성을 잘 챙기지 못하고 있는 것 같아서.. 그리고 지금 자기계발이 매우 필요하다는 것이 느껴지기도 하고, 목표와 방향성이 생기면 앞으로 해야할 것을 알고 더 열심히 할 것 같아 만들었다. 그리고 만 2년 2개월차인 최근의 로드맵. 욕심도 많다. 프론트엔드, 백엔드에 인프라까지 해보겠다고.... 나름의 기준으로 공부해봤다. 작성정도는 해봤다 - > 입문 간단한 프로그램 정도는 만들어봤다. -> 초급 코드 작성하는데 앞으로 어떻게 작성해야할지 좀 그려진다 -> 중급 으로 표시했다. 그리고 올 해 말까지 중급을 10개를 만들겠다고 했는데... 큰일이네.. 그래도 작년에 리액트를 배우..

[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 등으로 사용할 수 있다. 라우팅 스테틱 라우팅 라우터를 사용하지 않아도 자동적으로 라우팅을 지원한다..