코딩온 웹개발자 과정

HTML 개론

HTML table 태그

select 태그 input 태그

CSS inline 내장 style방식, 링크 방식, @import방식

CSS는 HTML 요소의 style(design, layout etc)을 정의 하여야 하므로 CSS 사용을 위해서는 스타일을 적용하고자 하는 HTML 요소를 선택할 수 있어야 한다선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단C

스타일 상속 , 선택자 우선순위

git commit, push

박스 모델 글자와 상자: 요소가 화면에 출력되는 특성, 크게 2가지로 구분 인라인(inline)요소: 글자를 만들기 위한 요소들. 블록(Block)요소: 상자(레이아웃)을 만들기 위한 요소들. Span태그 대표적인 인라인 요소! 글자를 쓰기 위한 가로 공간을 확보하기 위한 태그 컨텐츠 길이 만큼 공간을 가져다 준다. 본질적으로 아무것도 나타내지 않는, 글...

각 태그들은 기본 속성 값이 존재. span 수직 정렬 기본 값은 baseline이다. vertical-align: baseline baseline? 글자 베이스 라인 밑줄 글자가 없을 경우 박스의 최하단을 베이스라인이라고 본다. 방법1: &nbsp를 넣으면 공

transition속성의 시간은 필수값이다. 변화할 때도 적용이 되지만, 돌아올 때도 적용이 된다. transition-property 속성명기본 속성은 all (변하는 모든 값들을 한꺼번에 정한 시간동안 변화시킨다.)쉼표로 구분해서 여러개의 속성을 각기 다른 시간으로

서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 CSS를 지정하게 하는 기술특정기계, 특정 사이즈 이상일 때는 이 화면~ 정해준 사이즈를 기반해서 각각 다른 css를 적용할 수 있게해준다. @media 미디어 유형 and (크기 규칙)미디어 유형 : All(전부)

각 브라우저에 기본으로 설정된 cSS 를 다 날리고 나의 CSS를 적용시켜주는 것이 Reset CSS이다. 브라우저의 기본 CSS 속성을 초기화https://www.jsdelivr.com/package/npm/reset-cssCopy HTML-> Link 붙여

Block/Element/Modifier의 약자협업시 CSS 클래스 이름을 짓는 방법추후 SCSS와 함께 사용할 때 편리(Element 소속되어있는 것)어디에 소속되어있는지 바로 알 수 있다. 가장 바깥쪽 상위 요소인 독립적 블록재사용이 가능 \- 재사용을 위해 ma

img 태그의 기본 속성은 span이다 글자를 위한 속성으로 잡힘baseline으로 잡혀있기 때문에 뜬다. span 태그는 inline 태그이니까, img 태그의 display를 block으로 바꾸면 수직 정렬 기준을 base line으로 잡지 않고 크기를 기준으로 잡

내장 방식 script라는 태그로 열고 닫아야만 적용된다. 위치는 어디서나 사용가능하다. 간단하게 만들 수 있음특정 페이지에서만 작동하는 기능일 경우 내장 방식으로만 따로 구현 가능링크 방식 js 파일을 따로 만들어서 link로 불러오는 것 위치는 어디서나 사용가능하

조건문 IF 비교 연산자 비교연산자 a == b : a와 b가 동일하면 True a != b : a와 b가 동일하지 않으면 True a = b : a가 b보다 크거나 같으면 True 논리연산자 a && b : a, b 전부가 true 일 때만 true (하나

매개 변수가 없는 함수 \- 그냥 실행만 된다. 매개 변수가 있는 함수함수의 출력 내용을 바꾸고 싶다면? 매번 다른 함수를 선언 해서 사용하지 않고 매개 변수를 전달하여 함수의 실행 값을 변경 할 수 있다. 매개변수는 무한대로 쓸 수 있다. 매개변수는 참조하는 순서대로

This this는 자기가 현재 위치한 공간의 객체를 반환해주는 역할을 한다. this는 자기가 속한 object를 반환한다. object 안에 object가 있는 경우, 위의 객체는 that으로 접근하고 안에 있는 객체는 this로 접근하면 된다. 객체에 있는 이름

과제리뷰: Todo list append()와 appendChild() 공통점 붙여 넣는 공간은 동일-> 부모 노드의 제일 마지막 자식 요소로 추가 append()와 appendChild() 차이점 append() append() 는 Node 와 String

객체지향 프로그래밍(OOP) 에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀 이다. -> 객체의 설계도그리고 클래스(객체의 설계도)를 이용해서 실제 객체를 만드는 과정을 인스턴스화 라고 말한다. Class 도 일종의 Syntactic sugar

CreateReadUpdateDeleteReq(uire): 브라우저에 들어온 요청Res(ponse): 요청에 따른 서버의 응답nodemon : 서버상의 코드가 변경되거나 서버가 죽으면 자동으로 재실행시켜주는 package실행은 package.json에 스크립트를 추가하

Obj가 담긴 배열로 간단하게 Data 생성함수에 마우스를 올려놓으면 주석 내용이 뜬다. 주석을 고급 개발자 처럼 보이게 달아주는 기능입니다!거의 표준화가 되어서 Vscode, Webstorm 등 에서는 기본으로 기능을 제공합니다!특정 형태로 주석을 달면 해당 주석 내

/\*\*  블로그용 서버 API 구성   GET /posts          목록 가져오기  GET /posts/:id      글 내용 가져오기  POST /posts         새로운 글 올리기  PUT /posts/:id      기존 글 수정하기  DELE

블로그, 필요API 구성 목록 가져오기 구현 GET 포스트의 전체 목록을 가져 옵니다! 배열의 map 메소드를 이용해서 id, title 만 들어있는 배열을 만들어 전달 합니다! 전체 포스트의 수도 알 수 있도록 totalCount 정보는 posts 의 길이 값으로

JS 도 Module 을 지원 합니다!다른 사람이 만든 기능을 활용 할 때, 매번 코드를 받아서 붙여 넣기는 귀찮겠죠?이럴 땐, 파일로 받아서 사용하는 편이 더 편할 겁니다!그래서 JS도 파일을 Module 로 불러와서 사용이 가능합니다!그런데 방법이 2가지가 있습니다

코드 리팩토링을 위한 JS module에는 ES6방식과 Common JS가 있다. CommonJS와 ES6의 차이점CommonJS 는 Node.js 에서 사용되고 require / exports 사용ES6 는 브라우저에서 사용되고 import / export 사용ES6

기본 의미:네트워크 상에서 데이터를 보낼 때 최적의 경로를 선택하는 과정을 의미 합니다.블로그 서비스 중 포스트에 대한 api 는 /posts 로 처리 중입니다!혹, 여기에 회원관리(가입, 로그인, 탈퇴 등)의 기능을 추가 하고 싶다면?기존 포스트에 대한 api 에 구

터미널 npm init -y터미널 npm install --save-dev prettier.prettierrc 파일 설정.vscode폴더 -> settings.json 설정eslint 설치 npm install --save-dev eslinteslint airbnb룰을

GET Localhost:4000/users위의 요청이 들어오면 회원 정보 Obj 를 그대로 전달GET Localhost:4000/users/:idId 정보를 params 로 받아와서 처리를 해줍니다.단, 해당 id를 가지는 회원이 없으면 예외 처리를 해줍니다!그리고

Users.ejs 에 form 추가하기FormAction 속성: 보내고자 하는 주소 값이 됩니다.Method 속성: 보내는 method 설정Input 의 name 속성은 서버에서 받을 때의 필드 값이 됩니다.버튼 type 으로 submit 을 하면 해당 폼의 내용을 지

express 모듈 불러오기모듈을 server 변수에 담아주기서버를 켜준다. 통신의 시작과 끝 사이에 있음주소에 대한 파일을 나눠 주는 것이 routing이다. 기본 라우터라는 것을 메인 페이지를 담당한다는 것을 말한다.

Board.js 에 MDB 모듈 불러오기접속 주소 uri 설정URI vs URLURL(Uniform Resource Location) : 집 주소 까지만 알려줌URI (Uniform Resource Identifier) : 집 주소 + 그 집에 사는 누구 까지 표시DB

HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하여 저장하는 작은 데이터 저장소JS의 객체처럼 key 값과, data 가 들어 있습니다브라우저는 쿠키로 데이터를 저장해 두었다가, 동일한 서버에 다시 요청을 보내게 될 때 쿠키에 저장된 정보를 함께 전송합니다따라서,

passport 로그아웃 구현 Passport 로그 아웃은 req.logout 메소드를 사용합니다 로그인 여부에 따른 게시판 서비스 변경 passport로 로그인 했으므로 기능을 변경 Passport 에 의해 Login 된 유저 Session 은 req.user

백엔드를 구성하는 언어들: Node.js, JSP, Python최근 해외는 MERN: node.js(express) React mongoDB 로 웹사이트를 만드는 추세이다. 약속된 형태로 데이터들이 정렬이되어서 전달이 된다. 웹서버에 들어있던 정보를 web appl

react 컴포넌트가 리턴이 될 때최상위에 div하나 선언 후 return하고 싶은 것들을 감싸주면 된다. react는 컴포넌트 단위여서 무조건 하나의 요소에 감싸져있어야 한다. -> 부모요소가 있어야만 리턴이 가능하다. 컴포넌트는 무조건 PascalCase로 해야하고

form 태그에서 name이라는 이름으로 속성의 이름을 썼던 것처럼props도 동일하게 동작인자 전달부분에 {}를 추가하여 인자 전달부분에서 구조 분해할당으로 props를 받아와서 사용해도된다. 중간에 중괄호를 치면 문자 뿐마닝 아니라 변수 등으로 받아올 수도 있다.

JSX 와 IF문 조합 조건부 렌더릴ㅇ의 경우 상황에 따라서 해당 컴포넌트를 보여줄지 말지 여부를 결정 3항연산자 또는 && 연사자를 더 많이쓴다. (코드가 더 짧고, 직관적) prompt 함수: 브라우저상에서 값을 입력받음

상태 관리 라이브러리 입니다!R로 시작해서 React에 종속되는 것 같지만, 상태 관리가 필요한 다른 프레임 워크(Angular.js / Vue.js / 심지어 Jquery) 에서도 사용이 가능물론 Redux 하나를 전체가 공유하는 것은 아니고 Redux의 개념을 각각