반복문 코플렛 문제를 풀면서 어려웠던 부분들이 정말 많았던 것 같다. 사실 지금도 보면서도 아직 이해가 안가는 부분들도 있다.... ✍️ countCharacter 문자열과 문자를 입력받아 문자열에서 문자(letter)가 등장하는 횟수를 리턴해야 합니다. 내가 쓴 코드 function countCharacter(str, letter) { let result=0 for(let i=0; i < str.length; i++){ if(str[i]===letter){ result= result+1 } }return result } 풀이 ex) // countCharacter('abca','a') //1. str[0]=a //2. str[1]=b //3. str[2]=c //4. str[3]=a //총 갯수 2개 ..
오늘은 페어와 함께 조건문, 반복문 코플렛 문제를 풀어보았다. 수업에서 들었을때는 쉬워보였는데 코플렛에 나오는 문제들을 직접 풀어보니까 정말 어렵고 힘들었던 하루였던것 같다. 그 중에서도 정말 이해가 많이 안가고 어려웠던 부분들을 오답노트를 작성해보았다. ✍️ addOneSecond 풀이 // 초가 59가 되면 초는 0을 입력하고, 분에 1을 더해준다. // 초가 59가 아니라면 초에 +1 을 해준다. // 분이 60이 되면 시간에 +1을 해준다. 분은 0을 입력해준다. // 시간이 24가 되면 0을 입력해준다. ✍️ makeLastSeenMsg 풀이 // day를 선언해주고 하루를 분으로 변경 // 1시간은 분으로 변경 // period입력값이 day 보다 클시 일로 표시 // period입력값이 ho..
✍️ 조건문 ⭐️ if문 if문은 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정됩니다. 조건식의 평가 결과가 참일 때 문자열 ‘hello world’를 출력하기 위한 코드는 아래와 같습니다. if (true) { console.log('hello world'); } if 뒤에 있는 소괄호에 조건식을 넣으면, 조건식이 참으로 평가된 경우 코드블록 내부의 코드가 실행됩니다. 지금은 true를 넣었기 때문에 console.log('hello world')가 실행됩니다. 동치연산자 (===) 동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환합니다. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환합니다. let name =..
✍️ Number 타입 JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입입니다. 정수(integer)와 실수(float)을 모두 표현할 수 있습니다. 100; // 정수를 표현할 수 있습니다. -100; // 음수를 표현할 수 있습니다. 100.123; // 실수를 표현할 수 있습니다. ⭐️ typeof 연산자 typeof 연산자로 해당 값이 숫자 타입인지 확인할 수 있습니다. typeof 100; // 'number' typeof -100; // 'number' typeof 100.123; // 'number' ⭐️ Math 내장 객체 Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다. Math.cei..
1주차에는 html과 css를 배웠고 이번주부터는 JavaScript를 본격적으로 배운다. ✍️ 코드 실행 console.log() 'hello world’라고 입력하고 엔터를 치는 순간 JavaScript 엔진은 이 코드를 읽고, 평가하고, 출력합니다. REPL아니고 코드를 직접 실행하는 경우에는 console.log() 메서드로 출력을 할 수 있습니다. 괄호 안에 'hello world'를 입력하고 엔터를 눌러 출력합니다. 1 console.log('hello world'); // hello world console.log(): 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드 ✍️ 주석 JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성하면 됩니다...
어제와 오늘 2일에 걸쳐 첫 Pair과제를 통해 계산기 목업을 만드는 수업을 하였다. 어제는 졸업식때문에 Pair와의 만남을 못가지고 오늘 2시까지 Pair와 함께 많은 정보를 나누며 계산기 목업을 만들어나갔다. 처음이여서 그런지 많이 서툴고 많이 어려운부분이였다. 내가 목표로한 계산기는 아이폰 계산기를 생각을 하였다. ⭐️ 와이어프레임 ⭐️ 결과물 css *{ padding: 0; margin: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; height: 100vh; } .calculator{ display: flex; flex-direction: column; width: 27..
✍️ 자식 요소에 적용해야 하는 Flexbox 속성 flex 속성의 값 flex 속성에는 세 가지 값을 지정해줄 수 있습니다. 각 값이 의미하는 것은 다음과 같습니다. flex: 자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다. flex: 0 1 auto; 순서와 기본값은 반드시 기억해주세요. flex: grow shrink basis, flex: 0 1 auto 1. grow: 자식 박스는 얼마나 늘어날 수 있을까요? grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다고 했습니다. flex 속성을 설정하기 전의 모습입니다. grow 의 기본 값인 0은 빈 공간이 있어도 늘어나지 않..
✍️ 부모 요소에 적용해야하는 Flexbox 속성들 1. flex-direction : 정렬 축 정하기 flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다. 2. flex-wrap : 줄 바꿈 설정하기 flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다. 3. justify-content : 축 수평 방향 정렬 justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지, 세로로 ..
✍️ 와이어프레임(Wireframe) 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 합니다. 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것입니다. 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도입니다. 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다. ✍️ Flexbox 란? Flexbox의 flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법입니다. ⭐️ d..
⭐️오늘 배우면서 헷갈렸던 margin,padding,border-box 계산법 다시한번 상기시키기 ⭐️ ✍️ 줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block) 박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있습니다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 박스는 inline 박스라고 부릅니다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있습니다. HTML에서 줄 바꿈이 되는 요소는 무엇인가요? 줄 바꿈이 적용되지 않은 요소는 무엇인가요? 줄 바꿈이 되는 요소: , 줄 ..
