CodeStates

HTML과 CSS는 웹페이지 개발에 사용되는 프로그래밍 언어로 javaScript와 같이 3가지 언어가 사용되어야 웹페이지가 완성된다고 볼 수 있다. \*HTML (Hypertext Markup Language ) : 웹페이지 구조를 설계하는 마크업 언어 \*CSS (

Bare MinimumStep 1 - CSS 마음껏 수정하여 예쁜 계산기 만들기calculate.html 파일은 그대로 두고, yourStyle.css 파일을 수정합니다.자신이 원하는 디자인으로 계산기를 꾸며보세요.Step 2 - 버튼이 잘 동작하는지 확인하기버튼을 클

CLI : Command Line InterfaceCLI는 명령 프롬프트를 뜻한다. 윈도우즈에서는 cmd, 우분투나 맥에서는 터미널이라고도 불린다.GUI ( Graphic User Interface ) 가 발전하면서 마우스 클릭을 이용한 명령 실행이 간편해졌기에 대다수

Bare minimum requirement제품의 인터페이스(UI)를 와이어프레임(wireframe)으로 그리세요.프로토타이핑 툴(파워포인트, figma 등)을 이용해 레이아웃을 디자인하세요.트윗 작성자, 트윗 내용을 입력할 수 있는 HTML 태그를 작성하세요.3개 이

DOM이란?문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 메서드JS로 html 요소 찾기console.dir --- DOM을 객체로 출력document.body.children --- body영역의 자식 엘

고차함수란?함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수함수는 변수에 저장 가능.그 변수를 인자로 받을 수도 있다.

JSX을 활용하여 HTML과 JS를 넘나들며 작업을 해야했던 불편함을 해소하고 하나의 파일에 직관적인 코드 작성을 진행할 수 있다.컴포넌트란 하나의 기능 구현을 위해 여러 코드를 묶어놓은 것을 의미하며 컴포넌트별로 코드를 작성하면 서로 독립적으로 기능하고 재사용이 가능

BareMinimumApp.jsSidebar.jsTweet.jsMypage.js

State는 변할 수 있는 값. 컴포넌트의 사용 중 내부에서 변할 수 있는 값Props는 Propertion의 약칭으로 외부로부터 전달받은 값이라고 할 수 있다.Props는 객체 형태이다.props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를

Bareminimum React Router 설치 --React Router DOM을 npm 으로 설치해야 합니다. 상세 컴포넌트 구현하기 --원하는 레이아웃에 끼워넣을 수 있게 상세 컴포넌트를 먼저 구현합니다. Sidebar 컴포넌트 (Sidebar.js) --S

주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우중첩된 반복문이 많거나 반복문의 중첩 횟수(number of loops)를 예측하기 어려운 경우재귀 함수의 입력값과 출력값 정의하기문제를 쪼개고 경우의 수를 나누기단순한 문제 해결하기복잡한 문제 해결하기코드

Git 이란?특정 시점에 생성된 백업 복사본을 스냅샷이라고 하는데 이렇게 하나하나 스냅샷을 만들어 주는 작업을 commit이라고 한다. 스냅샷을 통해 버젼 관리를 진행할 수 있다는게 깃의 장점이다.이렇게 매 commit 마다 변경 사항에 대한 이력이 남아 협업 및 버젼

'a'로 시작해서 'b'로 끝나는 길이 5의 문자열'b'로 시작해서 'a'로 끝나는 길이 5의 문자열

멀티 태스킹을 의미한다. 동기적 실행은 수행하고 있는 기존 작업이 완료되기 전까지 다른 작업을 진행할 수 없지만 비동기적 실행은 다중 실행이 가능한 시스템이다.동기적 실행은 주어진 구문을 순차적으로 실행한다면 비동기적 실행은 특정 구문을 몰아서 처리할 수 있다.보면 맨

말썽꾸러기 김코딩은 오늘도 장난을 치다가 조별 발표 순서가 담긴 통을 쏟고 말았습니다.선생님께서는 미리 모든 발표 순서의 경우의 수를 저장해 놓았지만 김코딩의 버릇을 고치기 위해 문제를 내겠다고 말씀하셨습니다.총 조의 수 N과 선생님이 말씀하시는 발표 순서 k가 주어질

ex ) 사이트를 이용하는 대부분의 고객들 --- 인터파크를 이용하는 김코딩, 카카오페이를 이용하는 박해커 자 이제 인터넷의 주소창을 한 번 살펴보자 네이버에 접속했을 때 뜨는 주소창의 모습이다. https://www.naver.com

HTTP 란 ?Hyper Text Transfer Protocol 의 줄임말로써 HTML과 같은 문서를 전송하기 위한 월드 와이드 웹(WWW)에 내재된 Application Layer 프로토콜이다. 쉽게 말해 인터넷 통신을 위해 필요한 프로토콜이다. 우리가 웹 페이지를

SSR 이란?Server Side Rendering의 약자로 웹 페이지를 브라우저 ( 클라이언트 측 ) 에서 렌더링하는 대신에, 서버에서 렌더링하는 것을 말한다. 웹 페이지를 다른 경로로 이동할 때마다 서버가 렌더링 작업을 수행하기 때문에 서버 부하가 커진다.위와 같이

CORS 란?우리가 가져오는 파일들이 안전한 주소로부터 전송되는 것인지 브라우저( 크롬, 엣지.. etc ) 가 검문하는 정책이다. 하지만 설정에 따라 모든 외부 서버로부터의 접근을 허용할 수도 특정 서버의 접근만을 허용할 수 있게 조절 가능하다. 즉, CORS를 사용

첫번째 테스트는 state & props를 활용한 useState 구문으로 해결할 수 있고, 두번째 테스트는 SideEffect ( 지역 함수가 전역 변수를 변경시킬 때 발생 ) 를 UseEffect 구문으로 해결한다. UseEffect 활용에는 2가지 방법이 있다.

웹 서버 구축을 위한 2가지 방법은 다음과 같다. 공통점은 둘 다 Node.js 환경에서 이뤄지는 작업이지만 차이점은 후자의 코드가 더 직관적이고 단순하다.HTTP 모듈은 Node.js에 내장되어 있는 메소드이지만 Express 라이브러리는 Node.js의 내장 기능이

bookController.jsflightController.js

App.js변수 ( 함수를 담은 ) addCart, removeCart, Quantity 작성 components/Nav.jsNav는 App.js에서 props ( cartItems ) 를 전달 받으며 그 값을 장바구니 우측의 span 태그 사이에 삽입 Pages/I

redux란? 리덕스는 react에서 가장 많이 사용되는 상태 관리 라이브러리이다. react에서 가장 많이 사용될 뿐 react 라이브러리 위에서 작동한다는 말이 아니다. 리덕스는 react 라이브러리 없이 구현 가능한 라이브러리이다. 그럼 상태란 무엇일까?

actions / index.jspages / ItemListContainer.jspages / ShoppingCart.jsreducers / itemReducer

이런 문구 어디서 많이 봤을 것이다. 위의 예시는 파일에 대한 읽기 권한만을 가지고 있을 때 나오는 문구다. 파일을 수정하기 위해서는 쓰기 권한을 획득해야 한다.이처럼 파일을 작업하기 위해 사용할 수 있는 권한의 종류에는 3가지가 있다.바탕화면에 linux라는 폴더와

Database란 뭘까? 간단히 말하면 데이터들의 집합이라고 할 수 있지만, 일반적인 의미로는 단순히 데이터들의 집합을 넘어 대용량의 데이터를 저장하는 프로그램을 지칭한다. 그렇다면 이 database는 어디에 사용되는걸까? 서버를 구축할 때 사용된다. 서버는 클라이

DB는 크게 관계형, 비관계형으로 나뉘고 이번에는 이 둘의 차이점에 대해 알아보도록 하자. ACID는 Atomicity(원자성), Consistency(일관성), Isolation(격리성), Durability(지속성) 를 의미합니다. 각 단어는 데이터베이스에서 실행되

스키마는 뭘까? SQL을 사용할 때 효율적인 테이블 구성을 위해 데이터들간의 관계도를 표현한 것이라 할 수 있다. SQL ( 관계형 DB ) 에서는 테이블 형태로 데이터를 저장하기 때문에 이 테이블 구성, 즉 엔티티, 필드들을 어떻게 설정하고 표현할 것인지 스키

이번에는 MySQL의 설치법에 대해 알아보자 만약 비밀번호 설정이 안되서 mysql -u root -p 으로 로그인 시도를 할 때ERROR 1698 (28000): Access denied for user 'root'@'localhost' 이라는 에러가 발생한다면 초기

HTTPS란 뭘까? HTTP + Secure, 즉 HTTP에 보안 기능을 추가한 것이다. 기존 HTTP에는 데이터 송수신 과정에서 암호화가 없었기에 개인정보 탈취 위험성이 높았고 이를 방지하기 위해 탄생하였다. HTTPS는 3가지를 이용한다. CA, 인증서, 비

Hashing 이란 무엇일까?Hashing은 암호화 기법 중 하나라고 할 수 있다. 암호화는 그럼 무엇이냐? 특정 주체만 접근할 수 있게 풀기 어려운 알고리즘을 구현하는 것이라고 할 수 있다.Hashing의 대표적인 예로는 SHA-256 알고리즘이 있다.SHA-256은

Cookie란 무엇일까?Cookie는 우리를 기분 좋게 만들어주는 환각제..가 아니라상태를 유지시켜주는 확장 기능이다. < 쿠키 사용 예시 >쿠키는 Server와 Client ( 브라우저 ) 통신 간에 사용되는데 Server는 무상태성 ( Stateless ) 을

로그인 요청이 성공적으로 인증되었다면 세션 id를 반환하고 이를 쿠키로 클라쪽에 내려준다. < 로그아웃 >서버의 세션 정보를 삭제클라이언트의 쿠키를 갱신세션 정보를 삭제하는 메서드로는 req.session.destroy(). 세션 정보가 무효화되면 자동으로 쿠키도

토큰 기반 인증은 무엇일까? 말 그대로 토큰을 활용해서 인증도 하고 클라이언트가 서버와 통신도 하는 것을 말한다.세션 기반 인증에서는 클라이언트에 데이터 요청이 들어오면 서버는 DB에서 인증 정보가 일치하는지 확인한 후 세션 id를 생성하여 DB에 저장해놓은 후 쿠키로

https://github.com/FiloSottile/mkcert 우분투의 경우 다음 명령어를 이용해 설치합니다.macOS 사용자의 경우, Homebrew를 통해 mkcert를 설치할 수 있습니다.먼저 다음 명령어를 통해 로컬을 인증된 발급기관으로 추가해야

Oauth란 무엇일까?프로토콜이다. 제 3자 인증 ( 소셜 로그인 ) 을 통한 리소스 접근을 허용하는 프로토콜이다.위의 사진을 보자. 로그인 방식은 2가지다. 티몬 계정을 이용하거나 소셜 계정을 이용하거나client ( 사용자 ) 가 소셜 계정 로그인 버튼을 클릭한다.

1) Github - Settings - Developer settings - OAuth Apps - New OAuth App 클릭하여 OAuth를 통한 로그인 정보작성Authorization callback URL :OAuth 메커니즘이 인증 과정이 끝난 후 리디렉

블록 체인이란 무엇일까 ? 블록 + 체인, 말 그대로 블록들의 연결이다. 블록들의 연결로 무엇을 할 수 있을까? 정보를 담을 수 있다. " 매 블록마다 거래 내역들을 담고 이 블록의 용량이 꽉차면 다음 블록에 이전 블록의 주소를 담아 연결한 후 거래 기록들을

때는 2008년 10월, 사토시 나카모토라는 가명을 쓰는 프로그래머가 비트코인이라는 토큰을 개발했다. 이것이 암호화폐의 시작이다.https://bitcoin.org/files/bitcoin-paper/bitcoin_ko.pdf -- bitcoin 백서그렇다면

Web3.js과 비슷한 Caver를 사용하여 KAS기반 클레이튼 서버 개발을 진행해봤다. https://github.com/PILSUCHOI/Cas-Server -- 코드 저장소 https://ko.docs.klaytn.foundation/dapp/sdk/cave

기능 구현 주요 목표는 다음과 같았다. 클라이언트 페이지에서 서버에 Axios 요청을 보내고 ( GET or POST )useState 를 활용하여 받아온 값을 상태변수에 저장시켜 놓은 후(상태변수).map을 활용하여 필요한 컴포넌트에 속성값을 뿌려준다서버는 axios