코로 넘어져도 헤딩만 하면 그만

이번 주에는 전에 배웠던 비동기 관련 학습을 보충해야겠다는 생각이 들었습니다. 특히 Ajax 요청은 이후로도 많이 쓸 것 같아서 말이죠. 🚩Ajax 가 무엇인가? Ajax : Asynchronous Javascript And XML의 약자. 서버와 비동기적으로 데이터를 주고받는 JS 기술. 즉, 데이터를 보내주는 '서버'와 통신하기 위해서 XMLHttpRequest 객체를 쓰는 걸 말합니다. 서버에게 데이터를 요구할 때에는 기본적으로 두 가지 원칙을 지켜야 합니다. 1) 원하는 데이터의 url을 명시하고 2)그 url에게 요청을 해줘야 합니다. (GET/POST) 데이터를 요청하는 방법에는 주소창에 url을 입력하거나, form 태그로 버튼을 눌러 요청을 하는 방법이 있습니다. 문제는 이 방법이 모두 요..

🚩크로스 브라우징 웹 표준에 대한 글을 읽다 보면, 크로스 브라우징Cross Browsing이라는 말이 자주 언급됩니다. 크로스 브라우징이란 웹 사이트에 접근하는 브라우저 종류에 상관 없이 '동등한' 화면과 기능을 제공하도록 하는 작업입니다. 굳이 동일한이 아닌 동등한이라는 표현을 쓰는 건 브라우저의 렌더링 엔진마다 종류가 달라서, 완벽히 같은 화면을 만들기는 불가하기 때문이에요. 그럼에도 어떤 브라우저를 사용하건 웹 페이지가 동등한 수준의 정보와 기능이 유지되도록 만들 수는 있습니다. 이전까지는 인터넷 익스플로러라는 브라우저가 타 브라우저와 호환이 안 되고, 여러 크로스 브라우징 이슈를 겪는 탓에 많은 개발자를 고통스럽게 했습니다. 예를 들어 다른 브라우저에서 페이지를 만들었는데 인터넷 익스플로러에서 ..

일전에 블로깅을 위해 useEffect 훅에 대해 추가 복습을 하다 보니 문득 clean-up 함수 라는 단어가 눈에 들어왔습니다. 사실 전에 useEffect의 사용성에 대해 배울 때는 이 부분에 대해 아예 건너뛰었거든요. 처음 보는 기능이라는 생각이 들어 들여다보다가 이번 스터디 주제로 삼아보면 어떨까 했습니다. 물론, 그 전에 가볍게 useEffect 훅에 대해 훑고 가는 게 좋을 것 같아요. useEffect(콜백함수, [Dependency]) 위 코드는 우리가 배운 useEffect의 기본 구조입니다. 두 가지 인자를 전달받고 있죠. 하나는 처음 한번 실행되고 이후 렌더링이 발생할 때마다 실행할 콜백함수, 그리고 다른 하나는 의존성 배열입니다. 그런데 useEffect는 아래와 같이 더 심화된 ..

🚩웹 표준이 뭔가요? 웹 표준이라는 단어에 대해 들어보셨나요? 오늘은 가볍게 이에 대한 이야기를 조금 하려 합니다. 그 전에, '웹'이 무엇인지부터 알아야겠죠. 흔히 웹을 인터넷이라고 생각하기 쉽지만, 사실 인터넷은 웹까지 포괄하는 더 큰 개념입니다. 인터넷은 전 세계적으로 연결된 컴퓨터 네트워크 통신망을 의미하는데 온라인 게임이나 이메일, 모바일 앱까지 네트워크를 사용하는 서비스라면 모두 포함되기 때문이지요. 따라서 웹은 '문서, 이미지, 영상 등 정보를 여러 사람과 공유할 수 있는 공간'이라고 생각하면 됩니다. 우리는 웹이라는 공간 안에서 많은 정보를 교환하고 있는 것입니다. 댓글을 달고, 소통을 하는 식으로요. 하지만 2000년 초반까지만 해도 이러한 소통이 원활하지만은 않았다고 합니다. 특히 여러..

리액트에는 훅Hook이 참 많습니다. 필연적으로 쓰는 useState, useEffect, useRef 외에도 useContext, useMemo... useReducer... 문제는 하나씩 익힐 때는 괜찮았는데, 여러 훅이 섞이기 시작하니 어디에 적절하게 써야할지 감이 잘 오지 않는다는 점이었습니다. 따라서 이번 시간에는 리액트와 훅에 대해서 좀더 공부하고 정리해보려 합니다. 리액트와 훅에 대해 논하기 전에, 왜 훅이 나올 수밖에 없었는지부터 짧게 알아보겠습니다. 🚩리액트 훅의 등장, 함수형 컴포넌트 때문에... 훅은 리액트 16.8부터 새로 추가된 기능입니다. 기존까지 즐겨 쓰던 클래스형 컴포넌트에 쓰이던 기능들을 함수형 컴포넌트에서 구현하기 위해 훅이 필요해진 것이죠. 함수형 컴포넌트는 클래스형 컴..

Single Sorce of Truth, 핵심은 '중앙집중적' 리덕스는 리액트를 편리하게 쓸 수 있게 돕는 상태 관리 라이브러리 중 하나입니다. 물론 비슷한 기능을 하는 다른 라이브러리들이 있지만 현재는 리덕스가 가장 대중적으로 쓰이고 있다고 보시면 됩니다. 그렇다면 왜 리액트에 굳이 리덕스까지 써서 상태 관리를 해줘야 할까요? 리덕스는 왜 쓰는 거죠? 🚩리덕스를 사용하면 편한 이유 1) 너무 복잡해... props 줄이기 리액트에서는 기본적으로 상태 state를 전하기 위해 상위 컴포넌트의 props를 하위 컴포넌트에게 내리고, 하위 컴포넌트에서 이를 받아쓰는 방식을 채택합니다. 이는 리액트가 추구하는 단방향 흐름과 관련이 있습니다. 직접적으로 아래쪽에서 상위의 상태를 바꿀 수 없다는 것이죠. 뭐.....

🚩Design Handoff 디자인 핸드오프란, 디자이너가 디자인 작업물을 넘길 때 다른 팀원들이 원활히 사용할 수 있도록 전달하는 과정을 말합니다. 이 과정에서 디자인 파일, 이미지, 스펙, 가이드 등이 전달되며 개발자와 디자이너 간의 빠르고 정확한 소통이 몹시 중요해집니다. 나쁜 핸드오프는 팀원 간의 불화를 일으키고, 레이아웃을 어지럽히고, 작업 시간을 늦춥니다. 그럼에도 완성된 작업물을 세상에 내놓기 위해서는 디자인 핸드오프 과정을 빼놓을 수 없습니다. 이처럼, 반드시 필요하지만 불협화음이 자주 생기는 과정에 도움을 주기 위해 등장한 것이 피그마 툴입니다. 피그마를 사용하면 실시간으로 편리하게 협업이 가능하여 자연스럽게 많은 개발자와 디자이너들이 이용하게 되었죠. 즉, 개발자가 디자인에 100% 전..

🚩Styled-Components 리액트 환경에서 사용 가능한 Styled Component는 CSS-in-JS가 대두되며 함께 등장한 라이브러리입니다. 기존까지 HTML, CSS, JS 파일로 쪼개 개발하던 방식이 리액트의 등장으로 컴포넌트 단위 개발로 바뀌었으나, 아직까지도 CSS는 그렇게 컴포넌트화 되지 못했다는 점에서 출발한 개념입니다. CSS-in-JS 라이브러리를 사용하면 CSS까지 자바 스크립트 안에 넣어줄 수 있습니다. 즉, HTML + JS + CSS가 전부 하나의 자바스크립트 파일 안에서 '컴포넌트 단위로' 개발할 수 있다는 뜻입니다. 물론 이를 위해 다양한 라이브러리가 있지만 현재 가장 인기 있는 라이브러리는 Styled Components입니다. # with npm $ npm ins..