본문 바로가기

Frontend Dev

(147)
Section1 Unit6 간단한 웹앱 만들기 - 계산기 구현 (기본) Section1 Unit6 간단한 웹앱 만들기 - 계산기 구현 (기본) ⭐️ 과제1. 계산기 구현하기 Bare Minimum Requirements ✓ clear 버튼을 눌렀을 때, 화면에 0, +, 0, =, 0 순서로 보여야 합니다. ✓ 처음 숫자 버튼을 눌렀을 때, 첫 번째 화면에 누른 숫자가 보여야 합니다. ✓ 숫자 버튼과 연산자 버튼을 눌렀을 때, 첫 번째 화면는 숫자, 두 번째 화면에는 연산자가 보여야 합니다. ✓ 숫자 버튼, 연산자 버튼, 숫자 버튼을 눌렀을 때, 화면에 숫자, 연산자, 순자의 순서로 보여야 합니다. ✓ 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 눌렀을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과의 순서로 보여야 합니다. ✓ 연산 시 script.js의 cal..
JavaScript에서 함수(function)란 무엇일까? 👾 함수(function)란? 자바스크립트에서 함수는 하나의 기능을 수행하는 코드 블록이며, 재사용 가능한 코드를 작성하는 데 중요한 역할을 한다. 함수는 인자를 받아들이고 실행할 코드 블록 내에서 처리를 수행한 다음 결과를 반환할 수 있다. 함수는 일반적으로 이름, 매개변수, 실행할 코드 블록 및 반환값으로 구성되고, 함수를 호출하면 코드 블록이 실행되고 반환값이 호출자에게 반환된다. // 함수선언과 호출 문법 // 1. 매개변수를 안넣고 만드는 방법 function 함수명(){ // 함수가 호출되었을 때 실행하고자 하는 실행문; } 함수명(); // 2. 매개변수를 넣고 만드는 방법 function 함수명(매개변수1, 매개변수2...){ // 함수가 호출되었을 때 실행하고자 하는 실행문; } 함수명(..
Section1 Unit5 JavaScript 기초 - 함수 Section1 Unit5 [JavaScript] 기초 - 함수 📌 Chapter6. 함수 함수 챕터에서는 함수의 정의와 호출하는 방법, 함수 선언문과 함수 표현식, 매개변수와 전달인자, 그리고 return 문에 대해서 학습했다. 함수가 무엇인지와 함수를 정의하는 방법인 함수 선언문과 함수 표현식, 그리고 함수를 호출한 곳에 반환시켜 실행된 결과를 전달시키는 반환문은 따로 정리를 해보았다. JavaScript에서 함수(function)란 무엇일까? 👾 함수(function)란? 자바스크립트에서 함수는 하나의 기능을 수행하는 코드 블록이며, 재사용 가능한 코드를 작성하는 데 중요한 역할을 한다. 함수는 인자를 받아들이고 실행할 코드 블록 내에 fay-story.com 자바스크립트 반환(return)문 사용..
Section1 Unit5 JavaScript 기초 - 조건문 & 반복문 Section1 Unit5 [JavaScript] 기초 - 조건문 & 반복문 📌 Chapter4. 조건문 • if문 조건식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는다. if(조건식) { 실행문; } • if ~ else문 조건식의 결과가 참(true)이면 실행문1을 실행하고, 거짓(false)이면 실행문2을 실행한다. if(조건식) { 실행문1; } else { 실행문2; } • 삼황조건연산자 if문을 축약해서 사용할 수 있으며, 아래와 같이 사용할 수 있다. 조건식? 참 : 거짓 📌 Chapter5. 반복문 • for 반복문 for(let i=초기값; 조건식; 증감식) { 실행문; } • while 반복문 특정 조건을 만족할 때까지 계속해서 주..
Section1 Unit5 JavaScript 기초 - 타입 & 변수 코드스테이츠 프론트엔드 부트캠프를 시작한지 일주일이 지났다. 지난주를 마지막으로 예비수강생이었던 분들은 자리가 나지 않으면 다음 회차로 넘어가셔야 했던 것 같다. 어제부터 프론트엔드 & 백엔드 과정 함께 동기부여 세션을 들었을 때 인원이 좀 줄은것 같았다. 그리고 오늘 드디어 자바스크립트 Unit으로 들어갔다! HTML과 CSS를 일주일로 마무리를 하다니..! 처음 배워본 사람이 접하면 시간이 너무 부족할 것 같다는 생각이 들었다. 나 또한 더 재밌는 CSS와 의미있는 구조를 위한 HTML을 더 많이 배우고 싶기는 하지만, 개인적으로는 얼른 JS와React를 빨리 다루고 싶다는 생각이 들었다. Section1 Unit5 [JavaScript] 기초 - 코드기초 & 타입 & 변수 📌 Chapter1. 코드..
비교연산자(comparison operator)와 논리연산자(logical operator) 연산자(operator)는 값을 비교하거나 연산하여 새로운 값을 생성하는데 사용되며, 자바스크립트에서는 다양한 연산자를 사용할 수 있다. 자바스크립트에서 사용가능한 연산자로는 산술 연산자, 비교 연산자, 논리 연산자, 대입 연산자, 증감 연산자, 비트 연산자 등이 있으며 이번 글에서는 비교연산자와 논리연산자에 대해서 알아보고자 한다. 👾 비교연산자(comparison operator) 비교연산자는 피연산자 사이의 상대적인 크기를 판단하여, 참과 거짓을 반환한다. a == b a와 b가 같다. a === b a와 b가 데이터 타입까지 같다. a != b a와 b가 다르다. a !== b a와 b가 데이터 타입까지 같지 않다. a > b a는 b보다 크다. a = b a는 b보..
JS 변수 네이밍 규칙과 네이밍 컨벤션 👾 변수 네이밍 규칙 • 변수 이름은 문자, 달러 기호($) 혹은 언더스코어(_)로 시작해야 한다. (숫자로 시작하는 것은 허용하지 않는다.) • 변수 이름에 문자, 숫자, 달러 기호($), 언더스코어 문자를 포함할 수 있으나 대시(-), 마침표(.)를 사용할 수 없다. • 키워드나 예약어는 변수 이름으로 사용할 수 없다. → 예약어: 아직 특별한 쓰임새는 없지만 미래에 키워드로 쓸 가능성이 있어서 예약해 둔 단어 → 키워드: 자바스크립트에서 특정한 목적을 위해 사용하는 단어 ex. var, function, let, for 등 • 모든 변수는 대/소문자를 구분한다. score와 Score는 다른변수 이름으로 사용할 수 있다. • 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현한다 (e..
Section1 Unit4 HTML, CSS 활용 - 계산기 만들기 Section1 Unit4 [HTML/CSS] 활용 계산기 목업 만들기 ⭐️ 과제. 계산기 목업 만들기 • 와이어프레임 • HTML, CSS 작성 작성했던 와이어프레임을 토대로 HTML을 작성하고, CSS로 스타일링을 했다. 페어 프로그래밍 과제라 페어와 함께 진행하고, 수업이 끝난 후에 각자 보완하는 시간을 가졌다. 나는 최대한 실제 디자인과 비슷하게 하려고 했고, 브라우저 사이즈에 맞게 크기가 유동적으로 변했으면 해서 min/max width, height 크기를 정한 후 상대적 단위인 %, rem 등을 사용해서 CSS를 작성했다. 이 과정에서 font-size가 생각대로 조절이 잘 되지 않아서 고민을 좀 많이 했었는데 media query로 해결했다. 👩🏻‍💻 계산기 목업 만들기 HTML, CSS ..

반응형