Hello_coding

가끔 코딩을 하다 만나는 빨간 문장 . . 애써 무시했지만 이제 제대로 알아보자 하고 포스팅을 씁니다. 먼저 cors는 뭐고 , 또 sop은 무엇인지 알아보자! cors란 ? Cross-Origin Resource Sharing 의 약자로 직역하면 교차 출처 리소스 공유하는 뜻이다. 추가 HTTP 헤더를 사용하여 , 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처 (도메인,프로토콜,포트) 와 다를때 cors 요청을 실행한다. ❓ 왜 cors가 필요할까 ❓ - 이전에는 동일한 도메인에서 리소스를 받아왔지만, 현재는 도메인이 다른 서버에서 제공하는 API를 사용할 일이 많아졌다. 따라서..

리액트를 공부하며 자연스레 서버사이드렌더링, 클라이언트사이드 렌더링에 대해 알게 되었다. 대략적으로는 알고 있지만.. 더 자세히 알기위해 포스팅을 하기로 했다! 이 둘의 차이점은 결국 단어에서도 나와있지만 어디서 렌더링을 하느냐! 이다. CSR (Clinet Side Rendering) ? - 클라이언트 사이드 렌더링은 SPA가 유명해지고 , 사용자들의 컴퓨터 성능향상 및 자바스크립트의 표준화로 본격적으로 함께 나온애다. - CSR은 서버에서 전체 페이지를 한번 렌더링 하여 보여주고, 사용자가 요청할때 마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 재렌더링 하는 방식이다. [ CSR 방식 로직 ] 1. 서버에서 HTML파일을 클라이언트에 보내주면 CSR에서 사용하는 HTML파일은 단순히 아래와 같..

애플리케이션을 만들때 , 서버의 API를 호출하여 사용하는 경우 네트워크 송수신 과정에서 시간이 걸린다. 따라서 응답을 받을 때까지 기다렸다가 전달 받아서 처리한다. 이때 만약 동기적으로 처리한다면 ? 요청이 끝날때 까지 다른 일을 할 수 없기때문에 효율적이지 않을것이다. 따라서 이과정을 비동기적으로 처리하게 된다! Q. 비동기에 대해 더 자세히 알고 싶다면? https://mandelina-code.tistory.com/67 [JS] Promise (feat. 동기,비동기가 뭘까?) Promise를 들어가기 앞서 , 우리가 알아야할 것은 비동기 이해이다. 비동기 - 비동기 실행이란 순차적으로 수행이 완료되면 다음수행이 실행되는 것이 아니라 동작이 완료되지 않아도 다음코드가 mandelina-code.t..

리덕스 (Redux) 란? - 리액트에서 가장 많이 사용하는 상태 관리 라이브러리이다. - 주의해야 할 점은 , react만을 위한 라이브러리는 아니다. - useState와 마찬가지로 변하는 값들을 관리해주는 관리 시스템이다. - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적으로 관리가 가능하다. - 컴포넌트끼리 같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 값을 전달, 업데이트 할 수 있다. Redux flow는 어떻게 될까? 1. 하나의 중앙 데이터(state) store을 갖는다. 2. 상태값을 바뀔 때마다 데이터들의 state 값을 수정해줄 reducer 함수를 만든다. 3. dispatch를 사용하여 reducer에게 state 값을 수정하라고(action 값을..

기존은 컴포넌트의 props를 통한 데이터 전달이 이루어 진다. 하지만 여러 컴포넌트에 거쳐 자주 사용되는 데이터( 예 : 로그인여부, 프로필정보)의 경우 기존방식은 코드가 복잡하고 불편해진다. 이것을 해결하기위한 방법이 바로 Context이다. Context에 대해 알아보자! Context ? - 컴포넌트 트리를 통해 부모가 자식을 통해 전달해주는것이 아닌 곧바로 컴포넌트로 데이터 전달한다. - 코드가 깔끔해지고, 데이터를 한곳에서 관리하기 때문에 디버깅도 유리하다. 언제 context를 사용할까 ?? - 여러개의 component들이 접근해야하는 데이터에 사용 ex ) 로그인여부 , 정보 ui테마 , 현재언어 등 .. 사용하기전에 고려할점 - component와 context가 연동되면 재사용성이 떨..

useRef 란? - Reference를 사용하기 위한 Hook Reference ? 특정 컴포넌트에 접근할 수 있는 객체 사용법 const ref = useRef(초깃값); 특징 - useRef Hook은 Reference object를 반환한다. { current : value } - current란 현재 참조하고 있는 Element이다. - Reference object는 수정이 가능하다. - 반환된 ref는 전 생애주기를 통해 유지된다. (즉, 컴포넌트가 계속 렌더링 되더라도 unmount 되기 전까진 값을 유지한다. ) - useRef Hook은 내부의 데이터가 변경되더라도 별도로 알리지 않는다. (즉, current 속성을 변경한다고 재렌더링이 되지 않는다. ) 정리 - useRef를 사용한 ..

1. 깃헙 페이지 만들고 2. package.json에 밑에 코드 추가하고 { "homepage":"여러분 github page url", ... } 3. npm run build 해준다음 4. build안의 파일을 그대로 올렸는데도 배포시 흰화면이 떳다.. (이걸로 며칠을 고생했는지...) 구글링과 팀원분들을 총동원해 알게 된 사실 .. (사랑해여 팀원분들. . . ) 1. build파일의 index.html 경로가 잘못되어있다. 저 1번과 2번 경로가 ./static이 되어야한다. (경로가 이상하게 되어 있었다..) 2. npx create-react-app my-app 로 react 프로젝트를 생성하면 .gitignore에 /build 파일이 적어져있다. (build파일이 안올라가서 드래그앤 드롭으..

Blog를 만들려고 npx 명령어를 쳤는데 계속 저런 오류가 나왔다. Cannot create a project named "Blog-Page" because of npm naming restrictions: * name can no longer contain capital letters Please choose a different project name. 알고보니 npm 네이밍에서는 대문자나 특수문자를 입력하지 말라고 되어있다. 너무 허무한 에러 . . 잘 확인하길 바란다.

리액트 홈페이지를 클론하려던 중 라우팅방법을 이해하기 위한 SPA에 대한 지식이 부족한것 같아 알아보게 되었다. SPA ? - 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. - 뷰 렌더링을 사용자의 브라우저가 담당하게 하고 , 우선 애플리케이션을 브라우저에 불러와 실행시킨 후 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트해준다. - 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용 Q. 왜사용해요 ? 기존페이지는 다른페이지로 이동할 때마다 새로운 html을 받아오고 , 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다. 하지만 매번 새로운 화면을 보여주면 성능상의 문제가 발생할..

리액트에서는 CSS를 어떻게 사용해야 할까? 리액트에서 컴포넌트를 스타일링하는 방식은 크게 4가지가 있다. 1. 일반CSS : CSS파일을 import하여 사용 2. SaSS : CSS 전처리기를 이용 3. CSS Module : 클래스 이름을 고유한 값으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지 4. styled-components : 자바스크립트 파일안에 스타일을 선언 이중에서 우리는 styled-components에 대해 알아보자! styled-components - 자바스크립트 파일안에 스타일을 선언하는 방식이다. - CSS-in-JS 라이브러리중 개발자들이 가장 선호한다. - Tagged 템플릿 리터럴 문법을 사용한다. - props 값으로 전달해주는 값을 쉽게 스타일에 적..