본문 바로가기

웹36

[React 개발일지] 버튼에 맞게 서로 다른 컴포넌트를 로딩해보자! 현 상황: 버튼에 따라 서로 다른 컴포넌트를 랜더링 하고 싶다 Hitstory 컴포넌트와 Record 컴포넌트 중 버튼으로 컨트롤하여 다른 컴포넌트와 내용을 보여주고 싶을 때, 1. state + onClick 디폰트 state를 설정해두고, 디폴트는 Record 고, 버튼을 누르면 state 값이 false로 바뀌게 되면서 History를 로딩 할 것으로 설계했다 2. boolean false, true 값을 바탕으로 서로 다른 컴포넌트를 랜더링한다 2022. 8. 6.
[React 개발일지] object x개가 있는데 각자의 id에 맞게 x개의 object 중 원하는 정보 랜더링 하기 (undefined 해결법) 현 상황: object 더미 리스트를 만들었고, object에는 각각의 id에 맞게 서로 다른 정보가 담겨 있었다 ex) {id:1, name: jeong, age:22, position:cm } 이런 데이터가 id 2 3 같은 형식으로 존재 목적: pages/id 에서 id에 맞게 각 id의 정보를 랜더링 해주고 싶었다. (players/1 이면 jeong, 22 ,. ..... players/2면 valverde, 25, .... 이런식으로) 먼저 useEffect를 활용해서 입력받은 Context.Provider로부터 받아온 userData의 조건에 따라 target id를 찾았다 id= useParams 를 통해서 파싱했다 https://github.com/JeongYujae/Kick_With_M.. 2022. 8. 4.
[Node JS] ERROR [MongooseModule] Unable to connect to the database 에러 해결 ▶ Mongoose 모듈에서 자꾸 오류가 나서 Mongoose install + code 를 모두 확인했는데.. ▶ MongoDB Atals 네그퉈크에서 해결 가능했다(IP 등록을 안했다) 네트워크 IP 주소를 추가해야했다... 다른 IP 주소에서 사용하려고 해서... DB 오류가 생기는 것이었다 2022. 8. 2.
[Node JS] NestJs Part 6 [interceptor, filter] 1. filter 예외 처리( ex) 에러), 예외를 filltering 할 수 있다 filter.ts 파일을 따로 만들어준다 - filter 파일 ● 에러를 만났을 때, 원하는 형식을 지켜서 response를 filter 해준다 controller 파일 당연히 import를 해줘야하고 class 밑의 함수들에 각각 달아줘도 되지만, 사진처럼 전역에 넣어줘도 잘 작동한다! @ 문법으로 controller 파일에서 사용해주면 된다 - app.ts 필터를 app 전역에도 설정해줄 수 있다 -> response type을 JSON, string, 등 원하는 결과로 return 해 줄 수 있다! 2. Interceptor 모듈성을 증가시키 위한 패더다임에 영향을 받아서 생긴 기능 각각의 컨트롤러들의 공통적인 기.. 2022. 7. 29.
[Node JS] NestJs Part 5 [Module, Middleware 만들기] ------- Module ------- 1. Module 만들기 nest g mo 이름 2. controller 만들기 nest g co 이름 3. Service 만들기 nest g service 이름 Module 추가 설명 1. 이렇게 만든 각각의 모듈들이 폴더로 각각의 controller와 service를 가지게 되고, 레고 블록 처럼 합쳐서 app module 로 합쳐져 있는 구조다 2. module 파일 안에서 exports:로 service를 export 하면 app module에서 providers에 추가하지 않고 바로 쓸 수 가 있다 (캡슐화 되어 있기 때문에..) ------- Middleware ------ 1. middleware 만들기 nest g middleware 이름 app.m.. 2022. 7. 28.
[Node JS] NestJs Part 4 [Nest Js의 로직 구조] → 공식문서 참조하기! (install 부분) ☞https://docs.nestjs.com/ → 장식자 문법 사용 가능 ( import { Body, Controller, Get, Param, Req } from '@nestjs/common'; ) express 에서는 const body= 나 param 으로 정의해주었다면, nest에서는 @ 문법을 활용하여 @로 받아줄 수 있다! - 구조 - controller: 소비자 provider: 공급자 nest는 모듈로 되어 있으니, 모듈이 중심 => 소비자와 공급자의 로직을 확실히 구별한 것이 장점 (구어체 ver.) appService는 제품이다. app.service에서 제품을 만든다 @Injectable() 로 제품을 보낼 준비를 한다 (택배 운송장 같.. 2022. 7. 28.
[Node JS] MongoDB Part 3 [몽고디비 기본설정 + 구축] ▶ mongodb 설치 ▶ account 만들고 ▶ip 개발할때는 모두에게 공개, 배포할 때는 서버의 IP를 작성하기 ▶ Database 가서 connect using MongoDB Compass ▶ Compass 운영체제에 맞게 설치하기 ▶ connection string 패스워드 쳐서 입력하기 2022. 7. 28.
[Node JS] 간단한 기본정리 Part 2 [데이터 CRUD] 1. READ - DB로 부터 모든 정보를 조회하기 (Player 구성은 json 요소로, 구체적인 정보를 위해서는 전 포스트를 방문해주세요) 실제 DB로부터 정보를 읽어올 때는 오류가 날 수 있기 때문에, try & catch 문을 사용했다. ◆200번대 응답 -> 성공, 400번대 응답 -> 실패 - DB로 부터 특정 정보를 조회하기 요청의 params로부터 id를 불러오고, (console에는 확인차 찍었다) id 와 같은 player를 json 객체로부터 찾아주고 return 해준다 그리고 그 값을 return 해서 보여준다 2. CREATE -> JSON 객체를 프론트로부터 받을 떄, 이를 읽어다 줄 수 있는 middleware 가 필요하다 express에서 제공하는 미들웨어 사용! postma.. 2022. 7. 28.
[Node JS] 간단한 기본정리 Part 1 [html 동사,라우터,미들웨어] 1. 기본 원리 1. const app: express.Express = express() app은 Express 서버를 의미하고 express로 운영할 서버를 의미 2. const port:number = 8000 TS 문법 (: type 저장) 포트 번호 8000에서 열겠다 3. get, send '/' 경로로 접근하면 get 할건데 (요청, 응답) 을 인자로 해서 send해줌 2. 미들 웨어 app. http 동사 (GET, POST,PUT,PATCH,DELETE....) 를 라우터라고 부른다 라우터는 프론트로부터 request를 받으면 db에서 꺼내, 이에 맞는 JSON이든 뭐든 보내준다(대부분 JSON) 서버로 Reqeust가 오면 라우터 처음부터 끝까지 쭉 훑게 되는데, 코드가 많아지고 방대해.. 2022. 7. 28.
React 오류Uncaught TypeError: Cannot read properties of undefined (reading 'filter') 리스트를 수정하고 왜 반영이 안되고 자꾸 오류만 뜨고 이상한 파일에서 오류가 난다 했더니 state는 비동기적이고 정의를 해두지 않으면 undefined 값으로 나오게 된다 근데 자꾸 그 undefined 된 값을 가지고 filter 니 length 니 하려고 하니까 오류가 났다 그래서 reducer dispatch 함수를 살펴봤더니 action 조건에 따른 switch 문에서 newState로 state를 바꿔놨는데 맨 밑에서 return 을 안했다 -> return 을 안하니까 값이 반환이 안되고, 이 변환 값이 없으니까 자꾸 undefined 에러가 떴다 2022. 7. 22.
[React]Command "create-react-app" not found , Couldn't find a package.json file in ~ create-react-app 오류 해결법 1. 만들고자 하는 폴더에서 yarn 으로 yarn 설치 -> yarn 패키지를 사용할 것 이라는 점 .2. yarn init (만들고자 하는 폴더 가서) -> node_modules와 package.json 파일 생성 3.yarn add global create-react-app create-react-app 이라는 모듈 설치해주고 4. yarn create-react-app 앱이름 시작 2022. 7. 13.
[React 개발 기록장][7번째 이야기] sass로 CSS 적용하기 ▶ 리액트에서 CSS를 적용할 수 있는 방법은 다양하나 - 별도 css 파일 저장 + link로 포함하는 방법보다, --> Component 단위로 css를 적용하는 방법을 react에서는 이용해보자 ◈ sass 사용하는 법 1. add 하기 yarn add --dev node-sass 2. shared.scss 파일 만들기 3. 각각의 모듈에 따른 scss 파일 만들기 각각의 컴포넌트에 해당하는 별도의 scss 파일 만들기 4. js 파일에 적용시키기 styles 라는 이름으로 import 해서 사용하기 2022. 7. 2.

티스토리툴바