개발자 퉁이리

Redux-Persist React의 Redux-Persist를 사용하면 새로고침을 해도 데이터가 지속적으로 유지된다. 이 글에선 Redux-Persist를 Redux-Toolkit과 함께 사용하여 알아볼 예정이다. 먼저 프로젝트를 설치하자 CRA 설치 # Redux + Plain JS template npx create-react-app my-app --template redux 기존 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 파일 구조 ├── README.md ├── node_modules ├── package.json ├── public └── src 새로고침을 해도 데이터를 유지하는 것을 적용하기 전에 먼저 현재 상태를..

https://www.acmicpc.net/problem/21610 21610번: 마법사 상어와 비바라기 마법사 상어는 파이어볼, 토네이도, 파이어스톰, 물복사버그 마법을 할 수 있다. 오늘 새로 배운 마법은 비바라기이다. 비바라기를 시전하면 하늘에 비구름을 만들 수 있다. 오늘은 비바라기 www.acmicpc.net ⊙ 문제 ⊙ 입력 ⊙ 출력 ⊙ 예제 입출력 ⊙ 알고리즘 분류 구현 시뮬레이션 ⊙ 문제 접근 과정 먼저 방향을 정의해준다. 그리고 큐에 구름 좌표를 넣고 반복문을 돌려준다. 구름 이동 후 1 증가 후 대각선을 체킹! 존재한다면 카운팅 후 더해준다. 마지막으로 물 양이 2 이상인지 체킹! 존재한다면 2 감소 후 큐에 추가. ⊙ 문제 풀이 import sys from collections imp..

CI/CD CI/CD는 CI와 CD를 합친 용어로, 지속적인 통합과 지속적인 배포를 뜻한다. CI (Continuous Integration) CI는 Continuous Integration의 약자로 지속적인 통합이라는 의미를 가진다. 개발이 진행됨에 따라 소스 코드에 대해 업데이트가 생기면 지속적으로 통합을 해준다. 지속적으로 코드를 왜 통합하나요? 해당 프로젝트에 개발자가 여러 명 일시 코드 충돌이 일어날 수도 있다. CI를 진행하게 되면 이러한 문제점을 해결할 수 있다. CD (Continuous Deployment) CD는 Continuous Deployment의 약자로 지속적인 배포라는 의미를 가진다. CI 빌드를 통과한 소스 코드에 대해 서버 배포가 가능하다면 진행된다. 지속적으로 배포를 왜 ..

타입스크립트 타입스크립트는 자바스크립트에 타입이 추가된 언어다. 타입스크립트는 자바스크립트의 슈퍼셋으로 ECMA 스크립트의 최신 표준을 지원한다. 타입스크립트를 사용하는 가장 큰 이유로는 강력한 타입을 제공하는 것도 있지만, 컴파일 시간에 검사를 통해 오류를 검출함으로써 개발 시간을 줄일 수 있다. 그러면 TS로 HelloWorld를 출력해보자. TypeScript 컴파일러 설치 VSC를 사용한다면 설치하지 않아도 된다. VSC는 TS 언어를 지원한다. 그렇지만 TS를 JS로 변환하고 싶다면 다음과 같이 설치를 진행하자. npm install -g typescript HelloWorld.ts 파일 생성 코드 작성 HelloWorld.ts 파일에 아래 코드를 작성해준다. let message: string..

WEBPACK 웹팩은 모듈 번들러다. 모듈(module)이란? 모듈은 특정 기능을 가지는 작은 코드 단위를 말한다. const sum = (a,b) => a+b; 번들러(bundler)란? 기술의 발전으로 복잡한 코드도 많이 개발되어 자연스럽게 코드 줄은 기하급수적으로 늘기 시작했다. 코드가 길어짐에 따라 여러 문제가 발생하였다. 코드 양이 많아 로딩이 느려짐 중복되는 코드 이름 (에러 발생) 스코프 문제 번들러는 여러 개의 파일을 하나로 묶어주는 역할을 수행함으로써 위 문제들을 해결해준다. 여러 개의 번들러가 존재하고 그중 하나가 웹팩(webpack)이다. 다시 한번 정리하자면 웹팩은 모듈 번들러다. 🤨 모듈 번들러인 웹팩은 장점만 존재할까? 웹팩(webpack)의 단점으로는 러닝 커브가 높다. 또한 ..

BABEL BABEL은 ES6+ 코드를 이전 JavaScript 엔진에서 실행할 수 있게 도와주는 컴파일러다. ❓ BABEL이 필요한 이유 현재 JavaScript는 브라우저에서 돌아가는데 너무 빠르게 바뀌고 있다. 그래서 최신 브라우저가 그 속도를 못 따라가는 경우가 종종 발생한다. babel은 이러한 문제를 해결해준다. 최신 JavaScript 언어를 해석하여 이전 버전을 가진 브라우저에서도 돌아갈 수 있게 문법을 변경해준다. 🔧 BABEL 빌드 진행 과정 파싱 (Parsing) 변환 (Transforming) 출력 (Printing) 파싱 -> 변환 -> 출력 과정을 거쳐 BABEL 빌드가 이루어진다. BABEL 빌드에서 가장 중요한 부분은 변환 과정이다. 변환은 플러그인을 통해 이루어진다. 🎈 플..

크로스 브라우징 크로스 브라우징은 표준 웹 기술을 사용하여 다양한 브라우저에서 작동 가능한지를 말한다. Chrome부터 시작해서 Edge, Firefox, IE Safari 등 브라우저는 굉장히 다양하다. 브라우저가 다양한만큼 렌더링 엔진도 그만큼 다양하다. 브라우저마다 렌더링 엔진이 다르기 때문이다. 🤨 렌더링 엔진 렌더링 엔진은 브라우저의 핵심이 되는 소프트웨어 구성 요소로, 요청한 데이터를 시각적으로 변환시켜준다. 📗 다양한 브라우저에서 해당 기술이 작동되는지 확인하는 방법 모질라(MDN) https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies ..

https://www.acmicpc.net/problem/4948 4948번: 베르트랑 공준 베르트랑 공준은 임의의 자연수 n에 대하여, n보다 크고, 2n보다 작거나 같은 소수는 적어도 하나 존재한다는 내용을 담고 있다. 이 명제는 조제프 베르트랑이 1845년에 추측했고, 파프누티 체비쇼 www.acmicpc.net ⊙ 문제 ⊙ 입력 ⊙ 출력 ⊙ 예제 입출력 ⊙ 알고리즘 분류 수학 정수론 소수 판정 에라토스테네스의 체 ⊙ 문제 접근 과정 시간 초과가 괴롭혔던 문제. 해결 방법은 미리 소수 판별을 하면 된다. ❌ import sys input = sys.stdin.readline inputList = list() def isPrime(n): if n == 1: return False for i in ra..

타이머 함수 타이머 함수는 일정 시간이 지난 후 특정 코드를 실행해주는 함수를 말한다. 타이머 함수 종류 setTimeout setInterval setTimeout setTimeout은 코드를 설정한 시간이 지난 후 실행시켜준다. 문법 setTimeout( 코드, 지연 시간, 함수에 전달할 인수 ); setTimeout을 사용하여 5초 뒤에 console log에 특정 문장을 찍어보자. 예제 코드 1 setTimeout(function () { console.log('개발자 퉁이리'); }, 5000); 예제 코드 2 setTimeout(() => {console.log('개발자 퉁이리')}, 5000); 여기서 지연시간은 밀리세컨드 단위로 설정, 만약 5초로 설정하고 싶다면 지연시간은 5000. 5초..

https://www.acmicpc.net/problem/2309 2309번: 일곱 난쟁이 아홉 개의 줄에 걸쳐 난쟁이들의 키가 주어진다. 주어지는 키는 100을 넘지 않는 자연수이며, 아홉 난쟁이의 키는 모두 다르며, 가능한 정답이 여러 가지인 경우에는 아무거나 출력한다. www.acmicpc.net ⊙ 문제 ⊙ 입력 ⊙ 출력 ⊙ 예제 입출력 ⊙ 알고리즘 분류 브루트포스 알고리즘 정렬 ⊙ 문제 접근 과정 브론즈 2 맞나..? (더 높여도 될 듯!) 투 포인터로 풀었다. 우선 list에 9개의 값을 저장해주고 정렬한다. 그리고 그 값들을 전부 더해주고 100을 빼준 값을 변수 searchNum에 저장해준다. 마지막으로 투 포인터 알고리즘을 사용해 list에서 두 개를 뽑아 더한 값과 searchNum의 ..