좌충우돌 개발자의 길

문제상황 CORS 에러가 발생했다 어찌저찌 해결해오지만 git pull을 하면 다시 CORS 에러가 뜨고 무한 반복의 지옥에 빠져버렸다. 다시 구글링을 열심히 한 끝에 그 이유를 알게 됐다. 해결방안 서버와 클라이언트 주소가 일치하지 않아 발생한 에러였다. 그래서 단순하게 아 클라이언트 주소를 서버 주소와 같은 localhost:8080으로 변경해야겠다~ 이랬지만 이것은 무식한 해결방안이라는 걸 반증하듯이 같은 주소로 서버를 돌릴 수는 없다는 에러가 나타났다. 다시 구글링을 하여 약간의 속임수를 집어 넣는 proxy 방법을 찾았다. package.json에 proxy로 서버의 주소를 설정하고 url 을 /api/login 이런 방식으로 적어 놓으면 되는 것! 에러가 말끔히 해결됐다 참고자료 https:/..

문제점 난생처음 Axios와 JWT를 사용해서 로그인 기능을 구현하면서 근 일주일 넘게 난항을 겪은 에러가 있었다 바로 로그인 버튼을 누르면 accessToken과 refreshToken이 저절로 application-storage-cookies값에 저장이 되어야하는데 안되고 있는 상황이었다. 해결방법 1. api 서버와 클라이언트 서버의 주소가 같지 않으면 쿠키를 주고받을 수 없다 - 아래와 같이 해당 주소만 허락해주도록 설정 (Access-Control-Allow-Origin: "*"와 같이 모든 주소 가능하게 해주면 보안이 위험해짐) // backend(api) 서버 app.use(cors({ credentials: true, origin: "http://localhost:3000" })); // ..

오류 is not assignable to type 'IntrinsicAttributes && boolean' 이 뜬다.. 무작정 저 위의 에러 내용을 구글링 해봤지만 잘 나오지 않고 나와도 나와 비슷한 유형으로 에러가 뜨는 경우가 없었다. 해결 방법 무작정 구글링하기보다는 근본적인 문제점이 뭔지 파고들었다. 난 왜 에러가 나오게 코딩했을까? 바로 typescript로 react props의 타입을 설정하는 방법을 몰라서였다. (바보구나..) 'typescript react props' 을 구글링을 했고 내 에러를 해결할 수 있었다. (내가 생각한 TS로 react props 설정했을 때의 코드) import React from 'react'; const Greetings = ({ name: string..

1. 리덕스 왜 필요할까? - 상단에서 제일 말단까지 전해지는 과정이 매우 번거롭다. - 말단까지 가는 데 일억개의 단계가 필요하다면 매우 시간이 오래걸리고 좋은 코드가 아니다. => 이 점을 극복하기 위해 리덕스로 개발 2. 리덕스 설치 npm install redux react-redux - react-redux는 react와 redux가 서로 독립적이기 때문에 이 둘을 연결시켜주는 기능이다. 3. reducer - storage안에 있는 state를 어떻게 바꿀 거인가를 결정 - 리덕스 사용하는데 있어서 무조건 사용해야함 import { createStore } from 'redux'; function reducer(currentState, action){ if(currentState === und..

1. 컴파일 tsc 파일명.ts 타입스크립트 파일을 컴파일하고 index.html(예시)로 가져올 파일명.js를 생성 2. light-server package.json 파일 옆에 항상 index.html 파일을 제공하는 간단한 서버 3. 타입스크립트 공부용 웹사이트 typescript playground 4. 타입 정의 콜론 + 원하는 타입명 function add(text:string, num:number){ console.log(num1,num2); } function showItems(arr:number[]){ arr.forEach((item)=>{ console.log(item); } } showItems([1,2,3]); - 튜플 : 배열과 비슷한 모양으로 인덱스별로 타입이 다를 때 사용 le..

1. CRA로 만든 폴더에 TS 설치하기 npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom 2. 파일 확장자명 변경 .js -> .ts .jsx -> .tsx + jsx vs js //jsx function App(){ return ( Hello react ); } //jsx를 js로 변환 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null "react")); } 3. type 적용 4. 에러 해결1 -> 기존의 word 객체를 사용하면서 id만 0으로 바꿔줌..

1. build 란? 코드와 어플리케이션이 사용하는 이미지, css 파일 등의 파일을 모두 모아 패키징 하는 과정 난독화 + 줄바꿈, 공백 제거 2. build 실행 방법 npm run build build 생성 npm install -g serve stack file들을 serving 해주는 역할 serve -s build build 폴더를 기반으로 웹어플리케이션을 실행 3. 추가 : 배포 배포란? 빌드를 통해 생성된 정적인 파일들을 배포하려는 서버에 올리는 과정

react router를 사용하여 routing을 할 수 있게 해주는 기능 history를 이용해서 경로를 탐색할 수 있게 해주는 컴포넌트 history : 웹에는 history 기능이라고 이전에 들어갔었던 웹페이지를 기억해두는 기능이 있음 실제로 route 컴포넌트를 구성할 수 있게 해주는 기능 여러개의 route 컴포넌트를 children으로 갖음 path: 경로 element: 경로가 일치할 경우 해당 컴포넌트로 렌더링 : index경로에 /로 접속할때 MainPage 가 보임 페이지간 이동 이동할 path를 넣어주면 됨

부모에서 자식으로 데이터를 전달하는 경우는 많지만 자식에서 부모로 데이터를 전달하는 경우는 처음이었다! 이럴 땐 바로 state를 이용한다! 부모 컴포넌트에 useState를 만들어 놓고 자식 컴포넌트에서 setState로 데이터를 부모에게 전송시키면 된다! - 참고자료 https://webaura.tistory.com/entry/Reactjs-%EB%B6%80%EB%AA%A8%EC%97%90%EC%84%9C-%EC%9E%90%EC%8B%9D-%EC%9E%90%EC%8B%9D%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EA%B0%92-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-props-function [React.js] ..

class에선 this를 이용해 데이터를 교환한다 this.props.setData("data from child")}> send data to parent - 참고 자료 https://any-ting.tistory.com/8 [React Class] Component Props와 State 사용방법(데이터 전달) - 지난 시간 지난 시간에 React라는 기술에 대해서 간단하게 설명을 하고, 프로젝트 component를 활용하는 시간을 갖었습니다. 혹시 Component에 대한 개념에 익숙하지 않으시면 제가 올린 글을 한번 읽 any-ting.tistory.com