React-query란?
2022. 7. 1. 22:31
TIL/개념정리
react-query react-query Hooks for managing, caching and syncing asynchronous and remote data in React. Latest version: 3.39.1, last published: a month ago. Start using react-query in your project by running `npm i react-query`. There are 851 other projects in the npm registry usi www.npmjs.com React Query React Query Hooks for fetching, caching and updating asynchronous data in React react-query..
Recoil
2022. 6. 30. 21:32
TIL/개념정리
https://www.notion.so/Recoil-dfe0e9475a3144eeacf1f51e2c2267ec#08e1c5fe174044cbb4ca88a806b19e55 Recoil이란? Redux와 비슷한 상태 관리 라이브러리로 사용되고 있으며 처음 사용하기 복잡한 Redux와 다르게 React hook과 유사한 구조를 가져 Recoil 상당히 쉽습니다. 용어 atom 기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위로 설명되곤 합니다 기본적인 atom의 구조는 유니크한 키값과 default값을 가지게 되며 한가지 상태를 관리하기 위해 한가지 atom이 만들어지게 됩니다 상태 불러오기(useRecoil...) 상태를 가져올 때는 만들어뒀던 atom을 import 시켜 사용하면 되..
Redux
2022. 6. 29. 18:58
TIL/개념정리
https://www.notion.so/Redux-90761b4b69d94b09b96c1cb2b14dcd9d#da259a9617044ce09f7943475721ebb6 Redux를 쓰는 이유 Context API → 사용하기 쉽지만 복잡해진다면 관리, 추가하기 어렵다 Redux → 상태 관리 라이브러리로써 가장 많은 기능을 지원하기 때문에 현업에서 자주 많이 사용됨 이전 상태관리 라이브러리에 대해 잠시 정리헀지만 다시 간단히 정리해보면 Redux : 변수들을 어느 곳에서나 접근하고 관리하기 쉽게 만들어 주기 위해 사용하는 변수를 모아두는 창고라고 연상할 수 있다. 관련 정보 홈페이지 https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The offi..
상태관리 라이브러리
2022. 6. 28. 16:38
TIL/개념정리
개요 리액트에선 상태(state)를 관리한다고 하는데, 이 상태라는 것은 변수라고 하기도 하고 데이터라고 하기도 하는 것으로 이 상태를 컴포넌트 구조(일종의 규격 , 박스)를 만들어 이것을 웹 페이지에 보여주는 것이 리액트의 개발방식입니다. 이렇게 컴포넌트구조를 만들어 개발하게 된다면 상위 컴포넌트에서 쓰던 상태, 변수, 데이터라는 것을 하위 컴포넌트에 넘겨주는 일이 매우 빈번하게 발생합니다 위 이미지에서 예시로 들면 메뉴 컴포넌트에서 현재 메뉴가 열려있는지 닫혀있는지에 관한 변수(state → 메뉴오픈 true / false)가 있다고 할 때, 이 변수에 따라 글자 컴포넌트의 text 색깔이 검정색에서 하얀색으로 바뀌어야 한다고 한다면 개발자는 메뉴 컴포넌트에 메뉴오픈 값을 글자 컴포넌트에게 넘겨주고 ..
로그인 구현 방식
2022. 6. 25. 09:23
TIL/개념정리
도입 웹사이트에서는 요청에 따라 사용자가 로그인을 하였는지에 관한 인증상태를 관리해야 할 필요가 있다. 사용자가 어떠한 동작이나 어떠한 요청을 보낼 때 마다 계속 로그인을 통해 사용자 인증을 요구한다면 그 웹사이트는 그 사이트에 사용자 경험은 떨어지고 결국 아무도 사용하지 않게 될 것이다. 이처럼 사용자가 로그인 하게 되었을 때 사용자의 로그인 상태를 서버에서 처리할 수 있도록 하는 인증 방식이 있는데 세션(Session)과 JWT , Oauth 방식이 있습니다. 종류 세션 세션이란 쉽게 말하면 서버의 컴퓨터(서버에 세션 저장소)에 클라이언트의 정보를 기억하고 유지하는 것 입니다. 사용자(정확히는 브라우저)가 로그인을 하였다면 서버의 컴퓨터(세션 저장소)에서 사용자 정보(주로 브라우저에 쿠키에 저장하게 ..
Typescript
2022. 6. 23. 17:40
TIL/개념정리
Typescript란? 타입스크립트는 일반적인 JS문법에서 변수의 타입을 미리 선언하고 사용하는 것입니다 JS이외 C/C++, Java 등 Strong Type을 경험해보셨다면 이해하기 쉽다고 생각합니다. 하지만 어느정도의 차이는 있으므로 그런 것들을 정리할 예정입니다 우선 Typescript는 기본적으로 코드가 실행하기 전 검사하고 에러를 띄워주게 됩니다. 따라서 타입스크립트에게 초기에 어떤 것(어떤 타입인지)인지 코드를 작성해줘야 합니다. js에서 any로 표시되는 모든 데이터들에 대해서 선언시에 한번만 지정하면 되지만 원시타입(number, string, boolean) 같은 경우는 타입 추론을 통해 자체적으로 타입을 받을 수 있으니 굳이 지정안해줘도 됩니다. 이외에도 복잡한 타입의 경우 굳이 지정..
CSS 레이아웃
2022. 6. 21. 20:59
TIL/개념정리
레이아웃이란 원하는 위치에 지정한 사이즈로 배치하는 것을 말하는데 이러한 배치를 하기 위해서는 CSS에 여러 속성 중 잘 사용되는 순서로 display, position, flex, grid로 구분 할 수 있습니다 https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction 1. display : block과 inline, inline-block block : 혼자 한줄을 차지하는 속성으로 다른 엘리먼트들이 들어와도 밀어내며, 줄바꿈을 발생시키게 됩니다. 그리고 상하좌우 margin과 padding 속성이 적용됩니다. inline : CSS로 지정한 width와 height는 지정되어 있어도 무시하고 태그 안에있는 컨텐츠의 크기만큼만 C..
브라우저 저장방식
2022. 6. 20. 19:03
TIL/개념정리
개요 자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생깁니다. 보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하거나 경우가 많을 것입니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 따라서 중요하지 않거나 클라이언트에서 사용될 수 있는 작은 데이터를 효율적으로 사용하기 위해 서버가 아닌 프론트 웹 브라우저에 저장하는 기술을 브라우저 저장방식 종류 쿠키 웹 스토리지 로컬 스토리지 세션 스토리지 IndexedDB 브라우저 저장방식은 개발자도구에서 확인 가능 쿠키 쿠키는 웹사이트 접속시 해당 사이트에 대한 만료 기한이 있는 데이..
Node.js , express
2022. 6. 19. 15:00
TIL/개념정리
Nodejs는 Javascript를 브라우저 외의 다른 환경에서도 사용할 수 있게 해주는 런타임 라이브러리입니다. 이 Node.js에서는 http서버가 내장되어 있어 서버로 많이 사용되고 있습니다. 이러한 것들 뿐만 아니라 웹팩, 바벨(이전버전과 현재 버전에 호환되지 않는 부분들을 해결)과 같은 도구들과 일렉트론 같이 자바스크립트 데스크탑 프로그램을 만드는 프레임워크가 모두 Node.js를 기반으로 돌아간다고 합니다. 이러한 Node.js의 방식을 통해 거의 Javascript만을 사용하는 프론트 개발자들이 JSP, PHP , Python , spring들과 웹 어플리케이션 서버 같은 공부해야할 것들이 많았지만 Node.js에서는 새로운 서버 언어를 배우지 않고도 자바스크립트만으로 서버를 개발할 수 있는..
CI/CD에 관하여
2022. 6. 18. 09:42
TIL/개념정리
하나의 서비스를 개발하고 계속해서 운영및 관리해나가고자 할 때, 업데이트 사항을 매번 개발자들이 수동으로 빌드시켜 테스트한 뒤 배포 설정을 하게 된다면 반복적인 작업이 될 뿐만 아니라 상당히 많은 시간을 사용하게 됩니다. 이런 문제점을 해결하기 위해 나온 개념이 CI/CD입니다. 개발서비스 운영관리 문제점들을 해결하여 많은 시간을 투자하지 않더라도 기존 수동 방식보다 더 많은 업데이트, 수정 사항들을 적용시킬 수 있게 되었다고 할 수 있습니다 CI CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration) 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로..