공부하자 공부 공부하자 공부

오늘은 객체에 대해 배웠다. 뭔가 쉽다고 느껴지면서 많은것이 헷갈리기 시작했다. 이번 주말은 전체적으로 총 복습을 해야겠다. 그리고 코플릿 문제를 푸는것보다 의사코드를 이야기 해주는게 더 어렵다는 것을 뼈저리게 느꼈다. 계속 쓰는것도 연습하고 말해주는것도 연습해야겠다. 요즘 의사코드를 불러줄 때마다 머리가 하얘져서 이상해진다...말이 잘 안나오는 내가 너무 답답해! 객체 let obj = { name = 'kim', age = '00', email = 'aaa@gmail.com' } 배열과 같이 많은 데이터를 한번에 편하게 다룰 수 있는 참조자료형이다. 0개 이상의 property로 이루어져 있다. property는 객체의 상태를 나타낸다. property는 key 와 value로 이루어져 있다. 어떤 ..

오늘은 배열을 배웠다. 음... 배우기 전에도 조금씩 배열을 써먹었던거 같다. 코플릿 문제 풀면서 메서드를 많이 했갈렸다. 배열 let arr = [1, 2, 3, 4]; //배열 arr[0] === 1; //index는 0부터 시작 arr[1] === 2; arr[0] = 10; //index 0인 요소를 10으로 변경 arr = [10, 2, 3, 4]; 순서가 있는 값 대량의 데이터를 쉽게 다룰 수 있다. 배열의 순서를 index라 하고 index의 값을 요소라고 한다. [](대괄호)안에 요소를 넣고 각 요소는 쉼표로 구분한다. index를 이용해 요소를 조회할 수 있다. 요소의 변경은 할당과 같은 방식이다. 배열의 길이 arr.length // arr배열의 길이, arr이 위 예와 같을 경우 ar..

오늘은 터미널을 사용하여 간단한 명령어들은 배우고 node.js를 사용하는 방법을 배웠고 git을 사용하여 과제를 제출했다. 스터디에서는 오늘 발표가 있었기에 월요일에 완성했던 육각형 계산기에 쓰인 속성 찾아봤던것 위주로 설명했다. 발표는 매번 할때마다 떨리다. 스터디에 새로운 분이 오셨다. 어떤분이실지 궁금하다. 내일 아침이면 알수 있지 않을까...? 이번에 페어 파트너도 바뀌었는데 이번 기수에서 잘한다고 소문이 나신 분이다. 여러가지 많이 물어봐야겠다. git을 하는 법은 아직 잘 모르겠다 이것도 보충으로 공부해야겠다. CLI 명령어 현재 디렉토리 확인하기 : pwd 폴더 생성하기 : mkdir 폴더이름 현재 디렉토리 안의 요소 확인하기 : ls (-l, -a, -al, -la) 탐색기 호출 (우분투..

이번에 하면서 내가 복습이 굉장히 부족하다는것을 알았다. 코드 보여주면서 페어분이랑 같이 하는데 부끄러웠다. 내가 이런것을 까먹다니 육각형을 너무 열심히 만들었나....? 머리에서 앞내용이 날아간 느낌이다. 이번 주말까지 수퍼 복습해야겠다. 다음엔 헤매이지 않게! 오늘 알게된 것들 document.querySelect() document.querySelector() // ()의 엘리먼트와, 그 자식 엘리먼트의 정보 document.querySelectorAll() // 모든 ()의 엘리먼트와, 그 자식 엘리먼트의 정보 document.querySelect()는 HTML의 ()속성을 가지고 있는 태그 중 첫번째 태그를 선택하는 것이다. document.querySelectAll()은 HTML의 ()속성을 ..

토요일부터 강행된 육각형 계산기 목업 만들기가 오늘 끝났다... 정말 시간가는줄 모르고 했던거 같다...스터디 하시는 분들께 칭찬받아서 기분이 너무 좋았다. 내일은 작동하는거 구현이라고 하셨는데 두렵지만 더 열심히 해야겠다! 이번에 만드는 것은 디자이너 Alexandre Touguet의 Honeycomb Calculator이다. 육각형 계산기 목업의 핵심은 육각형을 만드는 것이었다. 첫번째 참고한 내용은 chlip-path 속성을 사용한 것으로 코딩 블로그(https://merrily-code.tistory.com/130)를 참고하였다. 이곳의 내용중 하나인 chlipy(https://bennettfeely.com/clippy/)는 원하는 모양을 정하면 자동으로 chlip-path 속성 값을 생성해 준다..

오늘은 레이아웃과 flex를 학습하고 3시간 동안 계산기 목업을 만들었다. 원래는 벌집모양을 만들고 싶었지만 신박한 디자인을 찾아 그걸 만들어보았다. 옛날 동네에서 친구들이랑 같이 뛰어 놀던 놀이 중 하나를 떠오르게 했다. 첫번째 고비는 두 칸을 차지하는 등호 버튼이 었다. flex를 이용하여 줄바꿈을 이용하려했는데 등호가 있는 박스의 크기를 늘리니 다른 박스의 크기들도 늘어났다. 그래서 등호 박스 위와 아래 구역을 나누어 윗 구역의 요소는 flex-direction: row로 아랫 구역의 요소는 flex-direction: column으로 해결하였다. /*윗 구역*/ .flex-row { flex: 1 1 0; display: flex; } /*아랫 구역*/ .flex-col { flex: 1 1 0;..

오늘도 어제처럼 많이 어렵진 않았다! 다만 외울것이 많을뿐!!! 여기서부터는 정말 처음이라 더욱 열심히 복습해야겠다. CSS(Cascading Style Sheet) CSS를 사용하면 인터페이스를 직관적으로 볼수 있고 그로인해 일반 사용자들이 보다 편리하게 사용할 수 있다. HTML로 뼈대를 만들고 CSS로 폰트, 여백, 레이아웃 등 여러 꾸미는 역할을 한다. .class { width : 100%; } .class 부분은 셀렉터로 HTML의 tag를 선택하는 부분이다. {} 부분은 선언 블록으로 tag의 형태를 바꾸는 선언들이 들어간다. width : 100% 선언으로 속성 명과 속성 값을 적는다. Text 요소 글꼴 - font-family 사이즈 - font-size 두께 - font-weght 밑..

오늘은 HTML이 무엇인지 어떤 형식이고 어떻게 작동하는지에 대해 배웠다. 어제의 반복문에 비하면 무척 쉬운 내용이었다. 오늘 스터디 그룹에 들어가게 되어서 내일부터 스터디 그룹 활동을 하게 되었다. 학습 내용이나 코플릿을 주로 할 것 같다. HTML HTML은 웹의 구조나 뼈대를 구현하는 마크업 언어이다. 기본적으로 tag의 집합으로 이루어져 있다. tag는 부등호로 묶여져 있고 부모와 자식의 구조를 가진 Tree structure이다. 기본적으로 opening tag와 closing tag는 쌍으로 같이 쓰이지만 opening tag와 closing tag의 내용이 없다면 closing tag를 생략 가능하다.() //tag push here HTML의 기본구조는 위와같다. 로 묶여져 있는것이 tag..