개발블로그

프론트엔드 채용공고를 여러 개 보면서 우대사항에 계속 같은 문장이 나왔다.웹 접근성 및 웹 표준에 대한 이해 사실 4년 가까이 화면을 만들어오면서 이 두 단어를 진지하게 생각해본 적이 없다.alt는 넣고 있었고, 시맨틱 태그도 쓴다고 생각했다. 근데 왜 필요한지, 안 지키면 정확히 누가 뭘 못 하게 되는지는 설명을 못 하겠는 상태인 것.그래서 개인 프로젝트를 놓고 직접 확인해보기로 했다. 웹 접근성 확인하기* Lighthouse: 웹 페이지 품질 검사 도구로, 성능, 접근성, 권장사항 등의 지표를 점검하고 개선 제안 목록을 알려준다측정 방법은 개발자도구(F12) → Lighthouse 탭 → 아래와 같이 체크 후 Analyze page load 측정해보니 88점이 나왔다. 88점이면 나쁘지 않은 것 ..

상황프론트가 떠있는 주소는 http://localhost:3000 (또는 http://192.168.x.x:3000)이고요청보내는 주소는 http://server.test.co.kr 이다 이렇게 요청보내는 주소와 요청하는 주소가 다르면 먼저 서버에서 preflight를 보낸다이게 바로 http의 option인데의미는 "나 로컬호스트 3000인데 너한테 요청 보내도 됨?" 여기서 서버가 된다고 하면 실제 요청(ex. get - restful/mypage)을 보낼 수 있다 그런데 CORS라면 그 옵션에 대한 응답이 500으로 떨어진다! 근데 왜 500이 나죠?서버의 CORS 설정에 허용 origin 목록이 있는데이 목록에 로컬 개발 주소가 없으면 콜백에 new Error('Not allowed by COR..

미션프레임워크로 넥스트를 사용하고 있는 프로젝트의 개인정보 변경페이지에서 유효시간 만료 시(403에러) 비밀번호 확인 페이지로 이동시켜라 방식1) fetch 파일에서 403에러가 발생하면 window 이벤트를 발생시키고2) 비밀번호 확인 컴포넌트에서 이벤트에 따른 등록 함수를 실행시키도록 한다(비밀번호 확인 페이지) 먼저 fetch에 인증과 공통 처리를 얹어준 wrapper 파일에 403 에러 처리를 해준다 if ( res.status === 403 && typeof window !== 'undefined' && window.location.pathname.startsWith('/profile-update/lists') ) { // profile-auth..

SSR / CSR / loader 정리1. 서버와 브라우저브라우저 — 사용자 개인의 노트북, 핸드폰에서 도는 것. 사람마다 각자 있음서버 — 모든 사용자의 요청을 받는 Node 프로세스개발 중 내 컴퓨터: Node 프로세스(서버) + 크롬(브라우저) ← 한 기계배포 후 AWS: Node 프로세스 / 사용자 기기: 크롬 터미널은 컴퓨터가 아니라 프로세스의 출력을 보여주는 창. npm run dev로 띄운 Node 프로세스가 서버 역할을 하고, 그게 출력한 글자가 터미널에 나옴. loader는 서버에서 돌기 때문에 console.log가 터미널에만 찍힘.2. CSR vs SSR컴포넌트 함수를 어디서 실행하느냐의 차이. CSRSSR서버에서 실행❌✅ 서버에서 실행 후 HTML 생성브라우저에서 실행✅ D..

node와 npm..사용하긴 하는데 뭔지 정확히는 알지못하고 사용하는 것 중 하나이기에 자세히 파헤쳐 보고자 한다. Node.js자바스크립트는 웹브라우저에서 사용하는 언어이다. 이 자바스크립트를 브라우저가 아닌 다른 환경에서 사용하기위한 런타임 환경이다. 그런데 런타임 환경이 뭐지? 이건 엔진과 다른걸까?- 런타임 환경이란? 코드가 실행될 때 필요한 것들 예를 들어 엔진, api, 메모리 관리 등을 제공하는 환경이다. 엔진은 런타임 환경에 속하는 것 중 하나로 자바스크립트 코드를 읽고 기계어로 바꿔서 실행하는 일을 한다(브라우저와 노드는 둘다 Chrome의 V8 엔진을 사용). 네트워크 통신(네트워크 모듈)이나 DOM 조작(렌더링/DOM api), setTimeout(web api) 등은 런타임 환경에..

리액트 네이티브는 3개의 스레드로 작동한다. 1. javaScript thread2. shadow thread3. main thread 이렇게 세가지 스레드로 분리된 이유는 각각 다른 작업을 하면서 부드러운 화면처리가 가능하도록 만든다. 화면을 그리면서 js계산을 하고, 레이아웃도 가능하도록 할 수 있다. JavaScript thread- js thread에서는 우리가 작성한 리액트 코드가 실행된다. 리액트 코드가 실행된다는 것은 화면을 그리는게 아니라 컴포넌트 함수가 호출되고 JSX가 계산된다는 뜻이다. 컴포넌트 렌더링(JSX 계산), state/props 계산, 비즈니스 로직, api 응답처리, 애니메이션 계산 등이 수행된다.- 리액트 네이티브에서는 Hermes라는 자바스크립트 엔진을 사용한다. 일..

🔨 기초 세팅 : 타입스크립트와 타입 버전 eslint 설치1. 타입스크립트 설치npm install --save typescript @types/node @types/react @types/react-dom @types/jest # 패키지 설치npx tsc --init # tsconfig.json 파일 생성(jsconfig.json은 삭제한다) 2. tsconfig 설정 (애플코딩 참고)플젝의 tsconfig는 아래와 같이 설정했고, 그 외로 설정할 수 있는 속성들은 그 아래에 작성했다// tsconfig.json{ "compilerOptions": { "baseUrl": "src", "module": "esnext", // 리액트 프로젝트에서 추천(최신 ECMAScript 모듈) ..

React Navigation은 react native에서 화면이동(routing) 시 사용되는 라이브러리로, 페이지가 쌓이는 구조(stack 구조)를 제공한다. Stack 뿐만 아니라 Tab(하단탭), Drawer(옆에서 열리는 전체메뉴) 등의 화면 이동 방식(네비게이터)도 가지고 있다. 네비게이터들은 서로 중첩이 가능하다. 우리 프로젝트에서는 Stack과 Tab 네비게이터를 사용했고, Stack 내 하나의 화면에 Tab을 중첩하여 사용했다. 📘 기본사용방법Stack 네비게이터를 생성 - 리액트 네비게이션은 내에서 실행할 수 있다.Stack.Screen은 화면의 이름과 렌더링되는 컴포넌트를 지정한다.네비게이터 타입의 키는 Stack.Screen의 name이 될 수 있다. 키의 타입이 undefin..

이번에 새로 만들어야 하는 페이지의 조건은 당근어플처럼상단탭이 있어 이동이 가능하고아이템이 무한스크롤로 정렬되고스크롤 시 탭이 상단에 고정되고중간에 랜덤 아이템이 나오는페이지였다. 조건이 많아 어떻게 구조를 짜야할지에 대해 고민을 많이했다. 1. FlatList vs ScrollView1) 무한 스크롤을 쓰다보니까 처음에는 FlatList로 작업했다- renderItem에서 분기처리해서 각 탭에 맞는 아이템을 렌더링- 고정될 탭 아래에 스크롤은 되지만 공통적으로 들어가는 컴포넌트가 있어 리스트 가공- 고정될 탭은 stickyHeaderIndices로 설정- 랜덤 아이템은 리스트를 또 새롭게 가공이렇게 되다보니 가공에 가공에 가공을.. 데이터가 티기고 티겨지는.. 너무 복잡해졌다또한 리스트는 state로..

문제현상이미지 아이템이 많으면 스크롤 시 버벅거림이 심해져 사용자 경험에 좋지 않은 영향을 주고 있으므로 수정이 필요했다 컴포넌트 구조* 페이지 : MainShop, BrandShop, ProductSearchResult -> 여기서 각각 ScrollView를 사용하고 있다* 컴포넌트 ProductList (FlatList 사용) -> 각 페이지의 ScrollView 안에 ProcudtList를 사용하고 있다 수정방법 1. 무한스크롤너무 많은 이미지를 한번에 보여주고 있어서 30개씩 아이템을 보여주는 무한스크롤을 사용했다. ScrollView의 onScroll 함수를 사용하여 화면의 끝에 닿을 경우 보여주는 아이템 개수(renderCount, renderList)를 수정하는 방식이었다.// Scrol..