wisePocket

JSON 사용하는 실습이 반복되다보니 문득 for와 foreach의 정확한 차이를 모르겠다. for 반복문은 과거 강의에서 지겹게 사용하긴 했다. for (i = 0; i { console.log(a) }) 검색을 통해서 이것저것 쓰는 이유를 찾아보고 싶었다. 왜 동일한 기능을 쓸 수 있는데 이번 기회에 그 차이를 공부하게 되었다. 그런데 아직 이해가 부족하다. 좀더 쉽게 이해하는 방법을 더 찾아봐야겠다. 일단 검색으로 차이점을 찾아보니 1. 가장 중요한 차이점이 forEach는 E..

본문 card 부분도 하드코딩이 아니라 제공된 소스를 API를 받은 것 처럼 받아와서 card 형태로 붙이는것을 해보자. 리뷰들이 담긴 API를 받아오기부터 시작. 1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정 기초 HTML 뼈대는 다음과 같다. 내 생애 최고의 영화들 현재 서울의 날씨 : 20도 영화 기록하기 URL Review Score Select Your Score ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ Comment Write Close 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니..

이전 실습들을 활용해서 "서울시 실시간 온도" 를 기존 작업 된 웹페이지에 넣어보자. 1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정, 요소를 추가한 span 추가 기초 HTML 뼈대는 다음과 같다. 내 생애 최고의 영화들 현재 서울의 날씨 : 20도 영화 기록하기 URL Review Score Select Your Score ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ Comment Write Close 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 ..

이전 "서울시 실시간 미세먼지 상태" 와 비슷한 예제이다 따라서 이전 코드를 재활용해서 어느 부분을 고쳐나가는지 실습해봤다. 1. "서울시 따릉이" 위치를 확인할 수 있는 간단한 HTML 페이지를 생성 기초 HTML 뼈대는 다음과 같다. 이전 예제와 특별히 다른 부분은 없지만 button 태그에서 onclick event로 q1이라는 함수를 불러오고 fetch가 작동하는 방식이 똑같다. 하지만 리스트 태그를 이용한것과 달리 table태그로 좀 더 보기좋게? 항목을 보여주는 방식이 변경되었다. 하지만 주요 목표는 동일하게 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다. 현재 데이터처럼 보여지는 내용들은 아직 데이터 통신 없이 직접 텍스트가 하드코딩된 예시일 뿐이다. Fetch ..

CLI로 간단한 프로그램을 만들어봤었다. PT양식은 [웹/앱 설계의 기본] 화면설계서 기획 양식의 구성을 최대한 맞추려고 노력했고 처음 하는 것이라 배운 내용들을 최대한 활용하면서도 내가 가장 생각하기 쉬운 객체인 건축물과 관련 된 것으로 생각해보았다. CLI로 프로그램을 만들어보니 리모컨이나 각종 장비에 들어가는것들도 프로그래밍 된 것들이 보이기 시작한다. 그리고 어떤 로직을 가지고 있는지 관심있게 보기 시작했다. 오히려 발표자료를 만드는데 시간이 오래걸렸다. 아직 이런 양식들을 사용하는지 모르겠는데 일단 우선 친숙한 앱기획 양식을 사용했다. CLI라 화면 설계서를 별도로 구성 하기 어려웠지만 메뉴가 변경 되는 것을 화면이 전환된다고 생각하고 메뉴에 대한 실행 과정들(비지니스 로직)을 마치 설명서처럼 ..

이전 "서울시 실시간 미세먼지 상태" 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습해왔다. 이제 실제로 HTML 웹페이지에서 받은 데이터를 필요한 부분을 뽑아내서 표현까지 할 수 있는지 실습했다. 1. 지역구마다 미세먼지 농도를 체크 할 수 있는 간단한 HTML 페이지를 생성 기초 HTML 뼈대는 다음과 같다. 특별한것은 없지만 button 태그에서 onclick event로 q1이라는 함수를 불러오는데 이때 fetch가 작동하고 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다. Fetch 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모든 구의 미세먼지를 표기해주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여..

1. Fetch란? Fetch는? URL을 넣으면 그 데이터를 가져오는 친구다. 이 한 문장의 개념으로 간단하게 이해하자. 2. Fetch를 사용하는 기본 골격 Fetch의 기본 형태는 다음과 같다. fetch("여기에 URL을 입력").then(res => res.json()).then(data => { console.log(data) }) URL을 입력해서 데이터를 가져오는지 확인해볼 차례 3. 서울시 미세먼지 실시간 데이터 링크를 써서 확인 저번에 사용했던 서울시 미세먼지 실시간 데이터 링크를 URL에 입력해본다. http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 fetch("http://o..

1. 데이터 준비 아래 링크는 "서울의 미세먼지" 실시간 데이터이다. http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 해당 링크를 열어보면 다음과 같이 구분하기 어려운 형태의 데이터를 얻게 된다. 2. JSONVue를 설치하고 데이터 확인 https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko JSONVue Validate and view JSON documents chrome.google.com JSONVue라는 브라우저 확장 프로그램을 설치한다. 확장 프로그램을 chrome에 설치하였다. ..

웹 서핑중 github 블로그에 관심을 가지게 됨 tstory도 좋지만 뭔가 아쉽다는 생각은 항상 가지고 있었다. 환경 : Macbook Pro (Intel Chipset) Ventura 13.4.1 Home Brew 설치 MacOS 용 패키지 관리자 Homebrew부터 설치해야 한다. 이미 이전 프로젝트를 진행하면서 Homebrew 설치와 기타 설정이 마무리되었지만정보공유 차원에서 한번 더 정리하고자 한다. brew는 MacOS를 사용한다면 프로그래밍 환경 구축에서 계속해서 사용하기 때문에이게 무엇인지 이해하려 노력하는것(시간 낭비)보다 당연히 설치해야되는 것으로 이해하는편이 좋다.Windows환경에서 프로그램 설치파일을 다운로드 받고, 다운로드 폴더에서 설치 파일을 실행하고, 디렉토리 설정하고, 약관..

linear-gradient 를 사용하여 이미지를 어둡게 보정 할 수 있다. 보통 은은하고 Dark한 느낌을 좋아하다 보니.. background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg"); division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬하는 4줄 코드이다. 프로토타입 페이지 구성할때 그냥 외워서(ctrl c+v) 사용할 코드. 자주 사용될 것 같다. 이전에 text-align... block.. 등 생각보다 내 마음대..

구글에서 지원해주는 폰트를 적용할 수 있다. 1. Google Fonts 페이지 방문 해당 페이지에서 Google이 제공하는 다양한 폰트를 확인 할 수 있다. https://fonts.google.com/?subset=korean Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 폰트 선택 원하는 폰트 종류(Font-Family)를 선택한 이후 하단에 나열되는 폰트 세부 형태를 결정하고 "Select"를 클릭하면 우측 세부정보 창이 나타난다. 3. 폰트 참조 링크 복사 세부정보 창에서 copy code 탭의 "@import"를 선택하면 ..

우선 JavaScript의 Dictionary 복습부터 진행 ----------- HTML로 간단한 버튼을 생성하고 버튼에 onclick 이벤트 속성을 넣은 뒤 간단한 Javascript 함수를 할당해서 아래 테스트 작동 여부를 확인했다. 결과 확인하기! 버튼 클릭 시 '안녕하세요'라는 알림 팝업 function checkResult() { // ** 클릭 시 onclick ** 해당 함수 실행!! alert('안녕하세요') } 전에 배운 Dictionary부분이다. 선언된 값 출력과 스타일 적용 또한 정상적으로 작동되는지 확인 //id가 q1인 div에 a로 선언된 값을 텍스트로 입력 // let a = '사과' // $('#q1').text(a) //id가 q1인 div에 해당 배열의 값을 텍스트로 ..

****Dictionary란 key, value 형태로 구성된 collection 아래 코드와 같이 로그를 확인했을 때 값이 나타나는 것을 주의해서 살펴봐야한다. Java의 배열과 햇갈리는 부분이지만 문법의 규칙만 []와 {}의 차이를 생각하면 된다. index는 [0]부터 시작한다. [1]부터가 아니다 let a = ['사과','수박','딸기','감'] console.log(a[0]) //사과 console.log(a[1]) //수박 console.log(a[2]) //딸기 console.log(a[3]) //감 {}에 포함된 것들을 불러올 때 []로 마치 key값 : value값, key값 : value값 으로 연결 된 것을 확인 할 수 있다. let b = {'name' : '영수', 'age' :..

head 태그 내 script 태그 생성 hey()라는 함수는 alert('안녕!!') 이라는 메세지를 출력하도록 설정 function hey(){ alert('안녕!!') } body 태그 내 위 hey()함수가 작동 될 위치 설정 영화 기록하기 추후 각종 개발 테스트를 위한 console.log를 추가했다. function hey(){ alert('안녕!!') console.log('콘솔 로그 체크용입니다.') } "버튼을 누르는 행위"에 대한 직접적인 디버그를 위해서는 버튼에 alert를 적용하면 쉽게 상태를 확인 할 수 있다. 하지만 생각보다 알림창이 거슬리기 때문에 console.log를 통해서 테스트, 디버깅 하는 것이 편리하다. 해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다. http..

JAVA를 접하면서 처음 진행한 팀 프로젝트이다. 팀원 모두 비전공자이며 프로그래밍을 처음 접한 상황이었기 때문에 시작 단계인 기획과 환경구축에서도 쉽지않은 도전이었다. 초보 개발자라는 부분은 생각보다 정확히 문제점을 이해한 검색과 적절한 예시를 찾는 것으로 여러 부분 해결 된다. 이미 선배와 전문가들이 인터넷에 아주 많은 자료를 올려두었기 때문에 우리는 그것을 잘 판별하는 능력이 필요하다. 팀원간의 개발 이해도 차이, 참여도 차이 등 외부적인 요인도 무시 할 수 없다. 내가 아는것과 연구하여 이해한것 경험한것을 공유하고자 최선을 다했다. 또한 팀원이 공유하는것, 어려움을 겪는 부분에 대해서 적극적으로 함께하는 것에 집중했다. 사람이 하는일이다 보니 일부 팀원의 개인 사정에 따라 이탈을 결정하는 불상사가..