uni's code uni's code

1. i18n 자동화 프로세스 도입 배경 서비스에 유저에 해당하는 국가의 언어로 세팅하거나, 그 국가에 맞는 sw를 개발하는 과정을 i18n이라고 칭한다. 서비스에서 I18n을 성공적으로 이끌기 위한 가장 큰 요소는 번역이라고 할 수 있다. 이때, 번역을 서비스에 입히기 위해서는 아래와 같은 불편한 절차가 진행될 것이다. 1) 번역 담당자는 서비스에 번역이 필요한 언어를 선정하고, 서비스에서 번역이 필요한 부분을 정리하여 번역가들에게 번역을 넘겨야 한다. 2) 그 이후, 전달 받은 번역을 개발자에게 전달하여 서비스에 적용하는 작업을 해야 한다. 이 과정에서 아래의 단점이 있다. 첫번째로, 번역가에게 필요한 부분을 넘기는 과정에서 필요한 부분을 정리하고, 메일 등으로 전달해야 하는 번거로운 의사소통 작업이..

1. i18n이란? 글로벌 유저를 대상으로 하는 서비스일 경우, 글로벌 유저가 자국어가 아닐 경우 페이지를 이탈할 확률은 높다. 그래서, 글로벌 유저를 유치하고자 하는 서비스들은, 각 유저에 맞게 언어를 다르게 보여주며 유저 친화적인 경험을 제공하는 것은 필수적이다. 이렇게 서비스에 유저에 해당하는 국가의 언어로 세팅하거나, 해당 국가에 맞는 sw를 개발하는 과정을 i18n이라고 칭한다. i18n은 interationalization의 약자로 i와 n사이의 18개의 알파벳이 있다고 하여 i18n이라고 부른다. 2. i18n 의 범위 대표적인 글로벌 사이트인 페이스북, 틱톡, 유튜브 등에 접속해보면, 자동으로 유저의 컴퓨터 브라우저 환경 혹은 접속한 국가에 맞는 언어로 설정되어 있는 것을 확인할 수 있다...

1. 설치 yarn add next-i18next npm install next-i18next 2. 사용법 (1) 루트 디렉토리에 next-18next.config.js 생성 module.exports = { i18n: { defaultLocale: "en", locales: ["en", "ko"], // 지원하는 locale 목록 }, }; (2) public 폴더 → locales 폴더 → 각 언어 코드 폴더 (en, ko) → common.json next.js 에서 i18n을 지원하고 있기 때문에, public/locales 라는 지정된 폴더 위치에 생성하면 됨. (3) next.config.js 에 next-18next.config.js 추가 /** @type {import('next').Nex..

1. methods 종류 get 리소스 조회! body 사용 권장 x (지원하지 않은 곳 많음) query_params 이용 post 메세지 바디를 통해 서버로 요청 데이터 전달 → 요청 데이터를 처리(ex -등록/프로세스 상태변경 ... ) 요청 data를 어떻게 처리할지 리소스마다 따로 정의해야함 !! 보통 새 리소스 생성 / 요청 데이터 처리 / 다른 메소드로 처리하기 애매한 경우 put 리소스가 있으면 완전히 대체!!(덮어버리기~) post와 차이점은 put은 해당 리소스의 위치를 알고있다! ex) members/100 patch 리소스의 부분 변경~ put은 완전히 대체임. delete 리소스 제거 head get에서 body가 안오는 것 options 2. Http method 속성 안전 호출..

1. HTTP란? = hyper text transfer protocol 거의 모든 형태의 데이터 전송이 가능 1) http 버전 1.1 - 가장 기본, 많이 쓰이는 버전 , TCP 2 - 성능 개선, TCP 3 - 성능 개선, UDP 2) http 특징 클라이언트 / 서버 구조 스테이스리스 비연결성 Http 메세지 구조 단순함, 확장 가능 2.클라이언트 서버 구조 클라이언트에서 request 서버에서 response 3.스테이스리스 프로토콜(무상태 프로토콜) 서버가 클라이언트 상태를 보존하지 않음!! 장점) 서버 확장 가능(스케일 아웃) → ex) 갑자기 클라이언트에서 요청이 많을 시, 서버 확장 가능 단점) 클라이언트에서 데이터 더 많이 전송해야함 다만, 로그인 같은 경우, 로그인 한 상태를 서버에 ..

1. URI(Uniform Resource Identifier) URI는 URL과 URN으로 구분된다. 보통 URI = URL과 비슷한 의미. URL: Locator URN : name URL 분석 scheme://[userInfo@]host[:port][/path][?query][#fragment] scheme 프로토콜 - ex) https, http userInfo url에 사용자 정보를 포함해 인증, 거의 사용x host host명 - ex) www.google.com 도메인 명 or ip주소 port port 번호 - ex) https: 443, http: 80 path 리소스 경로 query params 2. 웹 브라우저 요청 흐름 URL을 통해, host명으로, DNS 조회하여 IP주소 확인 ..

1. 인터넷 통신 클라이언트와 서버 단에서 데이터를 주고 받는 과정 2. IP (Internet Protocol) ip 주소를 클라이언트와 서버단에 각각 부여하여, 해당 주소로 data를 전달한다. 이때, data는 패킷이라는 단위로 전달. ip 패킷에는 출발지 ip, 목적지 ip 등등에 대한 정보가 담겨있음. IP 프로토콜의 한계 비연결성 패킷을 받을 대상이, 인터넷이 연결이 안되어있거나, 받을 수 없을 때도 패킷을 전송한다. 비신뢰성 패킷이 도중에 실종될 수있다. 패킷이 순서대로 가지 않을 수 있다. 프로그램 구분 하나의 IP주소에, 여러 어플리케이션 사용시, 어떤 어플리케이션에 패킷을 보낼지 구분이 어렵다. 3. TCP (Transmission Control Protocol) IP 프로토콜의 문제점..

1. 사용 이유 결론은, React.memo, useMemo와 useCallback은 react의 성능을 향상(불필요한 렌더링 또는 변수, 함수 호출 방지)이 목적입니다. * React.memo는 HOC이고, useMemo와 useCallback은 hook입니다. 컴포넌트가 렌더링이 되면, 선언된 함수형 컴포넌트들 안에 있던 변수, 함수도 다시 정의되고, 사용됩니다. 또한, 컴포넌트는 자신의 state나 부모 컴포넌트로 부터 받은 props가 변경, 혹은 부모 컴포넌트가 리렌더링될 때마다 리렌더링됩니다. 그래서 재렌더링의 작업이 많아질 경우, 불필요한 함수 혹은 변수가 호출될 수 있습니다. → 특정 컴포넌트, 함수와 변수(값)을 메모이제이션하게 만들고 싶을 경우, React.memo, useMemo와 u..