Web Frontend 46
GraphQL 맛보기
GraphQL 맛보기해당 포스팅은 책 GraphQLr과 타입스크립트로 개발하는 웹 서비스 - 강희수 저자의 1장 일부를 정리한 내용입니다.GraphQL은 클라이언트 애플리케이션을 위한 쿼리 언어.페이스북이 기능이 복잡해짐에따라 발생하는 충돌과 성능 저하를 감당하기 위해 본인들의 서비스에 맞는 GraphQL을 시작함.모바일 애플리케이션을 위한 Model과 View를 새롭게 구축하기 시작이 과정에서 RESTful API서버를 통해 받아온 데이터 형태와 애플리케이션 화면상에서 필요한 데이터 형태에 많은 차이가 있음을 발견함.API 요청을 통해 받아온 데이터를 실제 화면상에서 필요한 데이터의 형태로 구성하기 위해 API서버와 프런트엔드 클라이언트 양쪽에 걸쳐 데이터를 가공하는 상당한 양의 코드를 작성해야했음.데..
Web Frontend/Database | 2024. 10. 2. 13:03
JavaScript Math.trunc()메서드와 틸트(tilt) 연산자
숫자를 다루는 연산을 할 때, 소수점을 버릴 경우 Math.trunc()연산자를 사용한다. 비트 연산에서는 주로 쓰이는 틸트 연산자 중 이중 틸트 연산자의 경우 숫자의 소수점을 버리는 방법으로 알고리즘 문제를 풀이를 할 시 간단하게 사용할 수 있다.1️⃣ ~ (비트 반전 연산자)~ 는 비트 반전 연산자(bitwise NOT)라고 부른다. ~ 연산자는 숫자의 모든 비트를 반전시킨다.0은 1로, 1은 0으로 바뀐다.예를 들어, 8비트로 표현된 숫자 5가 있다고 하면, 이진수로는 00000101이다. ~5를 연산하면 각 비트가 반전되어 11111010이 된다. 11111010을 십진수로 표현하면 -6이다.~5 = -62️⃣ ~~ (이중 틸트 연산자)~는 비트 반전 연산자인 ~를 두 번 적용한 것이다.숫자의 소..
Web Frontend/Vanila JS | 2024. 8. 23. 20:20
JS 알고리즘 테스트 환경 VS code로 세팅하기
자바스크립트 코딩 테스트 환경 만들기 아예 세팅을 처음한다면 VS code, npm, node.js 먼저 설치를 해주어야한다.Visual Studio Code 접속하여 설치node.js 설치npm 설치 , npm은 node.js 설치 시 자동으로 설치되므로 터미널에서 npm -v 명령어를 입력하여 npm이 제대로 설치되었는지 확인한다. 잘 생성되었을 경우 현재 설치된 npm의 버전이 출력된다.둘 다 설치가 돼있다면 node -v 와 npm-v 명령어로 각각 버전을 확인해준다. 버전이 잘 출력되면 설치가 잘 돼 있는 것.최종 설정한 package.json 파일 스크립트 보기아래 순서대로 설명해뒀지만 바쁜 사람들을 위해 최종 스크립트 먼저 작성해두었다. (lint 파일을 제외된 스크립트) package.js..
Web Frontend | 2024. 8. 22. 12:48
JSX 유의사항
☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다. 아래는 잘못된 예시이다.const App = ()=> { return ( 모던 리액트 프로그래밍 개념 정리하기 좋은 책이다 ) // 단일 요소로 이루어져 있어야 한다.const add = (a, b) => { return ( a+b a-b ); // 자바스크립트는 2개의 반환값을 가질 수 없다.} JSX는 실제로는 React.createElement 호출로 변환되는데 이때 호출이 단일 객체를 반환해야 한다. 동적인 컨텐츠 출력을 위해 자바스크립..
Web Frontend/React | 2024. 8. 9. 15:48
객체 지향 프로그래밍, 프로토타입 이해하기
해당 스터디 기록은 https://github.com/learning-with를 방문하시면 확인하실 수 있습니다. 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는멀티 패러다임 프로그래밍 언어이다.- 모던 자바스크립트 딥다이브 259P프로토타입이란?객체에 접근하기 위한 접근자 프로퍼티이다.모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입 ([[prototype]]) 내부 슬롯에 간접적으로 접근할 수 있다.👨🏫 프로토타입 이해하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다.클래스 (ES6)는 프로토타입 기반 객체 생성 패턴의 새로운 객체 생성 메커니즘이다.프로토타입을 이해하기 전에 객체지향 프로그래밍 먼저 이해해보자.☑️ 객체지향 프..
Web Frontend | 2024. 8. 2. 15:15