목차 시작하며 토스는 어떨까? 쏟아지는 페이지 한 방에 관리하기 Reference 시작하며 새로운 서비스를 만들어간지 6개월 쯤 되었을 때 점점 거대해지는 프로젝트를 보고 고민이 들었어요. 30%의 기능만이 구현된 지금도 헤비하다는 생각이 드는데 앞으로 더 커질 서비스를 생각하니 잠깐 아득해졌어요. 신규 기능이 나날이 살을 붙여가는 토스 앱의 경우 어떤 식으로 프로젝트를 관리하고 있는지 궁금하기도 했고요. 마침 작년 SLASH23에서 관련 주제로 발표했던 내용이 있었는데 관심있던 내용이라 재미있게 듣고 기록까지 해봅니다. 토스는 어떨까? 토스 모바일 가입 플로우라고 합니다. 가입 단계만 해도 어마어마하게 많은 스크린이 존재하는 것을 볼 수 있는데요. 토스의 경우 한 페이지에서 유저가 할 수 있는 최소한의 기능만을 보여주고 단계 별 화면 전환을 시키고 있어 더 많은 스크린이 존재할 수 밖에 없겠다 생각했어요. 스크린샷 2024-01-19 오전 11.44.44.png 저는 피그마 화…

시작하며 Next.js 웹 애플리케이션 환경에서 아래 이미지와 같은 에러가 종종 발생합니다. 아래 에러 조치의 일환으로 Error boundary와 Setnry를 설정합니다. Sentry Setup 센트리에서 프로젝트 생성 센트리 페이지에서 플랫폼을 설정하면 플랫폼에 따라 자동으로 기본적인 세팅을 할 수 있는 커맨드가 생성됩니다. [sentry/wizard 설정] sentry.client.config.js, sentry.server.config.js 생성 Next.js config 파일인 next.config.js 파일에 센트리 관련 설정 업데이트 sentry-cli 를 위한 .sentryclirc, sentry.properties 파일 생성 Sentry setup을 확인할 수 있는 example page 생성 SDK wizard로 기본적인 세팅

EC2 설정하기 서비스에 맞는 컨테이너 이름을 설정해주고, AMI는 ubuntu를 사용한다. 작성 시점(23.08.17) 기준 22.0.4 버전이 LTS였기에 해당 버전을 사용하였으며, LTS 버전을 사용하는 것을 권장한다. 스크린샷 2023-08-17 오전 11.35.07.png 인스턴스 유형은 컨테이너 생성 후 변경이 가능하니 프리티어로 사용할 수 있는 t2.micro로 설정해주고 필요하다면 나중에 바꾸도록 한다. 여러 번 ec2 재생성을 하고 있는 중이라 키 페어나 보안 그룹은 기존에 있는 것을 사용하였다. (생성하는 방법은 추후 추가 예정) 스토리지 역시 프리티어로 사용 가능한 30GB로 설정해주었다. 스토리지 설정까지 마쳤다면 ! 탄력적 IP ec2는 재부팅 시 IP가 재할당되어 매번 바뀌게 된다. 고정된 IP를 설정하기 위해 탄력적 IP 설정을 해주어야 한다. 스크린샷 2023-08-17 오전 11.41.37.png 좌측 메뉴에 메뉴로 들어가준다. 스크린샷 2023…

시작하며 AWS에서 제공하는 Route 53은 가용성과 확장성이 뛰어난 DNS 시스템이라고 설명하고 있습니다. Route 53은 사용자의 요청을 애플리케이션에 빠르게 연결합니다. DNS(Domain Name Server)? 도메인 네임 서버는 사람이 읽을 수 있는 도메인 이름(www.naver.com)을 기계가 읽을 수 있는 IP 주소(1.2.3.4) 로 변환하는 역할을 합니다. Route 53 레코드 유형 Route 53에서 레코드를 생성하려고 하면 아래 이미지와 같이 레코드 유형을 선택해야 합니다. 각 유형은 어떻게 다르며 적절한 레코드 유형을 선택하는 방법에 대해 알아봅니다. 기억해두기 : IPv4를 사용하여 리소스로 연결 : 와 같은 용도지만 IPv6 사용 : 하나의 도메인 네임을 다른 이름(별칭)으로 매핑시키는 레코드 (서브 도메인) 하나의 IP 주소로부터 여러 개의 서비스를 실행할 때 관리하기 편함 IPv4 VS IPv6 IPv6는 최신 세대 인터넷 프로토콜(IP) 입…

시작하며 CI구성을 어떤 식으로 하고 계신가요? CI란 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Intergration)을 의미합니다. 지속적 통합이 잘 구현되어 있는 경우 코드 변경 사항이 생겼을 때 정기적으로 빌드 또는 테스트를 거쳐 리포지토리에 병합됩니다. 이 외에도 CI는 코드 포맷팅이나 Storybook을 배포하는 용도로 쓰일 수 있을 것 같습니다. 문제는 무엇인가 스크린샷 2023-04-12 오전 11.05.08.png 디자인시스템을 구축하며 Storybook과 함께 Chromatic이라는 툴을 채택해 사용하고 있습니다. Chromatic은 UI 컴포넌트 개발 과정에서 피드백과 의견 수집을 돕는 툴로 Storybook과 함께 사용할 경우 큰 시너지 효과를 낼 수 있습니다. Chromatic은 매 작업물마다 고유의 링크를 생성하여 디자이너와의 피드백이 가능한 툴입니다. 디자인 리뷰계의 Pull Reqeust라고 생각하면 이해가 쉽습니다. 문제는 작…

Next.js 프레임워크 구조 : url과 매칭되는 것들 Date Fetching SSR: 서버 사이드 렌더링으로, 함수를 활용해 만들 수 있다. 서버에 요청이 생길 때마다 외부 데이터를 조회해서 보여줄 수 있다. CSR: 클라이언트 사이드 렌더링으로, 일반 React를 사용하는 것과 같다. SSG: 정적 사이트 제너레이션, 빌드 타임 때 미리 필요한 데이터를 가져와 화면을 그려놓는다. 로 실행한 환경에서는 SSR과 동일하게 동작하고 빌드 후 실행했을 때 순기능을 확인할 수 있다. 빌드 시 가져온 데이터로 그려주기 때문에 아무리 새로고침을 해도 데이터가 변경되거나 리패치 되지 않는다. ISR: 안에서 동작하는거지만 특정 주기를 지정해주면 그 주기마다 리제너레이션하여 데이터를 업데이트할 수 있다. SSR은 매번 서버로 호출하기 때문에 서버 부하를 가져올 수 있어 SSG + ISR을 동시에 사용하는 것을 권장한다. SSR VS SSG SSR은 매번 서버에 요청이 이루어지므로 서버 …

Getting Started (시작하기) 애플리케이션 루트 경로에 와 디렉토리가 생성된다. : 디렉토리 내부의 파일 명은 라우터와 연결된다. 예를 들어, 는 과 매핑된다. : 이미지, 폰트 등 정적 리소스를 저장한다. 폴더 안 파일들은 base URL()으로 코드가 실행되기 전에 참조할 수 있다. Next.js는 페이지 개념을 중심으로 만들어졌다. 페이지란 디렉토리 내부의 , , , or 타입의 리액트 컴포넌트를 말한다. 뿐만 아니라 파일 이름을 통해 dynamic route 파라미터를 설정할 수 있다. 디렉토리 안의 파일은 시작을 위한 파일이다. 사용자가 애플리케이션을 방문했을 때 렌더링 되는 페이지이다. 지금까지 우리는: 자동 컴파일과 번들링 React Fast Refresh 의 정적 generation 및 서버 사이드 렌더링 base URL과 매핑되는 디렉토리를 통한 정적 파일 제공 Basic Features (기본적인 기능) Pages 디렉토리의 각 페이지는…

마진 상쇄 (Margin-collapsing) MDN 블록의 top 및 bottom 마진은 때로 결합되는 마진 중 크기가 가장 큰 마진으로 결합(combine, 상쇄(collapsed)) 됩니다. 어떤 두 개의 블록 요소의 상하 마진이 겹칠 때 한 쪽의 값만 적용되는 현상이다. 마진 상쇄가 일어나는 상황 인접 형제 박스 간 상하 마진이 겹칠 때 겹쳐진 두 마진 중 더 큰 마진 값으로 상쇄해 렌더링한다. 2. 빈 요소의 상하 마진이 겹칠 때 ‘빈 요소’란 높이(height)가 0인 상태의 요소를 말한다. height / min-height / padding / border 등 상하로 늘어나는 값을 명시적으로 주지 않을 경우 내부에 Inline 콘텐츠가 존재하지 않는 요소 부모 박스와 첫 번째 자식 박수의 마진이 겹칠 때 그래서 이럴 경우 부모 박스에 padding을 주어 간격을 유지하는 것이 안전하다. 마진 상쇄 규칙 마진 상쇄는 인접한 두 요소가 온전한 block-level 요소일…

함수 표현식 VS 함수 선언식 함수 선언식 (function declartion)은 별도의 할당 없이 함수만 정의된 형태 함수 표현식 (function Expression)은 정의된 함수를 변수에 할당하는 형태 이 둘의 주요 차이점은 호이스팅(hoisting)이다. 함수 선언식은 함수 전체가 호이스팅 되기 때문에 함수 선언 전에 함수를 사용할 수 있다. 반면 함수 표현식은 별도의 변수에 할당하는 형태라 변수의 선언부만 호이스팅하게 된다. 실행 컨텍스트 (Execution Context) 자바스크립트 코드를 실행하기 위해 필요한 환경이 제공되는 범위

SOP VS CORS SOP (Same-Origin Policy, 동일 출처 정책) 하나의 출처(Origin)에서 로드된 자원이 다른 호스트나 프로토콜, 포트번호와 상호작용하지 못하도록 요청 발생을 제한하며 동일 출처(Same Origin)에서만 접근이 가능한 정책 CORS (Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 자신의 출처와 다른 출처에서 리소스를 불러오려면 올바른 CORS 헤더를 포함한 응답을 반환해야 한다. CORS 해결 방법 동일 출처 사용 서버에서 Access-Control-Allow-Origin 헤더 추가 서버에서 모든 클라이언트 요청을 허가하는 헤더를 추가하면 된다. 이렇게 설정할 경우 전체 호스트에 대한 요청을 허용하기 때문에 보안에 취약할 수 있다. 3. Proxy Proxy 서버는 클라이언트와 서버 중간에 위치하며 프록시 서버에서 헤더를 담아 응답해 주면 된다. OSI-Layer 물리 계층 (Physical Layer…

Context 전역 상태를 관리하기 위해 사용 여러 컴포넌트에 전달해줘야 하는 의 경우(ex. 테마, 언어) 를 이용하면 단계마다 명시적으로 를 넘겨주지 않아도 여러 컴포넌트가 이 값을 공유할 수 있다. Redux와의 차이 미들웨어 (Middleware) reducer에서 처리되기 전, 원하는 작업을 수행할 수 있다. ex. 특정 액션을 무시하거나 액션이 발생했을 때 로그를 쌓는 등 2. 유용한 함수와 훅 , , 와 같은 훅을 통해 손쉽게 상태를 조회하거나 액션을 디스패치할 수 있다. 3. 하나의 커다란 상태 redux는 모든 글로벌 상태를 하나의 객체에 넣어 사용하는 것이 필수이다.

Grid : 요소를 격자 형태로 배치 : 요소를 격자 형태로 배치하는 것은 동일하지만 속성과 동일하게 내용 크기 만큼만 자리를 차지한다. : grid 요소의 한 컬럼에 배치할 하위 요소들의 사이즈를 정하는 속성 Event VS : currentTarget 은 실제 이벤트가 발생한 요소를 가져오고 target 은 이벤트가 등록된 요소를 반환한다. Button 일 경우 buttonElement 에서 value 속성을 주면 버튼의 텍스트를 설정할 수 있다. 태그 일 경우 button 태그일 경우 buttonElement 에서 innerText를 주어 버튼 내의 텍스트를 변경할 수 있다.

프로그래머스 그리디 코딩테스트 문제 중 문제이다. 처음에는, 각 자릿 수에 들어갈 수 있는 숫자 중 (의 일부) 가장 큰 값을 순차적으로 배열하도록 시도했다. 이렇게 해보았을 때도 시간초과 없이 으로 작성할 수 있는데, 전체 테스트 케이스 중 10번에서 런타임 오류가 발생한다. 결국 10번에 대한 반례를 찾지 못하여 다른 방법으로 접근해보았다. 해결 방법 stack 자료구조를 사용해서 를 순회하며 stack 에 이미 포함되어 있는 수보다 크거나 같을 경우 stack 에 추가해주었다. 그리고 k 만큼의 수를 제외한 값을 리턴해주었다. 이렇게 풀고나니 코드가 한결 짧고 깔끔하다 .. 삽질 열심히 했네 🥹

프로그래머스 그리디 코딩테스트 문제 중 문제이다. 가장 찾기 어려웠던 포인트는 을 구하는 것인데, 기존에는 13 이라는 상수를 쓰지 않고 어떻게든 계산식을 만들어보려고 했으나, A-Z 로 이동하는 것까지 감안해야하는 것과 단순 unicode 를 구할 경우 1의 오차가 생기는 예외들을 처리하지 못했다. 13번째 알파벳인 ‘O’ 부터는 Z에서 출발하는 것이 더 이득이다. 알파벳과 같이 개수가 한정되어 있는 경우 상수를 사용하여 쉽게 풀 수 있다.

시작하며 기존에 있던 태그를 수정하거나 값을 또 다른 태그로 감싸주어야 할 때 유용하게 사용할 수 있는 코드를 소개합니다. 정규식을 사용해 바꿀 부분 찾기 여기서 g 는 전체 문자열을 탐색해서 모든 일치를 반환하도록 지정하는 전역 탐색 플래그이고, i 는 대소문자를 구별하지 않고 탐색할 수 있는 플래그입니다. 찾은 부분을 을 사용하여 변경하기

useEffect 훅 안에서 async 를 사용하는 방법 훅 안에서 를 사용하는 방법은 두가지가 있습니다. 첫 번째는 익명함수를 사용하는 방법이고 두 번째는 Promise 를 해결하여 async 를 쓰지 않아도 되게끔 처리하는 것입니다. 1. 익명함수를 사용하기 아래와 같이 async 로 감싼 익명함수를 생성해 await 구문을 사용할 수 있습니다. 2. Promise 해결 이 방법은 더 일반적인 방법으로 Promise then() 구문을 사용하여 해결할 수 있습니다.

링크 모음집 URL, URI, URN의 차이

VS 은 요소의 상태가 변할 때 애니메이션을 실행한다. 속성은 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다. 키프레임 동작은 재생 횟수, 방향 등 여러 속성으로 제어할 수 있다. 가장 큰 차이는 은 요소의 상태가 바뀔 때의 상태를 애니메이션으로 표현하지만, 속성은 요소의 상태 변화와 상관없이 애니메이션을 실행한다. 또한 속성으로 프레임을 추가할 수 있다. transition의 예) : 규칙을 준수 해 정의한 애니메이션 이름 : 애니메이션이 얼마에 걸쳐 일어날지 결정 : 로드 이후 어느 정도 텀을 두어 애니메이션이 시작될지 지정 : 애니메이션의 방향 지정 : 애니메이션이 몇 번 반복될지 지정 로 지정하면 무한반복 : 애니메이션을 멈추거나 다시 시작 : 중간 상태들의 전환 간격을 지정 : 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정 animation의 성능 문제 , 속성은 애니메이션에 사용했을 때 성능 저하를 유발한다. 윌보이드 - 부드러운 애니메이션…

알고리즘 시간 복잡도: 특정한 크기의 입력에 대하여 알고리즘의 수행 시간 분석 공간 복잡도: 특정한 크기의 입력에 대하여 알고리즘의 메모리 사용량 분석 빅오 표기법(Big-O Notation): 복잡도를 나타내기 위한 표기 방법 만 고려한다. ex. 3N^3 + 5N^2 + 1,000,000 일 때, 빅오 표기법에서는 차수가 가장 큰 O(N^3)으로 표현 Dynamic Programming 메모이제이션 (Memoization) 메모이제이션은 탑다운 방식에서 사용됩니다. 한 번 계산된 결과를 메모리 공간에 저장하는 기법입니다. 같은 문제를 다시 호출하면 메모했던 결과를 그대로 가져옵니다. 값을 기록해 놓는다는 점에서 캐싱(Caching) 이라고도 합니다. 탑다운 VS 보텀업 탑다운(메모이제이션) 방식은 하향식이라고도 하며 보톰업 방식은 상향식이라고도 합니다. 다이나믹 프로그래밍의 전형적인 형태는 보텀업 방식입니다. 결과 저장용 리스트는 DP 테이블이라고 부릅니다. 엄밀히 말하면 …

시작하며 Vue의 반응형 시스템의 세부사항을 다뤄봅니다. 반응형에 대해 깊이 알아보기 변경 내용을 추적하는 방법 Vue 인스턴스에 옵션으로 전달하면 모든 속성에 Object.defineProperty 를 사용하여 getter/setters 로 변환합니다. 모든 컴포넌트 인스턴스는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 “수정”된 모든 속성을 기록합니다. 나중에 종속적인 setter가 트리거 되면 watcher에 알리고 다시 렌더링 됩니다. 변경 감지 경고 Vue는 속성의 추가 제거를 감지할 수 없습니다.

시작하며 Vue 프레임워크에서 조건부 렌더링을 위한 디렉티브는 와 가 있습니다. 이번에는 두 가지 디렉티브의 차이점에 대해 알아봅시다. v-if VS v-show 디렉티브의 값이 이면 렌더링 되고 이면 렌더링 되지 않습니다. 2.1.0 버전부터 디렉티브도 추가되어 기존에 if문을 사용하던대로 디렉티브를 사용할 수 있습니다. 와 마찬가지로 디렉티브 값이 일 때 렌더링 됩니다. Vue에서 으로 감싼 뒤 callback을 통해 DOM을 조작할 수 있다. 이렇게 되면 데이터 갱신 후 UI까지 렌더링한 후에 함수를 최종적으로 수행한다. 데이터가 업데이트되고 난 직후, UI가 갱신될 때 DOM을 찾지 못하는 현상을 개선하고자 사용한다. ex. 차이점 가장 큰 차이점은 는 실제 컴포넌트가 제거되고 생성되는 반면 는 css의 속성만 변경된다는 점입니다. 마치며 Refer https://kr.vuejs.org/v2/guide/conditional.html https://vuejs-kr.…

API (Application Programming Interface) ? 응용 프로그램에서 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 특징 구현과 독립적으로 사양만 정의되어 있다. API에 따라 접근 권한이 필요할 수 있다. Library ? 응용 프로그램 개발을 위해 필요한 기능(함수)을 모아 놓은 소프트웨어 특징 독립성을 가진다. 응용 프로그램이 능동적으로 라이브러리를 사용한다. Framework ? 응용 프로그램이나 소프트웨어의 솔루션 개발을 수월하게 하기 위해 제공된 소프트웨어 환경 특징 상호협력하는 클래스와 인터페이스의 집합이다. 응용 프로그램이 수동적으로 프레임워크에 의해 사용된다. API VS Library VS Framework Library와 API의 차이점은 구현 로직의 유무이다. Library와 Framework의 차이점은 응용 프로그램의 흐름 주도권을 누가 가지고 있느냐 이다. Refer https://www.youtube…

프로그래밍 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 문제를 명확히 이해하고 적절한 해결 방은을 찾아 기계가 실행할 수 있을 정도로 요구를 설명하는 작업이며, 이 결과물이 바로 코드이다. 컴파일러와 인터프리터 프로그래밍 언어를 사용해 프로그램을 작성 후 컴퓨터가 이해할 수 있는 기계어로 변환해주는 번역기를 컴파일러(Compiler) 혹은 인터프리터(Interpreter)라고 한다. 자바스크립트의 특징 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 자바스크립트는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다. 자바스크립트는 런타임에 컴파일되며 실행 파일이 생성되지 않고 인터프리터의 도움 없이 실행할 수 없기 때문에 컴파일러 언어라고 할 수는 없다. 변수 변수는 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름을 말한다. 식별자 변수의 이름을 식별자(Identifier)라…

시작하며 Nuxt 공식 문서에 있는 Data Fetching w에 관련된 내용을 번역한 글입니다. Data Fetching Nuxt에서는 API로부터 데이터를 가져오는 2가지 방법이 있습니다. 메서드와 메서드를 사용해 데이터를 가져올 수 있습니다. Nuxt는 client-side 어플리케이션에서 데이터를 로딩하기 위한 전통적인 Vue의 패턴을 제공합니다. (컴포넌트의 훅에서데이터를 가져오는 것) 그러나 범용적으로는 server-side 렌더링 때에 데이터를 가져올 수 있도록 Nuxt의 특수 훅들을 사용해야 합니다. 이렇게 하면 페이지에 필요한 모든 데이터와 함께 페이지를 렌더링 할 수 있습니다. Nuxt의 비동기 데이터를 로딩하는 두가지 hooks: : 이 훅은 page 컴포넌트에서만 사용 가능합니다. 이 훅은 client-side 렌더링 동안 로딩되는 공간을 표시하지 않습니다. 대신에, 이 훅은 해결될 때까지 페이지 이동을 막고 실패할 경우 에러 페이지를 보여줍니다. (N…

시작하며 기존에 알고 있던 브라우저 렌더링 과정과 추가적으로 알게 된 개념인 Reflow, Repaint를 정리하는 글입니다. 브라우저 렌더링 브라우저가 URI를 통해 서버로 요청한다. 서버는 요청한 데이터를 HTML로 파싱할 수 있는 형태로 응답한다. 응답 받은 데이터를 파싱하여 DOM, CSSOM을 생성한다. DOM 트리와 CSSOM 트리를 매핑하여 Render 트리를 생성한다. Render 트리를 바탕으로 Layout을 그리고 화면에 보여준다. Reflow & Repaint Reflow는 요소의 추가, 변경, 삭제로 인해 Layout 단계를 다시 수행하는 것을 말합니다. 이때 Render 트리 요소를 바탕으로 크기와 위치를 다시 계산하게 됩니다. Reflow가 발생할 수 있는 상황 페이지 초기 렌더링 시 Layout 단계 윈도우 사이즈가 변경될 때 노드가 추가되거나 제거될 때 요소의 위치, 크기가 변경되었을 때 (margin, padding, border, width, hei…

시작하며 React를 주언어로 사용하고자 하는데 이야기를 나누다보니 Memoization의 개념에 대해 잘 모르고 있는 것 같아 정리해봅니다. Memoization 이전 연산의 결과값을 저장해두고 동일한 입력이 들어오면 재활용하는 방법 Memoized 된 내용을 재사용할 시, 가상 DOM에서 바뀐 부분을 확인하지 않아 성능이 향상됨. 1. Redux Recoil이 아무리 편하긴 해도 .. Redux 공부도 꾸준히 해야겠다 ^^. 2. React.memo 컴포넌트를 로 래핑 시, 렌더링 결과를 Memoizing하고 다음 렌더링에서 Props가 일치한다면 Memoizing된 내용을 재사용합니다. 3. useMemo 와 흡사한데 는 함수의 결과 값을 Memoizing하여 불필요한 연산을 줄입니다. (함수를 로 래핑) 의 [dependency]가 변경되었을 때만 다시 계산함. 4. useCallback 는 특정 결과 값을 재사용하는 반면, 은 특정 함수를 새로 만들지 않고 재사용하고 싶을…

시작하기 전에 알아야 할 파일들 LICENSE: 프로젝트에 적용된 라이센스를 보여주는 파일 CONTRIBUTING: 프로젝트에 기여하는 규칙이 적힌 문서 CODE OF CONDUCT: 행동규범 스타일 가이드: CONTRIBUTING 안에 속해있는 경우도 있다. 그 외 기여할 프로젝트 찾기 구체적인 목표 찾기: 오픈소스 기여를 통해 어떤 것을 얻을 수 있을지 기술: 어떤 기술을 사용한 프로젝트에 기여할 수 있는지 관심: 꾸준한 기여를 위해 어떤 것에 관심이 있는지 시간 여유: 어느 정도의 시간을 투자할 수 있는지

2022년에 시도해볼 것들 Jest를 사용한 테스트 주도 개발 오픈 소스 기여해보기

컴포넌트, 다시 생각하기 기능적Type 분류: props, hooks 특징적Feature 분류: 스타일, 로직, 전역상태, 리모트 데이터 스키마 리모트 데이터 스키마 ? API 서버에서 내려주는 데이터의 모양 함께 두기 (Co-locate) 비슷한 관심사라면 가까운 곳 함께 두기 id 값만 Props로 전달받아 다른 컴포넌트 간의 의존성 줄이기 데이터를 ID 기반으로 정리하기 데이터 정규화(Nomalization) 데이터 정규화는 normalizr 패키지를 사용해 쉽게 할 수 있다. 왜 나는 React를 사랑하는가 발표자 안희종님 | 플렉스팀 왜 나는 널 사랑하는가 클리어한 멘탈 모델, 작고 단단한 코어 Learn Once, Write AnyWhere (한번 배우면 여러 환경에서 사용할 수 있다는 의미) 꾸준히 성장하는 거대한 커뮤니티 도전적인 과제, 우아한 해결책 Fiber, Hooks, Suspense, … React는 UI 프로그래밍 언어이다? 프로그래밍 언어 리액트 값 R…

시작하며 프로그래머스 과제관에 있는 고양이 사진 검색 사이트 과제를 진행하며 JavaScript 면접 질문으로 자주 만나는 개념에 대해 정리해보았습니다. JavaScript this 기본 바인딩 (전역객체) 일반적으로 는 자바스크립트 환경의 전역 객체입니다. (브라우저의 window 객체) 의 첫번째 동작 방식은 전역 객체(window)를 context 객체로 갖는 것 입니다. 암시적 바인딩 어떤 객체(foo)를 통해 함수가 호출된다면 이때의 의 context 객체는 호출한 어떤 객체(foo)입니다. 첫 번째 코드의 전역 스코프에 위 코드를 추가한다면 의 context 객체는 다시 전역 객체(window)가 됩니다. 전역 스코프에서 생성한 변수는 전역 객체에 등록되기 때문입니다. 명시적 바인딩 메서드는 첫번째 인자로 넘겨주는 것이 context 객체입니다. 이 외에도 , 메서드를 통해 context 객체를 지정해주는 방식을 명시적 바인딩이라고 합니다. new 바인딩 자바스크…

단어 외우기 토익 영단어를 외우면서 원보카 라는 어플을 사용하고 있습니다. 직접 외울 단어들을 등록한 후 정해진 간격으로 알림이 발생되어 단어를 공부할 수 있는 앱입니다. 사용 중 개선되었으면 하는 부분은 크게 두가지 입니다. 1. 단어를 일일이 입력해야하는 프로세스 개선 사진 찍었을 때 자동으로 등록되는게 베스트 아이디어지만, 단어장의 형태가 제각각이기 때문에 조금은 힘들지 않을까?라는 생각이 들었습니다. 이를 보완하기 위한 방법으로는 구글 번역기와 같이 영역을 선택하여 등록할 수 있는 방법입니다. eg. 2. 주기적으로 단어를 공부할 수 있는 알림 개선 현재는 아래 스크린샷과 같이 알림 타입과 주기등을 설정하여 공부할 수 있도록 제공하고 있습니다. 설정한 타입별로 알림이 발생하면 그 알림을 링크 시에 정답을 확인할 수 있는 방법입니다. 저는 대부분의 알림을 워치로 확인하다 보니 워치에서 알림 클릭 시 [사진2] 와 같은 방법으로 풀 수 있으면 좋겠다는 생각을 했습니다. (그…

#시작하며 친구들과 프로젝트를 진행하면서 React Query 를 사용하게 되었습니다. 간단히 찾아보니 api등의 비동기 통신을 도와주는 라이브러리 라는 것으로 파악했습니다. 기존에도 를 사용하여 프로젝트를 진행할 때 여러 비동기 통신을 해보았지만 단순 를 통해 통신하는 것만 경험해보았습니다. 를 살펴보며 왜 써야하는지? 만 사용했을 때와 다른 점은 무엇인지 알아봅시다. 22.02.24 추가 우아한 테크 세미나에서 React Query를 소개한 내용이 있어 추가 정리합니다. 는 웹 서비스 요청에 의한 데이터를 관리하는데 도움을 주는 라이브러리 입니다. 실제 요청은 여전히 또는 를 사용하여 하고, 는 라이프 사이클의 적절한 시간에 요청하는 코드를 호출합니다. 또한 요청에 의한 데이터를 저장해두고, 필요한 때 데이터를 제공합니다. 이 외에도 는 캐싱 및 재요청 같은 수많은 기능을 제공하지만, 가장 큰 장점은 코드를 정리화한다는 것입니다. 사용법 데이터를 가져와야하는 컴포넌트 상위에…

시작하며 토이프로젝트를 진행하며 React Router 에 대해 알게된 점을 기록해두자 ! 정리 키워드는 정확히 일치 되었을 때만 지정된 컴포넌트를 보여주는 속성이다. 만약 키워드 없이 라우터를 지정한다면 , 모두 같은 컴포넌트를 렌더링한다. 와의 차이 키워드만으로는 에러가 발생했을 때의 처리가 어렵다. 아래와 같은 라우터가 있을 때 지정되지 않은 url에 접근할 경우 컴포넌트를 렌더링 하지 않는다는 것을 확인할 수 있다. 이 문제를 해결하기 위한 방법으로 나온 것이 이다. 는 첫번째로 매칭되는 를 가진 컴포넌트를 렌더링 시킨다. 이것이 와 다른점이며, 지정되지 않은 url에 접근 시 컴포넌트를 렌더링 시킨다는 것을 확인할 수 있다. 키워드는 trailing slash가 있을 경우에만 일치한다.. 추가로 슬래시 뒤에 URL이 있는 경우엔 영향을 미치지 않는다. path location.path match 키워드와 함께 사용할 경우 이렇게 작동한다.…

시작하며 니팅 프로젝트를 진행하며 recoil이라는 상태 관리 라이브러리르 처음 사용해보았다. 기존에 구성이 다 잡혀있어서 새로운 상태 추가, 기존에 있던 상태 사용 등의 것들만 해보았는데 프로젝트에서 recoil을 사용하는 방법과 atom, selector에 대한 개념적인 부분이 부족하다고 생각하여 공식문서 를 읽어보았다. Recoil Recoil은 React를 위한 상태관리 라이브러리이다. 작고 React스러운 Recoil은 React처럼 작동하고 생각합니다. 앱에 추가하여 빠르고 유연한 공유되는 상태를 사용해보세요. 데이터 흐름 그래프 파생 데이터와 비동기 쿼리는 순수 함수와 효율적인 구독으로 관리됩니다. 교차하는 앱 관찰 코드 분할을 손상시키지 않고 앱 전체의 모든 상태 변경을 관찰하여 지속성, 라우팅, 시간 이동 디버깅 또는 실행 취소를 구현합니다. 주요 개념 개요 Recoil을 사용하면 atoms(공유 상태)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로…

시작하며 Typescript 3.5 버전에서 이라는 헬퍼타입이 추가되었다. Omit은 빼다 라는 뜻을 가지고 있다. 타입스크립트의 Utility Types 에 보면 Omit 외에도 여러 가지 타입이 있는데, 타입에서 타입을 제거한 새로운 타입을 만드는 타입이다. ()에서 키 속성 집합(문자열 리터럴 또는 문자열 리터럴 조합 -> , )을 선택하여 새로운 유형을 생성한다. 에서 모든 속성을 선택한 다음 (문자열 리터럴 또는 문자열 리터럴의 조합)을 제거하여 새로운 유형을 생성한다. Typescript 키워드는 조건식에 따라 참일 경우 사용할 수 있다. 와 같은 타입이 있다고 했을 때, 타입은 로 추론(infer)할 수 있다. 마치며 타입스크립트를 처음 사용할 때 일일이 선언해줘야한다는 번거로움이 있었는데 여러 헬퍼타입으로 타입을 재사용할 수 있도록 발전하고 있다. 다른 헬퍼타입들도 공부해두면 여러 번 선언되는 것을 막을 수 있을 것 같다. Refer https://www…

unknown prop 경고 오류코드 원인 React 절대 경로 설정 import 구문을 상대 경로로 지정할 경우 파일이 이동되거나 등의 이벤트가 발생했을 때 오류가 발생할 수 있기 때문에 절대 경로로 변경하여 사용한다. 해결방법 tsconfig.json import문 정렬 import문이 길어질 경우 가독성을 위해 우선순위를 설정하여 정렬한다. eslint-plugin-import 패키지의 을 사용한다. 설치 설정

사용 중인 포트 찾고 kill하기 찾기 kill PID는 찾기 명령어를 통해 알아낼 수 있다.

환경세팅 설치 Android 1. 안드로이드 스튜디오 설치 안드로이드 스튜디오 를 설치하고 아래 항목들을 체크해준다. Android SDK Android SDK Platform Android Virtual Device 2. Android SDK 설치 안드로이드 스튜디오 SDK Manager에서 Android 10.0 버전을 체크하여 설치해준다. Inter x86 Atom_64 System Image or Google APIs Inter x86 Atom System Image “SDK Tools” 탭으로 이동하여 아래 두가지 항목을 체크한 후 Apply 해준다. “Android SDK Build-Tools” 29.0.2 “Android SDK Command-line Tools (latest)” 3. 환경 변수 아래 명령어를 통해 환경변수가 잘 지정되었는지 확인한다. 명령어들 상태 확인 아래 명령어를 통해 환경 세팅이 잘되었는지를 확인할 수 있다. [실행 결과] 팁들 실행 오류 …

시작하며 input 요소의 값이 변경될 때 캐치할 수 있는 이벤트는 과 가 있다. 이 둘의 차이점에 대해 알아보자. VS 이벤트는 이벤트와 다르게 가 바뀔 때마다 반드시 일어난다. stackoverflow 답변에 더 자세한 차이점을 설명해주고 있다. : 사용자 인터페이스를 통해 텍스트 내용이 변경될 때 발생한다. (텍스트 내용의 변경사항) : 값을 선택하거나 옵션 선택하자마자, 한글 입력의 경우 한글자가 완성된 뒤 다른 키를 입력(예: 엔터 키)이 일어나야 발생된다. , , 태그에서 사용이 가능하다. : 값의 변경 + 포커스 이동 : 옵션이 변경되었을 때 Ref https://stackoverflow.com/questions/17047497/difference-between-change-and-input-event-for-an-input-element https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/input_event

시작하며 근육맨 이라는 모바일 어플리케이션 프로젝트를 진행하며 개발 언어로 React Native 를 채택했고, 소셜 로그인 기능을 추가하게 되었다. [사전 준비] RN >= 0.60 (RN <= 0.59의 경우 패키지 설치법이 상이할 수 있습니다. 카카오 애플리케이션(프로젝트) 추가 먼저 Kakao Developers 사이트에 접속해 내 애플리케이션 메뉴에서 애플리케이션 추가를 해줍니다. 1-1. 앱 이름, 사업자명 입력 시 간단히 애플리케이션을 생성할 수 있습니다. 2. 기본값으로 카카오 로그인이 비활성화 되어 있기 때문에 애플리케이션 > 카카오 로그인 메뉴에서 활성화 시켜줍니다. 3. 카카오 로그인 활성화 부분 하단에 있는 Redirect URI를 설정해줍니다. 공식 문서에서는 아래 두가지의 규칙을 지켜 Redirect URI를 설정해야 한다고 가이드하고 있습니다. Redirect URI는 HTTP/HTTPS 프로토콜 및 80, 443 포트를 허용합니다. Redirect…

시작하며 매 프로젝트를 구축할 때마다 하는 고민 ‘공통 모듈을 어떻게 관리할까?’. 이번 프로젝트를 진행하면서도 어김없이 이 질문에 대한 고민을 해보았다. 규모가 꽤 있는 Vue 프로젝트를 시작 단계부터 참여했던 경험이 없었기 때문에 여러 아티클을 찾아보았다. [환경] Vue2 + Nuxt.js 플러그인으로 작성하기 Vue 공식문서에서는 플러그인에 대해 설명하고 있다. 공통으로 사용할 js 파일을 이나 선호하는 곳에 만들어준다. 사용은 이렇게 타입스크립트를 사용하지 않는 Nuxt 환경이라면 다음 방법도 가능하다. Nuxt에서 제공하는 함수를 사용하는 건데 예제 코드는 아래를 참고하면 된다. 내가 위 방법대로 시도하다보니 Typescript의 벽에 부딪혔다. 파라미터로 받아오는 Vue에 대한 타입을 지정하라고 하는데 는 절대 쓰기 싫어서 ,, 다른 방법을 찾아보았다. Nuxt Typescript 공식 문서에서 plugins를 등록하는 가이드를 찾을 수 있었고 결과를 미리 말하…

시작하며 팀원분께서 현재 내가 참여하고 있는 신규 프로젝트와 기존 구축되어 있던 프로젝트에 AWS 컨테이너 서비스들을 사용하고 Jenkins를 통해 배포를 진행하는 작업을 진행하셨다. 이에 대한 경험을 공유하기 위한 세미나 내용을 정리해보자! 사전설명 ‘이런게 있구나’ 하고 넘어가도 내용 ELB 보다 Cluster가 우선시 된다. ELB TargetGroup이 3개로 지정되어 있어도, Cluster가 2개로 지정되어 있으면 2개의 인스턴스만 사용된다. EC2 인스턴스 안에는 Amazon Agent, Application 두 개의 컨테이너가 있다. Cluster로 지정되지 않은 spare 컨테이너가 N개 존재한다. spare 컨테이너가 많을 수록 성능이 좋을 것으로 예상 spare 컨테이너에서 배포가 시작되는데 1개에서 시작하는 것보다 2개 이상에서 동시에 배포되는 것이 속도가 빠르기 때문. Jenkins 배포 실행 시 spare 컨테이너에 배포가 시작되고, Cluster로 지정된 …