짧지 않은 3개월간의 기록입니다. 회사와 무관하게 오로지 팀에서 경험한 내용들로 작성되었습니다.

SSR은 어디서 나온거지? 🤔 SPA(Single Page Application)가 등장하며 페이지를 직접 이동하는 것이 아닌 라우팅을 적용하며 url에 맞는 페이지를 부분적으로 보여지도록 구성을 할 수 있게 되었다. 이렇게 SPA로 구성을 하게 되면 페이지 이동

의미론적 태그(semantic tag) : 문서의 정보를 보다 잘 표현하기 위해 사용하는 의미를 갖는 태그들 Semantic tag? 의미있는 태그를 사용하여 개발자와 브라우저에게 어떤 의미를 가진 요소인지 인식시켜주자. 개발자에게는 코드를 보고 어떤 구조로 이루어

infinite scroll을 구현(지정된 개수의 컨텐츠만큼 스크롤이 끝에 도달하면 다음 컨텐츠를 로딩)하려던 중 발견한 Intersection Observer API..! 1. Intersection Observer API? 아래는 MDN에서 Intersectio

리액트 context API를 사용해본 참고 - https://ko.reactjs.org/docs/context.html#gatsby-focus-wrapper

axios? axios는 node.js와 브라우저를 위한 http통신 javascript 라이브러리입니다. 아래와 같이 모든 브라우저를 지원합니다. (Fetch와 달리 크로스 브라우징에 최적화) 스크린샷 2020-01-15 오전 10.08.49.png 특징 브라우저에선 XMLHttpRequests을 nodejs에선 http 요청 생성...

immer란? ? copy-on-write : https://en.wikipedia.org/wiki/Copy-on-write 라고 immer 홈페이지에 나와있다. 스크린샷 2019-12-13 오후 4.01.48.png 불변성을 위한 immer 사용해보기 immer 홈페이지에 나와있는 간단한 사용법은 아래와 같다. 위에서 produc...

Hooks는 class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 리액트 홈페이지에서는 hook을 아래와 같이 설명하고 있습니다. 1. State Hook 위의 코드에서 useState가 hook입니다. 위와 같이 hook은 함

i18next? 라고 i18next 홈페이지에 설명이 되어있습니다. 웹 프로젝트에서 react-i18next로 다국어 적용을 해본 경험으로 react-i18next의 사용법을 설명하려합니다. react-i18next 라이브러리 사용법 프로젝트에 yarn 이나 npm으로 react-i18next 패키지를 설치합니다. 설치 전 필요한 패키지를 미리 설치...

react는 SPA(Single Page Application)로 css파일을 적용하면 모든 화면에서 적용이 되어 class 나 id 명을 세밀하게 구분해주어야한다. 그래서 styled-components 라이브러리를 사용하면 내가 만들 컴포넌트에 임의의 class 를 생성해주어 스타일을 적용시켜준다. styled-components 사용해보기 로 R...

웹 프로젝트를 할 때 브라우저 호환성을 맞춰야할 때가 있다. 특히 클라이언트가 IE 브라우저에도 맞춰달라고 요청할 시... React로 웹 프로젝트를 진행한다면 IE 브라우저에서도 웹 페이지가 나타나게 해주도록 설정을 해야한다. -- 저는 패키지 매니저를 yarn으로 사용합니다. 개발중인 리액트 프로젝트에 react-app-polyfill 을 설치...

React Native 란? React 라이브러리로 네이티브 앱을 만들 수 있도록 개발된 라이브러리입니다. 페이스북에서 만든 크로스 플랫폼으로써 홈페이지 첫 화면에 라고 나와있다. 위의 의미는 React Native는 사용자 인터페이스를 구축하기 위한 동급 최고의 자바스크립트 라이브러리인 React와 네이티브 개발의 가장 좋은 부분을 결합한다. 라고...

IOS 빌드 시 에러 (Multiple commands produce ....) 아래와 같은 에러현상이 나타났을 때 iosbuilderror_1.png 아래의 사진과 같이 오류나는 파일명을 찾아 제거해주면 된다. iosbuilderror_2.jpeg 참고 -

Redux란 자바스크립트를 위한 상태 관리 라이브러리 입니다. react-redux redux 패턴 리액트에서 hooks를 이용하여 리덕스 사용법을 만들어보았습니다. Link - 이미지 참고 - https://github.com/dooboolab/react-native-training/blob/master/react-native-global-sta...

리액트는 SPA(Single Page Application)로 구성되어 있습니다. 그래서 페이지 전환이 파일로 이동하는 것이 아닌 한 페이지내에서 컴포넌트를 변경하는 방식입니다. React-Router란 리액트의 페이징 처리를 도와주는 라이브러리입니다. React-

React란? 페이스북에서 만든 사용자 인터페이스를 만들기 위한 Javascript Library 입니다. React 홈페이지에는 라고 작성되어 있습니다. 이 의미는 어디서든 유연하게 사용할 수 있는 기술이라고 느낄 수 있습니다. 리액트는 프레임워크가 아닌 라이브러리이기 때문에 다른 라이브러리나 프레임워크를 함께 사용할 수 있습니다. 참고 -