본문 바로가기

전체 글402

2024-05-02 filter 메서드로 특정 조건 걸러내기 TMDB에서 API를 가져올 때 queryString을 사용하고 있기 때문에 URL에서 국가 코드만 바꾸어 주면 한국 버전으로도 간단히 불러올 수 있다.다만 문제가 한국 버전은 줄거리 요약 등이 제대로 호환되지 않는 카드가 많아 웹페이지 사용성이 떨어진다.이런 경우 filter 메서드로 overview 프로퍼티가 빈 스트링인 경우 제외하도록 할 수 있다. Programing/TIL 2024. 5. 2.
2024-05-01 모듈화 / 수도코드 연습 오늘 배운 것 1. 자바스크립트 모듈화 지금까지는 one page로 html을 만들고 하나의 js에 모든 기능을 넣어서 연습했었다.그런데 팀원 분의 프로젝트를 기반으로 기능을 추가하는 과정에서 팀원분이 작성한 모든 코드에 대한 이해가 선행되어야 했고 이 과정에서 새로운 내용도 많이 알게 됐다. 그리고 기능별로 js 파일을 만들고 export, import 기능으로 상호 호환이 되게끔 작업하는 방식에 대해서도 처음 알게 됐다. 그래서 지금 연습을 해보고 있다. 이렇게 작업하니 코드 가독성이 훨씬 좋아졌다. 2. 수도코드 연습 이번 팀 프로젝트에서 내가 맡은 기능은 버튼을 클릭했을 때 페이지가 한/영 버전으로 전환되는 것이다.API에서 한글로 바꿔오는 부분이 있어서 가볍게 생각했는데, 내 수준을 아득히 뛰어.. Programing/TIL 2024. 5. 1.
2024-04-29 자바스크립트 개인과제 마지막 오늘 학습한 내용TMDB에서 영화 데이터를 받아오는 것에서 API에 대한 관심이 생겼다. 웹 개발 종합반에서 firebase를 이용했었는데, 내가 필요한 실습 과제에서는 보안 등이 크게 중요하지 않기 때문에 구글 스프레드시트나 엑셀 등으로도 JSON을 이용하는 방법이 있음을 조원분께 조언을 들어 알게 되었다. 그 내용을 아래에 포스팅하였다.REST API 직접 JSON 파일로 만들기 Programing/TIL 2024. 4. 29.
REST API 직접 JSON 파일로 만들기 들어가면서인덱스와 키:밸류를 쌍으로 갖는 배열 안에 객체가 있는 자료형으로 만들면 API를 만들 수 있다.방법구글 스프레드시트나 엑셀과 같은 스프레드시트 프로그램에서 가로 첫 행을 제목행으로 갖고 아래로 내용이 뻗어가는 형태의 데이터베이스를 만든다.아래 사이트에 내용을 붙여넣어 JSON 파일 형태로 변환한다. 한글도 지원한다.https://tableconvert.com/ko/excel-to-json (밑의 사진과 다른 사이트임. 문제가 있어서 이 사이트에서 해보니 잘 됨.)변환된 데이터베이스를 변수의 값으로 할당할 임의의 js 파일을 하나 만든다. 값이 길지 않다면 사용 중인 js 파일에서 해도 되지만 데이터의 양이 많을 수 있으니 별도로 만드는 방법으로 진행한다. (예: data.js)json 데이터를.. Programing/JavaScript 2024. 4. 29.
2024-04-28 WIL 소규모 스터디 가입, 집단지성 활용 물리적인 거리의 제약을 뚫고 만난 부트캠프 동기 나는 전북의 산 속에 산다. 한전에서 전기는 넣어 주는데 상수도에서 물 안 넣어 주고 도시가스에서 가스 안 넣어 주기 때문에 우물 파서 물을 쓰고 주유소에서 등유를 사서 쓴다. 부트캠프 시작 보름차다. 서로 만나기 쉽지 않은 거리에 사는데 주말에 오프라인 만남을 가졌다. 100% 온라인 부트캠프에서는 학습자가 능동적으로 학습에 임할 필요가 있다는 것을 느낀다.정확히 세어 보진 않았지만 10여 명이 넘는 튜터님들과 담임 매니저님이 상주해 계시지만100명이 넘는 수강생을 동시에 케어하기엔 무리가 있어 보인다. '질문을 하러 가고 싶지만 뭘 모르는지 모르는 상태' 지금 현재 상태이다. 나 뿐만 아니라 이제 시작한지 2주일 정도 지났기에 대부분의 수강생이 이러한 .. Programing/TIL 2024. 4. 29.
2024-04-30 자바스크립트 개인과제 마지막 - 제작완료 오늘 배운 것HTMLCollection과 NodeLIst와의 차이. (위 사진)2. event.preventDefault의 정확한 사용법.이번 과제를 통해 배운 것API (Application Programming Interface)추가학습자료 : 유튜브 짐코딩사전적 정의 : 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스.쉬운 개념 풀이사람이 자동차의 문을 열 때 "열려라"라고 외쳐봐야 문이 열리지 않음. 자동차 열쇠를 사용해서 열어야 함. 이 때 자동차 열쇠가 자동차와 사람을 이어주는 인터페이스임. (하드웨어적인 Interface를 의미함.)사람이 배달앱을 통해 가게에 주문을 한다면 배달앱은 인터페이스임. (사용자가 직접 소통하기 위한.. Programing/TIL 2024. 4. 29.
2024-04-26 자바스크립트 개인과제 5일차 오늘 배운 것배열 안에 객체가 있는 복잡한 구조 파악하기배열에 접근할 때는 인덱스 번호로 접근한다.console.log(myArr[0]);객체에 접근할 때는 value를 알고 싶은 property의 key를 점 표기법(.)으로 접근한다.console.log(myObj.myKey);배열과 객체가 섞여 있을 경우에도 값을 알아낼 수 있다.console.log(myArr[0].myKey];그런데 이렇게 복잡한 상태의 자료구조에서는 map 메서드나 forEach문을 사용할 수 없기 때문에 자료 구조를 배열 구조로 바꾸어 주어야 한다.오타에 유의하자계속 반복하고 있는 실수인데, 코드에 문제가 없는데 왜 자꾸 실행이 안 되나 하고 살펴보면 변수명이나 함수 실행 코드에서 오타를 내는 경우가 상당히 많다. 오타에 유의.. Programing/TIL 2024. 4. 26.
여러 개의 div를 수직이 아닌 수평으로 배치하기 div 태그는 block 속성으로 수직으로 쌓인다.  1,000,000원이라는 1개의 div와 원이라는 1개의 div는 당연히 수직으로 배치된다.각각의 div에 동일한 class를 주고 CSS 속성에서 display = inline-block;을 주면 수평으로 나란히 배치된다. 가운데로 몰고 싶으면 상위 요소에서 text-align: center; 속성을 주면 된다.   원문 블로그 링크https://hianna.tistory.com/865 Programing/CSS 2024. 4. 25.
flex 요소가 2개 일 때 좌우 양쪽으로 밀기 한 안에div 1개는 @@후원자님div 1개는 후원-240424-01 이 상태에서 양쪽으로 미는 방법은 좌측 div에 margin-right: auto를 주어 오른쪽으로 쭉 밀면 됨. #donatorName { margin-right: auto;}   아래 블로그에 flex 요소 안의 div 개수마다 정렬하는 방법이 소개되어 있음.https://seons-dev.tistory.com/entry/display-flex-%EC%A2%8C%EC%9A%B0-%EC%A0%95%EB%A0%AC Programing/CSS 2024. 4. 25.
GIt과 GitHub 사용 총정리 Git을 사용하는 이유코드를 백업하고 이전 버전으로 되돌리기 위함. (버전기록/관리)Git 설치 방법Git windows 검색 후 설치.선택 옵션 체크 두 가지Use Visual Studio Code as Git's default editiorOverride the default vbranch name for new repositories => main으로 입력Git 최초 1회 개인정보 등록PowerShell 터미널을 연 후 아래 명령어 하나씩 차례대로 입력.git config --global user.email (예: kim@google.com)git config --global user.name (예: Kim ByeongJun)작업 폴더 세팅하기작업 폴더에서 에디터나 파워쉘을 엶.git init 1회.. Programing/Git 2024. 4. 25.

티스토리툴바