FE 썸네일형 리스트형 FE/React [React] React Twitter Intro - 컴포넌트 기반 개발하기 컴포넌트 위주로 간단히 구현한 결과물 더보기 import React from 'react'; import './App.css'; import './global-style.css'; import { dummyTweets } from './static/dummyData'; // ! 위 코드는 수정하지 않습니다. const Sidebar = () => { return ( ); }; const Counter = () => { return ( total = {dummyTweets.length} ); }; const Footer = () => { return ( {/* // div 안에 */} Copyright @ 2022 Code States ); }; // TODO : Footer 함수 컴포넌트를 작성합니다. .. FE/React [React] 컴포넌트 기반 개발의 중요성 컴포넌트 기반 개발의 중요성 React 앱의 가장 작은 단위는 엘리먼트이다. 컴포넌트는 이러한 여러 엘리먼트와 함수들이 모여 있는 기능적 단위라고 할 수 있다. 컴포넌트도 하나의 엘리먼트이다. 이러한 엘리먼트들은 각각이 서로를 포함할 수도 있다. 컴포넌트는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음" 혹은 "UI를 구성하는 필수 요소"라고 할 수 있다. 컴포넌트 기반 개발은 기술적인 특징이 아닌, 실제 사용자가 사용하는 기능을 기준으로 코드를 모아 개발하는 방식이다. 컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장한다. 그래서 컴포넌트 간 의존성이 낮아지고 독립적으로 작동한다. 하나의 기능 변경 시 다른 컴포넌트를 수정할 필요가 없기 때문이다. 예를 들어,.. FE/React [React] create-react-app 활용하여 간단한 React 앱 만들기 create-react-app를 사용한다면 단 하나의 명령 만으로 자신만의 리액트 프로젝트를 시작할 수 있다. 개발자는 빌드에 신경 쓰지 않고, 곧바로 코드 작업에 집중할 수 있다. Create React App 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다. 리액트로 웹어플리케이션을 개발하는 데에는 많은 node.js 패키지들이 필요하다. JSX를 JS로 변환해주는 babel 테스트를 돕는 jest css 트랜스파일러인 post css 다양한 패키지를 묶어주는 모듈 번들러 webpack 등.. 즉 creat react app은 툴세팅이 복잡한 개발세팅을 미리 해준다. Create React App은 리액트 프로젝트를 만드는데 최적화된 도구로서 Babel, webpack 같은 도구들.. FE/React [React] React 개요 / JSX 활용법 / 리액트로 Map 함수 구현하는 여러 가지 방법 페이지 단위가 아닌 컴포넌트 단위로 나누어 생각하고 개발하는 방법을 알아보자. React란? 웹, 데스크탑, 모바일 등 다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리 React의 특징 1. 선언형 : 리액트는 구조, 디자인, 동작을 나눠서 개발하는 것을 지양 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS 로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성 JSX를 활용한 선언형 프로그래밍을 지향 JSX(HTML + JS가 결합한 문법) 기반으로 명시적으로 코드를 작성 , 직관적으로 코드 작성이 가능 코드를 자세히 분석하지 않고도 의도를 분명히 알 수 있게 작성 2. 컴포넌트 기반 : 컴포넌트(component) :.. FE/JavaScript [JS] fetch를 이용한 네트워크 요청 - 1/2 (개념) 비동기 요청의 가장 대표적인 사례는 단연 네트워크 요청이다. 네트워크를 통해 이루어지는 요청은 그 형태가 다양하다. 그중에서 URL로 요청하는 경우가 가장 흔하다. URL로 요청하는 것을 가능하게 해 주는 API가 바로 fetch API이다. fetch API 생활코딩 요약 서버가 데이터를 꺼내서 응답을 해주는 데 시간이 많이 걸릴 수 있다. response라는 객체의 속성 값 (Status: 200) not Found : 웹 서버가 응답을 하면서 파일을 찾았다는 뜻. + fetch API 개요 fetch API는 특정 URL로 부터 데이터를 받아오는 역할을 한다. 다음은 흔히 볼 수 있는 포털 사이트이다. 이 사이트는 시시각각 변하는 정보와, 늘 고정적인 정보가 따로 분리되어 있다. 이 중에서 최신 뉴.. FE/JavaScript [JS] Node.js 내장 모듈인 fs 모듈로 비동기 실습 - 1/2 (개념) 브라우저에서 사용할 수 있는 비동기 흐름은 타이머 혹은 DOM 이벤트와 관련된 상황으로 다소 한정적이지만, Node.js의 경우 많은 API가 비동기로 작성되어 있다. Node.js 소개 문서의 첫 단락은 Node.js의 정의부터 시작한다. Node.js는 "비동기 이벤트 기반 JavaScript 런타임"이다. About Node.js® As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. Many connections can be handled concurrently. Upon each connection, the callback is fired, but i.. FE/JavaScript [JS] 동기, 비동기를 구현한 간단한 예제 미리 알고 있어야 하는 것 Date.now() Date.now() 메소드는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환한다. 시간날짜를 얻는 함수 Date()와 while문 조건으로 3초가 지난걸 확인한다. function wait(sec) { let start = Date.now(), now = start; while (now - start let start = 현재시점, n.. FE/JavaScript [JS] 비동기 실습하기 자바스크립트는 비동기를 왜 고민하게 되었나? 1. 컴퓨터의 유휴 자원을 활용하기 위함 2. 비동기가 필요한 것은 맞다. 하지만 아래 예제에서 영상 재생 & 멈춤, 제목 표시 & 강조 & 초기화 등이 동시다발적으로 일어나게 되면 순식간에 지나가기 때문에 (작업은 시작부터 완료되었지만 우리 눈에는 마치 멈춘 것과도 같다.) 즉, 의도적 지연시간이 필요하다. 비동기 구현하기 가장 간단한 비동기 구현은 타이머 API를 이용하는 방법이다. 타이머 API는 setTimeout()이라는 메서드를 이용해 구현할 수 있다. callback과 promise, 그리고 async/await 키워드를 이용한 비동기 흐름을 제어하는 방법을 코드를 통해 비교해보자. 1. callback delay 함수 const delay = (.. FE/JavaScript [JS] fetch polyfill https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com 어떤 브라우저에서 지원되는 지를 알려줌. fetch polyfill 지원하지 않은 브라우저에 대해서 지원할 수 있게 해 주는 라이브러리 지원하는 브라우저에 대해서는 기본 기능을 쓸 수 있도록 함 FE/JavaScript [JS] Axios Axios 란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다. Fetch API vs Axios Axios Fetch API 써드파티 라이브러리로 설치가 필요 빌트인 API라 별도의 설치 필요X 자동으로 JSON데이터 형식으로 변환 .json() 메서드를 사용해야 함 Axios 사용법 Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치해야 한다. Axios는 fetch API와 기본 원리는 같다. npm install axios GET 요청 GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드이다. 첫번째 인자 : url주소 (필.. FE/JavaScript [JS] 비동기 다시 정리 : callback / promise / async, await callback -> 문제 : 가독성이 떨어진다. (실행순서가 바로 눈에 들어오지 않는다.) promise 기본형태 (11라인부터) then이라는 메소드 가지고 있는 애가 promise의 인스턴스이다. 즉, delayP에서 만드는게 promise의 인스턴스. resolve 에 결과값에 넘겨지게 되면 then에게 넘겨주게 된다. 프로미스에서는 콜백을 순차적으로 지정해준다. 아무 것도 리턴하지 않으면 result 값에는 undefined가 들어간다. then의 리턴값은 resolve한 프로미스를 리턴한다. 비동기 연산인 promise를 리턴하지 않기 때문에 지연 없이 마지막 로그가 찍힌 것 async/ await async 도 promise 를 리턴한다. 즉 then을 쓸 수 있다. 여기서의 result 는.. FE/JavaScript [JS] 비동기 코드 제어하기 : callback / promise / async, await 커피숍에서 커피를 주문하려고 줄을 서는 모습을 상상해 보자. 커피숍 사정상, 커피를 주문한 먼저 온 김코딩이 주문한 커피를 받을 때까지, 줄 서 있는 박해커가 주문조차 할 수 없다고 한다면 이를 우리는 블로킹(blocking)이라고 부른다. 하나의 작업이 끝날 때까지, 이어지는 작업을 "막는 것"이다. 박해커는 김코딩이 주문한 커피가 나오고 나서야 커피를 주문할 수 있습니다. 김코딩의 커피 주문 완료 시점과 박해커의 커피 주문 시작 시점이 같다. 이렇게 시작 시점과 완료 시점이 같은 상황을 "동기적(synchronous)이다." 라고 한다. 효율적인 커피숍 운영을 위해서 아래와 같이 커피숍 주문 과정을 변경해 보자. 커피 주문이 블로킹(blocking) 되지 않고, 언제든지 주문을 받을 수 있다. 커피가.. FE/JavaScript [JS] 비동기 흐름 : 배열 메서드 구현해보기 (Underbar) - 하 이해 강박증이 있기 때문에 코드를 한 줄 한 줄 우걱우걱 씹어보는 포스팅!!!!!!! 비동기 흐름은 JavaScript의 가장 큰 장점 중 하나이다. 비동기 흐름은 callback, promise, async/await 중 하나의 문법을 이용하여 구현할 수 있다. 예전에는 배열 메서드가 브라우저에서 자체적으로 지원되지 않던 시절이 있었다. 이때 개발자들은 보다 나은 방법으로 배열이나 객체를 다루기 위한 도구 모음집을 만들었는데, 이것을 후에 라이브러리(Library)라고 부르기 시작했다. 배열, 객체를 다루는 Underbar라는 라이브러리를 직접 구현하면서 자바스크립트 내장 메서드가 어떻게 콜백(Callback) 함수를 활용하는지에 대한 원리를 알아보자. Underbar의 모티브가 되는 라이브러리는,.. FE/JavaScript [JS] 프로토타입 체인 JavaScript는 프로토타입 기반 언어로 프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현한다. 예시를 들기 위해 학생(Student)과 사람(Human)이라는 클래스가 각각 존재한다고 가정하고, 클래스 Human의 메서드와 속성을 객체로 구현한다면, 다음과 같다. let kimcoding = new Human('김코딩', 30); // 속성 kimcoding.age; kimcoding.gender; // 메서드 kimcoding.eat(); kimcoding.sleep(); 학생은 학생이기 이전에, 사람이다. 따라서 클래스 Student는 Human의 기본적인 메서드를 상속받을 수 있다. 다만, 학생은 일반적인 사람의 특징에 추가적인 특징이 필요하다. 예를 들면 다음과 같다. .. FE/JavaScript [JS] 객체 지향 프로그래밍(OOP)의 4가지 주요 개념 객체 지향 프로그래밍(OOP)의 등장 객체 지향 프로그래밍이라는 패러다임이 등장하기 전에는 절차 지향 프로그래밍이 있었다. 모든 것을 절차적으로 생각했으며 절차적 언어는 순차적인 명령의 조합이기에 기껏해야 함수로 이동하는 것이 전부였다. 초기의 C, 포트란 같은 언어들은 객체 지향의 개념이 없는 절차적 언어였다. 그러나, 객체 지향 프로그래밍이라는 패러다임이 등장하면서, 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안해냈다. 따라서, 데이터와 기능이 별개로 취급되지 않고, 한 번에 묶여서 처리할 수 있게 되었다. 객체 지향 언어 "클래스"라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성하는 것이다. 이러한 객체.. FE/JavaScript [JS] 객체 지향 프로그래밍 - 클래스와 인스턴스 객체 지향 프로그래밍(OOP, Object-oriented programming) 객체 지향 프로그래밍(OOP, Object-oriented programming)은 사람이 세계를 보고 이해하는 방법과 매우 흡사하다. 코드를 추상화하여 직관적으로 생각할 수 있기 때문에, 이미 오래전부터 프로그래밍 방법론으로 매우 빠르게 적용되었다. 객체 지향 프로그래밍을 철저하게 적용한 프로그래밍 언어 Java나 C#과는 다르게, JavaScript에서 OOP를 구현하는 방법은 조금 독특하다. 객체 지향 프로그래밍은, 절차 지향 프로그래밍과는 다르게 데이터와 기능을 한곳에 묶어서 처리한다. 속성과 메서드가 하나의 "객체"라는 개념에 포함되며, 이는 JavaScript 내장 타입인 object(이하, object lite.. FE/JavaScript [JS] 추상화 ** 높은 수준에서 생각하기 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이 추상화(abstraction)이다. 우리가 살아가는 이 세상은, 추상화로 가득 차 있다. '-1'을 표현하는 현실의 방법은 존재하지 않는다. 그러나 우리는 '-1'이라는 문자를 보고, "-1은 0보다 1만큼 작은 수다."라고 설명할 수 있다. 이렇듯, 인간은 추상화를 통해 생각하고 표현한다. 추상화를 이용하면, 효율적이고 편하게 생각할 수 있기 때문이다. 브라우저 창에 주소를 입력했을 때 입력한 내용을 전파하고, 어디 서버로 갔다가 다른 서버로 가는 등 그런 복잡한 내용을, 일상생활에서는 몰라도 된다. 우리는 그저 주소창에 올바른 주소를 입력하면, 브라우저가 해당 사이트를 보여 준다는 것만 알고 있다. 스마트폰으로 카카오.. FE/코딩테스트 [JS] 고차함수 - 상 FE/코딩테스트 [JS] 고차함수 - 중 FE/코딩테스트 [JS] 고차함수 - 하 ⬆︎ 이전 1 ··· 3 4 5 6 7 8 9 다음
