전체 글 180

프로그래머스 자연수 뒤집어 배열로 만들기 JS

문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 🙋‍♀️ 내 생각 숫자를 하나하나 쪼개면서 배열에 담기위해서 split()을 사용해야겠다고 생각했다. split()은 string타입에 사용가능하므로 우선 타입을 string으로 만들어야한다. 그러고나서 split으로 쪼개면서 배열에 값을 하나하나 담고, 타입을 다시 number로 변경한 뒤, reverse()을 통해서 배열의 순서를 반대로 바꾼다. ✅ 내 코드 function solution(n) { return n.toString().split('').map(v=>Number(v)).reverse() } 우선, tostring()을 통해서 n의 값들을..

프로그래머스 x만큼 간격이 있는 n개의 숫자 JS

문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 🙋‍♀️ 내 생각 최종적으로 반환하는 answer이 배열이기때문에 빈배열을 먼저 만들고, 그 안에 push로 값을 담아야겠다고 생각했다. x씩 증가하는 값을 반복하므로 for반복문을 사용했다. ✅ 내 코드 const solution = (x,n) => { let arr =[] for(i=x; arr.lengthn일때까지만 i에 x를 더해가면서 arr에 i를 push하고 범위를 벗어나면 바로 for문을 빠져나온다. return arr를 통해서 arr를 리턴한다. 💻 다른사람 코드중에 ..

프로그래머스 나머지가 1이 되는 수 찾기 JS

문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 🙋‍♀️ 내 생각 나머지 1인 수를 일일이 검사를 해야 알 수 있기때문에, 반복문을 통해서 검사를 해야겠다고 생각했다. 나는 for문을 사용해서 수를 검사했다. 그리고 나머지가 1이 되는 수 중에서 가장 작은수를 찾아야하므로, 범위는 작은수를 기준으로 더해나가면서 검사를 하는 식으로 코드를 짰다. (불필요하게 검사하는 값이 적어지도록 하기 위해서) n을 나눈 나머지가 1인 수를 구하는 것이고 n의 범위가 3부터 시작되므로 찾으려는 값 x의 범위에서 0과 1은 제외했다. ✅ 내 코드 function..

객체구조분해할당 [새로운 변수이름 할당하기]

구조분해할당이란? 객체나 배열의 값을 추출하여 변수에 할당하는 것 객체구조분해할당 기본형태: {추출하고 싶은 특정 값} = 객체 예시 const { data } = response response 객체의 data 속성에 접근하고 그 값을 data라는 변수에 저장 response객체의 내부를 보면 {data:{...}, date:{...}, 기타등등...} 객체안에 여러가지 객체가 또 들어있다. 이중에서 data라는 이름의 객체만을 추출하고 그 값을 data라는 변수에 저장한다. 이렇게 함으로써 response.data라고 적을 필요 없이 data만 적어도 data안에 있는 값에 접근할 수 있다. 이렇게 객체구조분해할당의 기본형태에서 한단계 나아간 것이 새로운 변수이름 할당하기이다. 기본형태는 같고, 거기..

JavaScript/JS 2023.08.20

axios instance 만들기

const fetchData = async () => { // 현재 상영중인 영화 정보를 가져오기 (여러영화) const request = await axios.get(requests.fetchNowPlaying); console.log(request); //0번째 영화의 id만 가져오기 const movieID = request.data.results[0].id; console.log(movieID); //0번째 영화의 상세정보 가져오기 const {data: movieDetail} = await axios.get(`movie/${movieID}`) console.log(movieDetail) }; axios는? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동..

React 2023.08.20

프로그래머스 가운데 글자 가져오기 JS

문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 🙋‍♀️ 내 생각 s의 길이가 홀수인 경우와 짝수인 경우가 리턴되는 문자열의 길이가 다르다. 홀수인경우에는 가운데 하나의 문자열만을, 짝수인 경우에는 가운데 두개의 문자열을 리턴한다. 따라서 가장먼저 s가 홀수인지 짝수인지 경우를 나눠야겠다고 생각했다. 또한, 문자열도 배열처럼 index를 이용해서 값에 접근할 수 있는 성질을 이용해서 해당값을 추출하였다. (접근만 가능하고 수정은 불가- 문자열은 불변한 데이터타입이므로) ✅ 내 코드 function solution(s) { if(s.length%2!==0){ return s[Math.floor(s.length/2..

css position (relative, absolute, fixed, sticky)

이번에 nav를 만들면서 position의 fixed를 사용했다. position에는 여러가지 배치 방법이 있는데 유용하게 사용되기 때문에 다시 보기 위해서 정리해둔다. 참고자료는 유튜브 유노코딩이고, 보고 이해하면서 일일이 정리한 내용이다. ✔️ 정의 1. position 속성값: position은 문서 상의 요소를 배치하는 방법을 정의 2. position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종위치를 결정하는 방식 (offset) ➡️ 상하좌우 위치 지정은 필요에 따라 선택적으로 적용! 1. position을 어떤 값을 사용할지 정하고 2. 그로부터 얼마나 위치를 옮길지(offset)을 결정한다. 1️⃣ relative position을 relative로 ..

CSS 2023.08.18

css reset 초기세팅 (reset css사용법, normalize css사용법)

프로젝트를 시작하면, 초기에 먼저 css를 초기화하고 시작하는 것이 좋다. 이렇게 초기화를 해주는 이유는 브라우저마다 기본으로 제공하는 스타일이 있기때문이다. 예를 들면 내가 margin을 지정하지 않았는데도, 알아서 margin값이 들어있어서 내가 원하는대로 화면을 가득채우는 것이 불가능하다. 아래의 사진은 width를 100%로 주었음에도 불구하고 자세히보면 margin값으로 인해 화면을 가득채우지 못하고 있는 것을 볼 수 있다. 그래서 개발자가 의도한대로 디자인이 나오게 하기위해서는 이러한 설정을 다시 리셋해주는 과정을 거쳐야한다. (프로젝트를 이미 많이 진행하고 난 뒤에 바꾸는 것은 더 어려우므로 프로젝트 초기에 먼저 설정한 뒤 시작하는 것이 좋다) 🔎 원리 ➡️ user agent stylesh..

CSS 2023.08.18

window.location.reload() [ 현재페이지 리로드하기 ]

➡️ 로고를 누르면, 현재 페이지를 다시 리로드하는 기능을 구현하기 위해서 window.location.reload를 사용한다. 1. 기능 현재 페이지를 다시 리로드 2. 방법 window.location.reload() 우선 나는 현재 넷플릭스 사이트를 만들고 있는데, 맨 위에 있는 넷플릭스 로고버튼을 누르면 현재 페이지가 리로드되는 기능을 넣어야했다. 이를 위해서 window.location.reload()를 사용하였다. 🔫 의도: 왼쪽 제일 상단에 있는 넷플릭스 버튼을 누르면 페이지를 다시 리로드하도록 ✅ 코드 window.location.reload()} /> onClick이벤트를 통해 이미지를 누르면 reload를 실행하게 한다. ✔️ 결과확인 🔎 원리 window.location은 웹 브라우저..

JavaScript/JS 2023.08.18

프로그래머스 평균 구하기 JS

문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 🙋‍♀️ 내 생각 너무 쉬운 문제라서 블로그에 적을까 말까 고민하다가 적는다 ㅎㅎ 모든 문제를 다 적을 수는 없어서 그래도 뭔가 배우거나 기록하고 싶은게 있는 문제를 올린다. 이 문제는 뭔가 크게 배울만한 문제를 아니지만, 그래도 꾸준히 기록해두면 좋을것 같아서 적어보았다. 이 문제는 1단계문제인데도 0단계중에 복잡한 문제보다 훨씬 더 쉬운 문제이다. 만약 이 문제가 어렵게 느껴졌다면 아마 reduce의 사용법이 익숙지 않아서 일것이라고 생각한다. ✅ 내 코드 function solution(arr) { return arr.reduce((acc,cur)=>acc+cur,0)/arr.length } ..