본문 바로가기

분류 전체보기77

(SPA) React-Router-Dom SPA란? SPA는 Single-Page-Application의 약자로, 여러 url을 필요한 부분만 렌더링하는 개념을 의미한다. 사용자가 경험하는 모든 웹앱은 서버에 저장되어 있는 웹앱을 인터페이스를 통해 요청하고 응답받는 구조로 되어있다. 이 때, 브라우저는 응답받는 내용대로 웹앱을 정보를 읽고, 이를 화면에 그리는 "렌더링(rendering)"을 진행하게 되는데, 일반적인 웹앱에서는 동일한 정보가 상당히 많이 겹침에도 웹앱 전체를 렌더링한다(MPA). SPA는 이러한 렌더링을 줄이고, 필요한 부분만 렌더링한다는 개념이다. React-Router-DOM 리액트는 SPA의 구현을 위해 React-Router-DOM 라이브러리를 사용한다. Router는 네트워크에서 경로를 결정하는 장치나 시스템을 의미하.. 2023. 3. 6.
HTTP Message & Method 용어 및 관계 정리 먼저 HTTP, RESTful API, AJAX 이 3가지 서버와 관련된 통신들이 너무나 헷갈리기에 이에 관해 먼저 정리하고 각 개념을 카테고리로 묶어 정리하고자 한다. HTTP HTTP는 인터넷에서 데이터를 전송하는데 사용되는 프로토콜이다. * 프로토콜(Protocal) : 2개 이상의 컴퓨터가 서로 데이터를 주고 받을 때 (통신할 때), 사용되는 규칙 혹은 규약이다. 즉 HTTP는 아주 단순하게 2개 이상의 컴퓨터가 통신할 때 규칙이나 규약이 정해져 있지 않고 제각기 통신하게 되면 이를 분석하고 핵심 내용을 파악하는데 시간이 너무 오래걸리거나 혹은 통신이 불가능해지기 때문에 "인간"이 규칙이나 약속을 정해놔서 원활하게 통신할 수 있도록 정해놓은 것이다. RESTful API RES.. 2023. 3. 6.
AJAX 요청 (React, 기본문법) 용어 및 관계 정리 먼저 HTTP, RESTful API, AJAX 이 3가지 서버와 관련된 통신들이 너무나 헷갈리기에 이에 관해 먼저 정리하고 각 개념을 카테고리로 묶어 정리하고자 한다. HTTP HTTP는 인터넷에서 데이터를 전송하는데 사용되는 프로토콜이다. * 프로토콜(Protocal) : 2개 이상의 컴퓨터가 서로 데이터를 주고 받을 때 (통신할 때), 사용되는 규칙 혹은 규약이다. 즉 HTTP는 아주 단순하게 2개 이상의 컴퓨터가 통신할 때 규칙이나 규약이 정해져 있지 않고 제각기 통신하게 되면 이를 분석하고 핵심 내용을 파악하는데 시간이 너무 오래걸리거나 혹은 통신이 불가능해지기 때문에 "인간"이 규칙이나 약속을 정해놔서 원활하게 통신할 수 있도록 정해놓은 것이다. RESTful API RES.. 2023. 3. 5.
RESTful API가 필요한 이유 용어 및 관계 정리 먼저 HTTP, RESTful API, AJAX 이 3가지 서버와 관련된 통신들이 너무나 헷갈리기에 이에 관해 먼저 정리하고 각 개념을 카테고리로 묶어 정리하고자 한다. HTTP HTTP는 인터넷에서 데이터를 전송하는데 사용되는 프로토콜이다. * 프로토콜(Protocal) : 2개 이상의 컴퓨터가 서로 데이터를 주고 받을 때 (통신할 때), 사용되는 규칙 혹은 규약이다. 즉 HTTP는 아주 단순하게 2개 이상의 컴퓨터가 통신할 때 규칙이나 규약이 정해져 있지 않고 제각기 통신하게 되면 이를 분석하고 핵심 내용을 파악하는데 시간이 너무 오래걸리거나 혹은 통신이 불가능해지기 때문에 "인간"이 규칙이나 약속을 정해놔서 원활하게 통신할 수 있도록 정해놓은 것이다. RESTful API RES.. 2023. 3. 4.
JSON / JSON-Server MDN JSON 공식문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON JSON - JavaScript | MDN JSON 객체는 JavaScript Object Notation(JSON)을 분석하거나 값을 JSON으로 변환하는 메서드를 가지고 있습니다. JSON을 직접 호출하거나 인스턴스를 생성할 수 없으며, 두 개의 메서드를 제외하면 자신만의 developer.mozilla.org JSON이란? JSON(JavaScript Object Notation)은 JSON은 객체, 배열, 숫자, 문자열, 불리언과 null을 직렬화하기 위한 구문이며, Javascript의 객체 문법을 따르는 문자 기반의 .. 2023. 3. 3.
Fs 모듈 (File System Module) Module이란? 객체의 수가 방대해짐에 따라 이를 관리하기 위한 파일 관리 툴들을 통칭하는 말이다. 이러한 모듈들은 컴포넌트/함수 내부가 아닌 외부에 파일 별도로 두고 관리한다. 만약, 몇 개의 객체로 구성된 데이터를 다룬다면 제어하고자 하는 파일 안에서 해당 데이터를 다뤄도 큰 차이가 없지만 수십/수백개의 데이터와 함께 데이터 내부에 재귀/제어함수가 포함된 데이터를 다룬다면 자바스크립트 혹은 리액트에서 렌더링하고 읽어들이는데 불필요한 자원을 소모하게 된다. 이로 인해 데이터 파일과 제어하고자 하는 파일을 분리하여 Node.js를 통해 데이터를 필요할 때마다 주고 받게 함으로 불필요한 자원 소모를 줄이는 작업이 필요하게 되었다. Node.js 모듈 : 내장 메서드 Node.js에서 제공하는 모듈은 .. 2023. 3. 3.
HTTP 개념 : URL, URI URL과 URI URL과 URI는 웹에서 자원을 식별하기 위한 문자열이다. URL은 Uniform Resource Locator의 약자로, 웹 상의 자원의 위치를 나타내는 문자열이고, URI는 Uniform Resource Identifier의 약자로, 특정 자원을 나타내기(혹은 찾기) 위한 식별자로 사용되는 문자열이다. 프론트엔드든 백엔드든 URL과 URI의 개념을 모른다면, 요청을 보낼수도, 응답을 받을수도 없기에 이를 읽고 API 명세서에 따라 올바르게 요청을 보낼 수 있어야 한다. URL은 URI의 하위개념이고, URI를 파악한다면 URL은 그 중의 한 부분에 불과하기 때문에, URI를 기준으로 해당 개념들을 파악하고자 한다. 아래는 각부분에 대한 명칭이다. file://, http://, htt.. 2023. 3. 2.
패킷(packet)의 크기 & 패킷에는 어떤 정보가 담기게 되는가? 참고문헌 https://www.baeldung.com/cs/tcp-max-packet-size https://ko.wikipedia.org/wiki/%EC%9D%B8%ED%84%B0%EB%84%B7%EC%9D%98_%EC%97%AD%EC%82%AC Packet이란? 패킷의 개념은 1950년도에 네트워크가 태동할때부터 컴퓨터와 단말기 간의 점대점 통신이 연구될 때부터 태동한 개념이다. 다만 비트(bit) 단위의 너무나 적은 데이터 전송량으로 인해 전화 교환선이 더 나았다는 후문이... 본격적으로 패킷 교환이라는 개념이 분산 네트워크와 함께 등장했으며 1970년대 초에 인터네트워킹을 위한 프로토콜이 되면서 현재 내가 학습하는 패킷의 개념이 정립되기 시작했다. 이후 1981~82년대에 TCP/IP 프로토콜 스.. 2023. 3. 2.
검색 엔진 최적화(SEO) 1. SEO(Search Engine Optimization)는, 검색엔진 최적화라는 의미로, 사용자가 검색 엔진에서 키워드를 검색했을 때 정확한 정보를 바탕으로 웹을 노출시키는 작업을 말한다. 2. SEO에는 크게 On-Page SEO와 Off-Page SEO로 나뉜다. 1. On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법 2. Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법 코드에서 조작할 수 있는 SEO는 On-page SEO이다. 3. SEO 최적화를 위한 방법 SEO 최적화를 위한 방.. 2023. 3. 1.
Sementic Tag(웹 표준) 웹 표준이란, W3C(World Wide Web Consortium)에서 권고하는 "웹에서 표준적으로 사용되는 기술이나 규칙"이다. 이는 2000년대 초반, 웹이 급속도로 상용화되던 시기에 브라우저 간 상호호환이 되지 않아, 개발자들이 각 브라우저에 맞는 동일한 페이지를 구현했던 시기의 비생산적인 활동을 최소화하고 어느 브라우저에서나 동일한 상호작용을 제공하고자 웹 개발 형식을 통일한 데서 출발한다. 1. Semantic Tag 모든 웹은 라이브러리에 따라 렌더링 하는 방식은 다르지만, 최종적으로 HTML로 화면의 구조와 컨텐츠를 출력한다. 이 때, 화면의 구조상 구현을 맡는 태그는 태그와 태그다. 기본적으로, 두 태그만 갖고 있어도 모든 웹 상의 구조를 구현할 수 있으나 어플리케이션이 커져감에 따라 아.. 2023. 2. 28.
인터넷의 기본 개념과 용어 네트워크란 서로 연결된 컴퓨터 혹은 기타 장치의 집합이다. 인터넷은 모든 네트워크가 연결될 때 형성된다. 인터넷은 1960년대 후반 미 국방부에서 핵 공격에 대비하여 분산형 통신 네트워크를 구축했던 것에서 출발하여 지금 전 세계의 네트워크가 긴밀히 연결되는데에 이르게 되었다. 학습내용을 참조한 출처 : https://cs.fyi/guide/how-does-internet-work How does the Internet Work? - cs.fyi As a developer, it is important to have a solid understanding of what the internet is and how it works. It is the foundation upon which most modern.. 2023. 2. 27.
상태 관리 라이브러리 : Redux "상태관리 라이브러리의 핵심은! 여러 상태를 한 개의 창고에 넣어서 보관하고 사용하는 것!" 상태 관리 Toolkit Redux Redux는 Toolkit이라는 이름에서 알 수 있듯, 상태를 관리하기 위한 여러 컴포넌트 및 메서드가 포함된 라이브러리를 의미한다. 기본적으로 Redux는 트리 형식으로 props를 하위 컴포넌트로 전달하는 방식이며, state를 통해 상태를 업데이트하며 관리하기 때문에, 중간에 컴포넌트에서 변경된 state가 쓸데없이 다른 컴포넌트에 전달되며 불필요한 자원소모 및 렌더링을 필연적으로 유발한다.(props drilling) 이를 관리하기 위해 중간에 위치한 컴포넌트의 변경사항을 즉시 최상위 컴포넌트에 적용하기 위한 Toolkit인 Redux, Recoil 등이 필요해졌다. R.. 2023. 2. 24.
React 상태 관리 " React는 Component를 기반으로 하는 상태관리 라이브러리다. " 사용자가 애플리케이션에서 상호작용을 하게되면, React는 상위 컴포넌트가 갖고 있는 상태를 props(속성)의 형태로 하위 컴포넌트에 전달하게 된다. 따라서 여러 컴포넌트가 상호작용하는 React에서는 변화하는 값이 어떤 컴포넌트에서 왔는지 알아야 핢에도 모든 컴포넌트가 부모자식 관계로 묶여있지 않은 이상, 현재의 props가 어디서부터 왔는지 파악하는 것은 프로젝트의 규모가 커짐에 따라 상당히 어려운 문제가 된다. props를 전달하는 규모에 따라서 상태를 크게 3가지로 나눌 수 있는데, 이는 아래와 같다. 1. Local State : props가 컴포넌트 간의 교환이 아닌 한 컴포넌트 안에서 교환이 일어나는 상태이다. 2.. 2023. 2. 23.
UseRef() useState, useEffect와 같은 React Hooks들은, React를 class형 프로그래밍이 아닌, 함수형 프로그래밍으로 제어할 수 있도록 고안된 개념들이다. 일반적으로 "use"를 앞에 붙이고 있는 리액트의 기능들이 Hooks이다. React 공식문서에서는 Hooks의 종류를 다음과 같이 제시하고 있다. 1. Basic Hooks useState useEffect useContext 2. AdditionalHooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue useDeferredValue useTransition useId 3. Library Hooks useSyncExter.. 2023. 2. 22.
State Lifting Up(상태 끌어올리기) React.js에서 "상태 끌어올리기"란 여러 컴포넌트에서 공유하는 상태를 부모 컴포넌트로 옮겨서 관리하는 것을 말한다. 이런 의미에서 상태 끌어올리기는 State를 통해 상태를 관리하는 기능이라고 볼 수 있다. React.js의 indeed 단방향 데이터 흐름 React.js는 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하고, 자식 컴포넌트에서는 이를 받아서 화면에 렌더링하는 방식으로 작동한다. 자식 컴포넌트에서 상태를 변경해도, 이 변경된 상태는 항상 상위 컴포넌트로 전달되어 최종적으로 애플리케이션의 상태가 업데이트되게 된다. ** 사설 이 때, 본인은 자식 컴포넌트에서 상태를 변경해도 부모 컴포넌트로 전달된다는 개념이 너무~~~~너무 이해가 되지 않았다. " 자식 컴포넌트로 상.. 2023. 2. 21.
Styled Component Styled Component 1. React는 기능구현에 초점을 둔 라이브러리이기 때문에, 종전의 스타일링은 전적으로 CSS파일에 의존했다. 2. 그러나 웹에서의 상호작용이 비대화되고, React프로젝트가 거대화 됨에 따라 CSS파일 또한 다양화되었다. 3. 이로 인해 SASS나 Styled Component와 같은 방법론이 등장했다. 각각의 방법론은 장/단점을 갖고 있다. 1. SASS 장점 : 변수/함수/상속 개념을 활용하여 재사용이 가능하고, CSS가 구조화되어 유지보수가 편리하다 단점 : 별도의 전처리 과정이 필요하고, 디버깅하는데 어려움이 있으며, 컴파일한 CSS가 거대화되는 문제가 있다. 2. Styled-Component 장점 : CSS가 컴포넌트 안으로 캡슐화되어서 네이밍이나 최적화를 신.. 2023. 2. 20.
Javascript Async 거의 대부분의 프로그래밍 언어에서 비동기는 중요하게 다뤄진다. 그 이유는, 대부분의 프로그래밍 언어가 싱글 스레드 기반의 동기식 작업 처리방식을 갖고 있기 때문이다. 동기식 처리와 비동기식 처리의 차이는 다음의 그림을 통해 확인할 수 있다. 그림에서도 보여지듯, 비동기적으로 처리된 작업시간은 동기적으로 작업하는 작업시간보다 빠르게 작업이 이뤄진다. 이는, 서버 통신이 이뤄지는 동안 타 작업을 수행하든지, 일정 시간이 지난 후 팝업/영상을 띄우는 setTimeout / 일정 간격으로 특정 작업을 수행하는 setInterval 등 호출 스케줄링 등의 경우에서 아주 중요하게 다뤄진다. 그 예시로, 만약 GPS 정보를 활용한 작업이 필요한 경우, GPS 정보를 가져오고 이에 관한 연속 작업이 이뤄지는 동안 사용.. 2023. 2. 19.
Figma의 Layer, Component, Object Figma는 웹을 코드로 구현하기 이전, 웹의 구조와 기능을 미리 구현해보는 프로토타입 툴이다. 그렇기에 개발자가 직접 Figma를 활용하여 웹의 프로토타입을 만들 일이 많이 없다고는 하지만, 실제 사용을 해보니, 웹을 만들기 이전에 구조를 계획해보고, 프레임을 짜보면서 내가 배우고 있는 코드와 기능이 실제 웹에서는 이런 식으로 상호작용이 되야 하는구나,,라는 그림을 그릴 수 있었다. Figma는 크게 3가지의 구조로 만들어진다. 먼저, Figma는 단순히 아트웍이 목적이 아닌 실제 기기에서 사용할 수 있는 프로토타입을 구현하는 것이 목적이기 때문에, 백지에 도형을 나열하듯 만들어지지 않는다. 이를 보여주는 지점이 레이어(Layer)이다. 피그마에서 바로 볼 수 있는 레이어는 Group과 Frame이다... 2023. 2. 17.
고차함수 설계 : arr.map() / arr.reduce() / arr.filter() 객체와 배열은 모든 프로그래밍 언어에서 다루는 개념이며, 특히 객체지향 프로그래밍에 있어서 중요한 역할을 맡는다. 이 중, 배열을 활용한 데이터의 조작은 프로그래밍을 통해 특정한 화면 및 데이터를 구현하고자 할 때 항상 사용되는 개념이다. 이에 본 포스팅에서는 가장 자주 사용되는 배열의 개념인 arr.map(), arr.reduce(), arr.filter()를 살펴보고 이를 다루는 예제를 살펴보고자 한다. 다만, 현재 배열을 고차함수(콜백함수)를 활용해서 이해하는 역량이 많이 부족하기 때문에 MDN에서 제공하는 프로토타입을 기준으로 쪼개보고 이 쪼갠 내용을 바탕으로 예시코드를 살펴봄으로 내용을 정리하고자 한다. Arr.Map() // MDN 프로토타입 arr.map(callback(currentValu.. 2023. 2. 16.
UX/UI의 개념 UX (User Experience) : 사용자가 시스템 혹은 제품을 직,간접적으로 접하면서 느끼는 총제적인 경험 UI (User Interface) : 사용자가 제품 기능을 조작할 수 있도록 돕는 각 기능의 조작툴 ① UX는 UI를 포괄하는 개념이다. ② Front-end 개발자는 UX를 염두해두고 디자이너/퍼블리셔와의 협업을 통해 UI를 효과적이면서 향후 유지보수 및 개선이 용이하도록 프로그래밍을 해야 한다. ③ UX 경험이 좋더라도 UI 경험이 좋지 않을 수 있다. 이는 반드시 피해야 한다. ⚠️ 제품에 대한 좋은 경험을 갖은 사용자도 "어쩌면" 드롭박스 지연, 렌더링 지연 및 오류 등을 겪었을 수도 있다. 참조강의 : 우테코 테코톡 : https://www.youtube.com/watch?v=0f.. 2023. 2. 15.