재영 블로그

배운것을 기록하는 공간입니다.

Vue 3.0 공식 런칭, React Hook API와의 차이는?

Vue를 접하며 처음 Vue를 접할 때 React와는 다른 Template문법, 양방향 바인딩 등으로 인해 많이 낯설게 느꼈지만, 3.0버전에서 추가된 composition API를 통해 React와 비슷하게 컴포넌트/비즈니스 로직을 분리하여 구조적으로 관리할 수 있게 되면서 구조적으로 관리하고 있습니다. 아직 Nuxt에서는 정식 런칭되지 않았고 nuxt…

스토리북

프론트엔드 개발자의 업무효율을 개선시켜주는 스토리북, 그에 따른 디자인 시스템등 말로만 들어왔던 스토리북을 학습하며 그 과정을 기록해 보려고합니다. 디자인 시스템을 이해하기 Style Guide 스타일 가이드란 특정 브랜드 또는 상품에서 디자인을 할 때 지켜야 하는 규칙들로 이루어져 있습니다. 색상 아이콘 여백 타이포그래피 꼭 UI에만 해당하는 것은 아니…

HTTP 응답 코드와 메소드

HTTP HTTP 란 Hyper Text Transper Protocol 입니다. 하이퍼텍스트 문서를 교환하기 위해 만들어진 통신 규약입니다. 웹상에서 네트워크로 서버끼리 통신을 할때 어떤 형식으로 통신을 할지 규정해놓은 통신 형식, 통신 구조 입니다. HTTP 응답코드 종류 응답대역 응답코드 설명 정보전송 100 Continue 클라이언트로 부터 일부 …

GraphQL

GraphQL GraphQL 이란 Server API를 구성하기 위해 페이스북에서 만든 Query Language 입니다. Server API Server API란 요청을 하면 요청에 따른 응답을 주는 Endpoint(API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL, 주소)를 웹을 통해 노충하는것을 말합니다. 요청 ----> 응답 Ser…

브라우저, DNS

브라우저 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면 서버로부터 데이터를 다운받은 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI를 완성 해줍니다. 따라서 네트워크가 중요합니다. 브라우저의 기본 구조 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분입니다. 브라…

학습한것들 정리

react key, 리액트의 리스트와 key 리액트에서 특정 배열에 있는 요소들을 렌더링 할때는 다음과 같이 map 함수를 사용하여 적용합니다. 위의 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다고 콘솔에 에러가 표시됩니다. 여기서 key란 ?? key key는 요소들의 리스트를 만들 때 포함해야 하는 특수한 문자열 속성이라고 공식문서에 명시되…

학습 내용 정리

styled-component global style,vscode, 드랍다운 메뉴, input focuse 핸들링, 문자열 앞뒤 공백 제거 styled-components 글로벌스타일 스타일드 컴포넌츠에서 전역 스타일을 줄 때 createGlobalStyle을 사용하여 주었습니다. 이번에 다시 스타일드 컴포넌트를 사용하며 공식문서를 확인하는데, V5를 오…

리액트 네이티브 학습 내용 정리

RN을 학습하기 위해 간단하게 에어비엔비 UI를 따라서 만들어보고 있는 와중에 배우며 느낀점들을 정리해보았습니다. 부모 border 밖으로 튀어나옴 현상 View 컴포넌트 에 border-radius값을 주고 그 안에 Image컴포넌트로 이미지를 채웠을 때, 생각했던 대로라면 안에있는 이미지가 부모 보더 안에 채워져야 하는데, radius가 적용되지 않고…

Recoil

Recoil이란? Facebook에서 만든 React 상태 관리 라이브러리 입니다. Recoil은 자신의 장점을 다음과 같이 설명하고 있습니다. 리코일은 리액트처럼 일하고 생각한다. 앱에 일부를 추가하고 빠르고 유연한 공유 상태를 유지해라. 파생 데이터와 비동기 쿼리는 순수한 기능과 효율적인 구독에 길들여진다. 코드 분할을 손상시키지 않고 앱 전체에서 모…

학습 내용 정리

카카오 주소찾기 적용, 인풋 첫글자 자동완성 대문자, useState callback 사용하기, 리액트, 타입스크립트 name of undefined에러, withRouter를 통한 history 객체 타입 매칭, 브라우저 새탭에서 열기, 새창에서 열기, 모바일 사파리에서 키보드가 나올때 포지션 깨짐현상, 웹팩에서 public폴더 사용하기, 리액트 다중요…