최신 글
-
SWR 활용하기 with React, TypeScript
** 본 게시글은 ZeroCho의 Sleact 강의를 학습하며 정리한 내용을 포함하고 있습니다.SWR 데이터 가져오기를 위한 React Hooks – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.swr.vercel.appStale-While-Revalidate의 약자로, React 컴포넌트에서 사용할 수 있는 훅 형태의 SWR 라이브러리다.간편하게 데이터를 가져오고, 캐시하고, 최신 데이터를 가져온다.설치$ npm..
2024.11.29
-
[Lv.2] 전력망을 둘로 나누기 - JavaScript
프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제n개의 송전탑이 전선을 통해 하나의 트리 형태로 연결되어 있습니다. 당신은 이 전선들 중 하나를 끊어서 현재의 전력망 네트워크를 2개로 분할하려고 합니다. 이때, 두 전력망이 갖게 되는 송전탑의 개수를 최대한 비슷하게 맞추고자 합니다.송전탑의 개수 n, 그리고 전선 정보 wires가 매개변수로 주어집니다. 전선들 중 하나를 끊어서 송전탑 개수가 가능한 비슷하도록 두 전력망으로 나누었을 때, 두 전력망이 가지고 있는 송전탑 개수의 차이(절대값)를 return 하도록 solution 함수를 완성해주세요. 풀이fu..
2024.09.07
-
[Lv.2] 석유 시추 - JavaScript
문제 https://school.programmers.co.kr/learn/courses/30/lessons/250136 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 각 영역에 대해 너비 우선 탐색을 하며 석유가 있는 영역에 oilId를 부여한다. oilId를 key로, 영역의 크기를 value로 하는 자료를 저장한다. 이차원 배열에 oilId를 값으로 갖는 석유 지도(?)를 만든다. 세로로 한 줄씩 순회하며 마주치는 석유 영역의 크기를 합산한다. 단, 이전에 합산했던 석유 영역은 건너뛰어야 한다. 코드 function solution(land) ..
2024.01.04
-
[React] i18n으로 다국어 지원하기 (i18next, react-i18next)
프로젝트에서 다국어 지원 기능을 적용하게 되었다. 나는 다른 분이 만들어 놓은 것을 적용만 했지만 해당 라이브러리를 어떻게 사용하는지 궁금해서 알아보기로 했다. 처음에는 브라우저에서 지원하는 한영변환인줄 알았는데, 그냥 서비스 안에서 따로 구현된 것이었음,, 그래서 제공될 다국어도 json으로 직접 작성해야 한다! 프로젝트에서는 라이브러리 i18n 을 사용했다. Introduction - react-i18next documentation Hello {{name}} , you have {{count}} unread message(s). Go to messages. react.i18next.com i18next 라는 라이브러리와 이를 react에서 아주 쉽게 사용하도록 만들어진 react-i18next를 설..
2023.10.22
-
React를 위한 상태관리 라이브러리 - Recoil
https://recoiljs.org/ko/docs/introduction/installation 설치 | Recoil NPM recoiljs.org Recoil? 2020년에 Facebook에서 발표한, React 전용 상태관리 라이브러리이다. Recoil을 통한 상태관리는 아주 간결하다는 장점이 있다. Redux의 경우 Flux 패턴을 사용하여 안정적으로 상태관리가 가능하지만, React 전용 라이브러리가 아니다. 초기 세팅이 요구된다. 비동기 데이터를 사용하려면 추가적인 라이브러리 설치가 필요하다. 많은 양의 **보일러플레이트 코드를 작성해야 한다. 는 단점을 가지고 있기도 하다. Recoil은 이러한 단점을 보완한다. ** Boilerplate Code : 변화 없이 여러 군데에서 반복되는 코드 ..
2023.09.12
-
[모던 자바스크립트] 38장 브라우저의 렌더링 과정
** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링(출력)하는지 살펴보자. 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 응답된 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 ..
2023.08.06
-
[모던 자바스크립트] 26장 ES6 함수의 추가 기능
** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 26.1 함수의 구분 ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. ES6 이전의 함수는 다음과 같이 활용될 수 있었다. 자바스크립트의 함수는 일반적인 함수로서 호출할 수 있다. new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출할 수 있다. 객체에 바인딩되어 메서드로서 호출할 수도 있다. ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있다. var foo = function () { return 1; }; // 일반적인 함수로서 호출 foo(); // -> 1 // 생성자 함수로서 호출 new foo(); // -> foo {} // 메..
2023.07.25
-
[모던 자바스크립트] 16장 프로퍼티 어트리뷰트
** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. 16.1 내부 슬롯과 내부 메서드 앞으로 프로퍼티 어트리뷰트를 이해하기 위해서는 내부 슬롯과 내부 메서드의 개념에 대해 알아야 한다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호( [[…]] )로 감싼 이름들이 내부 슬롯과 내부 메서드다. 조금 쉽게 이해해보자면 ECMAScript 문서에서 자바스크립트 내부의 동작을 설명하기 위한 가상 메서드이다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 ..
2023.07.24
-
[모던 자바스크립트] 15장 let, const 키워드와 블록 레벨 스코프
** 본 글은 모던 자바스크립트 Deep Dive 도서 내용을 정리한 것임을 밝힙니다. ES5 까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1 var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 15.1.1 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화 문이 있는 변수 선언은 var 키워드가 없는 것 처럼 동작한다. var x = 100; // 초기화 문이 없는 변수 선언문은 무시한다. var y; consol..
2023.07.24
-
[Network] HTTP 버전 별 차이점 (0.9 / 1.0 / 1.1 / 2.0)
HTTP? WWW 상에서 정보를 주고 받을 수 있는 프로토콜이다. 클라이언트가 HTTP를 통해 서버로 정보를 요청한다. 서버는 요청에 필요한 정보를 클라이언트에 전달한다. HTTP 1.1이 모든것의 기반이 된다. HTTP 0.9 원라인 프로토콜이다. 요청 메서드가 GET만 존재하기 때문이다. HTML 파일 유형만 전송할 수 있다. /* 요청 */ GET /page.html /* 응답 */ A very simple HTML page HTTP 1.0 확장성 있게 진화되었다. 헤더 개념이 도입되어 메타 데이터를 주고 받을 수 있게 되었다. 버전 정보와 요청 메서드가 함께 전송된다. 상태코드가 응답의 시작에 붙어 전송된다. HTML 이외에 Content-Type의 데이터를 전송할 수 있다. /* 요청 */ GE..
2023.06.23
-
[Lv.2] 메뉴 리뉴얼 - JavaScript (feat. combination)
문제 https://school.programmers.co.kr/learn/courses/30/lessons/72411 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 순열 공부하면서 조합은 공부 안했던 사람,,, JS로 조합! 공부해자,, 주어진 코스별 가능한 조합을 찾는다. 그 중에서 2번 이상 주문된 조합을 찾는다. 또 그중에서 가장 많이 주문된 경우를 찾는다.. 그냥 문제에서 하라는대로 한다... 조합 구하기! // 조합을 구하는 함수 const combination = (arr, n) => { // 배열의 길이가 1일 때는 자기 자신을 담은 ..
2023.06.11
-
[Network] TCP와 UDP의 차이점
전송 계층은 송신자와 수신자 사이의 데이터 전달을 담당하는 계층이다. 그리고 그 데이터를 보내기 위해 사용하는 프로토콜에는 TCP와 UDP가 있다. 프로토콜이란? 더보기 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식과 규칙의 체계를 말한다. ** 즉, 통신 규약 및 약속!! 기본요소) 1. 구문 : 전송하고자 하는 데이터의 혁식, 부호화, 신호 레벨 등을 규정 2. 의미 : 두 기기간의 효율적이고 정확한 정보 전송을 위한 사항과 오류 관리를 위한 제어 정보 규정 3. 시간 : 두 기기 간의 통신 속도, 메시시 순서 제어 등을 규정 TCP (Transmission Control Protocol) : 신뢰성 있는 데이터 통신을 가능하게 해주는 프로토콜 특징 설명 연결형 서비스 클라이언트가 연결..
2023.06.06
Project
-
[React] react-Intersection-Observer 라이브러리를 이용해 무한스크롤 구현하기
InterSection Observer? => 브라우저 Viewport와 설정한 요소의 교차점을 관찰하여 요소가 viewport에 포함되는지 구별하는 기능 제공 페이지 스크롤 시 이미지를 Lazy-Loading 할 때 무한 스크롤을 통해 새로운 컨텐츠를 불러올 때 광고의 수익을 계산하기 위해 광고의 가시성을 참고할 떄 사용자가 결과를 볼 것인지에 따라 애니메이션 동작 여부를 결정할 때 무한 스크롤 사용자가 특정한 영역 하단에 도달했을 때, API가 호출되며 콘텐츠가 계속 로드되는 방식 -> 모든 데이터를 불러와 뿌려주는 방식은 렌더링 시간이 많이 소요되니까 ㅜ 바닥에 닿으면 불러오자! 구글에 정보가 정말 많아서 라이브러리 없이도 구현 해보면 좋을 것 같아,, 하지만,, 나는 당장 시간이 좀 없기 때무네,..
2023.02.07
-
[React] axios로 다중 파일 전송 - 이미지, JSON
나는,, 상품의 정보를 등록할 때, JSON(제목, 설명, 현재 상태,, 등), 과 상품의 이미지를 함께 post로 보내고 싶었다! -> 파일과 JSON을 같이 보내줘야 한다는 사실이 나는 좀,,, 어려웠다,, FormData ? AJAX로 form 전송을 가능하게 하는 객체! => 업로드한 파일을 서버에게 전송할 수 있도록 하는 객체 이미지 파일을 서버에 업로드하기 위해서는 FormData 객체를 사용해야 한다. -> key 값과 value의 쌍의 형태! (딕셔너리 넊김) // 사용하기 let formData = new FormData(); formData.append("key","value"); // 키-값 쌍으로 formData에 추가한다. 여러개도 추가할 수 있음 formData.append("k..
2023.02.07
-
[React] 타이머 기능 구현하기 - setInterval
[공식문서] https://ko.reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often Hook 자주 묻는 질문 – React A JavaScript library for building user interfaces ko.reactjs.org setInterval : 매 시간 동안 브라우저와 통신하는 함수 => 일정한 간격으로 setInterval 내의 코드를 반복할 수 있다. => 매 초마다 시간이 바뀌는 화면을 만들어 낼 수 있음! setInterval(() => { // 실행할 코드 }, 시간 간격) 마운트 될 때 타이머를 바로 실행 시키도록 작성해보았다. count가 0이 되었을 때 실행할 코드..
2023.02.05
-
[React] 실시간 채팅 구현하기 - STOMP
소켓 프록시 수동 설정하기 https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually Proxying API Requests in Development | Create React App Note: this feature is available with react-scripts@0.2.3 and higher. create-react-app.dev http-proxy-middleware 설치하기 $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware // ws 프로토콜을 사용해야하니 설정해주는..
2023.02.03
-
[React] swiper로 이미지 슬라이드 구현하기
[공식문서] https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 설치하기 $ npm install swiper $ yarn add swiper swiper를 사용하고자 하는 페이지에서 import // swiper - 이미지 슬라이더 import { Swiper, SwiperSlide } from "swiper/react"; import 'swiper/css'; import 'swiper/css/naviga..
2023.01.28
-
[React] 카카오 로그인
카카오 로그인 과정 1. 카카오에 인가 코드 발급 요청 2. 인가 코드를 백엔드에 알려줌 3. 로그인 처리를 한 후에 jwt 토큰 발급 4. 토큰을 로컬 스토리지에 저장 kakao developers를 참고해서 공부하자! https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 애플리케이션 등록 1. 애플리케이션 추가하기 공식문서 > 내 애플리케이션 > 애플리케이션 추가하기 2. 웹 플랫폼 추가하기 내 애플리케이션 > 앱 설정 > 플랫폼으로 들어가서 Web 선택 도메인을 입력해야 하는데 우선,, ..
2023.01.26
-
[React] React에서 Firebase 사용하기 - Google 로그인
Firebase의 장점 1. HTML CSS JS만으로 서비스 제작이 가능 2. DB 콘솔을 다루기 쉬움 3. 프로젝트가 커지면 스케일 업을 자동으로 해줌 4. DB 데이러를 알아서 리얼타임으로 싱크 Firebase로 google 로그인 하기! 1. 원하는 경로에 React 프로젝트 생성 $ yarn create react-app '프로젝트명' 2. Firebase로 이동해서 프로젝트 생성 https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 프로젝트를 생성하면 아래의 사진과 같은 화면이 나온다. 3. 생성된 React 프로젝..
2023.01.25
