본문 바로가기

FE

FE/개발 관련 뉴스, 서적, 자료 [Leiapix Converter] Create 3D GIFs 평면 그림을 입체적으로 만들어주는 Leiapix Converter에 내 작품을 넣어 보았다. 회원가입을 하고, 원하는 그림 혹은 사진을 넣어주면 간단하게 움직이는 3D 영상 혹은 GIF 파일을 만들 수 있다...! 첫 번째 작품 🤍 한줄평 : 그래 이거지 ㅠㅠ 다만 뒤의 풍경까지 각도에 따라서 움직였으면 더 좋겠다는 아쉬움 한 스푼 (사실 입체감 조절 커스터마이징도 된다.) 두 번째 작품 🤍 한줄평 : 화질이 좋지 않은데 오히려 좋아...!! 자동으로 오후 2시 한강의 반짝반짝 효과를 얻었다ㅋㅋㅋ 이 작품의 경우에는 처음에 그림 속에 있는 음표가 따로 움직이지 않고 주변 배경에 고정된 채로 같이 움직여서 어색한 느낌이 들었다. 그래서 아래와 같이 살짝 커스터마이징을 해주었다. 하지만 불편한 점은 실행취..
FE/React [React] 데이터 흐름 & State 끌어올리기 (Lifting State Up) 이전 글 참고 : React 데이터의 흐름 * State 끌어올리기 - 상태 변경 함수가 정의된 컴포넌트 - 상태 변경 함수를 호출하는 컴포넌트 * React 공식 문서의 주요 개념 일단 이거부터 보고 가자 ㅋㅋㅋㅋ (bgm과 같이 보는 유튜브 쇼츠 링크 클릭!) 역방향 데이터? (스포: 아니다.) 저번 글과 비교하며 컴포넌트들의 달라진 관계를 보면, Tweets 컴포넌트에서 관리하고 있었던 데이터(전체 트윗 목록)은 NewTweetForm 컴포넌트를 통해 변경이 된다. 즉, 새 글을 추가하는 이벤트가 발생할 경우, 이때 전체 트윗 목록에 새로운 트윗 객체를 추가할 수 있어야 한다. NewTweetForm과 Tweets 두 컴포넌트 모두 트윗 목록에 의존한다. 그렇다면, 두 컴포넌트의 부모인 Twittl..
FE/React [React] Goodbye create-react-app! https://dev.to/ag2byte/create-react-app-is-officially-dead-h7o Goodbye create-react-app React developer team recently removed create-react-app from the official documentation. This means it... dev.to 1. React developer team recently removed create-react-app from the official documentation. This means it is no longer the default method of setting up a new project in React. According to this pull ..
FE/Network [Network] Postman으로 HTTP 요청 및 응답 받아오기 Postman으로 HTTP 요청 해보기(API 테스팅) Open Weather Map의 Open API 사용해보기 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저이다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용한다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보낸다. 테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 한다. 테스트를 위해 매번 코드를 작성하는 것은 상당히 번거로운 작업이다. 매번 코드를 작성하는 것 대신에, HTTP 요청을 테스트할 수 있는 다양한 API 테스트 도구들이 있다. 이러한 API 테..
FE/Network [Network] Open API란? Open API 정부에서 제공하는 공공데이터가 있다. 공공데이터에 쉽게 접근할 수 있도록 정부는 Open API의 형태로 공공데이터를 제공하고 있다. 공공데이터 포털에 접속해 원하는 키워드를 검색하면, 해당 키워드와 관련된 API를 확인할 수 있다. 이 API에는 "Open"이라는 키워드가 붙어 있다. 글자 그대로 누구에게나 열려있는 API이다. 그러나 "무제한으로 이용할 수 있다"라는 의미는 아니다. API마다 정해진 이용 수칙이 있고, 그 이용 수칙에 따라 제한사항(가격, 정보의 제한 등)이 있을 수 있다. Open API를 간단하게 경험해 볼 수 있는 대표적인 페이지는, Open Weather Map이라는 웹 사이트에서 제공하는 날씨 API 이다. 이 웹사이트에서는 다음의 설명처럼 데이터를 제공한다..
FE/Network [Network] REST API * REST API * REST 성숙도 모델 * Open API와 API Key REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식이다. 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신한다. 예를 들면 GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하고, DELETE로 저장된 글이나 데이터를 삭제할 수 있다. 이처럼 클라이언트와 서버가 HTTP 통신을 할 때는 어떤 요청을 보내고 받느냐에 따라 메서드의 사용이 달라진다. 이런 사용은 아무런 규칙 없이 이루어지는 것이 아니다. 만약 혼자서 웹사이트를 만들고 관리한다면, API를 어떻게 설계하고 구현하든 상관이 없..
FE/Network [Network] AJAX, SSR, CSR * AJAX * SSR과 CSR - 차이점 (구현 사이트, 코드) https://web.archive.org/web/20030324214833/http://naver.com/ https://web.archive.org/web/20030324214833/http://naver.com/ web.archive.org 인터넷의 소중한 유물로 남아있는 2000년대 초반의 네이버...!!!! 확실히 현재의 네이버 화면과 비교했을 때, 웹 페이지 속에 동적인 요소가 없다. AJAX 웹페이지에서 일부분만 바꿀 때, AJAX를 사용한다. AJAX 의 뜻 AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자이다. JavaScript, DOM, Fetch, XMLHttpRequest..
FE/Network [Network] HTTP * HTTP Messages * HTTP Requests * HTTP Responses HTTP HTTP는 HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 프로토콜이다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었다. HTTP Messages HTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면, 서버도 HTTP Messages 양식에 맞춰 응답한다. HTTP Messages에는 다음과 같은 두 가지 유형이 있다. 요청(Requests) 응답(Responses) HTTP Messages는 몇 줄의 텍스트 정보로 구..
FE/Network [Network] URL과 URI, IP와 포트, 도메인과 DNS 브라우저의 작동 원리(보이지 않는 영역) * URL과 URI * IP와 포트 * 도메인과 DNS * 크롬 브라우저 에러 '내가 꿈꾸는 세상은 전 세계가 네트워크로 연결된 상태에서 서로의 자료를 공개하고 이렇게 공개된 자료를 하이퍼텍스트를 이용해 공유할 수 있는 세상이다.' Sir Timothy John Berners-Lee : WWW의 아버지 - 하이퍼텍스트 문서를 작성할 수 있는 마크업 언어 HTML - 하이퍼텍스트를 전송하는 프로토콜 HTTP - 웹 상의 자원을 모두가 접근할 수 있도록 만든 식별자 URL https://www.lgcns.com/blog/it-trend/17563/ 웹의 발명 - 팀 버너스 리(Tim Berners-Lee) - LG CNS 2015년 크리스마스, 월드 와이드 웹(Wor..
FE/Network [Network] 웹 애플리케이션 아키텍처 (클라이언트, 서버, HTTP, API) * HTTP에서 사용하는 클라이언트 - 서버 아키텍처 * 브라우저의 작동원리를 이해하기 위한 네트워크 기초 지식 * 클라이언트와 서버가 통신하는 방법인 API '내가 꿈꾸는 세상은 전 세계가 네트워크로 연결된 상태에서 서로의 자료를 공개하고 이렇게 공개된 자료를 하이퍼텍스트를 이용해 공유할 수 있는 세상이다.' Sir Timothy John Berners-Lee : WWW의 아버지 - 하이퍼텍스트 문서를 작성할 수 있는 마크업 언어 HTML - 하이퍼텍스트를 전송하는 프로토콜 HTTP - 웹 상의 자원을 모두가 접근할 수 있도록 만든 식별자 URL https://www.lgcns.com/blog/it-trend/17563/ 웹의 발명 - 팀 버너스 리(Tim Berners-Lee) - LG CNS 201..
FE/React [React] State & Props로 간단한 트위터 기능 구현하기 컴포넌트 위주로 간단히 구현한 결과물 깃헙 링크 추가로 구현한 디테일 (1) 전송 버튼을 누르면 userID는 그대로, 내용 입력칸은 초기화된다. (2) Tweets에서 트위터 기존 글 + 새로 생성되는 글에 대한 총 데이터를 다뤘다. 그리고 화면에 렌더링하기 위해 그의 자식 컴포넌트인 tweet 으로 내려가는 데이터를 Tweets의 형제 컴포넌트도 받아와 filter을 거쳐 특정 user의 게시글만 보이게 했다. -> 여기서 많은 삽질이 일어난다.. 그건 제일 아래에 나온다... 핵심적으로 구현해야 할 기능은 유저 Doyu 🤍의 Twittler에서의 트윗 전송 기능 및 생성된 트윗 추가이다. 이 기능 구현을 위해서 어떤 컴포넌트에 어떤 state가 필요하고, 이 state를 어떻게 변화시킬 것인지 고민..
FE/JavaScript [JS] fetch를 이용한 네트워크 요청 - 2/2 (활용) Fetch API is an asynchronous web API that comes with native JavaScript, and it returns the data in the form of promises. 자바스크립트에서는 fetch 로 리소스에 대한 비동기 요청을 할 수 있다. (주로 API를 호출하고 응답 데이터를 받아오는 데에 사용) 서버를 실행한 상태에서는 다음 URL을 통해 정보를 얻어올 수 있다. 최신 뉴스: http://localhost:4999/data/latestNews 날씨 정보: http://localhost:4999/data/weather fetch를 이용해서 http://localhost:4999/data/latestNews 요청과 http://localhost:4999..
FE/JavaScript [JS] Node.js 내장 모듈인 fs 모듈로 비동기 실습 - 2/2 (활용) fs.readFile 사용하기 이전 포스팅 참고 브라우저 환경과는 다르게 Node.js 환경은 로컬 컴퓨터에서 직접 실행되므로, 파일을 불러오거나 저장하는 등의 액션이 가능하다. fs(File System) module 사용법을 잘 익힌다면 "파일 열기", "파일 저장하기" 등을 직접 구현할 수 있다. Node.js에서는 파일을 읽는 비동기 함수를 제공한다. 이를 통해 callback과 Promise를 구현해보자. * 참고 : 파일을 불러오는 메서드인 fs.readFile의 공식 API 문서 // [커맨드] part-2/01_callBack.js 파일을 실행한다. node part-2/01_callback.js ㄴ 결과 화면은 다음과 같이 나와야 한다. 1. callback 으로 구현하기 // fs.re..
FE/JavaScript [JS] 비동기 흐름 : 배열 메서드 구현해보기 (Underbar) - 중 rest parameter를 자유자재로 사용하고, _.shffule에서 immutable 개념을 복습해본다. 구현해볼 배열 메서드 함수 커스텀 메서드 : once, delay 배열 내장 메서드 : includes, every, some 객체 커스텀 메서드 : extends, defaults 배열 커스텀 메서드 : zip, zipStrict, intersection, difference, shuffle 함수 커스텀 메서드 'use strict'; /** * FUNCTIONS * ========= * 클로저의 특징을 활용해 다양한 형태의 함수를 구현할 수 있다. * 이를 활용하여 기존 함수가 여러 번 실행되면 결과가 변동되는 함수를, * 한 번 리턴된 값만 리턴하게 하는 함수(_.once)와 * 기존 함수가..
FE/React [React] React 데이터 흐름 제일 먼저 컴포넌트 만들기 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다. 그림과 같이 앱의 프로토타입을 전달받았다면 먼저 컴포넌트를 찾아본다. 프로토타입에서 위의 오른쪽 그림과 같이 컴포넌트를 찾아냈다. 이렇게 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나간다. 즉, 상향식(bottom-up)으로 앱을 만든다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. 그래서 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일이다. 트위터 클론 Twittler 예시 여기 간단한 트위터 클론 Twittler가 있다. 여기에 그림과 같은 형태로 컴포넌트 디자인을 해볼 것이다. 이..
FE/React [React] React의 이벤트 처리(Event handling) : state 다양한 응용 React의 이벤트 처리(이벤트 핸들링; Event handling) 방식은 DOM의 이벤트 처리 방식과 유사하다. 단, 몇 가지 문법 차이가 있다. React 에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러; Event handler)를 전달한다. 이벤트 핸들러는 props로 전달할 수 있다. 예를 들어 HTML에서 이벤트 처리 방식이 아래와 같다면, Event React의 이벤트 처리 방식은 아래와 같다. Event 자주 사용되는 이벤트 처리에 대해 알아보자. onChange 와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는 데 사용된다. React 에서는 이러한 변경될 수 있는 입력값을 일반적..
FE/React [React] React에서 데이터를 다루는 Props & State 웹에서 필요한 데이터를 다루는 방법 들어가며 사용자가 쇼핑몰에서 옷을 주문할 때, 원하는 옷을 장바구니에 담고 결제를 하려고 보니 다른 옷이 더 마음에 들어 장바구니에 담은 옷을 빼고, 새로운 옷을 담아 결제를 한다. 이 상황에서 장바구니에 담기는 옷은 바뀌고 사용자가 결제 해야 할 금액도 즉각적으로 변경된다. 이를 우리는 장바구니의 상태가 변한다고 말할 수 있으며, 결제 페이지에 변경된 장바구니의 상태를 전달해야 한다. 간단한 예시 - state (나이, 사는 곳, 직장 등 살면서 변할 수 있는 값 ) : 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값 - Props (고향) : 외부로부터 전달받은 값 state는 아래에서도 자세히 서술했지만 대략 이런 느낌이다. (아래 참고) 이 컴포넌트가 가지..
FE/React [React] React로 Router 기능을 담은 SPA 구현해보기 + useNavigate 컴포넌트 위주로 간단히 구현한 결과물 깃헙 링크 File Structure 보다 관리하기 편한 파일 구조(File Structure)를 가지기 위해 폴더별로 구분하는 것을 추천한다. React Twittler SPA의 파일구조는 아래와 같다. 페이지를 표시하는 컴포넌트는 Tweets, About, MyPage 이다. / ├── /Twittler React SPA │ ├── README.md │ ├── /public # create-react-app이 만들어낸 파일, yarn/npm start로 실행할 시에 쓰임 │ └── /src # React 컴포넌트가 들어가는 폴더 │ ├── static # dummyData가 들어가는 폴더 │ │ └── dummyData.js │ ├── Pages # 페이지를 표시..
FE/React [React] React Router로 간단한 메뉴 페이지 구현하기 React로 SPA 구현하기 SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다. 예를 들어 Twittler와 같은 SPA를 만들 때, (1) 메인 트윗 모음 페이지, (2) 알림 페이지, (3) 마이 트윗 페이지 등의 화면이 필요할 수 있다. Routering의 뜻 / React Router 소개 이 화면에 따라 "주소"도 달라진다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다. 하지만 React 자체에는 이 기능이 내장되어 있지 않다. 따라서 우리가 직접 주소마다 다른 뷰를 보여줘야 한다. React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용한다. * 정리하..
FE/React [React] React SPA 전통적인 웹페이지에서는 페이지를 유저에게 보여줄 때 즉, 페이지를 로딩할 때마다 서버에 미리 준비되어 있는 페이지를 전달 받아와서 렌더링을 했다. 하지만, 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라, 속도 저하 등의 문제가 발생하게 된다. React에서는 이러한 문제를 해결하기 위해 SPA를 사용한다. SPA 등장 배경, 개념, 장단점 기존의 방식 : MPA(Multiple Page Application) 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만(MPA: Multiple Page Application) 했다. 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서,..
⬆︎

728x90