오늘은 jQuery에 대해서 배우고, 수요일부터 시작될 2차 프로젝트 관련 팀 편성 발표가 있었다. jQuery의 경우에는 SeSAC 수업 초반쯤 기본적인 개념에 대해서만 독학을 한 상태여서, 오늘 수업에서 새로운 것들을 많이 배웠다.jQuery오픈 소스 기반 JavaScript 대표 라이브러리.공식 홈페이지에서 파일을 다운로드해 설치하거나, CDN 코드를 붙여넣는 방식으로 사용할 수 있다.아래의 링크로 들어가면 jQuery CDN 코드를 받을 수 있는데, 종류마다 의미가 다르다. https://releases.jquery.com/ jQuery CDNjQuery CDN – Latest Stable Versions jQuery Core Showing the latest stable release in ea..

원래는 수업 끝나고 집에 오자마자 기록했어야 하는데, 집에 도착하기가 무섭게 컨디션이 바닥을 찍어서 어제는 그냥 쉬고 주말 아침 일찍부터 컴퓨터를 켰다.😅 어제 수업에서는 API와 JSON에 대해서 배웠다. API는 정말 어렴풋하게 알고 있었고 JSON은 아예 모르는 거였어서, 수업을 들으며 시야가 한 층 넓어진 기분이었다.API (Application Programming Interface)한 프로그램이 다른 프로그램과 상호작용하는 방법을 정의하는 일련의 규칙과 명세, 혹은 개발자가 소프트웨어를 제어하기 위해 필요한 함수를 모아놓은 것. 지난 포스팅 막바지에 '쿼리 스트링'에 대해 짧게 설명했는데, URL 형식 API의 기본 요소가 '쿼리 스트링'이다.API의 장점1. 코드 재사용 - 이미 개발된 기..

지난 이틀간 JS 표준 객체와 DOM에 대해서 배웠다. 수업 시간에 설명을 들을 때는 배운 내용들이 전부 초면인줄 알았는데, DOM에서 document 속성으로 요소를 선택하는 명령은 예전에 공부하면서 사용해봤던 거였다. 당시에는 뭔지도 모르고 사용했는데, 이제는 뭔지 알면서 사용할 수 있게 되었으니, 나날이 성장하고 있긴 하구나!🌱JS의 데이터 타입Day 23 후기에서도 설명했지만, JS의 데이터 타입은 '기본 자료형(원시 타입)'과 '객체 자료형(참조 타입)'으로 나뉜다.객체 - 키(key)와 값(value)으로 이루어진 property의 집합프로퍼티(property) - 객체를 이루는 데이터메소드(method) - 프로퍼티 값으로 쓰는 함수. 동작을 의미한다.let panda = { name :..

SeSAC 수업 중 삼일절 연휴 과제로 받아서 풀었던 문제인데, 5개 문제 중에 1번과 5번만 내 힘으로 풀었다. JS로 별 그리기 문제는 코딩테스트로 많이 나온다니까, 모든 문제의 풀이를 블로그에 기록하며 되짚어보려고 한다.문제:drawsStars() ~ drawsStars5()까지의 모든 함수들은 lines라는 매개변수를 갖는다. 예를 들어 drawsStars(5); 를 호출하면 특정 규칙에 따라 5줄의 별이 그려진다.출력 예시처럼 보일 수 있도록 코드를 작성하라.좌측 정렬 직각삼각형이건 과제에 포함된 문제는 아니었지만 만들어봤다.앞으로 작성해야하는 모든 함수에 공백과 별을 공통적으로 사용할거라서 미리 const로 값을 할당하고 시작.for문을 두고 왜 while문으로 작성했는지는 모르겠지만..😅아..

오늘은 method에 대해서 배웠는데, 오늘 배운 것들은 JS에서 이미 만들어놓은 것들이라 이해하기 수월했다. 나중에 조금 더 어려운 개념의 method와 property에 대해서 배우게 되면, 다시 한번 더 개념 정리를 해야할 것 같다.🙂Method'메서드', 또는 '메소드'라고도 부른다. JS에서 만들어서 이미 정의되어있는 함수.문자열에서 사용 가능한 속성과 메소드 → 인자가 있는 것, 없는 것.배열에서 사용 가능한 속성과 메소드이렇게 나누어 설명하려고 한다.1. 문자열에서의 속성과 메소드// lengthlet srt = ' Strawberry ';console.log(str.length); // 공백을 포함하기 때문에 12 출력// 인자가 없는 메소드: xx.method() 형태// toUpper..

이번주는 JS에서 조건문(if문, switch문)과 반복문(for문,while문)에 대해서 배웠다. 특히 for문 같은 경우에는, 분명히 개념은 이해했는데 주어진 조건을 만족하며 계산되는 코드를 직접 작성하는건 왠지 어려웠다. for문을 배운 그날 새벽에 잠을 설쳐서 맑지 않은 정신으로 수업을 들은 것도 원인이었겠지만, 수포자로 살아온 지난 세월이 괜히 후회되고 자괴감이 들었다.😢 블로그에 학습내용을 정리하며 개념을 다시 한번 짚어보고, 완벽히 이해할 수 있도록 연구와 실험을 더 해봐야겠다.JS - 조건문특정 조건을 만족하는 경우에만 실행하고 싶은 명령이 있을 때 사용한다.각 조건은 '분기'라고 하며, 조건에 따라 논리 구조를 나눠 다른 순서의 기능이 실행되도록 할 수도 있다.조건문에서는 비교연산자, ..

오늘은 JavaScript의 연산자, 데이터 타입, 함수까지 배웠다. 오늘 배운 것들은 JS에서 가장 기초적인 부분임에도 불구하고, 특히 연산자 같은 경우에는 내가 오래 전부터 수포자로 살고 있어 헷갈리는 부분이 너무 많아서, 블로그에 기록하며 개념을 확실히 기억해두려고 한다.JS - 연산자JavaScript에서 연산자의 종류는 → 대입연산자, 비교연산자, 산술연산자, 논리연산자, 증가/감소연산자 등이 있다.// 1. 대입연산자 (또는 할당연산자)let a = 1;1. 대입연산자 (또는 할당연산자)이전 포스팅에서도 언급했지만, 등호로 표기하며, 왼쪽의 값을 오른쪽에 할당하겠다는 의미다.그러므로 위에 적은 코드의 의미는 → 1이라는 값을 a에 할당하겠다.// 2. 비교연산자>, >=, 거짓 -> fals..

오늘은 드디어 Bootstrap을 마지막으로 CSS를 끝내고, JavaScript를 배우기 시작했다. JS는 예전에 배울 때에도 어렵다고 생각했던거라 걱정했는데, 예전보다 더 많고 깊은 내용을 앞으로 배우게 될거라 생각하니 조금 두렵다. 꾸준한 연구와 실험으로 두려움을 극복해야겠다 다짐하면서, 오늘의 학습내용을 정리해보자!(JS와 관련된 부분은 나중에 내가 찾아보기 편하도록 예전에 배운 내용도 같이 기록해두었다.)Bootstrap웹사이트를 쉽게 만들 수 있도록 도와주는 HTML, CSS, JS 프레임워크.반응형 웹 애플리케이션 및 웹사이트를 개발하기 위해 사용되는 오픈소스 무료 도구. 💡 여기서 잠깐!'프레임워크'와 '라이브러리'는 모두 [문제를 쉽게 해결하기 위해 다른 개발자들이 작성한 재사용 가능한..

오늘은 CSS의 Transform, Transition 속성과 미디어쿼리에 대해서 배웠다. 오늘 배운 속성들도 예전에 배워서 일부는 알고 있었음에도 다양한 기능들을 한번에 배우다보니 헷갈리는 것들이 많아서, 블로그에 기록하면서 개념을 확실하게 정리하려고 한다. CSS 속성 - Transform (변환)요소에 확대, 축소, 회전, 이동 등 효과를 추가하는 속성이다. 여러가지 효과를 한번에 주고 싶은 경우에는 띄어쓰기로 구분하여 입력한다.img:hover { transform: skew(30deg, 30deg); transform: skewX(30deg); /* 요소 기울이기 */ transform: scale(0.5, 2); transform: scaleY(2); /* 요소 확대와 축소 */..

오늘은 드디어 CSS 속성 중에 상당히 자주 사용하는 Flex 속성에 대해서 배웠다. 사실 CSS의 Flex 속성과 관련해서는 (예전 포스팅에도 적었듯) 내일배움카드로 일부 배워서 알고 있었지만, 이번에 더 많은 속성값을 알게 되면서 머릿속이 매우 혼란스러워져서 블로그에 기록하면서 개념을 제대로 정리해보려고 한다.CSS 속성 - FlexFlex 속성은 요소의 위치를 유연하게(flexible) 만들어 내가 원하는 위치에 둘 수 있게 만드는 기능이다.컨테이너(부모) 요소에 지정하는 속성과 아이템(자식) 요소에 지정하는 속성이 따로 존재하는데, 보통은 컨테이너에 지정하는 속성을 많이 사용한다고 한다.Flex - for containerdisplay - 웹 페이지의 레이아웃을 결정하는 속성. 피그마의 오토 레이..