기술 블로그

검색어 입력바 UI 구성 및 기능검색어를 입력할 'text input'검색어 두글자 이상 입력 시 노출되는 '추천검색어 list'입력한 검색어로 검색요청을 위한 '검색 button'사용 편의성을 높일 수 있는 방안 [데스크톱 환경]키보드 입력 이벤트를 활용하기text input 에서 키보드 아래 방향키를 누르면 추천검색어 list 의 첫번째 item 이 선택되도록 하기추천검색어 list 에서 키보드 아래 방향키를 누르면 다음 item 이 선택되도록 하기 (다음 item 이 없는 경우는 제외) 추천검색어 첫번째 item 에서 키보드 위 방향키를 누르면 text input 으로 커서 이동시키기추천검색어 item 항목에서 키보드 Enter키를 누르면 text input 으로 입력 커서를 이동시키고 선택된 it..

문제의 발생블록체인 기술을 활용한 NFT마켓 및 DeFi 를 서비스하는 회사에 프론트엔드 개발자로 근무하던 때 였다. 여느 때 처럼 프로젝트 개발을 하고 있던 중, 팀원 한 분이 운영환경 웹사이트 기능이 이상하게 동작한다고 공유해주셨다. 자세하게는 DeFi 기능 중에 token swap 과정에서 사용되는 블록체인 주솟값이 우리측에서 사용하는 주소가 아닌 다른 주소가 표기된다는 내용이었다. 이 상황에서 사용자가 해당 기능을 사용하게 될 경우, 사용자가 swap 하려는 token 및 트랜잭션 수수료가 다르게 표기된 주소로 전송되게 된다. 금융 계좌거래와는 달리, 블록체인에서 다른 주소로 token 을 전송하게 되면 해당 token 은 완전히 유실돼 버린다. 이는 금전적으로 피해가 발생하는 매우 심각한 상황..

당시 재직하던 회사에서 운영 중인 웹 프로젝트는 Create-React-App(이하 CRA) 으로 구조를 잡아 개발하고 있었다. 사용자가 웹사이트에 들어와 컨텐츠를 보고 기능을 사용하는데 문제는 없었으나, 웹사이트에 들어오기 전 단계에서는 문제가 있었다. Client-side rendering(CSR) 이더라도 정적 데이터를 사용한다면 문제가 없으나, 상품 상세보기 페이지와 같이 상품에 대한 상세정보를 서버에서 제공 받아야 하는 경우에는 검색엔진 봇(Bot)에게 데이터를 제공해 줄 수가 없다. 이를 해결하려면 검색엔진 봇이 웹서버에 접근했을 때, 서버에서 렌더링 하는 SSR(Server side rendering) 혹은 Build 시점에 외부데이터를 사용해 정적페이지를 렌더링하는 Next.js 의 S..

https://itam.tistory.com/91 React 로 진행한 프로젝트에서 Atomic Design 패턴을 걷어낸 이유안녕하세요. ITAM Game 프론트엔드 개발자로 입사해, 현재는 백엔드 개발팀에서 근무 중인 이성우 입니다 :) 프론트엔드 개발팀에 근무하며 있었던 일을 블로그를 통해 공유하고자 합니다. 오늘 공itam.tistory.com https://itam.tistory.com/92 ITAM Games 오픈소스 프로젝트 ethereum-antenna 소개 - (1)소개 안녕하세요, ITAM games 백엔드팀에서 열심히 로켓을 개발 중인 이성우 입니다 :) 회사에서 프로젝트를 개발을 하며 겪었던 문제점이나 고민들을 회사 기술블로그를 통해 공유하려 합니다. 많itam.tistory.com

사용자가 카카오톡 공유하기를 통한 URL 링크와 같이 외부 링크를 클릭해 웹사이트에 접속하게 되면,접속한 웹사이트 도메인에 해당하는 history 는 현재 페이지를 제외하고는 존재하지 않는다.(history stack 에는 현재페이지의 history만 존재한다는 의미) 그러므로 사용자가 브라우저 뒤로가기를 클릭하면 브라우저의 기본 페이지로 이동하거나 혹은기본 페이지가 존재하지 않는 경우라면 뒤로가기 버튼은 비활성화 되어있다. window.history.pushState 혹은 replaceState 를 사용하면, 사용자가 웹사이트 최초 접속 후 브라우저 뒤로가기를 해도현재 웹사이트에 다른 페이지로 이동되도록 개발자가 의도하여 브라우저 history 를 추가할 수 있다. 이 기능을 작업한 뒤 확인하는 과정에..

Rendering 이란?컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다. (위키백과 - 렌더링)SSR / CSR 에서 말하는 렌더링은 인용 문구에서 말하는 scene 파일들을 이용해 영상을 만들지는 않습니다.하지만, 렌더링 엔진을 사용해 소스 코드들로 부터 웹 페이지를 만들어낸다는 면에서 의미는 동일하다고 생각됩니다.     Server-Side Rendering(SSR) 이란?PHP, JSP, ASP, Node.js 등 Server-Side Script 언어 기반의 템플릿 엔진을 이용해 동적인 웹 콘텐츠(html) 문서를 만드는 방식 입니다.  다음 코드는 Node.js 템플릿 엔진인 EJS 문법으로 작성 된 .ejs 파일..

# 이벤트 루프(event loop)이벤트 루프는 구현방식으로 인해 붙여진 이름이며, 이벤트 루프는 보통 아래 코드와 유사합니다.while(queue.waitForMessage()) { queue.processNextMessage();}이벤트 루프는 javascript 실행환경인 브라우저에서 관리합니다.  # 이벤트 루프 동작방식비어있는 태스크 큐에 1개의 태스크가 들어온 경우, 이벤트 루프에 의해 태스크가 큐에서 pop 됩니다.pop 된 태스크가 실행되면 javascript engine 에 의해 실행 가능한 코드범위로 실행 컨텍스트가 생성됩니다.생성된 실행 컨텍스트는 콜 스택(Call Stack) 에 push 되고 실행됩니다.코드 실행과정에서 생성되는 태스크는 태스큐 큐에 push 됩니다.코드 실행이..

# CORS 란?Cross Origin Resource Sharing(교차 출처 자원 공유) 의 약어원본 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있도록 서버에서 관련 HTTP 헤더를 추가하여 브라우저에 알려주는 체제 입니다.  # SOP 란?Same Origin Policy(동일 출처 정책) 의 약어원본 출처에서 실행 중인 웹 어플리케이션은 보안상의 이유로 동일한 출처의 리소스만 공유할 수 있다 라는 정책 입니다.SOP 정책 중, 다른 출처 리소스 요청을 허용하는 예외 항목이 있는데 그 중 하나가 CORS 정책을 지킨 리소스 요청 입니다.  # 출처(Origin) 란?URI 구조에 대해서 알아야 합니다.http://localhost:3000/main?page=1#content..

오랜만에 삽질기를 올린다. 아직 Typescript 기반으로 React 개발을 해본 적도 없고.. Parcel 번들러도 경험해보고 싶어서 요즘 끄적끄적하고 있다. 오늘 상대 경로를 절대 경로로 변경하기 위해 Parcel 공식문서를 찾아보다 Tilde (~)를 사용한 절대 경로 적용에 대해 알게 되었다. Parcel 공식 Docs Tilde path 바로가기 📔 Module Resolution Getting Started Features 📦 Asset Types Advanced 📔 Module Resolution The Parcel resolver implements a modified version of the node_modules resolution algorithm. Module resolution..

호이스팅 이란변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다.  호이스팅 현상이 발생하는 이유javascript는 코드가 실행될 때 실행 컨텍스트가 생성된다. 이 때, 실행 컨텍스트 내부 변수 객체에서 현재 컨텍스트에 사용되는 변수 또는 함수를 생성한다. 변수가 생성되는 과정은 3단계로 나뉜다. 1. 변수 선언2. 변수 초기화3. 변수에 사용자가 지정한 값으로 초기화 여기서 3. 변수에 지정한 값 할당은 해당 실행 컨텍스트의 변수 객체 생성이 완료된 뒤에 실행된다. 즉, 변수의 선언 + 초기화 와 사용자가 지정한 값 초기화가 발생되는 환경이 나뉘어 ..