들어가며 React는 사용자 인터페이스를 구축하기 위해 많이 사용되는 JavaScript 라이브러리입니다. 그러나 React 애플리케이션을 개발할 때, 복잡한 상태 관리 문제를 다루어야 하는 경우가 종종 발생합니다. 예를 들면 최상위 부모 컴포넌트에서 보내주는 데이터가 몇단계의 자식 컴포넌트로 전달되어야 하며 전달받은 데이터로 인해서 상위의 상태값이 업데이트되어야 할 때… 쉽진 않겠죠? 이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용할 수 있습니다. 이번 글에서는 Jotai라는 React 상태 관리 라이브러리에 대해 간단히 살펴보겠습니다. Jotai란? React의 상태관리 라이브러리중 하나입니다. Jotai란 뜻은 일본어로 “상태”라는 의미인데요 Jotai를 사용했을때 리액트 애플리케이션에서 ..

들어가며 최근 모바일 애플리케이션과 연계되는 웹사이트를 오픈하면서 딥링크(Deeplink)를 사용하게 되었어요. 자주 사용되지는 않지만 알아두어야 하는 것이어서 짧게 포스트로 남겨놓아요. 딥링크(Deeplink)란? 딥링크는 특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 내 특정 화면으로 이동시키는 기능을 수행해요. 딥링크는 3가지 방식으로 구분돼요. URI 스킴 방식 : 앱에 URI 스킴(scheme) 값을 등록하여 딥링크 사용 앱링크(App Link) : Android 제공 - 도메인 주소를 이용한 딥링크 사용 유니버설 링크 (Universal Link) : iOS 제공 - 도메인 주소를 이용한 딥링크 사용 그중에서도 URI Scheme 방식을 사용했어요. URI Scheme 방식의 딥링크 URI..

들어가며 요즘 여기저기서 심심치 않게 들려오는 CHAT GPT 관심이 없는 사람도 한 번쯤은 들어볼 수밖에 없을 만큼 미디어에서 뜨거운 감자입니다. 그럼 CHAT GPT가 무엇일까요? ChatGPT란? ChatGPT는 Generative Pre-trained Transformer(GPT)와 Chat의 합성어로 OpenAI가 개발한 프로토타입 대화형 인공지능 챗봇이다. 대화형 인공지능 챗봇. ChatGPT는 챗봇 기술과 GPT-3 기술을 결합한 기술로, 인공지능 분야에서 많은 주목을 받고 있습니다. 자연어 처리 기술을 이용하여 자연스러운 대화가 가능한 AI 챗봇 정도로 정리하면 가장 이해가 쉬울 것 같습니다. ChatGPT를 프론트엔드 개발에 어떻게 활용할 수 있을까? 저는 Chat GPT에 다음과 같은 ..

들어가며 요즘 대부분의 사이트, 콘텐츠를 URL로 공유하고 있는데, 이때 해당 경로에 대한 썸네일과 함께 전달이 될 텐데요. 이 부분을 설정하는 것이 OG입니다. 프로젝트를 진행하면서 알고는 있었지만 직접 등록을 하지는 않아 넘겨두었다가 이번에 작업을 진행하면서 생각보다 쉽게 내가 작업한 사이트에 대한 정보를 제공함으로써 사용자에게는 더 나은 UX를 제공할 수 있고, 코드적으로는 적용하기 쉬운 것 같지만 알아두어야 할 부분들도 경험하게 되어 공유하면 좋을 것 같아 몇 자 적게 되었습니다. OG란? 풀 명칭은 Open Graph Protocol이라고 합니다. 오픈 그래프 프로토콜은 어떠한 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 “og:XXX”가 있는 태그들을 찾아내어 보여주는 ..

들어가며 우리는 적게는 3-4명, 많게는 10명 이상의 인원이 협업하면서 프로젝트를 진행합니다. 어떻게 하면 팀원들 간에 더 나은 협업을 할 수 있는지, 좋은 팀을 만들 수 있는지 고민이 한 번쯤은 있으셨으리라 생각합니다. 협업의 기술이란 책에서 소개하는 HRT 베푸는 방법과 비판을 받아들이는 방법 모두 배우기. 를 통해 좋은 협업, 좋은 팀을 만들기 위해 무엇이 필요한지 내용을 조금 공유하고자 합니다. HRT란? 개발은 팀 스포츠 이며, 한 사람에 의해 만들어진 성공적인 소프트웨어라고 부를 수 있는 것 중에 대중화된 것은 거의 없다. 훌륭하게 기능하는 팀은 황금과도 같으며, 성공을 위한 진정한 핵심이다. 라고 이야기 하며 HRT란 무엇인지에 대해 설명합니다. 겸손(Humility) 당신은 우주의 중심이..

들어가며 저희 선임님과 오전 스터디 중 pxd 웹 접근성 프로젝트가 SSR 환경으로 만들어졌는데 웹 접근성의 어떤 장점이 있냐 물어보셨습니다. "SSR이기 때문에 SEO가 좋다." 라고 대답했지만, SSR이 왜 SEO가 좋은지 설명을 못 드렸습니다. 웹 관련해서 일하고 있다면 상식으로 알아야 할 지식! 그래서 알아보게 된 CSR과 SSR의 차이점같이 알아볼까요?? SPA? MPA? 우선 CSR과 SSR을 설명해 드리기 전에 SPA와 MPA의 개념을 알아야 하는데요. 서로 밀접한 관계라고 볼 수 있습니다! 우리에게 좀 더 친숙한 SPA부터 알아봅시다! SPA(Single Page Application) SPA 싱글 페이지 애플리케이션 이란? 싱글 페이지 즉, 하나의 페이지로 이루어진 홈페이지입니다. 하나의..

들어가며 지난 글에서 web3가 무엇인지 살펴보았는데요. (WEB 3.0 - web3가 뭐죠?) 이번에는 프론트엔드 시점에서 바라본 web 3.0에 대해 이야기해 보고자 합니다. 사용자는 주로 웹브라우저를 통해 프론트엔드에 접근하여 디앱을 구동하고 서비스를 이용할 수 있는데 그 가운데에서 우리가 가장 영향력을 펼칠 수 있는 디앱에 대해 알아보아요. DApp (Decentralized Application)이란? 디앱(DApp, Decentralized Application)은 분산형 애플리케이션을 말해요. 디앱은 블록체인 기술(암호화폐와 블록체인, 스마트 콘트랙트 등)을 기반으로 구축되며, 중앙 관리자가 없는 분산형 시스템이에요. 누구나 읽고 쓸 수 있는 공개된 블록체인 네트워크에서 동작하고, 데이터를 ..

들어가며 웹 3.0 시대를 맞이하는 현재 시점에 스마트 콘트랙트(smart contract)의 기본 개념에 조금이나마 이해를 돕고자 이번 블로그 글을 작성했습니다. 스마트 콘트랙트란? 스마트 콘트랙트는 전산으로 이루어지는 전자 계약 기술을 뜻합니다. 스마트 콘트랙트의 특징은 블록체인 기반 기술을 사용해 상호 간 계약에 있어서 제3의 인증기관이나 중개인이 필요 없이 계약 당사자 간 사전에 협의한 내용을 미리 프로그래밍하여 전자 계약서 문서 안에 넣어두고, 이 계약 조건이 모두 충족되면 자동으로 계약 내용이 실행되도록 하는 시스템입니다. 동작 원리 블록체인 기반 스마트 콘트랙트는 기본적으로 모든 트랜잭션 로그가 저장된 블록체인 데이터베이스와 스마트 콘트랙트의 상태를 저장하는 데이터베이스 두 가지가 존재합니다..

들어가며 이전 글에서는 화면을 그릴 수 있는 간략한 사용법을 설명해 드렸었는데요, 이번 글에서는 프로토타이핑 작업 시 사용하는 기능(메뉴)들에 대해 설명하겠습니다. 피그마 맛보기는 총 2편의 시리즈로 구성되어 있습니다. 피그마 맛보기 #1 피그마 맛보기 #2 (현재글) Prototype 대메뉴 설명 프로토타입을 만들기 위해서는 우측 상단에 있는 Prototype 탭을 선택해 줍니다. Device 항목을 선택하지 않으면 추후 프로토타입 진행 시 PC 기준으로 설정되기 때문에 모바일로 작업하시려면 해당 디바이스를 선택 후 진행하시는 것이 좋습니다. Background 항목은 기본 #000000(Black)으로 설정되어있으나 변경할 수 있습니다. 디바이스 선택 후 상단 # 메뉴를 선택하여 프레임을 생성해 줍니..

들어가며 오늘은 [프로그래머, 열정을 말하다]라는 책에 대해서 이야기해보고자 합니다. 또한 굉장히 주관적인 견해가 많이 포함된 포스팅이라는 점을 미리 말씀드립니다. 이 책을 읽게 된 계기 최근, 주변의 상황이 급격한 변화를 맞이하게 되면서 나 스스로도 개발자로서의 나의 위치와 상황에 대해서 개인적으로 되돌아보는 시간이 많아졌습니다. 적지 않은 시간을 개발자로서 살아왔지만 그동안 뿌듯함이나 성취감보다는 항상 부족하고 만족스럽지 못한 시간을 보내왔다고 느껴졌어요. 스스로 경쟁력 없는 사람이라고 여기고 나 자신을 하찮게 포장하는 데에만 급급했습니다. 큰 변화를 잘 맞이하기 위해서는 나 자신부터 마음을 잘 잡아야 한다고 생각했어요. 그래서 무작정 이 책을 읽었습니다. 책을 추천받아서 빌린 지는 꽤 되었지만 몸으..

들어가며 처음 React + typescript 조합을 사용했을 때 컴포넌트를 만들기 위해 아래와 같은 코드를 많이 사용했습니다. // Parent type Props = { count: number; }; const Parent: React.FC = ({ count }) => { return Parent {count}; }; export default Parent; // App import Parent from "./Parent"; function App() { return ( ); } export default App; 강의나 여러 예제에서 React.FC를 많이 사용했기 때문에 “함수형 컴포넌트를 만들 때 React.FC를 사용해야 되는구나”라는 생각을 갖게 되었는데요 최근에 React.FC 사용을..

들어가며 규모가 큰 프로젝트를 진행할수록 하나의 파일로 관리하기보다는 여러 개의 파일로 분리하여 작업을 하는데요. scss에서는 기존에 스타일시트를 @import 속성을 이용하여 파일을 연결해서 사용하고 있습니다. 대체로 변수, 자주 사용되는 코드를 각각의 성격에 따라 전체 공통 _variables, _mixin, 혹은 페이지 공통을 추가로 작성하여 연결합니다. 하지만, scss에서 @import 사용을 지양하는 추세로 @use를 새롭게 도입하면서 권장한다는 글을 읽고 사이드 프로젝트에 적용하면서 소개하는 글을 작성하게 되었습니다. @import 여러 scss 혹은 css 파일을 분리하여 관리하여 불러올 때 사용되는 기능으로 파일 최상단에 선언합니다. scss에서는 @import 하는 파일 이름 앞에 ’..