코딩연습장

어제 너무 긴 html파일의 style, script를 분리하여 모듈화 시켰다.한 html에서 변수에 데이터를 저장하여 해당 데이터를 특정 기능에서 사용할 때에는 문제가 없었지만, 모듈화를 시켜 어떤 데이터를 다른 모듈에서 사용할 때 오류가 발생했다. 페이지의 멤버데이터는 firebase에 수동으로 저장해두었고, 해당 데이터를 페이지가 불러와지고 난 뒤 처음 한번만 데이터를 GET하여 memberArray에 저장하고, memberArray를 필요한 곳에서 사용해야했다. import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js"; import { getFirestore, colle..

한 html에서 5명이 작업을 하다보니, 아래와 같이 script와 style태그가 엄청나게 길어졌다.  그래서 내가 작성한 style과 script들을 모듈화 시켜 분리작성해볼 생각이었다.한 html파일내에서 다양한 기능과 다양한 view들이 작업되다보니 git관련 문제들도 많았고, 코드가 길어져 가독성이 떨어지므로 가능한 최소단위의 기능별로 모듈화시키기로 결정했다. 먼저 쉬운 style분리부터 진행하였다. 모달관련 style태그를 modal.css라는 파일을 생성하여 그곳에 몰아놓고,  index.html의 head에서 아래와 같이 해당 파일을 css로 불러왔다.다행히 오류없이 정상작동하였다. 다음으로 script를 모듈화 시키는 것이었다. html파일에서 script를 모듈화 시켜본 적이 없어 예시..

한 페이지에서 조를 소개하는 화면이 먼저 보인다. 소개하는 부분의 바로 아래에는 아래를 향하는 화살표가 존재하며직접 스크롤을 내려도 간단한 멤버소개카드가 모여있는 곳으로 이동 가능하며, 화살표를 클릭해도 해당 부분으로 화면을 이동시킨다. 멤버 소개 데이터는 Firebase에 직접 데이터를 미리 집어넣었다.이전에는 데이터 형태가 같은 임시데이터를 변수에 담아 사용했는데, 세팅때부터 firebase를 세팅하여 해당 데이터로 연습하며 페이지를 만드는게 두번 일을 하지 않고 더 나을 것이라는 충고를 듣고 변경했다. 또한 각각의 멤버 카드에는 각 멤버들의 이름, 소개, 댓글목록이 간략히 보이며 소개 혹은 댓글목록을 클릭하면 상세한 내용이 나오는 모달창이 등장한다. 모달창 배경은 흐리게 처리가 되어있으며 배경은 클..

1. 라이브러리 설치yarn add json-server //json server 추가yarn add axios //axios 추가 2. 공식문서를 통해 사용법 확인하기 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com  json-server[](https://github.com/typicode/..

프로그래머스 - 이진 변환 반복하기 작성한 코드function solution(s) { let binaryNum = 0; let zeros = 0; let sLength; while (s.length > 1) { sLength = s.length; s = s.split('0').join('') binaryNum++ zeros += (sLength - s.length) s = s.length.toString(2) } return [binaryNum, zeros]}이진법 변환 횟수인 binaryNum과 없앤 0의 개수인 zeros 변수를 만든다.s.length가 1이 될때까지 반복하는데먼저 s에 0을 제거해주고 변..

프로그래머스 - JadenCase 문자열 만들기 처음 작성한 코드function solution(s) { var answer = ''; let sSplit = s.split(' ') for (let i = 0; i 들어온 문자열을 띄어쓰기 기준으로 나눠주고나눠진 단어를 알파벳별로 나누어 첫 글자만 대문자로, 나머지는 소문자로 만들어 answer에 그대로 넣는 방식이다.그리고 마지막에 띄어쓰기가 더해져 trim으로 제거하였다.8번 케이스가 실패했다.아마도 띄어쓰기가 문제인것으로 생각된다.띄어쓰기가 연속해서 나오게 되면 split할 때에 빈 문자열이 sSplit배열에 들어가기 때문이라고 생각하며, s로 들어온 문자열 중 단어의 맨 앞만 대문자, 나머지 단어는 소문자로 바꿔야한다.예를 들어 '..

프로그래머스 - 최댓값과 최소값띄어쓰기로 각 숫자를 구분한 문자열이 들어올 때 해당 문자열에서 최댓값과 최소값을 리턴하는 문제이다. 먼저 작성한 코드function solution(s) { let numArr = s.split(' ').sort((a,b) => a-b) let positiveNum = [] let negativeNum = [] numArr.map((num) => Number(num)>0 ? positiveNum.push(Number(num)) : negativeNum.push(Number(num)) ) if (positiveNum.length === 0) { return [negativeNum[0], negativeNum[negativeNum.len..

프로그래머스 - 공원산책   처음 작성한 코드function solution(park, routes) { var answer = []; let startX = 0; let startY = 0; let XObj = {}; for (let i = 0; ipark.length-1 || flag) { startY = beforeStartY break; } } break; } case ('W') : { let beforeStartX = startX ..

function solution(players, callings) { //rank배열 생성 let rank = [...players] //callings의 요소들을 돌면서 해당 순서의 값의 위치를 찾아내 //앞 등수의 이름을 저장해두고, call요소를 앞으로 보내고 저장해둔 앞 등수의 이름을 //call의 등수였던 곳으로 바꿀 생각이다. for (let call of callings) { let presentCallRank = rank.indexOf(call) let aboveRankName = rank[presentCallRank-1] rank[presentCallRank-1] = call rank[presentCallRank..

프로그래머스 - 개인정보 수집 유효기간terms로 제공된 약관 종류에 따라 설정된 유효기간에 맞추어 개인정보 수집일에 더해 현재날짜인 today와 비교하여같은날이거나 지난 개인정보는 answer에 해당 번호를 넣어 리턴하는 문제이다. 처음 작성한 코드function solution(today, terms, privacies) { var answer = []; //비교하기 위해 today를 연 월 일로나눠 배열에 넣음 let todaySplit = today.split('.') let todayYear = todaySplit[0] let todayMonth = todaySplit[1] let todayDate = todaySplit[2] //각 약..