My Boundary As Much As I Experienced

검색기능을 구현하려한다.어떻게 구현해야할까? 구현하려고 하는 스펙을 정리해보자면,프론트1. 검색창과 검색 인풋이 있는 리스트 페이지2. 검색 시 get요청으로 검색어를 쿼리스트링에 포함하여 조회3. 응답을 받아 리스트를 재갱신백엔드1. 프론트의 요청을 받으면 제목, 본문에서  해당 문자열이 포함된 것들을 모두 db조회2. 중복 배열이 있는 것은 제거하고 배열에 담아 프론트에 다시 반환 라고 정리할 수 있을 것이다.프론트엔드 먼저 어떻게 구현했는지 보여주겠다. 잠깐, 프론트에서 get요청이 아니라 post요청이 자연스럽지 않나?라고 생각이 들 수 있다. 나도 처음에 post요청으로 구현할뻔했으니까.프론트 입장에서 body에 정보를 포함하여 서버에 요청보낼 땐 본능적으로 post를 떠올리는게 자연스럽다. 그..

배우게 된 계기사람들이 하도 form 구현 시 React-hook-form이 좋다고 해서언젠가 한 번 써봐야지 했다가 이번에 만드는 초기앱 회원가입에 써보기를 고려하였다. 사실 처음엔 useState와 useEffect가 가장 직관적이지 않나? 이걸로도 충분한데..라는 생각이 지배적이었는데 알고보니 매우 개발자를 편하게 해주는 좋은 라이브러리였다. React-hook-form의 최대 장점: 관리할 상태가 엄청나게 줄어든다.아래는 내가 취업 전 부트캠프 파이널 프로젝트로 했던 코드이다.호텔 예약 매물 양도 플랫폼이 컨셉이었는데, 예약 과정에서 관리해야될 상태들이 너무 많았다.호텔 취소 물품의 1차 가격, 2차 가격, 2차 가격 설정 여부, 계좌등록여부, 은행, 계좌번호, 약관 동의1/2/3/4를 포함해서...

공부하게 된 계기:현재 듣는 express 강의에서 지금까지 App객체로 모든 라우트를 관리하다가페이지 별로 분리하여 router로 분리하는 법을 알려주었다.그리고 학생한테 강의에서 분리하지 않은 로직들도 모두 모듈화해보라는 숙제를 내주어서이를 수행하고 있었는데... passport와 express-session 코드 부분을 분리할 때 조금 애를 먹었다. 왜냐하면 강의에서 이들 라이브러리에 대해 대강 추상적인 설명만 듣고 넘어갔던터라각각의 import/export, 호출 시점, 동작 흐름에 대해 엄밀히 알지 못했기 때문에파일로 분리하기가 힘들었던 것이다. 그래서 이제 엄밀하게 공부해보면서 세션에 대한 이해도를 올렸는데, 이를 설명해보겠다. 1. express-session과 passport의 차이는 무엇..

공부하게 된 계기:별거 없다.. 요새 듣는 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 안에서 환경..