깃허브에 보안 파일을 숨기는 방법

[문제 발견]깃허브에 올렸던 api key를 숨기고 싶어서 파일을 만들었다.파일 글씨가 회색으로 바뀌어야 하는데 아래와 같이 바뀌지 않고 깃허브에서도 api key가 보이는 것으로 확인했다[문제 분석]api key를 깃허브에 숨기고 올리기 위해선 push 전에 작업이 이루어져야 한다는 것을 알게 되었다.push를 14번 하고 기록을 남겨두고 있었는데.. 해당 레파지토리를 비공개로 돌리고 새로운 레파지토리를 생성했다. [문제 해결]push 하기 전 .gitignore을 통해 보안 파일 숨기기💡api 관련 .js 파일을 하나 생성해둔다.const config = { apikey: "키 값" }index.html의 body 내에 아래와 같은 코드를 넣는다.기존 main.js의 API_KEY에 키 값을 지우고 새로 생성한 js의 값을 가져온다.const API_KEY = config.apikey;.gitignore 파일을 만들어 숨겨야 할 보안 파일(api key 값이 들어있는 .js파일)을 입력하고 push한다.

배열 출력 항목마다 콤마(,) 가 뜨는 문제

[문제 발견]api를 받아와서 화면 출력에 성공했는데, 출력 화면 항목마다 콤마(,) 가 떠서 UI 수정이 필요하다.[문제 분석]화면에 newsHTML을 출력하여 내용을 확인해봤다(출력 코드는 render함수 내에 작성함)console.log("html", newsHTML)HTML의 배열 항목마다 콤마(,)로 구분되어있는 것을 발견했다.배열을 프린트하기 때문에 콤마까지 출력되는 것이었다.콤마를 삭제하기 위해서 array -> String 타입으로 변환이 필요하다. [문제 해결]const newsHTML = newsList.map( (news) => ` ` ).join('');console.log(elements.join(''));을 사용하여 공백을 입력하면 구분항목을 없앨 수 있기에, newsHTML 맨 뒤에 .join('')을 추가했다. 콤마(,)가 삭제된 화면으로 해결됐다

innerHTML 값 null 에러

main.js에서 뉴스 화면을 render하는 과정에서 오류가 났다. [에러 확인]Cannot set properties of null (setting 'innerHTML')라는 에러가 발생했다 [에러 분석]const board = document.getElementById("news-board"); console.log(board);innerHTML의 값이 존재하지 않는다는데, 뉴스 내용을 출력하는 news-board의 값이 존재하는지 console.log로 찍어보았다. news-board 자체의 값이 null로 뜨고 존재하지 않는다. [에러 수정 및 결과] 제목 내용 출처 2024-03-27 문제는 index.html에서 news-board의 값을 class로 설정했던 이유였다.class="news-board"로 되어있던 것을 id="news-board"로 바꿔주었더니 값이 확인된다.