JSON JSON(JavaScript Object Notation)은 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우). 백엔드에서 보통 REST API 또는 GraphQL을 활용하여 JSON 형태의 데이터를 돌려주는 API를 제공한다. REST API 와 GraphQL REST API는 HTTP 메서드를 사용하여 작업을 수행하는 API를 구축하기 위한 아키텍처 스타일인 반면, GraphQL은 클라이언트 사이드에서 필요한 데이터만 요청할 수 있는 API를 위한 쿼리 언어이다. REST API란 무엇인가? REST는..

벌써 한 주가 또 흘러갔다. 그래도 이번 주는 꽤나 뿌듯한 한 주였다. 가시적으로 한 것들에 집착하지 않고 나에게 맞는 속도를 찾아 천천히 배우고 깨달아가는 것이 뿌듯했다. 데브로드에서는 5주차에 접어들었고, 테스트에 대한 기본적인 것들을 배웠다. 아직은 낯설고 어려워서 과제 코드들을 꼼꼼히 살펴보며 익혀나가야겠다. 백엔드 api가 구현되지 않은 상황에서도 사용할 수 있는 테스트 라이브러리들이 있었는데, 나의 상황에서 어떤 것이 가장 적합할지 고민해봐야겠다. 또한 제대로 짚고 넘어가지 않았던 2주차 내용들을 복습해보는데, 리액트에서 JSX를 왜 사용하는지, VDOM은 무엇이고 어떻게 동작하는지를 공식 문서를 보며 복습하여 리액트의 본질을 조금씩 알게 되어 좋았다. 어떤 지식이든 전체를 관통하는 본질에 접..

DOM이란? 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해, 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재한 것이 DOM이다. 모든 요소들을 각각의 객체로 만들고 이들 객체를 부자 관계로 표현할 수 있는 트리 구조로 DOM이 구성되어 있으므로 DOM tree라고도 부른다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 프로퍼티와 메소드를 갖는 자바스크립트 객체를 통해 DOM에 접근하여 동적 변경을 할 수 있다. 이를 DOM API(Application Programming Interface)라고 부른다. 달리 말하면 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하..

JSX란? const element = Hello, world!; 위에 희한한 태그 문법은 문자열도, HTML도 아니다. JSX라 하며 JavaScript를 확장한 문법이며, JavaScript의 모든 기능이 포함되어 있다. UI의 편리한 렌더링을 위해 React와 함께 사용할 것이 권장된다. 리액트에서 JSX를 꼭 사용해야하는 것은 아니다. 근본적으로, JSX는 React.createElement(component, props, ...children) 함수에 대한 문법적 설탕(Syntactic sugar)을 제공할 뿐이다. 즉 JSX는 React “엘리먼트(element)” 를 생성한다. 예를 들어 다음의 JSX로 작성된 코드는 class Hello extends React.Component { ren..

퇴사를 하고 시간이 2주가 흘렀다. 처음 일주일간은 휴식을 핑계 삼아 쉬었고 두번째 주인 이번주엔 최대한 집중하고자 노력했다. 이번주에는 Express로 서버를 간단히 만들어보며 CORS와 fetch에 대해 깊이 있게 알아보게 되었다. fetch로 발생하는 Promise객체와 이와 관련된 콜백 지옥 문제도 제대로 이해하며 공부해보았다. 또한 리액트의 훅에 대해서도 깊이있게 공부해보았는데, useEffect와 useRef에 관해서는 평소에 사용을 하면서도 제대로 생각하지 못했던 부분들을 배우게 되었다. useEffect의 경우 return을 통해 컴포넌트가 사라질 때 사용할 수 있는 것들에 대해 타이머를 만들어보며 생각해보았고, useRef에 대해서는 DOM에 접근할 때만 사용하는 것이라 생각했는데 inp..

1주차 리뷰 이번주는 프론트엔드 생존코스의 첫번째 주차였다. 개발환경을 배우는 것이 주된 내용이었다. 리액트던 넥스트던 항상 기본 세팅에서 시작을 했던 나는 이렇게 밑바닥부터 개발환경을 세팅하는 것이 신기하고 재밌었다. 프론트 개발자로서 본질적인 개발을 하는 느낌이었다. 또한 PR의 경우도 익숙치 않은 부분이 많았는데, 과제를 하면서 터미널로 깃을 쓰는 것에 보다 익숙해질 수 있었다. 다만 강의 내용에서 다루는 모든 내용을 전부 이해할 수는 없었는데, 차차 세부적인 부분들을 깊이있게 공부해봐야겠다. 배운 것 Typescript + React + Testing Library + Parcel + ESLint 환경 설정 Typescript 기본 개념 React 동작원리 Jest 패턴

최근에 프로젝트를 진행하면서 유저의 주소를 입력받는 input을 구현해야했었다. 보통 회원가입이나 신규 신청 시 사용하는데, 직접 유저가 입력하도록 하는 것보단 흔히 많이 쓰는 카카오 주소 찾기 API를 사용해보기로 하였다. 그런데 한가지 문제점은 나의 경우에는 주소 API가 사용되는 컴포넌트에서 setup 함수 기반의 코드를 짠 상태였는데, vue로 된 예시 코드 중에는 setup기반이 없었다는 것이다. 몇 번 시도하다가 차라리 따로 컴포넌트로 빼는 게 나을 것이라고 생각했다. 그래서 주소 input으로 받은 값을 부모 컴포넌트로 emit을 통해 전달하도록 구현하였다. 이후에 주소 api로 받은 값을 포함한 다른 input값들을 합하여 신청 과정을 구현할 수 있었다. 부모 컴포넌트에서 다음과 같이 주소..

회사에서 프로젝트를 진행하면서 다양한 권한 별로 페이지 접근을 설정할 일이 많아졌다. 단순히 접근을 하고 안하고를 떠나서 권한에 따라 보여줘야할 컴포넌트가 달라질 때가 많았다. 그뿐 아니라 로그인 여부에 따라 개별 페이지에서 접근 여부가 달라지기도 했다. 그러한 부분들은 나는 Pinia라는 전역 상태관리 라이브러리를 활용하여 해결하였고 코드와 함께 간단히 공유하고자 한다. 저 귀여운 파인애플이 로고이다. 먼저 나의 경우에는 로그인 여부에 따라 달라지는 접근 권한과 로그인 이후의 사용자별 권한이 크게 나뉘었다. 로그인 이후에는 권한이 크게 일반 사용자 권한과 관리자 권한이 있었고, 관리자 내부에서도 3가지 권한이 존재했다. 이러한 것들을 알기 위해서는 가장 먼저 쿠키에 저장된 유저 정보가 있는지 체크해야했..