My Boundary As Much As I Experienced

공부하게 된 계기:별거 없다.. 요새 듣는 Node.js 강의에서 사용해보길래 사용해봤고,까먹기 전에 블로그 포스팅으로 남겨보려 한다. S3란?AWS S3(Amazon Simple Storage Service)는 AWS에서 제공하는 대용량 객체 스토리지 서비스다.S3는 여러가지 목적으로 쓸 수 있지만 주로 웹 어플리케이션의 이미지 및 동영상 등 대용량 데이터를 저장하기 위해 쓰인다.Firebase의 Firebase Cloud Storage와 거의 같은 용도로 쓰인다고 보면 된다. Multer란?multer는 Node.js에서 파일 업로드를 처리하기 위한 미들웨어 라이브러리이다.이 라이브러리는 특히 Express.js와 함께 사용되며, HTTP 요청을 통해 전송된 파일 데이터를 쉽게 다룰 수 있게 해준다...

AWS S3란?Amazon S3(Simple Storage Service)는 AWS(Amazon Web Services).AWS가 제공하는 확장 가능한 객체 스토리지 서비스다. S3는 대량의 데이터를 안전하게 저장하고언제 어디서나 이를 빠르게 접근할 수 있는 클라우드 스토리지 솔루션이다.그냥 쉽게 말해 이미지같은 대용량 파일들을 crud할 수 있는 서비스이다.파이어베이스로 치면 Firebase Cloud Storage에 속하는 포지셔닝. S3를 설정하기 전에 IAM 설정하기IAM 서비스는 말그대로 Authentication 서비스이다.접근할 수 있는 유저를 생성하고 권한 설정하는 곳. 1. 엑세스 관리 - 사용자에 들어가서 사용자 생성을 클릭IAM 서비스를 검색해서 들어간 뒤 - 사용자 - 사용자 생성을..

미들웨어란?미들웨어(Middleware)는 Express.js와 같은 웹 애플리케이션 프레임워크에서HTTP 요청(Request)과 응답(Response) 사이에 실행되는 함수이다.미들웨어는 요청 객체, 응답 객체, 그리고 다음 미들웨어 함수를 제어할 수 있다. 할 수 있는 것:요청 처리: 요청을 분석하고 필요한 데이터를 추가하거나, 요청을 변경할 수 있다.응답 처리: 응답을 생성하거나 수정할 수 있다.요청 흐름 제어: 특정 조건에 따라 다음 미들웨어로 요청을 전달하거나, 요청 처리를 종료하고 응답을 보낼 수 있다.공통 기능 처리: 인증, 로깅, 에러 처리, 정적 파일 제공 등의 기능을 공통으로 처리하는 데 자주 사용된다.미들웨어는 app.use() 또는 특정 라우트에 연결하여 사용되며,여러 개의 미들웨어..

공부하게 된 계기리액트네이티브로 ref를 쓸 때 아래같은 에러가 나올 때가 있다. 딱 봐도 ForwardRef를 쓰라는 얘기같은데자세히 보면 함수형 컴포넌트에선 직접 ref를 받을 수 없다는 얘기다. 지금까지 리액트 웹개발하면서함수형 컴포넌트에서 ref를 props로 잘만 사용해왔는데??? 이상하다. 왜 리액트네이티브에선 이런 에러가 나는가?Warning: Function components cannot be given refs.Attempts to access this ref will fail. Did you mean to use React.forwardRef()? 일단 그전에 props와 ref를 비교해보자. Props와 Ref의 비교props는 데이터와 이벤트 핸들러를 전달하기 위한 용도: prop..

문제 상황만약 리액트네비게이션을 라우터로 사용하면실제 Screen과 header는 App.tsx에서 분리되어 사용되고 있을 것이다. 아래처럼. , // 헤더 컴포넌트 }} /> 그런데 어떤 스크린에서는 스크린 내의 상태에 따라 헤더의 상태도 변하게 해야될 때가 있다.이럴 경우에 어떻게 조작해야되나? 이들의 공통 상위컴포넌트인 App.tsx에 state들을 위치시켜야할까?좋은 방법은 아닐 것이다. 그렇게 거추장스럽게 App.tsx에 상태들을 많이 만들어서 props drilling시키는건 좋지 않다.. 이때 몇 가지 방법이 대표적으로 떠오르는데 바로,- 1.  React Context- 2. 전역상태관리 라이브러리- 3. navigation.setOptions이다. navi..

이번에 회사에서 RN으로 초기앱을 세팅부터 다시 해볼 수 있는 기회가 생겼다.돈 되보이는 것들은 모두 한 번 만들어보자는 싸장님의 방향성 덕분에 앞으로도 초기세팅을 해볼 일이 많아질거 같다.. RN은 React와 거의 비슷한 구조로 사용할 수 있지만 가장 차이나는 부분은 input의 활용 부분인 거 같다.이번에 초기세팅하면서 배운 부분들을 정리해보려 한다. 1. TextInput웹에서 쓰는 input은 RN에서 TextInput 컴포넌트로 사용할 수 있다. 웹과 구별되는 속성: editable:  - 사용자 입력을 받을 수 있는지 없는지 여부를 설정한다. (boolean)type:  - 텍스트에 입력되는 정보들의 타입을 결정한다. 기본은 "text" ("text" | "number" | "password..

.env 파일에 환경변수 보관하려면?dotenv 라이브러리 설치express 환경에서 환경변수를 서보자.환경변수들은 보통 .env 파일에 보관하는데 그걸 쓰려면 아래처럼 npm install dotenv를 한 다음 import시켜줘야한다.npm install dotenv dotenv를 불러온다음 바로 config메소드를 체이닝해서 실행..require('dotenv').config() .env파일 생성그리고 .env파일을 루트단에 생성하고 아래처럼 환경변수를 '='를 구분하여 적어주면 된다.string을 입력할거면 ""혹은 ''필수!# .env파일PORT=1234DB_URL="mongoose..."SECRET="암호시드..."  실제 서버파일에서 사용자 이제 서버코드에서 process.env 안에서 환경..

navigation객체와 useNavigation훅리액트 네비게이션에서 다른 페이지로 네비게이션을 하려할 때 navigation을 이용해야된다.그런데 navigation을 생성할 수 있는 방법은 2개가 있다.navigation prop와 useNavigation훅을 이용하는 방법이다. 1. 페이지 컴포넌트에서 prop으로 제공되는 navigation객체 꺼내기navigation 객체는 일반적으로 스크린 컴포넌트의 props로 전달된다. '페이지 컴포넌트'라면 언제 어느 곳에서든 꺼내서 사용할 수 있다.(페이지 컴포넌트의 기준이 뭐냐고? Stack.Screen에 제공한 컴포넌트는 페이지 컴포넌트로 분류된다.)function HomeScreen({ navigation }) { return ( ..

함수 커링이란?함수가 인자를 하나씩 받아가며 최종 결과를 도출하는 함수 패턴이다.아래와 같은 형식이 된다고 생각하면 된다.(params1) => (params2) => { return }도대체 이걸 왜 쓰나.. 싶었는데 가끔 나름 요긴하게 쓰게된다.주로 한 번에 prop을 결정짓지 못할 때 사용하게 된다.(이 단계에서는 이 prop이 결정되고, 저 단계에서는 저 prop이 결정되고...)예시를 들어보겠다. 내가 직면한 문제 - 기존 컴포넌트에 prop을 추가적으로 넣어야하는데 못하는 상황(?)나는 최근에 리액트네이티브의 FlatList를 다뤄야하는 일이 있었다.FlatList는 리액트네이티브가 제공하는 대규모 데이터 배열을 처리하기 위한 스크롤 뷰이다.(뷰포트에 있지 않는 데이터는 렌더하지 않는 win..

디자인을 하다 프론트로 전향했지만 아직 디자인이 재밌다.백엔드도 계속 배워서 백엔드 이슈에도 끼고싶다.기획자가 없는 조그만 회사에서 사업개발, UX디자이너, 백엔드, 프론트 개발자들이공동으로 기획을 하고있지만 이것도 나름 할 만하다. 나는 그냥 제품을 만드는거 자체가 재밌는 것 같다...어차피 내 미래의 사이드 프로젝트를 수익화하기위해서비스 기획, 디자인, 프론트, 백엔드, 마케팅 다 해야될텐데 뭐가 문제인가?다 그 능력치 올리는거지 뭐.. 언제나 미래에 '내 서비스'로 성공하는 나 자신을 생각하며 살고 있다.