JWT에 대해서 정말 많이 들어보고 사용하고 있지만, 모르는 부분이 많을 것으로 생각되어 글로 한번 정리를 해보고자 한다.JWT(Json Web Token)은 웹에서 사용하는 JSON형식의 토큰에 대한 표준 규격으로 사용자 인증(authentication), 인가(au

서버와 통신을 하기 위해 AXIOS를 사용하는데, 계속 반복되는 코드를 작성하게 되어 효율적이지 못했다.!효율적인 AXIOS 사용법에 대해서 알아보자.axios코드를 어떻게 관리할지도 큰 고민이 된다. 이 부분에 대해서는 API 모듈 구조를 참고해서 작성했다.📦 ap

개발은 혼자서 진행할 수도 있고 협업을 진행 할 수 있다.특히 협업을 진행하게 되면 협업하는 팀 내에서 작업 효율을 높이기 위해 많은 고민을 할 것이다. 필자는 컴포넌트 디자인 패턴에 대해서 아직도 많은 고민을 하고 있으며 계속해서 더 효율적인 패턴이 무엇일지 계속해서

프로젝트를 진행하면서 디자인을 받았는데 아래와 같았다.비밀번호를 입력할때, 눈 모양을 클릭하게 되면 아이콘이 바뀌고 비밀번호를 보여주게 하는 것이다.이전에는 디자인을 받아 작업을 한 적이 없어 내 입맛대로 했지만 이제는 그렇게 하지 못한다.한번 INPUT 태그를 커스텀

문제 : 리액트로 프로젝트를 진행하면서 INPUT태그의 Onchange함수를 이용해서 변경되는 값을 State로 관리하려고 하였는데 의도와는 다르게 Onchange가 정상적으로 작동하지 않는 모습을 보였다.원인 : 기존 작성된 코드의 INPUT태그에 value가 아닌

회사에서 배포를 진행하는 과정에서 네트워크 기본 지식에 대해 정확한 네트워크 지식을 가지고 있으면 좋을 것 같다는 생각에 정리를 진행합니다.네트워크에서 사용되는 포트는 문(door), 관문(gateway)이라는 불어 porte에서 유래되었다고 한다.Port는 논리적인

Server와 Client가 특정 Port를 통해 실시간으로 양방향 통신을 하는 방식연결지향형 방식이기에 실시간 통신이 필요한 경우에 자주 사용됨.웹 페이지의 한계에서 벗어나 실시간으로 상호작용하는 웹 서비스를 만드는 표준 기술웹에서 사용하는 HTTP 프로토콜은 클라이

컴퓨터 네트워크 통신을 7개의 계층으로 나눈 것계층을 분리함으로 각 계층은 독립적인 역할을 할 수 있다.특정 계층의 문제가 생겼을 경우 문제가 생긴 계층을 파악 할 수 있다.각 계층은 하위계층을 포함한다, 따라서 최상위 계층은 아래계층 모두를 포함한다.전기적인, 기계적

연관 배열 구조로 Key, Value가 1:1로 연결되어 있다.Key를 이용해 Value를 알아낼 수 있다.Key고유한 값, has function의 input값Key 자체로 저장할 경우 Key의 길이가 다양하기에 일정한 길이의 Hash로 변경Hash functionK

Next.js는 더 나은 성능과 SEO를 위해서 페이지를 미리 랜더링하는데 대표적으로 getServerSideProps 와 getStaticProps가 있다. 이번 시간에는 getServerSideProps에 대해서 자세히 다뤄보자.서버 사이드 랜더링(SSR) 방식서버

Next.js? React 에서

google.com을 DNS서버에서 검색해당 도메인 이름에 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달웹 브라우저는 웹 서버에 해당 웹사이트에 맞는 HTML 문서 요청WAS와 데이터베이스에서 웹페이지 작업을 처리WAS에서 처리 결과를 웹 서버로 전송

CSS 전처리기로 전처리기를 통해 쉽게 입력하고 CSS로 변환시키는 것이다.static : 기본값, 원래 있어야 하는 위치relative : 원래 있어야 하는 위치에서 상대적인 배치absolute : 배치 기준을 상위 요소 에서 찾고 상위 요소로 가면서 static이

웹페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어컴파일 과정이 필요없어 빠른시간안에 스크립트 코드를 작성 할 수 있고 웹에 특화된 기술이기에 운영체제나 플랫폼에 상관없이 잘 작동하고 확장성이 높다.브라우저에서 실행되기에 보안상의 제약이 있다

리액트는 라이브러리 이다.라이브러리와 프레임워크 둘다 공통의 기능을 사용해서 결과물을 만들어낸다는 점은 비슷하지만 어플리케이션의 제어 흐름 권한을 누가 가지고 있느냐에 달려있다.프레임워크는 프레임워크가 내 코드를 호출하고라이브러리는 내 코드가 라이브러리를 호출한다.리액

리액트 프로젝트를 진행하며 달력을 통해 일정을 보여줘야 할 필요가 있었고FullCalendar 라이브러리가 필요한 기능을 제공하고 있고 많은 확장 기능들이 있어 사용했다.아래와 같은 형식으로 작성 할 수 있다.프로젝트 실제 적용 화면이고, 각 이벤트마다 배경 색을 줄

자유로운 설문 플랫폼 리버티폼 팀 프로젝트가 마무리된지 2달이 지났다.2달동안 카카오 엔터프라이즈 현직 멘토님의 지도 아래 많은 멘토링을 받았다.멘토링을 받고 리버티폼 프로젝트를 다시 열어봤고, 정말로 수정할 부분이 많았다.리버티폼 프로젝트는 프론트엔드 멘토링 없이 진

HTML 태그 안에 스타일 속성을 추가할때 쓰는 방법중 하나아래와 같이 적용할 스타일이 많지 않은 경우 인라인 스타일을 즐겨쓰곤 했다.그리고 무엇보다 편하다성능에 좋지 않다인라인 스타일을 사용하게 되면 재랜더링 이슈가 발생한다.리액트가 재랜더링을 할때, 인라인스타일의

리액트를 경험했다면 아래와 같은 메세지를 무조건 한번은 경험했다고 생각한다.map함수를 사용하지만 key값을 주지 않은경우 출력하는 메세지다.key props를 지정하지 않으면 페이지는 불필요한 랜더링을 진행한다.리액트는 내용이 바뀔 때 랜더링을 진행한다.만약 key값

프로젝트 개발을 진행하며 폰트가 울렁울렁, 깜빡깜빡하게 보였다.이러한 문제점을 해결하기 위해서 검색을 했고 FOUT이라는 문제라는 것을 알았다.Flash of Unstyled Text 의 약자로 커스텀 폰트를 사용했을 때 페이지를 불러오게 되면 순간 깜빡거리는 것처럼