소소한 코딩일지

오늘 TypeScript를 공부하면서 querySelector와 getElementBy~을 언제, 어떤 상황에 사용하는 것이 적절한 것인지 이제야 의문이 들어 찾아보게 되었고, 알아본 것을 정리해두려고 한다. 먼저 querySelector, getElementbyId, getElementbyClassName을 각각 사용해 보았다. 그리고 결과는 다음과 같다 getElementById의 경우 id에 해당하는 컴포넌트가 1가지라 그에 해당하는 컴포넌트가 나온 것을 볼 수 있다. getElementByClassName 과 querySelectorAll의 경우 각각 HTMLCollection과 NodeList이라는 데이터 타입으로 return 되었다. 마지막으로 querySelector의 경우 querySele..

영화 사전 웹을 만들면서 메인 페이지의 검색 바에서 검색어를 Submit 했을 때, Search 페이지에서 값을 받아 결과를 반영해주고자 했다. 값은 잘 넘어오지만 Reload 되지 않은 화면만 나왔다. 위 코드로 메인 페이지에서 값은 잘 받아지지만 reload 되지 않는 이슈가 있다. 해결 방식을 구글링해보니 다음과 같다. 1. react-router-dom 과 history라이브러리의 버전을 맞추어주는 것 2. 내가 해결한 방법 1번 방식을 시도했지만 프로젝트를 시작하면서 history를 따로 설치해주었던 기억이 없었고, 좀 더 간단한 방법이 있을 것 같아 다른 방법을 찾아보았다. 내가 해결한 방법은 다음과 같다. 시행착오 끝에 생각보다 단순하게 이슈가 해결되었다. 메인 화면에서 값을 받아 searc..

문제 링크 코딩테스트 연습 - [1차] 비밀지도 비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다 programmers.co.kr ● 문제 설명 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"..

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/77485 코딩테스트 연습 - 행렬 테두리 회전하기 6 6 [[2,2,5,4],[3,3,6,6],[5,1,6,3]] [8, 10, 25] 3 3 [[1,1,2,2],[1,2,2,3],[2,1,3,2],[2,2,3,3]] [1, 1, 5, 3] programmers.co.kr ● 문제 설명 rows x columns 크기인 행렬이 있습니다. 행렬에는 1부터 rows x columns까지의 숫자가 한 줄씩 순서대로 적혀있습니다. 이 행렬에서 직사각형 모양의 범위를 여러 번 선택해, 테두리 부분에 있는 숫자들을 시계방향으로 회전시키려 합니다. 각 회전은 (x1, y1, x2, y2)인 정수 4개로 표현하며, ..

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/42862 코딩테스트 연습 - 체육복 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번 programmers.co.kr ● 문제 설명 문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 ..

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/42748 코딩테스트 연습 - K번째수 [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3] programmers.co.kr ● 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모..

Full Code const getHtml = async (url) => { try { return await axios.get(url); } catch (error) { console.error(error); } }; getHtml(url) .then(html => { db.collection('top10').drop(); var urlobj = [] var $ = cheerio.load(html.data); var $movieList = $('div.lst_wrap ul.lst_detail_t1').children('li'); $movieList.each(function (i) { if (i > 9) { return urlobj} var detail_url = 'https://movie.naver.c..

HTML CSS 강의를 들으면서 같은 CSS 코드라도 다른 브라우저 환경에서 유효하지 않은 경우가 있다. 이런 경우를 방지하기 위해 CSS 호환성을 확인하고, 개별적으로 처리해주어 동일한 디자인이 적용될 수 있도록 해야 한다. 1. 조건부 주석을 통한 CSS호환성 부여 인터넷 익스플로러 10 버전 미만에서는 조건부 주석을 인식할 수 없다는 점을 활용하여 특정 문자열의 존재 여부를 확인하고 해당 문자열에 대한 코드를 실행하도록 한다. Ex) - IE 8 버전일 경우 동작 - IE 8 버전 미만일 경우 조건부 주석 문법에 맞추어 작성하여 조건을 만족하면 주석 내에 있는 HTML 코드를 실행시킨다. 2. CSS Hacks를 사용한 호환성 부여 CSS Hacks는 특정한 브라우저 또는 특정한 브라우저 버전이 인..

프로그래머스 '124 나라의 숫자'입니다. 문제 링크 https://programmers.co.kr/learn/courses/30/lessons/12899 코딩테스트 연습 - 124 나라의 숫자 programmers.co.kr ● 문제 설명 문제 설명124 나라가 있습니다. 124 나라에서는 10진법이 아닌 다음과 같은 자신들만의 규칙으로 수를 표현합니다. 124 나라에는 자연수만 존재합니다. 124 나라에는 모든 수를 표현할 때 1, 2, 4만 사용합니다. 예를 들어서 124 나라에서 사용하는 숫자는 다음과 같이 변환됩니다. 10진법124 나라10진법124 나라 1 1 6 14 2 2 7 21 3 4 8 22 4 11 9 24 5 12 10 41 자연수 n이 매개변수로 주어질 때, n을 124 나라에서..

프로그래머스 '괄호 변환'입니다. 문제 링크 https://programmers.co.kr/learn/courses/30/lessons/60058 코딩테스트 연습 - 괄호 변환 카카오에 신입 개발자로 입사한 "콘"은 선배 개발자로부터 개발역량 강화를 위해 다른 개발자가 작성한 소스 코드를 분석하여 문제점을 발견하고 수정하라는 업무 과제를 받았습니다. 소스를 programmers.co.kr ● 문제 설명 카카오에 신입 개발자로 입사한 "콘"은 선배 개발자로부터 개발 역량 강화를 위해 다른 개발자가 작성한 소스 코드를 분석하여 문제점을 발견하고 수정하라는 업무 과제를 받았습니다. 소스를 컴파일하여 로그를 보니 대부분 소스 코드 내 작성된 괄호가 개수는 맞지만 짝이 맞지 않은 형태로 작성되어 오류가 나는 것을..