개발자_승딱 개발자_승딱

리액트를 사용해서 프론트단에서 서버로 api 요청을 넣을 때 보통의 경우 cors 문제가 일어나게 된다. 이때 해결방법은 백엔드에서 cors 설정을 해주는 것 입 보통의 경우 이지만 프론트에서도 해결할수 있는 방법이 있다. 프록시 설정을 해주면 되는데 이렇게 하게되면 내가 직접 서버에 요청을 보내는 것이 아니라 내가설정한 프록시주소가 서버에 요청을 보내는 형태가 된다 이때 서버쪽과 같은형태의 주소로 설정을 해준다면 same origin 이 되기 때문에 cors 문제가 일어나지 않게 된다. CRA 를 사용하지 않는 다면 webpack을 이용하여 webpack.config.ts 파일에서 > devServer proxy 설정을 해주면 된다. 그러나 이번에는 CRA 를 사용하는 경우에는 어떻게 적용할수 있는지 ..

타입스크립트에 대해서 제대로 공부해본적은 없고 어떤 취지인지 그리고 간단한 사용법만 아는 상태에서 리액트에 타입스크립트 를 이용한 강의를 듣다가 제네릭에 대해서 궁금해서 적어본다. typescript generic 은 동일한 함수에서 다른 타입을 적용할수 있도록 하는 문법이다. 사실 type을 any 로 적용하면 다른 타입도 사용할수 있긴한데 any 같은 경우 동적으로 타입이 정해지기 때문에 사실상 타입스크립트를 사용하는 의미가 없어진다. 제네릭 문법 function give =(arg:T):T=>{ return arg+arg } give("wow") 요런식으로 쓰는데 이렇게 타입에대한 조건을 선언시가 아닌 선언후로 미룰수도 있고 인자를 통해서 타입추론을 해서 에러를 검색해낼수 있도록 여지를 준다.?? ..

리액트로 프로젝트를 할때 따로 함수가 필요한 경우 그냥 만들어 줘서 썻었는데 공부를 하다보니까 최적화를 위해서는 usecallback 이란걸 써야 좋다라고 한다. 무엇인지 알아 봅세 1. hook 을 사용할때 컴포넌트가 렌더링 된다라는 것이 그함수를 실행 하는거고 그렇게 되면 그함수안에 선언 되어있던 것들이 다시 선언이 되는구나 2.함수내의 state 나 전달받은 prop 이 변경되는 경우 리렌더링 된다 1.번에 관한 부분의 비효율을 줄여주는게 useCallback 의 사용이고 2.번에 관한 부분이 usememo 라고 생각하는데 좀더 알아보자 useCallback : 메모이제이션된 함수를 반환한다. useMemo : 메모이제이션된 값을 반환한다 라는게 핵심 이라는데 메모이제이션이 뭔지 그리고 어떨때 반환..

지금까지는 css 를 사용할때 css 파일을 만들어서 컴포넌트에서 풀러다가 사용을했었다.(클래스네임을 이용해서) styled-component 랑 emotion 을 사용해보려고 하는데 왜 이렇게 해야하는가라는 생각이 들어서 찾아봤다. Global namespace: => class명이 build time에 유니크한 해시값으로 변경되기 때문에 별도의 명명 규칙이 필요하지 않다. Dependencies: => CSS가 컴포넌트 단위로 추상화되기 때문에 CSS 파일(모듈)간에 의존성을 신경 쓰지 않아도 된다. Dead Code Elimination: => 컴포넌트와 CSS가 동일한 구조로 관리되므로 수정 및 삭제가 용이하다. Minification: => 네임스페이스 충돌을 막기위해 BEM 같은 방법론을 사용..

npm i @loadable/component npm i --save-dev @types/loadable__component import loadable from '@loadable/component' const Login = loadable(()=>import("@pages/Login")) const Signup = loadable(()=>import("@pages/Signup")) 코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜, 나중에 필요할 때 불러와 사용할 수 있습니다. 이를 통하여, 페이지 로딩 속도를 개선 할 수 있습니다. 코드 스플리팅을 하게 되면 spa 의 단점인 초기에 데이터 요청 시간이 길어지는 점을 조금 보완 할수있게된다. 출처:hangem-study.r..

cra 상태에서 사용하려면 react-app-rewired 를 npm install 한다. package.json 에 들어가서 reac-scripts > react-app-rewired 로 바꿔준다(덮어씌우는거) config-overrides.js 폴더를 만들고 루트폴더에 사용할 폴더들을 적어두고 현재경로를 기준으로 설정한다. 타입스크립트를 사용할 꺼기 때문에 얘도 참고할수 있도록 tsconfig.paths.json 파일을 생성후 내용을 넣는다. tsconfig.json 파일로 들어가서 extends 에 방금 작성한 파일을 짚어넣는다. 이렇게 하면 경로를 ../../././// 이렇게 안가져와도 됨 굿 출처:velog.io/@hoo00nn/React-TypeScript-%ED%99%98%EA%B2%BD%..

4주 프로젝트를 마치고 돌아본 나의 장점과 단점 나의 장점 : 내가 알고 있는거를 잘 활용한다. 어떤 작업이 잘 안되었을때 원인을 추측하고 그러한 원인을 유발하지 않을 수 있는 다른 방법을 잘 찾아 낸다. 나의 단점 : 작업이 잘안될때 정확한 원인을 찾아보지 않고 추측이후 다른 방법을 사용하다 보니 추후에 또 같은 오류를 마주칠수 있다. 의견을 교환할때 많은 가능성을 열어두고 의견을 교환하다 보니 내 의사전달이 다소 흐릿할때가 있다. 4주 프로젝트 회고 1주차 : 아이디어 회의 및 기획 2주차 : 스켈레톤 페이지 구성 3주차 : css 작업 4주차 : axios 연결, 마무리 css 작업 1주차 https://fineaple.com Fineapple 능력사무소 fineaple.com 우리가 배포한 사이트..

clip: rect(0, 0, 0, 0); input type="file" 숨기는 법 div 박스 안에 라벨하고 묶어놓고 input 은 안보이게 해놓고 라벨을 꾸미기