본문 바로가기
반응형

분류 전체보기202

[백준] 정렬 /파이썬 - 1427, 10989, 1931, 1181, 11650 📌 1427번 소트인사이드 www.acmicpc.net/problem/1427 1427번: 소트인사이드 첫째 줄에 정렬하고자하는 수 N이 주어진다. N은 1,000,000,000보다 작거나 같은 자연수이다. www.acmicpc.net 내 풀이 inp_arr = input() ans=[] for i in inp_arr: ans.append(i) ans.sort(reverse=True) ans="".join(ans) print(ans) 다른 풀이 inp_arr = list(input()) inp_arr.sort(key=int , reverse=True) print(''.join(inp_arr)) inp_arr를 처음부터 list로 받아서 int 기준으로 정렬한 후에 문자열로 바꾸어 출력 📌 10989번 수.. 2021. 4. 18.
[React] json-server에서 axios 로 데이터 불러오기 json serve 라이브러리를 이용해서 CRUD를 구현해 보자 json-server 설치 npm install -g json-server db.json 파일 생성 { "todos": [ { "id": 1, "content": "HTML", "completed": true }, { "id": 2, "content": "CSS", "completed": false }, { "id": 3, "content": "Javascript", "completed": true } ], "users": [ { "id": 1, "name": "Lee", "role": "developer" }, { "id": 2, "name": "Kim", "role": "designer" } ] } server.js생성 // server.. 2021. 4. 12.
[React] CRA로 프로젝트 초기 세팅 create react app CRA 설치 //npx create-react-app {프로젝트파일명} npx create-react-app movie_app https://rrecoder.tistory.com/96?category=955706 React 리액트란, 리액트 작업환경 설정 사람들이 좋아하고, 인기있고 , 간편한 프레임워크! 자바스크립트 기반이기때문에 배우는데도 부담이 없다. 리액트를 익혀보고 직접 사용해보기 위해 노마드코더의 ReactJS 로 영화 웹서비스 만 rrecoder.tistory.com 이렇게 설치를 하면 사용하지 안아도 될 파일과 디렉토리가 넘친다. 나의 새로운 프로젝트를 위해 지워도 될 파일들을 싸그리 지워보자!! 1️⃣ 삭제 1️⃣- 1 ) 파일 삭제 초기 상황 이렇게 파일들.. 2021. 4. 11.
[React] React 의 특징, JSX 이해하기 CSR 클라이언트 사이드 렌더링 data(json)가져와 클라이언트에서 렌더링 하여 결과 보여줌 json데이터만 받아와서 클라이언트 렌더링 하여라 SSR 서버 사이드렌더링 누르면 페이지 새로고침 ( 페이지 이동) html 파일을 가져와서 서버에서 새로 렌더링 📌 SPA ( Single Page Application ) 한 single page에서 데이터 변화가 다 이루어지도록 만든 페이지 새로고침 없이 빠르게 대응하도록 만듦 백엔드 API 제공 -> 클라이언트 template 작업 -> 렌더링 클라이언트에서 data들을 파싱하면서 JS가 복잡해졌다. 많은 모듈들을 어떻게 객체지향형으로 만들까? 그 중에 비동기 이벤트 처리도 완료해야 함 SPA를 위해 필요한 기술 라우팅 클라이언트 사이드 렌더링 상태관리 .. 2021. 4. 11.
todo List 프로젝트 github.com/ink-0/todo-list ink-0/todo-list 그룹프로젝트 #1. Contribute to ink-0/todo-list development by creating an account on GitHub. github.com drive.google.com/file/d/1oYTYGl66v7Ztu6pCm7KOqUYrTiAkRaRV/view 2021. 4. 10.
[JavaScript] Closure 과 Currying Closure closure 의 장점 활용 값을 가진 함수를 만들 수 있음 function sum(a,b) { return a+b; } function calculate(fn, prev) { return (v) =>{ return fn(prev,v); } const sum100 = calculate(sum, 100) sum100(20); //120 ❖ sum100 sum100 = (v) => { return sum(100,v) } sum100이라는 함수는 어떻게 보면 100이라는 값을 가진 함수가 되는 것이다. 크롬 디버거에서 Scope(유효범위) 를 확인해보면 Closure : { prev :100, fn: f } Currying 값을 가진 함수를 만들 수 있는 함수 ex) calculate 함수 함수.. 2021. 4. 9.
ReactHooks 정복하기 1탄 ( useState, useClick ) 기본적인 구조 useHooks라는 Hook이 있을 경우 const useHooks = (initial, ~) =>{ const [ curr, setCurr ] = useState(initial, ~); return { currItem : curr, changeItem: setCurr } } const App = () =>{ const {currItem , changeItem} = useHooks(초기값); {currItem} {changeItem(0)} } 🔥 useState 🔥 useInput (초기값 , 유효검사function) input 을 넣고, 원하는 입력 조건에 해당하는 값만 받기 //useInput Hooks const useInput = (initialValue, validator) => .. 2021. 4. 6.
express 와 webpack 을 이용한 빌드환경 구성 코드 (+ 코드위주 +generator 미사용) express 와 webpack 을 이용한 빌드환경 구성 : index.html 과 index.js 를 번들로 만듦 1) npm 설치 npm install npm init -y npm install express --save 2) 폴더 구조 생성 외부 src public server.js (app.js) index.html 번들된 파일 자리 webpack.config.js index.js .gitignore styles.scss index.html test index.js import './style.scss'; document.querySelector('.main-cont').style.color = 'red'; 3) babel 설정 //babel 필수 모듈 npm install @babel/core .. 2021. 3. 30.
Express에 Webpack & Babel 을 이용한 ES6 환경 설정 ( +generator 사용편) 브라우저 호환성 ( browser compatibility) 웹브라우저에서는 다양한 브라우저가 사용되고 있으며, 그 안에서 caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com ↑ 브라우저 따른 사용 가능성을 확인할 수 있음 📌 브라우저 호환성을 높이는 몇가지 방안 🍎 polyfill 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수있는 코드조각 or 플러그인 ex) bind 의 polyfill bind는 ES5에서 추가되었는데, 만약 브라우저에 bind 기능이 없다면 , 아래 polyfill기능을 추가해 놓고 후에 기능 추가가 되면 간단히 삭제하여 관리할 수 있다. bind가 있지 않은 function 이라면? => 아래.. 2021. 3. 29.
반응형

티스토리툴바