본문 바로가기

전체 글

 (90)
git 환경변수 API 키값이나 공개적으로 노출되서는 안되는 것들은 환경변수에 담아 처리할 수 있다. Node.js 에서는 보통 process.env 를 통해서 환경변수에 접근한다. Node.js.에서는 기본적으로 내장된 전역객체여서 별도로 임포트 할 필요없이 프로그램 어디에서든지 사용이 가능하다. 1. 환경 변수 파일 제작 2. 환경 변수 파일에 값을 채워 넣는다. //.env REACT_APP_FIREBASE_API_KEY = TESTABCD1234 REACT_APP_FIREBASE_AUTH_DOMAIN = TESTpikaeapp.com REACT_APP_FIREBASE_PROJECT_ID = TESTpika2 REACT_APP_FIREBASE_STORAGE_BUCKET = TESTpika.com REACT_APP_..
React-query removeQueries 검색결과 페이지에서 헤더에 있는 지역 검색을 하면 제목은 바뀌는데 데이터가 늦게 들어와서 목록이 바뀌지 않는 문제가 발생됬다. (잘되다가 간혈적으로 안됨) 이러한 현상은 많은 데이터를 불러오는 지역에서 더 많이 발생됬는데 추측하기로는 너무 많은 데이터를 요청해서 문제가 있나 싶었다. 만약 내가 사용자라면 검색 버튼을 눌렀을때 검색 결과가 바뀌지 않는다면 이상하다고 생각했을 것이다. 그래서 우리 팀원분중 한분이 생각 한게 removeQueries() 를 사용 하자는 것이 였다. removeQueries() 이 뭐냐면 기존 캐시값을 지워버리고 새롭게 데이터를 받아 온다 이렇게 생각하면 쉬울것이다. 그래서 데이터 요청시 새로운 캐시값을 만들어야 하기 때무네 -> isLoading 이 활성화 됨 // Searc..
React select 연동 두개의 셀렉트 박스를 연동하려고 하는데 첫번째 셀렉트박스에서 시, 도 를 검색하면 두번째 셀렉트박스에서 상세 지역이 나오는 로직이다. 내가 해결해야할 문제 1. 각 셀렉트에 노출될 리스트들이 오브젝트로 되어 있다. 2. 첫번째 셀렉트 값에 따라 두번째 셀렉트 박스 값이 변경되어야 한다. 3. 검색 버튼 클릭시 첫번째 셀렉트, 두번째 셀렉트 값을 다른 컴포넌트로 전송해 주어야 한다. 1. 각 셀렉트에 들어갈 값들이 오브젝트로 되어 있다. 이걸 써먹으려면 코드 키를 태그의 벨류로 넣고 키값을 셀렉트 박스에 보여줘야한다. 내가 선택한 방식은 const [z1List, setZ1List] = useState([]); useEffect(() => { const arr = []; for (const [key, va..
Node.js [4/50]일 데이터를 DB에 저장 (Mongo DB) DB(Database) 는 무엇이냐 데이터를 일정한 형식으로 저장할 수 있게 도와주는 곳이다. 우리가 가장 쉽게 접할 수 있었던건 MS엑셀 이다. 그러나 엑셀은 10만단위가 넘어가면 버벅거린다. 대표적인 관계형 데이터베이스는 RDBMS 는 MySQL MariaDB Oracle MS SQL Server 가 있지만 프론트엔드 개발자를 꿈꾸는 나에게는 SQL을 제대로 배워서 사용할 시간이 부족하다... 그래서 내가 사용할것은 Object 자료형으로 입출력이 가능한 NoSQL 이다. 특히 가장 유명한 MongoDB 를 사용할 것임 MongoDB MongoDB 는 무료로 512메가 바이트를 제공한다. https://account.mongodb.com/account/logi..
Node.js [3/50]일 POST 요청 HTML에서 input 값을 서버로 전송하려면 태그에 속성을 추가해줘야된다. submit 액션과 메서드 를 폼태그 안에 넣어주고 button태그에 타입을 부여해줘야한다. 버튼을 누르면 -> 폼태그 안에있는 액션과 메서드 에 따라 데이터들을 보낸다 (/add 경로로 POST 요청함) 서버는 어떤식으로 코드를 짜야 되냐면 //server.js app.post("/add", (req, res) => { res.send("전송완료"); }); 이런식으로 짜면됨 근데 내가 전송한 데이터들은 어디에 저장이 되는가?? 이 정보들은 어디에 숨어져있냐면 req라는 인자에 보관되어있다. 그럼 보관되어있는 데이터를 가져다 쓰려면 라이브러리를 하나 써야되는데 바로 body-parser 라는 친구다. 2021년 ..
Node.js [2/50]일 서버 재실행이 귀찮을떄는 자동화 시킬수있는 라이브러리가 있다. 바로 Nodemon npm i -g nodemon 설치하면 껏다 킬 필요없이 nodemon server.js 만 입력하면 코드를 저장할때마다 서버를 알아서 껏다가 다시 켜준다. 서버에서 HTML 파일 전송 GET 요청시 HTML 파일 전송 GET 요청은 HTML 파일도 전송해 줄수있다. 아래처럼 sendFile(__dirname+"파일루트") 를 통해 가능하다. 잘나온다. 그래서 CSS 페이지를 따로 빼서 꾸며볼려고했는데 CSS 가 적용이안된다... 뭐가 문제지?? 너무 오랜만에 해서 까먹은건가?? HTML에 CSS/Javascript 파일 추가 하기 문법이 틀린건가 해서 여러번 확인해봤는데도 답이 안나왔는데 확인결과 https://goodm..
Node.js [1/50]일 Server 는 무엇이냐 클라이언트가 요청을 하면 서버가 그에 응답하여 요청한 내용을 보내주는 프로그램 예를들어 호프집 손님: 클라이언트 호프집 알바생:서버 호프집 사장님(호프집 알바생 메이커): 서버개발자 서버개발자가 짜는 코드 방식 어떤 사람이 www.google.com 으로 접속하면 메인 html을 전송해주라 서버: 요청을 받으면 요청한 내용을 보내주는 프로그램 여기서 요청이 뭐냐? HTTP 요청이라는건데 크게 1. 읽기(GET): "~~ 페이지 읽고싶음" 라고 요청 2.쓰기(POST): "새로운 글을 생성해 주세요" 라고 요청 3.수정(PUT): "~~글 수정해주세요" 라고 요청 4.삭제(DELETE): ""~~글 삭제해주세요" 라고 요청 네가지 형식이 있다. 이 네가지 형식을 통해서 사용자(클라..
Node.js 입문 [0/50]일 프론트엔드 부트캠프에 참가하며 여러가지를 배웠고, 여러 프로젝트를 진행하면서 웹서버에 대한 지식을 얻고자 하는 욕망이 늘어갔다. 클라이언트 사이드에서 서버에 요청하는 작업만 하다 보니, 서버에서 어떻게 제공하는지에 대한 궁금증이 커졌고, 그것을 조금이라도 이해한다면 클라이언트를 개발하면서 큰 도움이 될것이라고 판단하였다. 백엔드쪽을 공부하기 위해선 자바->Spring 을 배우는것도 좋은 방법이겠지만 지금 당장 자바를 배우기에는 시간도 부족하다. 그래서 자바스크립트 라는 언어의 이해도를 높일수 있으면서 서버 개발에 대해서 배울 수 있는 Node.js 를 학습하기로 결정했다. 하루에 한시간 두시간씩 조금씩 투자해서 50일 정도 꾸준히 학습하는 것을 목표로 했다. 1 -> 50으로 가는 그날까지 열심히 해봐야..

티스토리툴바