목록전체 글 (134)
코로 넘어져도 헤딩만 하면 그만
Git에 샘플로 주어진 코드를 받아 주어진 계산기 틀을 활용하여 JS기능들을 구현해보는 작업을 했다. (솔직히 초심자는 어려워서 이렇게 알아서 풀어보라고 던져줘도 되나 싶다? 어떻게든 하고는 있는데) 코플릿에 문제 풀이로 주어질 때보다 훨씬 헷갈렸다. 어쩌다보니 다른 팀에서 잘 하는 분의 힌트를 들으면서 같이 과제를 하기 시작... 위와 같이 생긴 계산기 위쪽 칸마다 '처음 입력 수' '두번째 입력 수' '연산자' '연산결과'가 나오게 구현하는 것이 오늘 과제의 목표였다. 기본 과제 조건: 1. 숫자 클릭할 때 첫번째 칸에 숫자 나타내기. 2. 첫번째 숫자가 0이 아닌 경우에만 두번째 숫자 나타내기. 3. Enter 을 누를 때 두 숫자의 연산 결괏값을 우측에 나타내기. 4. AC를 누르면 전부 0이 되..
오늘은 어제까지 배운 개념을 기반으로 조건문과 반복문 문제를 20문제쯤 풀었다. 같이 푼 페어분이 잘해주셔서 도움이 정말 많이 됐다. 이래서 페어로 뭉쳐 시키는구나 싶을 정도로.... 풀었던 문제보다 더 어려운(유형을 처음 풀어봐서 그럴지도)문제들을 마주하자 헤맸는데, 그래도 몇 문제는 검색도 해보고 머리도 짜내서 풀었다. 9 10 11번 ...이런 문제들이 어려워져서 난감... 도움 받아서 어떻게 냈다. 아직 내 걸로 소화하기에는 조금 무리가 있는 듯 하니 제대로 이해하고 적용하는 사고방식을 본따려고 노력해야겠다. 실시간 강의에서 배운 거 + 페어분이 알려주신 거. slice(숫자, 숫자) 는 시작점 - 끝점을 기준으로 자르는데, 끝점보다 앞에서 자른다. 즉 (0,2)라면 0, 1자리 까지만 잘라준다...
06_computeAverageLengthOfWords2 두 단어를 입력받아 두 단어의 평균 길이를 내림하여 리턴해야 합니다. 입력: 인자 1 : word1 string 타입의 알파벳 문자열 word1.length는 10 이하 인자 2 : word2 string 타입의 알파벳 문자열 word2.length는 10 이하 작성 코드: function computeAverageLengthOfWords2(word1, word2) { let word1Len, word2Len, avgLen; // 단어1의 길이, 단어2의 길이, 평균길이 각각 지정 word1Len = word1.length; word2Len = word2.length; avgLen = (word1Len + word2Len)/2; // 각각 길이를 ..
if, else, else if 를 활용하는 조건문과 for와 while를 쓰는 반복문을 배웠다. 오늘은 줌이나 페어 프로그래밍 없이 혼자 챕터를 공부하고 문제를 푸는 식이었는데, 그래서 그런지 평소보다 약간 집중이 덜 되는 느낌이었다. 다음에는 이런 시간이 있으면 모각코라도 해야겠다. Question 자바스크립트 연산자 우선 순위 순서? 더보기 괄호 - 증감 연산자, not 논리연산자(ex ++ -- !) - 산술 연산자(ex * / % + -) - 비교 연산자(ex <
JS 변수 부분부터 시작했다. 사실 어렴풋이 알기는 하되 뭘 아는지 뭘 모르는지 정확히 짚히지 않는 부분이 여기였고 JS에 자신도 없었는데, 이론을 보면서 조금씩 머리에 들어오는듯. ... 조금 가르쳐주고 많이 스스로 찾게 하는 방식이 당혹스럽긴 하지만 또 아주 못 풀 문제도 아니고, 문제 같이 푼 페어 상대분이 좀 아는 분이셔서 도움을 많이 받고 있다. 문제를 보자마자 겁 먹는 습관을 의사 코드를 나열하면서 고쳐가야겠다는 생각... 진짜 어려워지면 어쩌려구... Java Script에는 7가지 내장변수 타입이 있다는 점. object와 symbol은 좀 나중에 다루고 그 외에 null / undefined / boolean / number / string 을 기억해둘 것. string은 문자열이고 bo..
수업자료 내용 복습과 심화 몸통1. HTML? 하이퍼 텍스트 마크업 랭귀지. 근데 왜 이런 이름이 붙었을까? 더보기 텍스트의 일반적인 접근을 뛰어넘는다= "하이퍼 텍스트." 하이퍼링크 같이, 사용자가 다른 문서로 즉시 접근할 수 있게 해주는 텍스트를 말한다. 즉, 기존까지의 순차적 텍스트 접근법과는 완전히 다른 방식으로 작동하는 것. 기존까지 텍스트 사용자들은 수동적인 존재였지만, 하이퍼텍스트 기술과 함께 사용자가 '능동적 주체'로 발돋움하였다. 마크업= 표시하다. '태그'를 통해 강조할 부분에 대한 '구조'적인 접근. 문서를 구조화하여 프로그램에게 알려준다. HTML이란 웹 페이지의 구조를 명시하는 기술 언어(descriptive language)로, 마크업이라는 문법을 사용하여 우리가 보는 웹 페이지..
계산기 컨셉: 네온 사이버 펑크. 뒤에 달리는 자동차에 붙어있을것 같은, 번쩍거리는 계산기를 만들고 싶었다. 움짤을 올리고 싶은데 안 올라가네...원래 배경이 막 움직인다. 버튼의 정렬 방법: 우선 계산창 부분과 타자 영역을 각각 다른 div로 묶어 class 배분하고, flex-direction:column; 으로 방향을 세워줬다. 이후 flex-grow:1, flex-grow:3 하여 차지 비율을 1:3으로 나눈 뒤 아래 버튼들은 각 줄마다 div로 묶어주었다. 또 이 줄 묶음들을 flex와 justify-content: space-evenly를 사용하여 위아래로 균등 배분한 뒤, 맨 아래쪽 0버튼은 row5에서 first-child로 선택해서 flex-basis를 40%로 다른 버튼의 두 배쯤 되게..
오늘의 학습 CSS를 응용해서 페어와 함께 계산기 틀을 Html로 만들고, 이를 CSS 그 중에서도 Flex를 사용해서 꾸미는 것을 배웠다. 부모가 자식 요소를 정렬를 해주는 display:flex; 나 align-items, justify-contents 개념은 이전에 예습하고 있었지만, 자식 요소에서 여백 공간을 나눠갖는 flex: 0 1 auto; 관련된 부분은 완전히 처음(은 아니고 내가 예전에 잘 안 쓴다고 생각해서 반쯤 흘려들어서...)이라 헤매는 감이 있었다. 새삼 Flex가 공간 배치 감각이 있어야 해서 배울 때 어렵긴 한데, Flex가 나오기 전에는 position이나 float로 더 어렵게 레이아웃을 배치해야 했다고 하는 글들을 보다보니 어휴... 차라리 나와서 다행이라는 생각이 든다...