프론트엔드(22)
-
GraphQL이란 뭘까요?
메타에서 사용하는 언어 ..? REST와 비교되는 언어 ?.. 언제가 부터 떴는데 뭔지는 모르고 있던거 ..그리고 ... 메타와 당근에서 잘 활용한다는 그거 !!!! 뭔지 알아보겠습니다.공식 사이트 훑어보기무엇인지 감을 잡으려면 먼저 공식 문서를 보는 편입니다.공식 사이트 소개글 : https://graphql-kr.github.io/GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 입니다. GraphQL은 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공하고 클라이언트에게 필요한 것을정확하게 요청할 수 있는 기능을 제공하며 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원합니다.음 .... 일단 쿼리(질의) 언어 인거 같..
2025.03.01 -
리액트서버 API와 hydration이 뭔데?
WHY? 요새 대체 SSR과 Hydration이 뭔지는 알고는 있지만 정확하게 어떻게 돌아가는지 몰라서 이 글을 작성하게 됐습니다.React Server API리액트에서는 서버 환경(node) 에서 사용할 수 있는 API가 존재합니다. 이를 통해 서버환경에서 리액트를 렌더링할 수 있습니다.왜 이게 나왔을까요 ??- 클라이언트에서 모든 렌더링을 해결하는(CSR)은 여러 단점이 존재했습니다.- SEO, 보안문제, 더 늦은 초기 로딩 속도 등등 ..- 따라서 서버에서 리액트를 서버렌더링을 해줘야하는 상황이 필요해져서 그렇습니다. 그렇다면 어떤 API들이 있을까요 ?renderToStringReact Tree를 string으로 변환해줍니다.import { renderToString } from 'react-do..
2025.02.20 -
웹 표준에서 자주 쓰이는 객체들
웹 표준이란?웹 사이트나 웹 페이지가 웹 표준을 준수한다는 것은 일반적으로 올바른 HTML, CSS, 자바스크립트를 사이트나 페이지가 가지고 있다는 것을 뜻한다. HTML은 [접근성](https://ko.wikipedia.org/wiki/%EC%A0%91%EA%B7%BC%EC%84%B1)과 [시맨틱 HTML](https://ko.wikipedia.org/wiki/HTML "HTML")의 가이드라인을 충족해야 한다.wiki 백과 출처웹 표준을 사용하면 다양한 브라우저와 기기에서 동일한 결과를 보장합니다.웹 표준을 준수하면 접근성이 향상 됩니다.웹 표준을 사용해서 세계 각국의 개발자들이 유지보수가 용이 해집니다.웹 표준을 준수하지 않으면..웹 표준을 준수하지 않으면 브라우저 호환성 문제가 생깁니다. 특정 브..
2025.02.14 -
JS 브라우저 환경에서의 이벤트루프
자바스크립트의 런타임런타임(runtime)은 컴퓨터 프로그램이 실행되는 환경이다. JS를 사용해서 개발하는 개발자라면 필수로 JS가 실행되는 동안 코드가 어떻게 돌아가는지 알고 있으면 좋을것 같다. JS는 싱글스레드 언어다. 싱글 스레드란 한번에 한가지 작업만 처리할 수 있다는 것이다. 예를 들어 당신이 식당에 갔는데 손님을 하나만 받을수 있는 식당에 가서 20명 이상 대기가 있는 상태이다.근데 부엌을 슬쩍 보니 한사람이 식사가 끝나면 그릇이 없어서 식사가 끝나고 설거지를 하고 테이블 하나를 닦고 청소한 후 다음 손님이 들어가는 것이다. 이 답답한 식당에서 당신은 20명 이상 웨이팅할 자신이 있는가? 당연하게도 그럴 자신이 없는 JS를 만든 사람은 해결책을 만들어 뒀다. 그 해결책에 대해서 알아보자 대표..
2025.02.06 -
Redux vs context api 비교 및 Recoil과의 첫만남!
내가 배운 전역 상태 라이브러리들 Redux vs Context API Redux, React-Redux 상태의 중앙 관리를 위한 상태관리도구 이다. ‘전역 상태’를 생성하고 관리하기 위한 라이브러리라고 볼 수 있다. 이때 상태를 액션(순수함수)이라는 이벤트를 사용한다. flux패턴을 통해 단방향 흐름으로 예측가능한 방식으로 업데이트 하기 위함이다. 미들웨어를 추가해서 전역상태를 위한 통신을 추가할 수 있다. 전역상태를 관리하는 라이브러리 답게 Redux를 사용할 경우 State의 변경이 일어나면 State를 사용하고 있는 컴포넌트에서만 리렌더링이 발생한다. 하지만 라이브러리를 설치해야 한다. 초기 세팅이 번거롭다. (+ 보일러 plate가 필요하다. ) 저는 Context API를 리액트 빌트인 상태 ..
2023.07.05 -
electron에서 alert창 사용 시 input focus 잃는 이슈를 모달창으로 해결
외주개발 하면서 별 문제가 아니라고 생각했던 문제가 드디어 직면 했다. 바로 electron에서 input 포커싱을 잃는 큰 문제 였다. 아무리… 찾아 봐도 electron을 한국에서 쓰지 않는지라 관두고 있었는데 영어로 검색하니까 바로 나왔다.. 역시 영어를 배워야 한다.. *추가: electron에는 alert대신 dialog api를 사용해서 해결 할 수 있다. https://www.electronjs.org/docs/latest/api/dialog 관련 이슈 Can't edit input text field after window.alert() Can't edit input text field after window.alert() I've got this Electron app (using Nod..
2023.07.03