본문 바로가기

반응형

전체 글

(424)
[2023 신입부원 기초 스터디] 이총명 #3주차 1 . float 속성 HTML 요소에 float이 적용되면 그 요소는 흐름에서 벗어나 둥둥 떠다니듯 배치된다. 즉 float을 적용한 요소를 다른 요소들이 감싸는듯이 보이게된다. none - 기본값으로 요소를 띄우지 않음 left - 왼쪽에 띄움 right - 오른쪽에 띄움 2. clear 속성 clear는 float값을 취소한다. clear:none; - 기본값 clear: left; - 왼쪽 취소 clear: right; - 오른쪽 취소 왼쪽 오른쪽 구분하기 귀찮으니까 그냥 clear:none을 사용하도록 하자 3. position 속성 position 속성은 HTML 요소를 배치하는 방법을 지정합니다. static (기본값) static은 요소가 HTML 문서에서 일반적인 흐름을 따라 배치가 되게..
[2023 신입부원 심화 스터디] 정호용 3주차 - Part 4 💡문자열 메소드 💡배열 메소드 💡객체 심화 💡구조분해할당
[2023 신입부원 기초 스터디] 조상혁 3주차 - CSS와 친해지기 float 속성 float 의 사전적 의미는 "뜨다" HTML 요소에 float이 적용되면 그 요소는 흐름에서 벗어나 둥둥 떠다니듯 배치된다. 자주 사용되는 속성값 none - 기본값으로 요소를 띄우지 않음 left - 왼쪽에 띄움 right - 오른쪽에 띄움 inherit - 부모 요소로부터 상속 initial - 기본값으로 설정 clear 속성 clear는 취소하다는 뜻으로 float: left; 또는 float: right; 값을 취소한다. 속성값 clear:none; - 기본값 clear: left; - 왼쪽 취소 clear: right; - 오른쪽 취소 position 속성 HTML 요소를 배치하는 방법을 지정 static - 요소가 html 문서에서 일반적인 흐름을 따라 배치되게 하며,기본값이..
[2023 신입부원 심화 스터디] 이정욱 #3주차 - 보충 수업 Part1, 2 1. 문자열 메소드 1) toUppercase(), toLowerCase() 모두 대문자로 바꿔주거나 소문자로 변환해줌 2)trim(), trimStart(), trimEnd() trim()은 모든 공백 삭제 trimStart()은 앞쪽 공백 삭제 trimEnd()은 뒷쪽 공백 삭제 3)repeat() repeat에 반복 횟수를 넣어주면 해당str이 반복 횟수만큼 반복함. 4)padEnd(), padStart() padding해줄 간격과 그 간격 만큼 채워 넣을 문자를 입력해주면 그만큼 padding을 채워 넣어 준다. 5)indexOf() 특정 문자열이 문자열 인덱스 어디 부분에 있는지 찾아줌. 만약에 특정 문자열이 없다면 -1을 리턴 6)includes() 특정 문자열을 포함하고 있는지 확인하여 tr..
[2023 신입부원 심화 스터디] 박지민 #3주차 - 보충수업 Part .1, Part. 2 1. 문자열 메소드 - toUpperCase() : 문자열을 모두 대문자로 변환 - toLowerCase() : 문자열을 모두 소문자로 변환 - trim() : 문자열의 앞 뒤 공백 제거 - trimStart() : 문자열의 앞쪽 공백 제거 - trimEnd() : 문자열의 뒤쪽 공백 제거 - repeat(n) : 문자열을 n번만큼 반복해서 새로운 문자열 반환 (원본 객체 변함 X) - padStart(n, c) : 앞쪽에 지정한 값 넣음 - 문자열의 길이가 n이 될 때까지 c값 넣기 (원본 객체 변함 X) - padEnd(n, c) : 뒤쪽에 지정한 값 넣음 - 문자열의 길이가 n이 될 때까지 c값 넣기 (원본 객체 변함 X) - indexOf(c) : 주어진 키워드 값을 문자열에서 검색하여 일치하는 ..
[2023 신입부원 심화 스터디] 신진욱 #3주차 - Part 4, Part 5 1. 문자열 메소드 - toUpperCase() : 대문자 변환 - toLowerCase() : 소문자 변환 - trim() : 문자열 앞, 뒤 공백 제거 - trimStart() : 문자열 앞 공백 제거 - trimEnd() : 문자열 뒤 공백 제거 - repeat(n) : 문자열을 n번 만큼 반복해서 새로운 문자열 생성 (원본 객체의 값은 변함 X) - padStart(n,c) : 문자열 앞쪽에 원하는 값 넣기 (문자열 길이 n이 될 때까지 c값 넣기) (원본 객체의 값 변함 X) - padEnd(n,c) : 문자열 뒷쪽에 원하는 값 넣기 (문자열 길이 n이 될 때까지 c값 넣기) (원본 객체의 값 변함 X) - indexOf(c) : 주어진 키워드 값을 문자열에서 검색해서 일치하는 첫번째 인덱스, ..
[2023 백엔드 스터디] 성정규 #1주차 - 3장, 노드 기능 알아보기 3장, 노드 기능 알아보기 3.1 REPL 사용하기 REPL(Read Eval Print Loop) : 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복한다(Loop) 는 의미 한두 줄짜리 코드를 테스트하는 용도로는 적합하지만 긴 코드의 경우 자바스크립트 파일로 만든 후 파일을 통째로 실행해보는 것이 좋다. 3.2 JS 파일 실행하기 콘솔에서 node [자바스크립트 파일경로] 로 실행한다. 확장자(.js) 는 생략해도 된다. 3.3 모듈로 만들기 모듈이란 특정한 기능을 하는 함수나 변수들의 집합을 말하며, 여러 프로그램에 모듈을 재사용할 수 있다. 3.3.1 CommonJS 모듈 module.exports 에 객체나 함수, 변수 등을 대입하여 con..
[2023 백엔드 스터디] 성정규 #1주차 - 2장, 알아두어야 할 자바스크립트 2장, 알아두어야 할 자바스크립트 2.1 ES2015+ 2015년 자바스크립트 문법에 매우 큰 변화가 있었다. 이것이 ES6이라고도 불리우는 ES2015가 등장한 것이다. 2015년을 기점으로 매년 문법 변경 사항이 발표되고 있으며, 이 책에서는 ES2015이상의 자바스크립트를 통틀어서 ES2015+라고 표현한다. 2.1.1 const, let const 와 let 이 공통적으로 가지는 특징인 블록 스코프(범위)의 차이 var 은 함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있음. 하지만 const 와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다. const 는 한 번 값을 할당하면 다른 값을 할당할 수 없다. 또한, 초기화 할 때 값을 할당하지 않으면 에러가 난다..
[2023 백엔드 스터디] 성정규 #1주차 - 1장.노드 시작하기 1장, 노드 시작하기 1.1 핵심 개념 이해하기 1.1.1 서버 노드는 서버 어플리케이션을 실행하는 데 제일 많이 사용한다. 서버는 무엇인가? 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램 클라이언트의 요청에 대해 Yes or No 로 응답 노드는 자바스크립트 프로그램이 서버로서 기능하기 위한 도구를 제공하므로 서버 역할을 수행할 수 있다. 1.1.2 자바스크립트 런타임 Node.jsⓇ는 Chrome V8 Javascript 엔진으로 빌드된 자바스크립트 런타임이다. 1.1.3 이벤트 기반 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 “이벤트 리스너(event listener)에 콜백(callback) 함수를 등록한다”는 말은, 이벤트 기반 시스템에서는 특정 이벤트가..
[2023 백엔드 스터디] 이지원 #2주차 - 6.1~6.2장 Express 웹 서버 만들기 6.1 익스프레스 프로젝트 시작하기 실습을 위해 package.json을 다음과 같이 작성한다. { "name": "learn-express", "version": "0.0.1", "description": "익스프레스를 배우자", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "ZeroCho", "license": "MIT" } 필요한 패키지를 설치한다. $ npm i express $ npm i -D nodemon 서버 코드에 수정 사항이 생길 때마다 매번 서버를 재시작하기는 귀찮다. nodemon 모듈은 이 작업을 자동화해준다. 따라서 앞으로 서버 코드를 수정하면 nodemon이 서버를 자동으로 재시작하며, nodemon이 실..
[2023 백엔드 스터디] 목진협 #2주차 - 6.3~6.5장 Express 웹 서버 만들기 part2 6.3 Router 객체로 라우팅 분리하기 익스프레스를 사용하는 이유 중 하나는 바로 라우팅을 깔끔하게 관리할 수 있다는 점이다. 6.3.1 Express를 이용한 Router 분리 실습 이전 실습까지 작성했던 app.js의 app.get 같은 메소드가 라우터 파트이다. 라우터를 많이 연결하면 app.js 코드가 매우 길어지고 복잡해지기 때문에 Express에서는 라우터를 분리할 수 있는 방법을 제공한다. 라우터 실습을 위해 아래와 같이 routes폴더 안에 index.js와 user.js를 작성하고 app.use를 통해 app.js에 연결한다. [index.js] const express = require('express'); const router = express.Router(); // GET / ..
[2023 신입부원 심화 스터디] 조현상 #3주차 - Part 4. , Part5. 오늘 다룰 내용은 DOM 사용법 , 자바스크립트 배열과 문자열을 쓸 때 유용한 함수 두가지이다. 먼저 DOM 사용법부터 다뤄보겠다 일단 DOM이라는 언어부터 정의하자면웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당하는 것을 말한다. 나는 간단하게 HTML 과 JAVASCRIPT 파일이 서로 연결 가능하게 만들어주는 것이라고 이해했다. 우리는 총 3가지 방법으로 javascript 와 html 을 연결 할 수 있다.1. class를 써서 연결하는 방법이다. //html 파일에 First 라는 class를 만들어줬을 때 //자바스크립트 파일에서 연결할 수 있다. document.getElementByClassName('First'); html에서 class로 만들어줬..
WINK 선서 오늘부터 지지관계에서 벗어나 WINK과 나는 한몸으로 일체가 된다 WINK에 대한 공격은 나에 대한 공격으로 간주한다 세상에 70억명의 WINK 팬이 있다면, 나는 그들 중 한 명일 것이다. 세상에 1억명의 WINK 팬이 있다면, 나 또한 그들 중 한 명일 것이다. 세상에 천만 명의 WINK 팬이 있다면, 나는 여전히 그들 중 한 명일 것이다. 세상에 백 명의 WINK 팬이 있다면, 나는 아직도 그들 중 한 명일 것이다. 세상에 한 명의 WINK 팬이 있다면, 그 사람은 아마도 나일 것이다. 세상에 단 한 명의 WINK 팬도 없다면, 나는 그제서야 이 세상에 없는 것이다. WINK, 나의 사랑. WINK, 나의 빛. WINK, 나의 어둠. WINK, 나의 삶. WINK, 나의 기쁨. WINK, 나의 슬픔..
[2023 백엔드 스터디] 김민선 #1주차 - 5장.패키지 매니저 5.1 npm 알아보기 🌕 NPM(Node Package Manager) 노드의 패키지 매니저 다른 사람들이 만든 소스 코드들을 모아둔 저장소 남의 코드를 사용하여 프로그래밍 가능 이미 있는 기능을 다시 구현할 필요가 없어 효율적 오픈 소스 생태계를 구성중 5.2 package.json으로 패키지 관리하기 🌕 package.json 현재 프로젝트에 대한 정보와 사용 중인 패키지에 대한 정보를 담은 파일 같은 패키지라도 버전별로 기능이 다를 수 있으므로 버전을 기록해두어야 함 동일한 버전을 설치하지 않으면 문제가 생길 수 있음 노드 프로젝트 시작 전 package.json부터 만들고 시작함(npm init) 🌕 package.json 속성들 package name: 패키지의 이름, package.json의..
[2023 백엔드 스터디] 김민선 #1주차 - 4장.HTTP 모듈로 서버 만들기 4.1 요청과 응답 이해하기 🌕 서버와 클라이언트 소통 순서 1. 클라이언트가 서버로 요청(request) 전송 2. 서버가 요청을 처리 3. 서버가 클라이언트로 응답(response) 전송 🌕 노드로 http 서버 만들기 createServer로 요청 이벤트에 대기 req 객체 : 요청(request)에 관한 정보 res 객체: 응답(response)에 관한 정보 const http = require("http"); http.createServer((req, res) => { // 여기에 어떻게 응답할지 적기 }); 🌕 8080 포트 연결하기 res 메서드로 응답 보냄 write로 응답 내용을 적고, end로 응답 마무리(내용을 넣어도 됨) listen(포트) 메서드로 특정 포트에 연결 const ht..
[2023 신입부원 심화 스터디] 김윤희 #2주차 - Part 2. , Part3. 5강 조건문 (if) const a = 10; const b = 20; if (a
[2023 신입부원 심화 스터디] 정호용 #2주차 - Part 2. , Part3. 💡Part 2. 조건문 (if, switch) , 반복문 (for, while) 💡Part 3. 함수 (인자, 매개변수 & 지역, 전역변수) 💡Part3. Default Parameter, Arguments, Rest Parameter, Return Value 💡Part 3. 함수의 표현식, 화살표 함수
[2023 신입부원 기초 스터디] 이총명 #2주차 - CSS 입문 1 . css란 css는 code sexy styling의 약자로 웹사이트를 섹시하게 꾸며준다 css는 Cascading Style Sheet의 약자로 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어이다 2. css 적용방법 인라인 스타일 - Inline Style Sheet 내부 스타일 - Internal Style Shee 외부 스타일 - External Style Sheet 이렇게 3가지 스타일이 있고 앵간하면 외부스타일로 css파일을 따로 만들어 사용한다고 한다. 3. css 출처 사용자 !important > 제작자 !important > 제작자 >사용자 > 브라우저 이 순서인데 사용자는 거의 신경 안써도 되고 제작자>브라우저만 기억해놔도 될 듯 하다. ( important는 casca..
[2023 신입부원 심화 스터디] 이정욱 #2주차 - 기초 문법 Part.2, 3 1. 조건문 (if) 조건문은 if 를 사용하여 실행한다. const a = 10; const b = 20; if (a > b) { console.log('a가 더 작아요!') } else if ( a == b) { console.log('a와 b가 같아요!') } else { console.log('a가 더 커요!') } if (조건문) { 실행부분 } 형식으로 작성되고 조건문이 만족하면 실행부분 안으로 진입하여 코드를 실행한다. else if는 이전의 if문이 실행되지 않고 넘어갔을 때 새로운 조건을 추가하여 실행된다. else는 이전의 if문과 else if문들의 조건들을 제외한 나머지 상태일 때 실행된다. 2. 조건문 (switch) 조건문은 switch의 형태로도 사용할 수 있다. const n..
[2023 신입부원 기초 스터디] 김찬중 #2주차 - CSS 입문 Section 4. CSS란 우리가 HTML로 구조를 만들었다면 CSS를 이용하여 디자인을 입힌다고 생각하면 쉽다. CSS 구조 선택자 - 디자인을 적용할 HTML의 요소이다. 속성 - CSS의 속성과 값을 지정한다.(ex) 속성은 color, 이에 값은 blue) CSS 적용 방법 인라인(Inline) 스타일 - HTML 태그에 필요한 속성을 직접 작성하는 방법, 일관된 디자인 체계를 유지하기 어려워 거의 사용되지 않는다. 주로 외부 스타일을 이용한다. 내부(Internal) 스타일 - 태그 사이에 태그 안에 작성, 마찬가지로 이보단 외부 스타일이 권장된다. 외부(External) 스타일 - CSS의 근본 별도의 파일에 CSS를 작성, 이를 HTML에 연결하여 사용한다. 소융대 근본 동아리 WINK 프..
[2023 신입부원 기초 스터디] 김승혁 #2주차 - CSS 1. CSS란 CSS(Cascading Style Sheets) html로 뼈대를 만들고 css를 적용해 꾸민다! cascading : 폭포 = 스타일이 우선순위에 맞게 연속적으로 적용된다. css 적용 방법 -인라인 스타일 태그 안에 스타일 속성으로 적용 정말로 바꾸지 않을 스타일, 꼭 사용해야 될 스타일에만 사용 ex) -내부 스타일 해드 태그 안에 스타일 태그 만들고, 그 안에 규칙 생성 자주 사용x, 불편함 -외부 스타일 외부에 css 확장자 파일 만들고 불러옴 외부 리소스의 연결을 돕는 링크로 연결(본 파일의 해드 태그에 설정) 관리 편하고 많이 사용 주석 /* 메모내용 */ vscode의 주석 단축기는 'Ctrl + /' CSS 출처 적용 우선순위 사용자 !important > 제작자 !imp..
[2023 신입부원 기초 스터디] 한승훈 #2주차 - CSS 기초 안녕하세요, 반갑습니다. 다들 한 주 잘 지내셨나요~? 사실 제가 글을 쓰는 시점은 중간고사가 종료된 후입니다. 하지만! 시간이 너무 빨리 지나가버린 여러분을 위해 제가 시험 10일 전으로 시간을 돌려드리겠습니다. 그리하여 4월 14일로 돌아왔네요. 제가 만들어드린 시간이니, 유익한 시간 되셨으면 좋겠습니다. 감사 인사까지는 안 하셔도 됩니다. 이번 블로그는 CSS에 대하여 다루어볼 건데요, 그래서 css는 무슨 뜻인가요? 많은 분들이 CSS란 무슨 내용인지 궁금해 하시는데요, 일교차가 크니 이웃 여러분 감기 걸리지 않게 조심하세요~ 1. CSS란 무엇인가? CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. HTML와 같이 CSS는 실제로 프로그래밍 언어는 아..
[2023 신입부원 심화 스터디] 조현상 #2주차 - 기초문법 part.2, 3 심화스터디 2주차 글 시작~! #자바스크립트의 조건문과 반복문 그리고 함수 저번 시간 스터디 내용 - 변수 와 상수 선언 방법 - 변수 와 상수를 가지고 연산하는 방법 변수와 상수를 가지고 조건문을 만들 수 있다. 자바스크립트에서 제공하는 조건문은 if 와 switch 문이 있다. 먼저 if문부터 보면 const c = 30; if( c > 90) { console.log("A"); } else if( c > 50) { console.log("B"); } else{ console.log("F"); } //c는 30이기 때문에 F가 출력될 것이다. if 문은 if , else if , else 가 있다. if 문 선언은 if ( 조건문 ){ ...} 으로 선언할 수 있으며 조건문 안에 연산이 True 일 ..
[2023 신입부원 기초 스터디] 박민규 #2주차 - CSS는 화려하게 (Like 음주 텐겐) CSS : Cascading Style Sheets CSS 형태 ↓ (선택자) h1 { color: blue; } ↑ ↑ (속성명)(속성값) Inline Style 하나의 태그 안에 style을 사용하는 방법 (절대 변하지 않을 스타일인 경우, 꼭 사용해야 할 경우에 드물게 사용) ex) ↑ style 속성을 여러개 주고 싶을 땐 이렇게 ' ; '을 사용한다. Internal Style 이러한 내부스타일 형식이며, h1대신 다른 태그에 class를 부여하고 .(class명) 후 속성명과 속성값을 부여할 수도 있다. 하지만 현업에서는 내부스타일 형식은 번거로운 작업이므로 잘 쓰이지 않는다. External Style 작업을 하고있는 html 파일이 아닌, 기존에 있는 CSS 스타일시트에 ↓ (선택자) h1..
[2023 신입부원 기초 스터디] 박승환 #2주차 - 새싹이 자랐다!! @@지난 강의에서는 HTML을 배웠다. 이번에는 CSS를 알아보자!@@ CSS(Cascading Style Sheets)란? HTML로 이루어진 문서를 꾸미 스타일 시트 CSS의 구조 선택자 - 꾸미고 싶은 HTML요소 (여기서는 h1) 속성명 - 꾸미고 싶은 속성명(여기서는 color) 속성값 - 어떻게 꾸밀지 입력(여기서는 blue) 인라스타일 VS 내부 스타일 VS 외부 스타일 인라인 스타일 HTML태그 안에다가 입력함. 내부 스타일 태그 안에다가 입력함. 외부 스타일 CSS 파일을 외부에 정의, 외부에 정의한 CSS를 HTML파일에 연결하여 사용 외부파일은 파일명.css로 해야함 태그로 외부와 연결. CSS 출처 우선순위 사용자 !important > 제작 !important > 제작자 > 사용자..

반응형