반응형 전체 글22 한 입 크기로 잘라 먹는 리액트(2일차) 연산자연산자 : 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말한다. +(덧셈 연산자) -(뺄셈 연산자) *(곱셈 연산자) /(나눗셈 연산자) 1. 대입 연산자let var1 = 1; 2. 산술 연산자let num1 = 3 + 2;let num2 = 3 - 2;let num3 = 3 * 2;let num4 = 3 / 2;let num5 = 3 % 2;let num6 = 1 + 2 * 10;//console.log(num6); // 213. 복합 대입 연산자let num7 = 10;//기본 방식// num7 = num7 + 20;//복합 대입 연산자num7 += 20;num7 -= 20;num7 *= 20;num7 /= 20;num7 %= 20;//console.log(.. 2025. 5. 8. 한 입 크기로 잘라 먹는 리액트(1일차) 변수와 상수변수, 상수 : 값을 저장하는 박스 변수 : let (변할 수 있는 값)let age;age = 28;상수 : const (변할 수 없는 값)const birth = "1998.09.25" 변수 명명 규칙(네이밍 규칙)1. $, _ 제외한 기호는 사용할 수 없다.2. 숫자로 시작할 수 있다.3. 예약어를 사용할 수 없다. (let, const 등) 변수 명명 가이드let a = 1;let b = 1;let c = a - b;let salesCount = 1;let refundCount = 1;let totalSalesCount = salesCount - refundCount; 자료형(타입)자료형(type) : 집합 1. Number Typelet num1 = 28;let num2 = 1.5;l.. 2025. 5. 7. JAVASCRIPT(2일차) 배열 기본 문법개발을 하다보면 첫번째 요소, 두번째 요소처럼 순서가 있는 컬렉션이 필요할 때가 생기는데 이때 사용되는 것이 배열// 빈 배열은 이렇게 만들 수 있어요let arr = new Array()let arr = [] // 권장// 배열 선언할 때 초기값 넣어주고 시작하는 것 가능함let name = ['lisa', 'mandoo', 'john']// 자, 배열의 인덱스는 0부터 시작합니다.// 배열 내 특정 요소를 얻고 싶다면console.log(name[0]) // lisaconsole.log(name[1]) // mandooconsole.log(name[2]) // john// 배열 내 특정 요소를 수정하고 싶다면name[2] = 'gimchi'console.log(name)// 새로운 요소.. 2025. 3. 14. JAVASCRIPT(1일차) 변수변수(variable) : 데이터를 저장할 때 쓰이는 "이름이 있는 저장소"변수 만드는 방법letlet : 변할 수 있는 변수를 선언할 때 사용let 으로 선언한 변수에 저장한 값은 다른 값으로 얼마든지 변경 가능변수의 데이터는 다른 변수에 복사할 수도 있다.같은 변수를 두 번 선안하면 에러 발생let message; // message 라는 이름의 변수를 생성message = "hello"; // message 라는 변수에 문자열 저장let message = "hello"; // 변수 생성과 동시에 문자열 저장message = "world"; // 변수에 저장되었던 값을 변경let message = "hello";let another;another = message; // "hello" anothe.. 2025. 3. 11. HTML/CSS(2일차) CSSCSS = Cascading Style SheetHTML 요소의 style(디자인, 레이아웃 등)을 정의할 때 사용 CSS3 Selector* : 전체 셀렉터 (HTML 문서 내 모든 요소 선택)tag : 태그 셀렉터 (지정된 태그명을 가지는 요소 선택)#id : ID 셀렉터 (#id로 지정한 값과 일치하는 요소 선택)id는 중복될 수 없는 유일한 값.class : 클래스 셀렉터 (.class로 지정한 값과 일치하는 요소 선택)class는 중복될 수 있다.후손 셀렉터 : 자신보다 아래에 있는 모든 요소들 중 일치하는 요소 전부 선택자손 셀렉터 : 자신보다 1레벨(바로 아래) 하위 속하는 요소 중 일치하는 요소 전부 선택: 가상 클래스 셀렉터 : 요소의 특정 상태에 따라 스타일 정의마우스가 올라왔을 .. 2025. 3. 10. HTML/CSS(1일차) HTML/CSS/JS의 개념HTML : 웹사이트의 구조를 이루는 뼈대CSS : 웹사이트를 꾸며주는 스타일링JS : 웹사이트가 사용자와 상호작용할 수 있도록 움직임을 더해주는 관절HTML : HyperText Markup LanguageMarkup Language : 자료의 구조(웹페이지)를 표한하기 위한 언어템플릿 열린 태그 닫힌 태그 : HTML은 열린 태그가 있다면 반드시 같은 단어로 닫힌 태그 있어야함 : 이 친구의 역할은 문서 형식(document type)을 HTML5로 지정합니다. : 실질적인 HTML document의 시작과 끝을 나타냄 : document title, 외부 파일의 참조, 메타데이터 설정 등의 정보가 들어감- 이 정보들은 브라우저에 표시되지 X : 웹 브라우저에 출력되는.. 2025. 3. 6. Git 기초 Git 이란?분산형 버전 관리 시스템의 한 종류Git을 사용하는 이유 : 버전 관리를 할 수 있기 때문버전 관리 시스템파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템장점 = Git의 장점각 파일을 이전 상태로 되돌릴 수 있다프로젝트를 통째로 이전 상태로 되돌릴 수 있다시간에 따라 수정 내용을 비교해 볼 수 있다누가 문제를 일으켰는지 추적할 수 있다누가 언제 만들어낸 이슈인지 알 수 있다파일을 잃어버리거나 잘못 고쳤을 때 쉽게 복구할 수 있다Git이 파일을 관리하는 관리하는 방법Committed : 데이터가 로컬 데이터베이스에 안전하게 저장됐다는 것을 의미Modified : 수정한 파일을 아직 로컬 데이터베이스에 커밋하지 않은 것을 의미Staged : 현재 수정한.. 2025. 2. 26. JAVASCRIPT 독학 (5일차)｜웹 개발자 준비 1. for문for ~ in- 키값을 읽어오고 싶을 때 사용- 어떤 객체를 받을 때 그 객체 안의 값을 모를 때 주로 사용- 동적인 객체에 값을 접근할 때 사용let person={ name : "제로" age : 28, humorous : ture}for(let key in person){ console.log("key", key)}위 코드에서 키값(name, age, humorous)을 불러오기 위해 for ~ in을 사용 for ~ in을 배열에 사용하면 일어나는 일 ㅗㅗfor ~ of- 배열이라던가 string(문자열)과 같은 순회가 가능한 자료형 타입에 쓸 수 있다.- 단점 : 세부 조절은 불가능하다.let fruit = ["apple", "banana", "orange", ".. 2025. 2. 14. JAVASCRIPT 독학 (4일차)｜웹 개발자 준비 1. switch문조금 더 간결하고 의미가 명확해 보인다는 장점이 있다.case가 값으로 딱 정해진 경우에만 사용이 가능하다.조건이 비교식일 경우에는 사용이 불가능하다.let food = '햄버거'switch(food){ case '피자': console.log("피자를 주세요") break; case '햄버거': console.log("햄버거를 주세요") break; default: console.log("메뉴에 없는 음식입니다")}case마다 break를 넘겨줘야 하는 이유 : 넘겨주지 않을 경우 밑에 case도 다 들르기 때문default는 if문의 else처럼 매칭되는 case가 없을 때 실행이 된다. 2. 삼항 연.. 2025. 2. 13. JAVASCRIPT 독학 (3일차)｜웹 개발자 준비 1. 객체(Object) - 한 데이터에 많은 정보를 담을 때 사용 let patient = { name : "inyoung", age : 28, disease : "cold"}//!설명// name : 키값// inyoung : 값console.log(patient) //patient를 송출console.log(patient.name) // patient객체의 name만 송출console.log(patient["name"]) // patient객체의 name만 송출 // 위와 똑같음patient.name = "maeng" // 이름 변경 (inyoung → maeng)//patient["name"] = "maeng" 으로도 가능!patient.age = 26 // 나이 변경 (28.. 2025. 2. 12. JAVASCRIPT 독학 (2일차)｜웹 개발자 준비 1. 배열 - 여러개의 데이터를 하나의 변수에 담고싶을 때 사용2. 인덱스 - 배열에 들어가는 아이템에는 모두 인덱스 번호가 부여된다. - 시작점은 0부터 부여된다. - 인덱스 번호로 배열에 있는 아이템에 접근할 수 있다.예시)let array = ["apple","banana","mango"] // 인덱스번호 0,1,2console.log(array[0]) // apple 프린트array[1]="grape"console.log(array)// ["apple","grape","mango"] 가 나옴 3. 배열 함수pop() : 배열 끝에 있는 아이템을 제거push("아이템") : 배열 끝에 아이템 추가, 배열의 최종 길이 리턴includes("아이템") : 배열에 아이템이 포함되어있.. 2025. 2. 11. JAVASCRIPT 독학 (1일차)｜웹 개발자 준비 1. 변수 (variable) - 3가지의 예약어varlet const (고정시켜야 하는 변수의 값을 선언할 때 사용)let color = "black"console.log(color)위 코드를 살펴보면let : 변수를 선언하는 것 (변수는 고유 값을 사용하므로 같은 이름을 가진 변수는 존재할 수 없다)color : 변수 이름= : 오른쪽에 있는 값을 왼쪽에 집어 넣는다는 의미 var과 let의 차이var : 자바스크립트의 초기 예약어let : 2015년 ES6 업데이트 이후 const과 같이 추가된 예약어let이 나온 이유 : var 예약어에 문제가 있기 때문자바스크립트는 컴파일을 하면서 자바스크립트 엔진이 선언된 변수와 함수를 가져와 메모리에 저장하는데이것을 '호이스팅'이라고 한다.자바스크립트.. 2025. 2. 10. 랜선 집들이 웹사이트｜프로젝트 기획 1. 프로젝트 개요프로젝트명: 셀프 하우스(셀하) 웹사이트프로젝트 배경:현대인들은 작은 평수의 집에서도 자신만의 개성을 담은 공간을 꾸미고 싶어합니다. 다양한 인테리어 사례와 팁을 제공하는 플랫폼이 부족한 현실에서, 집들이 사례를 공유하고 사용자 간 소통할 수 있는 웹사이트를 개발하고자 합니다.프로젝트 목표:사용자들이 자신의 인테리어 사례를 업로드하고 공유하는 커뮤니티를 형성.다양한 평수와 스타일별 인테리어 아이디어 제공.2. 프로젝트 범위포함 항목:사용자가 집들이 사례를 업로드할 수 있는 기능.평수, 스타일별 검색 필터.좋아요를 통한 사용자 간 반응 공유.제외 항목:복잡한 3D 모델링 및 가구 배치 시뮬레이션.3. 프로젝트 일정프로젝트 기간: 2025년 1월24일 ~ ing 2025. 1. 31. HTML/CSS 그룹 프로젝트 4일차 I Noona-Kitchen . 2024. 12. 30. HTML/CSS 그룹 프로젝트 1일차 I Noona-Kitchen . 2024. 12. 26. HTML/CSS 그룹 프로젝트 3일차 I Noona-Kitchen . 2024. 12. 25. HTML/CSS 그룹 프로젝트 2일차 I Noona-Kitchen . 2024. 12. 24. 웹 독학 (유용한 사이트 정리)｜웹 개발자 준비 독학하면서 유용하게 사용하고 있는 사이트 정리1. https://replit.com/~ Sign UpBuild and deploy software collaboratively with the power of AI without spending a second on setup.replit.com다른 사람들과 코드를 공유하며 수정하거나 테스트할 수 있는 온라인 IDE이다.파이썬, C++, 자바, 코틀린, Node.js, HTML/CSS/JS 등 수많은 언어와 환경을 지원 2. https://flatuicolors.com/palette/defo Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨280 handpicked colors ready for COPY & PAS.. 2024. 12. 23. 웹 독학 내용 정리 (CSS)｜웹 개발자 준비 CSSHTML 태그에 스타일 주는 방법HTML 태그에 직접div{ color: red;}· 어떤 태그에 공통적인 스타일을 주고싶을 때 사용 id를 이용#new-style{ color: red;} → (HTML)· class와 사용방식이 비슷하지만 한번에 하나의 스타일만 줄 수 있다. (주로 자바스크립트에서 많이 사용) class를 이용.new-style{color: red;}· 한번에 여러개의 스타일을 줄 수 있다. (가장 많이 사용하는 방법)자주 사용하는 스타일color : 글씨색 변경backgroud-color : 배경색 변경border : 테두리 생성, 3개의 인자를 받는다. (두께, 스타일, 색상) (ex. border: 1px solid red; )width / hei.. 2024. 11. 24. 웹 프로그래밍 준비(Visual Studio Code 개발환경 설정) 비주얼스튜디오코드 설치 방법 및 기본 설정 Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.code.visualstudio.com해당 사이트로 이동하여 자신의 컴퓨터에 맞는 OS 버전으로 설치해 주시면 됩니다. '다음' 버튼과 '설치' 버튼을 누르며 .. 2024. 11. 22. 웹 독학 내용 정리 (HTML)｜웹 개발자 준비 HTML웹 사이트정적 사이트 : 방문자에게 정보를 보여주기만 하는 웹사이트동적 사이트 : 웹 브라우저 화면에 보이는 모습 뿐만 아니라 다양한 기능과 서비스를 제공하는 웹사이트 웹 개발사용자에게 제공할 기능과 서비스까지 모두 담고 있는 웹 사이트를 만드는 것 서버와 클라이언트 ------------ 정보요청 -------------- > 클라이언트 서버 서버 : 인터넷에 연결된 컴퓨터 (정보를 제공해주는 쪽)클라이언트 : 웹사용자가 웹 사이트에 접근하려고 사용하는 기기 프론트엔드와 백엔드프론트엔드 사용자에.. 2024. 11. 21. 프론트엔드 공부 순서 및 로드맵 총정리｜개발자 준비하기 프론트 엔드 로드맵 (한글 버전) 인터넷 (Internet)인터넷(Internet)은 어떻게 작동할까?HTTP는 무엇일까?브라우저(Browser)는 무엇이고 어떻게 작동할까?DNS는 무엇이고 어떻게 작동할까?도메인 이름(Domain Name)은 무엇일까?웹 호스팅(Web Hosting)은 무엇일까?필수 언어 HTML, CSS, JavaScriptHTML 기초 문법과 베스트 프랙티스기본 학습HTML 폼과 유효성 검사CSSCSS 레이아웃 구성CSS 반응형 디자인과 미디어 쿼리JavaScript문법과 기본 구조DOMAjax 요청ES6과 자바스크립트 모듈Scope프론트엔드 개발자는 웹 화면을 다루고 있기 때문에 인터넷과 프로그래밍 언어를 이해하는 것이 필수적입니다. 특히 HTML, CSS, JavaScript는.. 2024. 11. 21. 이전 1 다음 반응형
