문서상에 요소를 배치하는 방법을 지정함.static (기본값) :위치를 지정하지 않을 때 사용한다.relative : 위치를 계산할때 static의 원래 위치부터 계산한다.absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를
(inline,block,inline-block)줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치. 대표적인 inline엘리먼트로 <span>이나 <a>,<em> 태그 등을 들 수 있다.inline엘리먼트를 사용할 때 주의점은 width와 height
한 요소(elment)가 보통 흐름으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다.float 은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 display 값의 계산값을 수정한다.🔹
모든 함수는 반환(return)을 한다. 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있다.위 예시처럼 함수를 호출해서 반환한 값을 다시 변수에 저장해서 확인할 수도 있지만, console.log()로 바로
컴퓨터 언어에서 사용되는 수학 표현식을 알아보자.두번째 줄의 num++는 아래와 의미가 같다.\++ 대신에 --를 쓰면 1을 뺄 수 있다.1초만에 내가 생각한 출력 값은 1과 2인데 땡^^ 틀렸슈🤣🤣다시 한번 천천히 알아보자.위의 코드에서 일어나는 과정을 스텝별로
||(shift + \\) : 어떤 조건 하나만 충족해도 될 때 사용&&: 어떤 조건 하나만 맞으면 되는 것이 아니라 모두 충족해야할 때 사용(참)📌66세이다.📌20세면서 한국에 산다.(참)📌66세 한국에 산다.📌20세 한국에 산다.🔹rockPaperSciss
🔹데이터를 전달 받는 함수의 정의🔹함수의 호출(데이터 전달)🔹데이터를 전달 받는 함수의 재정의"님 로그인 성공!"이 중복되고 있으니 중복을 줄이는 함수를 재정의 해보자🔹함수의 호출(데이터 전달)인자를 세개 받습니다.첫번째 인자는 년도에 해당하는 숫자입니다.두번째
✔️함수 내부에서 다른 함수 호출하기getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.getTotal 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.인자이름은 원하는대로 지어주셔도 됩니다
1.아래 조건을 읽고 이행해주세요.getElement 함수안에 arr 변수를 선언했습니다.arr 변수는 배열을 할당했고요, 배열에는 다양한 데이터 타입의 요소가 들어있네요!배열이 담긴 arr 변수에 접근하여 getElement 함수가 "array" 라는 문자열을 ret
for문을 사용하면 코드를 원하는 만큼 반복시킬 수 있다.실행 조건에 따라 언제부터 언제까지 반복하게 될 것이라고 알려주기만 하면 된다.🔹0부터 5까지 1씩 증가시키면서 for문의 {} 내부를 실행하라는 뜻.🔹i는 1씩 증가하면서 0,1,2,3,4,5까지 증가하고,
String(문자열)Number(숫자)Boolean(true/false)UndefinedNullSymbol(ECMAScript 6에 추가됨)i. "undefined": 정의되지 않은 변수ii. "boolean"iii. "string"iv. "number"v. "obje
19-1. String 파헤치기! > 19-2. 대소문자 바꾸기 String형에서 제공하는 기본 함수들이 많은데 대표적으로 알아서 대소문자를 바꿔주는 함수가 있다. 아래와 같이 임의의 String을 작성하고 toUpperCase와 toLowerCase메소드를 호출하
컴퓨터가 +의 양쪽을 보고, 하나라도 String이 있으면 문자열로 합쳐준다.그런데 -라면, String의 마이너스는 존재하지 않으므로 양쪽의 값을 모두 숫자로 변환해서 계산해준다. 📌아래와 같이 Number 함수를 사용해서 String형에서 Number형으로 전환할
Date객체로 현재 시간을 가져온 후 Date 객체가 갖고 있는 함수로 각 날짜, 시간의 값을 가져올 수 있다. new Date()가 반환된 rightNow를 그대로 사용하지 않는다.Date타입이 갖고 있는 메서드를 활용하여 값을 받아온다. ⚠️주의getMonth 메서
📌round는 반올림 메서드이다.반올림은 언제 필요할까? 만약에 음악 어플에서 사람들이 노래 평점을 매길 때 별 0~5개 중에 선택해야 한다면, 모든 사람들의 점수를 더해 평균을 내면 소수점이 나올수가 있다. 평균이 3.56이라고 할 때, 별 3개에 색깔을 칠하고,
위 예제를 보자면,• plan1, plan2, plan3 라는 object가 있다.• 각 object는 name, price, space, transfer, pages 라는 5개의 property가 있다.• name 이라는 property의 데이터값은 String형이고
scope란 '변수가 어디까지 쓰일 수 있는지'의 범위를 의미한다.is not defined 라는 에러메세지를 본 적이 있는가? 변수가 아직 선언되지 않았다는 뜻이다.나는 분명 변수를 선언했는데????!! 하겠지만 변수를 선언한 영역(block에) 접근할 수가 없어서
클래스는 객체지향 프로그래밍의 핵심이다. 객체지향 프로그램이라는 단어에서 객체는 앞서 배웠던 {num: 1}의 데이터 타입을 말하는 것은 아니다. 객체는 영어로 object, 말그대로 사물을 뜻한다. 하지만 class는 결국 { num: 1 }처럼 생긴 객체(objec
변수에 키 이름이 저장되어있으면, 변수로도 프로퍼티에 접근 가능합니다.이때 dot(.) 다음에 변수명을 넣어서 프로퍼티에 접근이 가능 할까요?직접 실행 해봅시다. 뭐라고 나오나요? undefined 입니다.객체에 이미 키가 존재하는데, 다시 한 번 할당하면 값이 교체(
이름이 없는 함수의 기본적인 표현이다. ES6에서는 function 이라는 키워드가 빠지고 소괄호만 남았다. 그리고 =>(arrow)가 추가되었다. 호출할 때는 둘 다 같다.ES6는 함수를 getName 이라는 변수에 저장 했네요.사실 function(함수)는 변수에
ES6 에서 추가된 문법에서 편한 것 중 하나가 template literal 입니다.원래 String을 작성할 때 따옴표를 사용했었지만,이제 back tick(\`\`)으로도 string을 감쌀 수 있습니다.그리고 back tick 으로 감싸면 그 안에 변수를 넣어서
arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때 입니다.callback 함수란, 인자로 전달되는 함수라고 생각하시면 됩니다.arrow function을 조금 더 연습하기 위해 array의 반복문으로 사용되는 map, forEach
Object 두번째 강의에서, 객체의 키를 사용하는 여러 방법을 배웠습니다. 이 방법을 사용하면 객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능합니다! information 이라는 객체 하나를 만들었습니다.여기에
이제까지 JavaScript 코드를 레플릿의 에디터에서 작성했습니다. repl.it에서 JavaScript 코드만 있어도 스크립트가 작동되도록 환경을 만들어주었기 때문입니다. 하지만 진짜 개발을 할 때는 JavaScript 파일 만으로는 JavaScript 가 작동되지
위코드에서의 첫 과제!하하하핳핳ㅎ하^^ 그동안 배운것들을 토대로 인스타그램의 로그인 페이지를 구현해야했다ㅠㅠ...사실 구글링이 없었다면 전혀 할 수 없었을듯; 구글 사랑해요❤️ 그리고 많이 물어봐도 전혀 싫은 내색없이 흔쾌히 도와주셨던 동기분들도 감사합니다 사랑합니다
twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.nums은 4, 9, 11, 14 target은 13nums0 + nums1 = 4 + 9 = 13 이죠?그러면 0, 1이 return
✔️NPM(Node Package Manager)▪️ 여기서 package란 노드로 실행할 수 있는 하나하나의 프로그램을 말한다.ex)Node->스마트폰, Npm->앱스토어✔️CRA(Create React App)▪️ 리액트 프로젝트를 시작하는데 필요한 개발환경을 세팅
코드카타 티키타카🌞reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.x: 숫자 return: 뒤집어진 숫자를 반환!예를 들어, x: 1234 return: 4321x: -1234 return: -4321x: 1230 retu
숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요.num: 숫자 return: true or false (뒤집은 모양이 num와 똑같은지 여부)예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문
🟠1. SPA > ▪️ SPA(Single Page Application) - 페이지가 한 개인 애플리케이션 ▪️ Westgram-frontend : login.html,main.html-페이지 수만큼 html 파일이 존재 ▪️ 리액트 프로젝트에서 .html 파일의
▪️ 설치 시 node-modules 폴더에 sass 폴더가 생성됩니다. (package source code)▪️ --save: package.json에 설치된 패키지의 이름과 버전 정보를 업데이트💡 Sass 파일의 확장자는 '.scss'이다. '.css'확장자로
🌞 Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)" 할 수 있게 해주는 함수이다.-React 공식 문서-▪️ Hook은 class 안에서는 동작하지 않는다.▪️ 대신 class 없이도
🍩1. Props ▪️ props: properties(속성) ▪️ 단어 뜻 그대로 컴포넌트의 속성값
클래스형 컴포넌트와 함수 컴포넌트의 특징 및 Hooks의 필요성에 대해 이해한다.props의 개념에 대해 한 문장으로 설명할 수 있다.state의 개념에 대해 한 문장으로 설명할 수 있다.useState의 훅을 사용하여 React 컴포넌트의 상태를 관리할 수 있다.st
📖20220516 useEffect 오후세션 useEffect훅을 활용해 다양한 Side Effect(부수효과를 일으킬 수 있다. React에서 일어나는 UI Rendering과 Side Effect(부수 효과)의 차이를 구분하여 설명할 수 있다. useEffect
Code kata-Week1-Day5 >
로마자에서 숫자로 바꾸기1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기하면 다음과 같습니다.Symbol ValueI 1V 5X 10L
숫자로 이루어진 배열인 nums를 인자로 전달합니다. 숫자중에서 과반수(majority, more than a half)가 넘은 숫자를 반환해주세요.예를 들어,nums = 3,2,3return 3nums = 2,2,1,1,1,2,2return 2가정nums 배열의 길이
✈️학습 목표 인증, 인가에 대해 설명할 수 있다. 단방향 해쉬가 무엇인지 설명할 수 있다. salting & key stretching이 무엇인지 설명할 수 있다. Bcrypt와 JWT가 무엇인지 설명할 수 있다. 👨🏻멘토 가이드 ▪️ 인증과 인가는 API에서
🚀 학습 목표 useEffect()훅을 통해 data fetching 등 컴포넌트 렌더링 이후 필요한 다양한 side effect(부수효과)를 일으킬 수 있다. fetch() 함수를 사용해 API 호출을 할 수 있다. Array.map() 함수를 통해 componen