반응형

아무것도 모르고 시작하는 코딩 52

<오늘의 책> 프로젝트_개발일지_01(project schedule planning) | 아무것도 모르고 시작하는 코딩

까였다... 많이 걷어내었던 light 버전도 현재 내가 할 수 없는 수준으로 판명났기 때문에 더욱 줄여서 3주 안에 구현 가능하도록 rev.1을 만들었다. 중요도 순으로 [ 커버페이지 → 책 검색 → 책 등록 → 책장 표시 → 메인페이지 ] 순서로 개발을 진행할 예정이다 그리고...지금은 글자를 화면의 중앙에 세로정렬하는 것도 할 줄 모르는데, 일단 week8에 작동하게 만들면, UI를 손볼 예정이다.(대체 얼마나 많은 시간이 걸릴지 짐작할 수 없다) 공감 부탁 드려요 :)

Ajax란? | 아무것도 모르고 시작하는 코딩

"Ajax는 '비동기 서버 통신방식' 입니다. 여기서, '서버 통신'은 웹 기초 동작원리에서 배운 요청-응답 을 이야기합니다. 그리고 '비동기' 덕분에 Ajax를 사용하면, 웹 페이지 전체를 새로고침 하지 않고서도 작업을 수행할 수 있게 됩니다. 즉, 동작(event)이 일어났을 때, 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 되는 것이지요." 쉽게 얘기해서, 왼쪽처럼 모든 일이 순차적으로 진행되는 것이 아니라, 오른쪽처럼 동시에 진행이 되는것이 비동기이며 이를 통해 페이지의 일부만 업데이트가 가능해서 작동시간을 줄여줄 수 있다는 얘기이다 이제 Ajax를 이용한 연습을 해보자 사용할 API : http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4..

웹 주소에서 ?의 의미는? (feat.GET방식) | 아무것도 모르고 시작하는 코딩

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 기생충 전원백수로 살 길 막막하지만 사이는 좋은 기택(송강호) 가족.장남 기우(최우식)에게 명문대생 친구가 ... movie.naver.com 위의 주소를 살펴보자 위 주소는 크게 ? 를 기준으로 두 부분으로 쪼개진다. ? 기준으로 앞부분이 , 뒷부분이 다. 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn 영화 정보: code=161967 https://movie.naver.com/movie/bi/mi/basic.nhn?code=30688 해리 포터와 마법사의 돌 해리 포터(다니엘 래드클리프 분)는 위압적인 버논 숙부(리챠드 그리피스 분)와 냉담한 이모 페..

JSON이란? | 아무것도 모르고 시작하는 코딩

JSON이란 데이터 표현 방식을 의미한다 http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 위 주소는 서울시 실시간 대기 환경정보(openAPI)이다. 이를 클릭해 보면 아래와 같이 나온다. 많은 데이터들이 있지만 사람이 읽기 힘든 형태이다. 따라서 이를 읽기 편한 표현 방식으로 바꿔주는 것이 좋은데 그 방식중 하나가 JSON 방식이다(JavaScript Object Notation) https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko JSONView Validate and view JSO..

JQuery append(요소 추가), val (값 가져오기)| 아무것도 모르고 시작하는 코딩

1. 이름을 입력하면 아래 나오게 하기 위를 위해선 다음의 순서를 따르면 된다. 1) 에 input box 만들기(id 만들기) → id는 input-name이고, text를 넣는 형식에, 비어있으면 "여기에 이름을 입력"이라고 표시해라 2) 에 이름붙이기 버튼 만들기(onclick 함수) 이름 붙이기 → showName이라는 이름을 가진 onclick 함수를 만들고, "이름 붙이기"이라고 표시해라 3) 에 이름붙이기 function 만들기( 처음에 만들어도 된다) function showName() { let newName = $('#input-name').val(); → input-name id 값 가져오기(val함수) if (newName == '') { alert('이름을 입력하세요'); retu..

<오늘의 책> 프로젝트(매일 책 속의 한 줄 읽기)_개발일지_00 | 아무것도 모르고 시작하는 코딩

큰일이다... 내가 지금 배우고 있는 스파르타코딩 수업은 총 8주에 걸쳐 진행이 되는 수업이고, 5주차 부터는 개인 프로젝트를 진행해야 한다(물론 어려운 난이도를 하지는 못한다)그럼에도 정말 아무것도 모르고 시작한 코딩이기 때문에 복습을 하는데도 엄청 시간이 오래 걸린다. 이 전 포스팅이 JQuery에 관한 포스팅인데, 2주차 중반 과정이다. 이미 수업은 5주차 후반부를 나가서 프로젝트를 블로그에 올려 설명을 해야한다(안돼...수업 속도를 못따라가겠어)처음에 의욕을 가지고 13페이지의 PPT 기획안을 제출했는데 불가하다고 판정받았다. 내 수준에선 회원가입을 받는거는 사치였다... 그러므로 그냥 내가 사용할 수 있는 수준의 앱을 만들고 익숙해지면 초기 계획대로 만들어서 구글플레이에 업로드 하는 것을 목표로..

제이쿼리(JQuery) 박스 열기 닫기(hide, show) 클릭하면 글자 바꾸기 (text) | 아무것도 모르고 시작하는 코딩

나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 박스 열기 아티클 URL 간단 코멘트 기사저장 위의 코드를 가지고 연습을 해보자 우리의 목표는 버튼을 눌르면 포스팅 박스가 열고,닫히는 기능을 넣는 것이다. 박스의 id는 post-box 이다 JQuery에서 무언가를 보이게 하고 안보이게 하는 기능은 hide와 show를 사용하면 된다 아래의 코드를 에 넣어보자 function openClose() { if ($('#post-box').css('display') == 'block') { $('#post-box').hide(); } else { $('#post-box').show(); } function openClose() { → openClose라는 함수를 만들자 i..

자바스크립트 이미지 가운데 정렬 안됨(부트스트랩bootstrap 사용) | 아무것도 모르고 시작하는 코딩

다음의 예시를 불러와보자 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 박스 열기 아티클 URL 간단 코멘트 기사저장 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 나는 사진을 가운데 정렬을 하기 위해 위의 코드에 에서 .card-columns { width: 900px margin: 20px auto; } card-columns 클래스의 폭을 설정하고 마진을 위,아래 20px, 좌우 가운데정렬로 지정했다. 그런데 이동이 안된다. 왜 그럴까? 그 이유는 card-columns 라는 클래스의 설정을 Bootstrap에서 정해놨기 때문이다..

JQuery란? | 아무것도 모르고 시작하는 코딩

JQuery(제이쿼리) Javascript의 라이브러리(library) 중 하나다 Library(라이브러리) 자주 사용하는 코드를 미리 작성해 놓은 묶음이다 예를들어 소문자를 대문자로 바꿔주는 toUpperCase 함수나, 문자열을 특정 문자로 나눠주는 split함수 등이 JS에서 기본으로 제공하는 라이브러리에서 사용하는 함수이다(내가 따로 함수를 만들지 않아도 미리 약속되어 있는 함수) JQuery와 Javascript - 코드 길이 비교 jQuery를 이용하는 이유는 좀더 코드를 직관적이고 짧게 쓸 수 있기 때문이다. 다음의 예시를 보자 JS document.getElementById("apple").style.display = "none"; document.getElementById("apple")..

자바스크립트 n-1까지의 합, 갯수 세기, 조건 항목 추출하기 | 아무것도 모르고 시작하는 코딩

0부터 n-1까지 더하는 함수 function calculateSum(n) { let sum = 0 for (let i = 0; i < n; i++) { sum += i; // sum을 i만큼 증가시켜라. sum = sum + i 와 동일! } return sum } console.log(calculateSum(10)) // 45를 출력 리스트에서 원소의 갯수 세기 let fruitsBasket = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'] let count = 0; for (let i = 0; i < fruitsBasket.length; i++) { if (fruitsBasket[i] == '딸기') { count += 1; } } console.lo..

반응형