[포스코x코딩온]교육

1일차(OT 및 환경세팅) 1. 자기소개 2. Github 회원가입 3. Visual Studio Code 설치 4. Visual Studio Code 확장 프로그램 설치 5. Git 설치 6. Github에서 Repository 만들고 가져오기 코드를 입

3일차 시멘틱 태그(Semantic Tag) semantic은 '의미론적인'이라는 뜻으로 시멘틱 태그는 말 그대로 '의미가 있는 태그'라는 뜻이다. `이나 와 같이 의미없는 태그들은 이름만으로 그게 무슨 기능을 하는지 알 수 없지만 header, , ` 등 의미가

3일차 CSS의 속성 Font font-weight : 글자의 두께(가중치) normal(400) : 기본두께 bold(700) : 두껍게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 폰트에 따라 지원 안 하는 크기도 있으니 주

4일차relative(상대 위치 지정 방식) : 요소 자신을 기준으로 배치!

JavaScript 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크리빙 언어 또는 프로그래밍 언어 내장방식 & 링크방식 내장방식

함수(Function) 특정 동작(기능)을 수행하는 일부 코드의 집합(부분) 함수 선언문(Function Declarations) : 어디서든 호출가능 함수 표현식 : 코드에 도달하면 생성 함수 선언문, 함수 표현식 차이점 함수 선언식은 호이스팅에 영향을

문자열 관련 메소드 let str = 'Happy day~!'; length : 문자열 길이를 반환(공백포함) str.length //13 toUpperCase() : 문자열 전체를 대문자, 혹은 소문자로 변경 str.toUppercase() /

DOM(Document Object Model) HTML 문서 요소의 집합 HTML 문서는 각각의 node와 object의 집합으로 문서를 표현 따라서 각각 node 또는 object에 접근하여 문서구조/ 스타일 / 내용 등을 변경할 수 있도록 하는 것 Docum

그리드(Grid) 페이지의 레이아웃을 만들 때 사용 IE 지원 안됨(IE11은 부분 지원) Flex가 한 방향에 대해서 정렬을 했다면 Grid는 여러 방향에 대해서도 정렬을 한다. CSS3 부터 등장 > display: grid; Flex와 마찬가지로 contain

구글 크롬의 자바스크립트 엔진에 기반해 만들어진 Javascript 런타임이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적npm 패키지 사용가능Node.js 사이트 링크다운로드하고계속 next 누르다 보면 완료설치 됐으면 win+R 누르고 cmd 확인node -

웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있다.http 모듈 이용 시 코드의 가독성↓ 확장성↓→ 이를 해결하기 위해 만들어진 것이 Express 프레임워크템플릿 엔진문법과 설정에 따라

비동기처리 setTimeout() >setTimeout(code, delay); delay동안 기다리다가 code 함수를 실행 비동기처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성 왜 비동기 처리

데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와 줌url 인코딩방식json 방식입력된 데이터를 한 번에 서버로 전송하기 위해 사용즉, 클라이언트가 서버에게 정보를 전달할 때 사용속성

동적 Form 전송 form 전송 input type = "submit" 이나 button type="submit"을 이용해 전송 전송 시 페이지 이동이 일어난다. 비동기 HTTP 통신 동기 방식 한 번에 하나만 처리 -> 페이지를 아예 이동해 서버가 데

데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와줌express 4.x 부터 body-parser가 내장되어 있어 설치가 필요없음단점멀티파트 데이터를 처리하지 못한다.멀티파트 데이터 :

데이터베이스 데이터베이스 데이터베이스란 여러 사람들이 공유하고 사용할 목적으로 통합 관리되는 데이터들의 모임(데이터를 모아둔 창고) 데이터를 저장하는 구조/자료의 모음 데이터의 집합소 중복이 없어야 한다. 파일 시스템(File System) 운영체제의 한

MVC란? Model View Controller 소프트웨어 설계와 관련된 디자인 패턴 > 디자인패턴이란? -> 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론 MVC 이용 웹 프레임워크 PHP Django Express A

INNER JOINLEFT (OUTER) JOINRIGHT (OUTER) JOIN사용할일이 거의 없음FULL (OUTER) JOINCROSS (OUTER) JOIN1:1User.hasOne(Profile, {foreignKey: 'user_id', onDelete :

자바스크립트 구문을 알아서 SQL로 변환해준다.DB 작업을 쉽게할 수 있도록 도와주는 ORM 라이브러리 중 하나ORM : Object Relation Mappingsequelize : 시퀄라이즈 패키지sequelize-cli : 시퀄라이즈 명령어 실행mysql2 :

웹 사이트에 접속할 때 서버에 의해 사용자의 컴퓨터에 저장되는 정보를 의미웹 사이트는 이렇게 저장된 사용자의 정보를 클라이언트(Client) 측의 컴퓨터에 남겨서 필요할 때마다 재사용사용자의 컴퓨터에 마치 과자 부스러기가 남아 있는 것과 같다고 해서 '쿠키(cookie

참고사이트인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의자신들의 정보에 대해 웹사이트나 어플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.(위키백과)라고 나와있는데 쉽게 말해서 별도의 회원가입 없이

서버구축 서버란? 네트워크에서 다른 컴퓨터나 소프트웨어 같은 클라이언트에게 서비스를 제공하는 컴퓨터 클라이언트 / 서버 시스템 참고 블로그 서버는 단독으로 움직이지 않으며 불특정 다수의 컴퓨터에 일방적으로 서비스를 제공하는 것도 아니다. 서버는 클라이언트로부터 요청

배포할 파일을 정하고repository를 새로 만들어줌이름적고 다른설정 건드리지말고 Create repositorygit remote \~~ 부터 복사vscode에 배포할 폴더 경로로 와서하고 아까 복사한 git remote 복붙해서 github에 폴더 올리기git에

암호화 암호화 종류 단방향 알고리즘 단방향 알고리즘은 암호화는 수행하지만 절대로 복호화가 불가능한 알고리즘을 의미 암호화 가능, 복호화 불가 양방향 알고리즘 양방향 알고리즘은 암호화된 암호문을 복호화 할 수 있는 알고리즘을 의미 암호화 가능, 복호화 가능 대칭키

extended : 중첩된 객체의 표현 여부 application/x-www-form-urlencoded extended true : 중첩된 객체표현을 허용할지말지 정하는 것, 객체안에 객체를 파싱할 수 있게 하려면 true false : query-s

서버와 클라이언트를 연결해주는 도구로써 인터페이스 역할을 하는 것서버 : 클라이언트 소켓의 연결 요청을 대기하고, 연결 요청이 오면 클라이언트 소켓을 생성해 통신을 가능하게 하는 것소켓은 프로토콜, IP주소, 포트 넘버로 정의됨TCP와 UDP 프로토콜을 사용하여 데이터

Websocket을 기반으로 실시간 웹 애플리케이션을 위한 Javacript 라이브러리이다.웹 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 해주는 Node.js의 모듈이다.HTML5의 웹 표준 기술매우 빠르게 동작하며 통신할 대 아주 적은 데이터를 사용함이벤트

동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만든 오픈소스 JavaScript 라이브러리데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등에서 사용화면을 만들기 위한 자바스크립트 라이브러리현재

재사용이 가능한 각각의 독립된 모듈(재사용 가능한 UI코드 조각)MVC View를 독립적으로 구성해 재사용할 수 있고, 새로운 컴포넌트도 만들 수 있다.데이터(props)를 입력받아 View 상태(state)에 따라 DOM Node를 호출한다.UI를 재사용 가능한 개별

state와 setState 📌 state란? 리액트에서 이벤트에 의해 변경되는 동적인 값 버튼을 클릭하는 onClick 이벤트, input 입력으로 인해 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우 사용된다. props는 부모 컴포넌트가 설정하

React hook form React에서 form의 validation을 도와주는 라이브러리 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와줌 장점 성능최적화 React-Hook-Form은 내부적으로 성능 최적화를 고려하여 설계, 입력

Local State : 각각의 컴포넌트가 소유하고 있는 상태를 의미. 이 상태는 해당 컴포넌트 내에서만 관리되고 사용됨Cross-Component State : 두 개 이상의 컴포넌트 간에 공유되는 상태를 의미하며 props를 통해 상태를 전달App-Wide Stat

폴더만들기(mkdir typescript) npm init -y npm install typescript npx tsc --init 파일이름.ts 로 만들기 npx tsc 파일이름.ts 생성된 node 파일이름.js로 재생하기 타입스크립트란? 사용방법 변수나 함수를

썬 마이크로시스템즈에서 1995년에 개발한 객체지향 프로그래밍 언어이다.객체지향 프로그래밍(OOP, Object Oriented Programming)이란 프로그램을 개발하는 기법으로 부품에 해당하는 객체들을 먼저 만들고, 이것들을 하나씩 조립 및 연결하여 전체 프로그

Arrays Method 1. copyOf 특정길이 만큼 복사한 새 배열을 반환한다. 2. copyOfRange 시작 인덱스부터 종료 인덱스 전까지의 부분을 복사한 새 배열을 반환한다. 3. fill 배열의 주어진 요소를 주어진 값으로 채운다.

객체 지향 프로그래밍에서는 모든 데이터를 객체(object)로 취급하며, 이러한 객체가 바로 프로그래밍의 중심이 된다.객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 설명할 수 있다. 이러한 객체의 상태(state)와 행동(behaivor)을 구체화하는

https://inpa.tistory.com/entry/JAVA-%E2%98%95-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-vs-%EC%B6%94%EC%83%81%ED%81%B4%EB%9E%98%EC%8A%A4-%EC%B0%A8

자바에서는 abstract 키워드를 클래스명과 메서드 명 앞에 붙임으로서 컴파일러에게 추상 클래스와 추상 메서드임을 알려주게 된다.추상 메서드는 작동 로직은 없고 이름만 껍데기만 있는 메서드라고 보면 된다. 즉, 메서드의 선언부만 작성하고 구현부는 미완성인 채로 남겨둔

자바 Spring Spring이란? Java의 웹 프레임워크로 Java 언어를 기반으로 사용한다. Java를 이용한 기술들(JSP, MyBatis, JPA 등)을 더 편하게 사용하기 위해 만들어진 것 프로젝트를 하다보면 중복되는 코드가 나오는데 Spring은 이런 중

API는 Application Programming Interface라는 용어로써, 어떠한 응용프로그램에서 데이터를 주고 받기 위한 방법을 의미한다. 어떤 특정 사이트에서 특정 데이터를 공유할 경우 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떠한 데이터를 제공받