기록

GraphQL 맛보기해당 포스팅은 책 GraphQLr과 타입스크립트로 개발하는 웹 서비스 - 강희수 저자의 1장 일부를 정리한 내용입니다.GraphQL은 클라이언트 애플리케이션을 위한 쿼리 언어.페이스북이 기능이 복잡해짐에따라 발생하는 충돌과 성능 저하를 감당하기 위해 본인들의 서비스에 맞는 GraphQL을 시작함.모바일 애플리케이션을 위한 Model과 View를 새롭게 구축하기 시작이 과정에서 RESTful API서버를 통해 받아온 데이터 형태와 애플리케이션 화면상에서 필요한 데이터 형태에 많은 차이가 있음을 발견함.API 요청을 통해 받아온 데이터를 실제 화면상에서 필요한 데이터의 형태로 구성하기 위해 API서버와 프런트엔드 클라이언트 양쪽에 걸쳐 데이터를 가공하는 상당한 양의 코드를 작성해야했음.데..

숫자를 다루는 연산을 할 때, 소수점을 버릴 경우 Math.trunc()연산자를 사용한다. 비트 연산에서는 주로 쓰이는 틸트 연산자 중 이중 틸트 연산자의 경우 숫자의 소수점을 버리는 방법으로 알고리즘 문제를 풀이를 할 시 간단하게 사용할 수 있다.1️⃣ ~ (비트 반전 연산자)~ 는 비트 반전 연산자(bitwise NOT)라고 부른다. ~ 연산자는 숫자의 모든 비트를 반전시킨다.0은 1로, 1은 0으로 바뀐다.예를 들어, 8비트로 표현된 숫자 5가 있다고 하면, 이진수로는 00000101이다. ~5를 연산하면 각 비트가 반전되어 11111010이 된다. 11111010을 십진수로 표현하면 -6이다.~5 = -62️⃣ ~~ (이중 틸트 연산자)~는 비트 반전 연산자인 ~를 두 번 적용한 것이다.숫자의 소..

자바스크립트 코딩 테스트 환경 만들기 아예 세팅을 처음한다면 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..

☑️ React 컴포넌트는 하나의 값만 출력할 수 있다.자바스크립트는 두 개의 값을 반환하지 않기 때문이다. 따라서 JSX는 반드시 단일 루트 요소만 반환되어야 한다. 모든 JSX요소는 하나의 요소안에 내포 요소로 포함되어있다. 아래는 잘못된 예시이다.const App = ()=> { return ( 모던 리액트 프로그래밍 개념 정리하기 좋은 책이다 ) // 단일 요소로 이루어져 있어야 한다.const add = (a, b) => { return ( a+b a-b ); // 자바스크립트는 2개의 반환값을 가질 수 없다.} JSX는 실제로는 React.createElement 호출로 변환되는데  이때 호출이 단일 객체를 반환해야 한다. 동적인 컨텐츠 출력을 위해 자바스크립..

해당 스터디 기록은 https://github.com/learning-with를 방문하시면 확인하실 수 있습니다. 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는멀티 패러다임 프로그래밍 언어이다.- 모던 자바스크립트 딥다이브 259P프로토타입이란?객체에 접근하기 위한 접근자 프로퍼티이다.모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입 ([[prototype]]) 내부 슬롯에 간접적으로 접근할 수 있다.👨‍🏫 프로토타입 이해하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다.클래스 (ES6)는 프로토타입 기반 객체 생성 패턴의 새로운 객체 생성 메커니즘이다.프로토타입을 이해하기 전에 객체지향 프로그래밍 먼저 이해해보자.☑️ 객체지향 프..

useReducer로 useState 지옥 벗어나기const [state, dispatch] = useReducer(reducer, initialQrg, init);useState 지옥에서 벗어나기기존 코드아래는 달력 이벤트를 업데이트하는 컴포넌트 예시입니다.import { useState } from "react";function EditCalendatEvent() { const [startDate, setStartDate] = useState(); const [endDate, setEndDate] = useState(); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); cons..

매번 className으로 모달 관리하기 번거로울 때매번 className으로 모달 관리하기 번거로울 때는 Styled-components 태그에 속성을 추가할 수 있다. 단, 단순 string 타입으로 작성할 경우, 대문자로 작성이 안된다던지 string 값 작성이 안되는 에러가 발생함으로 html 태그에서 변수값으로 인식하지 못하게 하는 $문자를 입력해주면 에러없이 잘 속성으로 이용할 수 있다.예시 : 모달interface ModalProps { isOpen : boolean; onClose: ()=> void; onClick: ()=> void;}function Modal ({isOpen, onClose, onClick}:ModalProps) => { return ( ..

페이지가 첫 렌더링 된 후에 새로고침을 하면 위와같은 에러가 발생하는 이슈가 생겼다.🚨 Rendered more hooks than during the previous render.채팅 페이지 정보를 가져오다 발생한 에러.페이지 렌더링 후 새로고침 시 바운더리 에러 발생.로직 순서는useParams를 통해 채팅방 정보를 가져온다.currentUser를 이용해 로그인한 유저의 정보를 가져온다.유저의 정보와 채팅방 정보가 없다면 그대로 return 한다.유저의 역할에 따라 이름, 채팅방 권한 상태를 관리한다.채팅방 페이지를 렌더링한다.에러가 발생한 지점은 if 조건문으로 리턴을 한 후, 아래 useState hook이 발생하여 일어난 에러다.☑️ 문제 코드const ChatRoomPage = ()=> {c..

🔍 문제 input 태그에 onKeyDown을 사용했을 때 영어는 이벤트가 한번 들어가는데 한글을 입력하면 두번 이벤트가 발생하는 현상이 있었다. 🔍 원인 KeyboardEvent.isComposing라는 객체가 입력된 값이 조합문자인지 아닌지 확인하는데 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자로 인지되고 영어는 조합문자가 아닌 것으로 입력된다. 한글이 입력될때는 KeyboardEvent.isComposing가 true, 영어일 때 KeyboardEvent.isComposing가 false로 입력되면서 한글은 onKeydown이벤트가 들어갔을때 조합문자인 상태로 한번, 해지된 상태에서 또 한번으로 이벤트가 두번 들어가게된다. KeyboardEvent.isComposing가 fa..

이벤트리스너 사용방법 적용시킬 HTML 속성을 가져온다. 적용시킬 이벤트함수를 만든다 가져온 HTML 속성을 담은 변수에 어떤 이벤트를 했을 때, 함수를 실행할 지 정한다. 클릭 const button = document.querySelector("button"); function handler (e) { console.log("클릭되었습니다"); } button.addEventListener("click", handler); 주의 처음 HTML요소 중 style프로퍼티의 경우 HTML 요소에 인라인 스타일로 직접 설정된 속성만을 반환합니다. 초기 설정이 ""로 세팅이 되어있다는 점을 기억합시다. 아래 코드 기준으로 생각했을 때 js에서 handler함수를 실행해도 바로 css가 적용되는게 아닙니다. 초..