프론트엔드 개발자가 UI/UX를 알아야하는 이유? 요즘 가장 많이드는 생각은 “내가 일을 잘하는 것일까?”, “일을 잘하는 것의 기준은 뭘까?” 이다. 스타트업에서 사수없이 일하려다 보니 많은 고민이 생긴다. 그래서 다른 사람들이 생각하기에 프론트엔드 업무 잘하는 사람은 어떤 사람인지 찾아보다가 가장 공감되는 부분을 찾았다. 시니어 개...

React-Query란? 리액트 애플리케이션에 데이터를 불러오고 캐싱하며, 서버 데이터와의 동기화 및 업데이트 하는 작업을 개발자가 쉽고 간단하게 할 수 있도록 도와주는 라이브러리이다. 사용 목적 서버로부터 받아오는 데이터를 관리하기 위해 서버 상태 관리를 위한 라이브러리를 찾아보았다. 검색 결과 대부분 redux...

SWR과 React-Query SWR 먼저 캐시에서 데이터를 반환한 다음, 서버에 데이터를 가져오는 요청을 보내고, 마지막으로 최신 데이터를 제공하는 전략이다. React-Query 리액트 애플리케이션에 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 해준다. 사용 목적 서버로부터 받아오는 ...

Redux란? 애플리케이션의 state를 관리하기 위한 오픈소스 JavaScript 라이브러리 필요성 웹 서비스가 발전하게 되면서 이제는 하나의 Page단위가 아니라 Page안에 여러 컴포넌트들이 하나의 화면에서 구성이 될 수 있도록 발전을 하게 된다. - 웹 서비스의 발전과 개발 패턴에 대한 내용이 궁금하다면 ...

프로그래밍 패러다임 간단하게 프로그래밍 스타일을 의미하며 전체적인 프로그래밍 방식을 말한다. 프로그램은 순차, 분기, 반복, 참조로 구성되어지며 프로그램 개발을 위하여 전략을 수립해야 한다. 위에서 말한 전략은 어떤 언어를 사용할지, 프로그래밍에서 어떤 것을 지양하고, 지양할지 등등 다양한 방법을 수립하게 된다. 여기서 말한 전략에 해당하...

Amplify란? “프런트엔드 웹 및 모바일 개발자가 다양한 AWS 서비스를 활용하는 유연성을 바탕으로 AWS에 풀 스택 애플리케이션을 손쉽게 구축, 배송 및 호스팅할 수 있도록 지원하는 완전한 솔루션입니다. “ 간단하게 말해서 AWS에서 제공하는 배포 자동화 시스템이라고 할 수 있다. 사용 방법 amplify 세팅...

홈 네트워크 네트워크를 알아보기 위해 가정에서 인터넷을 연결하기 위한 과정을 살펴보도록 하자. 먼저 인터넷에 연결하기 위해서는 IP주소가 필요하다. 보통 통신사를 통해서 인터넷에 가입하게 되면 IP주소를 할당해준다. IP 주소(IP Address) 인터넷에 연결된 컴퓨터에 부여되는 고유 주소 그 다음 인터넷에 물리적으로 연결...

클로저란? 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. MDN 문서 위의 말로만 듣고는 이해하기 힘들다. 간단한 예제 코드를 살펴보고 다시 알아보도록 하자. function outerFunc() { var x = 10; var innerFunc = function (...

비동기(asynchronous) 처리의 문제점 이전 게시글에서 동기와 비동기 처리에 대해 알아보았다. 이번 포스팅에서는 비동기가 갖는 문제점을 해결하기 위해, 동기적인 흐름으로 제어할 수 있는 방법 3가지(Callback, Promise, async/await)에 대해 알아볼 것이다. 먼저, 비동기 처리를 통해 발생하는 문제를 아래...

동기(Synchronous), 비동기(asynchronous) 정의 자바스크립트는 싱글 스레드 프로그래밍 언어이며 동기 방식으로 코드를 해석한다. 먼저 싱글 스레드란 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 것을 말한다. 그렇다면 동기 방식은 무엇일까? 동기(Synchronous) Synchronous : 동시에 발...