프레임워크와 라이브러리 프레임워크와 라이브러리 프레임워크 소프트웨어에서의 프레임워크는 ‘소프트웨어의 특정문제를 해결하기 위해서 상호협력하는 클래스와 인터페이스의 집합’ 프레임워크는 소프트웨어 어플리케이션이나 솔루션의 개발을 수월하게 하기 위해 소프트웨어의 구체적인 기능들에 해당하는 부분의 설계와 구현을 재사용 가능하도록 협업화 된 형태로 제공하는 소프트웨어 환경을 말한다. 애플리케이션 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능을 위해 어느정도 뼈대를 제공해주는 것이다. 그리고 그러한 뼈대 위에 개발자가 코드를 작성하여 애플리케이션을 완성해야 한다. 어느정도 뼈대를 제공해주기 때문에 객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법 중 하나라고 할 수 있다. 프레임워크.. 2022. 12. 11. 프로그래머스 [JavaScript] Lv.0 :: 종이자르기 https://school.programmers.co.kr/learn/courses/30/lessons/120922 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 머쓱이는 큰 종이를 1 x 1 크기로 자르려고 합니다. 예를 들어 2 x 2 크기의 종이를 1 x 1 크기로 자르려면 최소 가위질 세 번이 필요합니다. 정수 M, N이 매개변수로 주어질 때, M x N 크기의 종이를 최소로 가위질 해야하는 횟수를 return 하도록 solution 함수를 완성해보세요. 나의 풀이 function solution(M, N) { var Ma; var N.. 2022. 11. 30. 프로그래머스 [JavaScript] Lv.1 :: 자연수 뒤집어 배열로 만들기 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 나의 풀이 (오답) function solution(n) { var answer = []; var m=String(n); #문자열로 변환하기 for(let i=m.length; i>=0; i--){ answer.push(m[i]); } return answer; } 맨 처음에 이렇게 풀었는데 코드 실행하니까 에러 떠서 다시 생각해봤다 숫자를 하나씩 쪼개야 하기 때문에 문자열로 변환하고 배열의 마지막 인덱스 부터 인덱스[0] 까지 순서대로 담으면 되는 것 까지는 알겠다 여기까지는 문자열로 변환 된 '1' '2' 이런 상태 그대로 배열에 담기기 때문에 출력 .. 2022. 11. 22. 프로그래머스 [JavaScript] Lv.1 :: 평균 구하기 나의 풀이 function solution(arr) { var answer = 0; for(let i=0; i a + b) / array.length; } 생각나는게 for문 밖에 없어서 for문 이용해서 문제 풀고 나니까 다른 사람들 풀이 중에 reduce로 문제 푼 방식이 있길래 reduce에 대해 찾아봤다 reduce() 배열의 각 요소를 순회하며 콜백함수의 실행 값을 누적한 합산 값을 반환한다 arr.reduce(callback[, initialValue]) callback 함수가 가지는 4가지 인수 - accumulator 반환값 누적 [필수] initalValue를 설정했을 경우 최초 호출 시 initalValue 값을 제공, 설정하지 않았을 경우 초기값은 배열의 첫번째 요소 - cuurent.. 2022. 11. 22. 리액트 에러 :: Uncaught SyntaxError: Unexpected token '<' 로컬에서는 화면이 제대로 보였는데 배포한 사이트에 접속하니 빈 화면만 보였다 에러 메세지 구글링 해서 해결 1. head 태그 안에 아래의 코드 추가 하기 2. index.html 파일 내에 script 태그 수정하기 깃허브 레파지토리에 와서 index.html 파일을 열어서 수정 했다 ./static 앞에 . 을 지워주기 빈 화면에서 다시 제대로 보이게 됐다 2022. 11. 4. Mac 에서 git 설치하기 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh homebrew 에 들어가서 해당 명령어를 복사 한다 command + 스페이스바 => 터미널 검색 터미널창에서 아까 복사해 놓은 명령어를 붙여넣기 하여 홈브류 설치를 시작 한다 중간에 패스워드 입력하라고 나오는데 맥북 로그인 시 사용하는 패스워드 입력하고 엔터 누르면 된다 계속 기다리다가 설치가 완료 되면 이런 화면이 뜬다 설치한 homebrew 의 버전이 궁금하다면 명령어로 버전 확인이 가능하다 brew --version git 설치하기 brew install git git config --global user.name "깃허브 유저네임" git con.. 2022. 11. 4. Redux :: useDispatch / useSelector https://nnuoyos.tistory.com/302 저번 포스팅에 이어서 react redux 공식 문서에 나와있는 대로 사용해준다 dispatch 함수의 액션은 객체 형태로 되어 있다 dispatch({type: , payload: }) 반드시 타입이라는 key가 있어야 하고 액션 안에는 payload 가 있는데 이건 옵션처럼 사용할 수 있다 useDispatch를 통해 액션을 던져준 것이다 App.js import { useState } from 'react'; import './App.css'; import { useDispatch } from 'react-redux'; function App() { const [counter, setCounter] = useState(0); const dis.. 2022. 10. 5. Redux 지난번에 제작하고 있던 쇼핑몰 페이지를 예를 들어 app.js 에서 props로 authenticate를 계속 사용해왔다 자식 컴포넌트끼리의 props가 오고가지 않기 때문에 장바구니 컴포넌트를 만든다고 하면, 자식 컴포넌트끼리 공유가 안되기 때문에 App.js 에 카트라는 스테이트를 생성해놓고 각각의 컴포넌트에 props로 던져주는 형식이 되어야 한다 리덕스는 오픈 소스 자바스크립트 라이브러리의 일종으로 state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다 리덕스는 일종의 저장소 라고 생각하면 된다 store라는 저장고를 만들어서 state를 저장해놓고 각각의 컴포넌트들이 필요에 의해 요청할 때 마다 컴포넌트가 부모이나 자식이나 상관없이 값을 store에서 가져올 수 있.. 2022. 9. 30. React :: 배포하기 https://my-json-server.typicode.com/ My JSON Server - Fake online REST server for teams my-json-server.typicode.com/user/repo/posts/1 { "id": 1, "title": "hello" } my-json-server.typicode.com url 값을 수정해준다 나머지 컴포넌트에도 url 을 바꿔준다 괄호는 지워줌! 깃에 푸시 한 후 넷리파이에서 깃허브 연결 후 배포한다 빌드 할 때 앞에 CI=false 를 붙여준다 넷리파이 배포 오류 해결 하기 중간에 꼬여서 배포했던 사이트 삭제하고 새로 업로드 했는데 계속 꼬이는 중 사이트 배포는 됐는데, db.json에 담아놓은 이미지들이 보이지 않고 있다 2022. 9. 20. React :: shopping site 만들기 05 검색 기능 만들기 const search = () => { console.log("on key press 확인",search) } 글자를 입력할 때 마다 계속 온키프레스가 실행 된다 하지만 엔터를 눌렀을 때만 작동하도록 수정하고 싶다 const search = (event) => { if (event.key === "Enter"){ console.log("on key press 확인",search) } } 이제 엔터가 눌러졌을 때만 실행이 된다 input 안의 검색어 내용을 불러오고 싶을 때는 event.target.value 을 사용한다 (이벤트 안에 값이 있기 때문에) const search = (event) => { if (event.key === "Enter"){ let keyword = even.. 2022. 9. 20. 이전 1 ··· 6 7 8 9 10 11 12 ··· 27 다음