[Network] HTTP 네트워크 에러 코드 종류
2023. 5. 15. 22:10
Basic/etc
네트워크 에러는 다양한 종류가 있다. 개발 시, 일반적으로 발생하는 네트워크 에러에 대해 나열하면 이렇다. 1. 400 Bad Request (잘못된 요청): 서버가 요청을 이해할 수 없거나 유효하지 않은 요청 2. 401 Unauthorized (인증되지 않음): 요청한 리소스에 대한 인증이 필요하며, 인증 정보가 제공되지 않았거나 유효하지 않음 3. 403 Forbidden (접근 금지): 요청한 리소스에 대한 액세스가 거부. 클라이언트는 추가적인 권한이 필요 4. 404 Not Found (찾을 수 없음): 요청한 리소스가 서버에서 찾을 수 없음 5. 408 Request Timeout (요청 시간 초과): 서버가 요청을 처리하는 데에 너무 많은 시간이 소요되어 요청이 중단 6. 500 Intern..
[React] 명령형 코드가 아닌 선언형 코드로 작성하기
2023. 5. 11. 19:25
Front-end/Web
React는 선언형 코드를 지향한다. React는 선언형 프로그래밍 패러다임에 기반을 두고 있으며, UI를 선언적인 방식으로 정의한다. React 컴포넌트는 상태와 프로퍼티를 입력값으로 받아들이고, 이를 기반으로 UI를 렌더링한다. 상태나 프로퍼티 값이 변경될 때마다 React는 자동으로 UI를 다시 렌더링하여 새로운 값으로 업데이트한다. 다음 잘못된 코드의 예시를 보며, 이해해보자. import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { const button = document.querySelector('#increment')..
데이터 캐싱으로 웹소켓 성능 개선하기 (불필요한 네트워크 트래픽 없애기)
2023. 5. 10. 19:20
Basic/JavaScript
이전에 받은 데이터를 캐싱하여, 같은 데이터를 여러 번 받을 필요가 없도록 하여 웹소켓 로직의 성능을 개선할 수 있다. 객체를 이용하여 해당 기능을 구현해보도록 하자 class WebSocketManager { constructor() { // WebSocket 연결 this.socket = new WebSocket("ws://localhost:8080"); // 데이터를 캐싱하기 위한 객체 this.dataCache = {}; // WebSocket에서 데이터가 도착하면 호출되는 콜백 함수, 데이터 캐싱 this.socket.onmessage = (event) => { const data = JSON.parse(event.data); this.dataCache[data.id] = data; }; } /..
[JavaScript] 세미콜론 자동 삽입(Automatic Semicolon Insertion, ASI) 주의하기 - 코드 컨벤션
2023. 5. 9. 20:00
Basic/JavaScript
세미콜론 자동 삽입(ASI, Automatic Semicolon Insertion)은 줄바꿈이 자동으로 세미콜론으로 대체되는 것을 의미한다. 때로 의도하지 않은 동작을 초래할 수 있기 때문에 코드를 작성할 때 주의해야 한다. 특히, 함수 이름과 중괄호를 다른 줄에 작성할 경우, JavaScript에서는 이를 한 줄로 인식하여 세미콜론이 삽입되어 함수가 올바르게 작동하지 않을 수 있다. 다음 예시 코드를 보자 function someFunction() { // 코드 블록 } 위 코드에서는 함수 이름과 중괄호가 다른 줄에 작성되어 있다. 이 경우, 세미콜론을 자동으로 삽입하여 다음과 같이 해석한다. function someFunction(); { // 코드 블록 } 이 경우, someFunction은 함수 ..
[React Native] 개발 모드, 배포 모드 설정하기 (RN, Native Android, Native iOS)
2023. 5. 9. 19:30
Front-end/App
깃 브랜치를 분리하여 개발(develop)과 배포(production) 버전의 코드를 나눌 수도 있겠지만, 제공하는 전처리기 변수를 활용하여 분기 처리하는 식으로 관리를 할 수 있다. React Native 코드단에서 뿐만 아니라, 네이티브 코드단에서도 해야하는 경우도 종종 있는데, 간단하니 익혀 활용하면 좋을 듯 하다. 1. React Native React Native에서는 "__DEV__" 전처리기 변수를 사용하여 개발 모드와 릴리즈 모드를 구분한다. "__DEV__" 변수는 React Native에서 내장되어 있는 전역 변수로, 개발 모드에서는 true로 정의되고, 릴리즈 모드에서는 false로 정의된다. if (__DEV__) { // 개발 모드에서 실행되는 코드 console.log('This..
[JavaScript] 익명함수와 화살표 함수 이해하기
2023. 5. 9. 00:11
Basic/JavaScript
2015년, 자바스크립트 ES6 버전이 디벨롭되면서 화살표 함수(arrow function)라는 문법이 생겨났고, 이 화살표 함수를 사용함으로 함수 코드의 작성 시의 간결함과 가독성을 높여주었다. 하지만 화살표 함수가 기존의 함수 작성 문법인 익명 함수(anonymous function)을 완전히 대체하지 못하는데, ES6 이상의 모던 자바스크립트로 학습을 시작한 학습자, 또는 심지어 많은 주니어 개발자들이 이를 모르고 있는 경우가 많아, 이 둘의 특징과 차이점을 정리해보았다. 1. 구문 익명 함수는 'function' 키워드를 사용하여 함수를 작성한다. 함수 이름이 없으며, 변수에 할당하거나 다른 함수의 매개 변수로 전달할 수 있다. const anonymous = function() { // 함수 내..
[JavaScript] BigNumber.js를 활용하여 정확한 계산, 큰 수 및 작은 수 다루기
2023. 5. 8. 12:13
Basic/JavaScript
JavaScript에서 숫자는 내장 데이터 유형으로 Number를 사용한다. 그러나 Number는 64비트 부동 소수점 수로 구현되어 있으며, 이는 매우 큰 또는 매우 작은 숫자를 처리하는 데 제한이 있다. 매우 큰 또는 매우 작은 숫자를 '정확'하게 다룰 필요가 있는 경우, BigNumber와 같은 라이브러리를 사용하는 것이 좋다. 어떤 이유로 제한이 있을까? JavaScript에서 숫자는 64비트 부동 소수점 수로 구현되어 있다. 이는 64비트로 이루어진 이진수로 부호 비트, 지수 비트, 가수 비트로 구성되어 있다. 이진수로 숫자를 표현하므로, 숫자는 2진수로 저장되고, 이진수 연산으로 처리된다. 이진수는 0과 1로만 이루어져 있으므로, 숫자를 표현하는 데 있어서 제한이 있다. 가수 비트에 저장할 수..
[React Native] rsync error ~ Command PhaseScriptExecution failed with a nonzero exit code 에러 해결법
2023. 5. 4. 18:16
Front-end/App
외부 라이브러리 설치 시, 해당 라이브러리가 Pods의 소스코드를 rsync를 통해 프로젝트를 복제할 때 rsync 명령어 자체에서 실패하여 생기는 문제이다. 에러 문구는 아래와 같다. sent 350748 bytes received 302 bytes 702100.00 bytes/sec total size is 412121 speedup is 1.17 rsync error: some files could not be transferred (code 23) at /AppleInternal/Library/BuildRoots/a0876c02-1788-11ed-b9c4-96898e02b808/Library/Caches/com.apple.xbs/Sources/rsync/rsync/main.c(996) [sende..
[JavaScript] 객체 변환하기
2023. 5. 3. 14:57
Basic/JavaScript
obj라는 객체가 있다고 가정하자. const obj = { a: 1, b: 2, c: 3 }; 위의 객체의 key값을 소문자에서 대문자, value값을 2배로 변환하여 새로운 객체로 변환하는 방법을 알아보자. 1. 라이브러리없이 구현 function mapObject(obj, fn) { const newObj = {}; for (const [key, value] of Object.entries(obj)) { const [newKey, newValue] = fn(key, value); newObj[newKey] = newValue; } return newObj; } const obj = { a: 1, b: 2, c: 3 }; const newObj = mapObject(obj, (key, value) =..