분류 전체보기
-
[백준/알고리즘기초1] 자료구조1. 10828번 스택(JavaScript)🧠𝗔𝗹𝗴𝗼𝗿𝗶𝘁𝗵𝗺/💛 백준 2021. 10. 10. 10:42
문제 https://www.acmicpc.net/problem/10828 10828번: 스택 첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 www.acmicpc.net 첫번째 풀이 : 시간초과 코드는 아래와 같았다. 철저히 .. 문제를 코드로 구현한 .. 수준..ㅋ const fs = require('fs'); const input = fs.readFileSync("/dev/stdin").toString().trim().split('\n'); const N = parseInt(input.shift(), 10); let stack = [];..
-
[위클리챌린지] 8주차 최소직사각형(JavaScript)🧠𝗔𝗹𝗴𝗼𝗿𝗶𝘁𝗵𝗺/💙프로그래머스 2021. 9. 29. 11:00
문제 https://programmers.co.kr/learn/courses/30/lessons/86491 풀이 function solution(sizes) { let answer = 0; // 두 변중 긴 것 -> 가로 // 두 변중 짧은 것 -> 세로 let width = 0; let height = 0; for (let i = 0; i < sizes.length; i++) { width = Math.max(width, Math.max(sizes[i][0], sizes[i][1])); height = Math.max(height, Math.min(sizes[i][0], sizes[i][1])); } answer = width * height; return answer; }
-
Local Storage 사용하기🍓𝗪𝗲𝗯/𝖩𝖺𝗏𝖺𝖲𝖼𝗋𝗂𝗉𝗍 2021. 9. 23. 07:00
Local Storage란 개발자도구 Application항목에 Local Storage 있음. 브라우저 청소를 하지 않는 이상 브라우저 닫아도 저장 가능(텍스트 5MB) sessionStorage는 휘발성이다. 문법 1. localStorage.setItem('name', 'kim') 자료저장 Object형으로 자료이름, 자료값 저장 localStorage.setItem('obj', {name: 'kim'}) Object를 그냥 문자로 바꾸면 깨진다. localStorage.setItem(arr,[1, 2, 3]) array를 저장했지만 출력할 때 1, 2, 3이 나온다. 즉, 자료형이 깨진다. array와 Object 자료형 손실없이 저장하려면 글자인척하면서 저장하면된다. " " 를 사용한다. => ..
-
[React] PWA란?🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 21:55
PWA 웹사이트를 모바일앱처럼 설치해서 쓸 수 있음 PWA 장점 - 설치 마케팅 비용 적음 (앱스토어 마케팅 X) - html , css ,js만으로 앱처럼! 처음에 PWA가 셋팅된 리액트 프로젝트를 생성해야 한다. 터미널에 다음 명령어를 친다. npx create-react-app 프로젝트명 --template cra-template-pwa 기존 프로젝트를 PWA로는 만들지 못한다... ㅠㅠ 처음 생성할 때 저렇게 해야 한다. 그냥 새 PWA 플젝 만들고 기존 코드를 복붙한다. 필요한 라이브러리도 설치한다. 아래 2개의 파일을 수정한다. 1. manifest.json 앱설정파일 생성 (public폴더 아래 ) 앱이름, 이미지 등등 설정할 수 있다. 2. service-worker.js 오프라인에서도 사..
-
[React] lazy loading / React devtools / 쓸데없는 재렌더링 막는 방법🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 21:35
1. 익명함수로 쓰지말고, 함수나 object는 선언해서 쓰는 것이 좋다. 이렇게 이름지어서 넣는 것이 좋은 이유는 메모리 할당 때문이다! 콜백함수나 이름없는 Object는 메모리 할당에 성능문제가 생길 수 있다. 2. 애니메이션 줄 때, 레이아웃 변경하는 애니메이션은 브라우저가 힘들어한다.(css상식) margin, width, padding과 같이 레이아웃 잡는 속성 말고, transform이나 opacity 사용 추천! 3. App.js에서 컴포넌트 import할 때 lazy loading을 하자! Javascript는 위에서부터 읽어오는데, 컴포넌트 Import 많이 하고 다 하면서 오면 부담이 될 수 있다. 따라서 필요할 때 import하게끔 하면된다. import {lazy, Suspense}..
-
[React] setState 함수 특징🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 20:50
state 만들때 다음과 같은 방식을 사용하는데, state 변경함수들은 전부 비동기적으로 처리된다. function App() { let [name, setName] = useState('kim'); } 따라서 setName()과 같은 state변경함수가 오래걸리면, 일단 이걸 놔두고 다른 밑에 있는 코드들부터 실행하여 예기치 못한 문제가 발생할 수 있다. 이런 문제를 해결하여, 동기적으로 (순차적으로) 실행하고 싶으면 useEffect를 사용하면된다. 특정 state가 변경될 때 useEffect를 실행할 수 있다. useEffect는 컴포넌트가 렌더링/재렌더링될 때 실행되는 함수이다. useEffect(() => { }, [state명]) state가 변경되면 이 코드 실행해달라는 뜻으로 사용가능하..
-
[Redux] useSelector, useDispatch🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 16:30
redux를 쓰는 이유 - 모든 컴포넌트가 props 없이 state 직접 사용이 가능하다. - state관리가 용이하다. (reducer로 수정방법을 정의해놓고, dispatch로 수정을 요청하기 때문에, state 에러 추적 용이) state 꺼내쓰는 더 쉬운 방법 : useSelector() 기존방법 const convertStoreDataToProps = (state) => { // redux store 데이터 props로 변환 return { state: state.reducer, // state 데이터를 state라는 이름의 props로 바꾸기 alertState: state.alertReducer } } export default connect(convertStoreDataToProps)(C..
-
[Redux] dispatch할 때 데이터 실어보내기🍓𝗪𝗲𝗯/𝖱𝖾𝖺𝖼𝗍 2021. 9. 22. 15:35
방법 dispatch({type: 어쩌구, payload: 보낼데이터}) 보낸 자료는 액션파라미터에 저장되어 있다. 상품상세화면에서 주문하기 버튼을 누르면, 해당 제품이 장바구니에 포함되도록 하려면? -> dispatch할 때 같이 데이터를 보낸다. state를 props화 해주는 것을 써야 dispatch도 가능하다. (+ connect함수도 import해와야한다) reducer의 action 파라미터는 dispatch할 때 보낸 object이다. 같은 상품이 이미 있으면 수량만 증가시키는 기능 임시상품명말고 실제 상품명데이터를 redux에 저장하는 기능