Tree & Graph
자료구조 트리는 나무의 형태를 가지고 있다. 그래프의 여러 구조 중 단방향 그래프의 한 구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮았기에 트리 구조라 부른다.트리 구조는 계층적 자료구조이다. 데이터가 바로 아래에 있는 하나 이상의 데이터에 한 개의
Stack & Queue
자료구조는 여러 데이터의 묶음을 저장하고, 사용하는 방법을 정의한 것이다.여기에서 데이터는 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 모든 값이다. 이 데이터들이 중구난방으로 있다면 한눈에 알아보기 힘들 수 있다.이처럼 데이터는 분석하고 정리하여 활용
OAuth
웹이나 앱에서 흔히 볼 수 있는 소셜 로그인 인증 방식이 OAuth 2.0이라는 기술을 바탕으로 구현됐다.전통적으로 직접 작성한 서버에서 인증을 처리해 주는 것과는 달리, OAuth는 인증을 중개해 주는 매커니즘이다. 보안된 리소스에서 액세스하기 클라이언트에게 권한을
Token
토큰은 웹 보안에서 인증과 권한 정보를 담고 있는 암호화된 문자열을 말한다.토큰 인증 방식은 기존의 세션 기반 인증이 가지고 있던 한계를 극복하고자 고안되었다. 토큰을 사용하면 사용자의 인증 정보를 서버가 아닌 클라이언트 측에 저장할 수 있다.유저의 인증 상태를 클라이
Cookie & Session
쿠키는 서버에서 클라이언트에 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있다.쿠키를 이용하는 것은 서버에서 클라이언트에 쿠키를 전송하는 것만 의미하지 않고 클라이언트에서 서버로 쿠키를 다시 전송하는 것도 포함된다.
네트워크
언제 어디서나 인터넷에 접속하여 필요한 정보를 찾고 사람들과 연락을 주고받을 수 있게 되었다. 우리가 사용하는 인터넷 프로토콜 즉 IP 기반의 네트워크는 미국에서 시작되었다.당시 냉전시대 핵전댕을 대비하기위해 통신망 구축을 위해 추진되었고 기존에 사용했던 회선교환 방식
전역 상태 관리
프론트엔드에서의 상태란? UI 에 동적으로 표현될 데이터를 말한다. 일반적인 컴포넌트내에서 상태를 변경해야하는 로직을 작성해야 하는 일이비일비재하다. 컴포넌트가 서로 어떤 상태를 공유하고, 주고받는지도 중요하다.함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을
Styled Components
Styled ComponentsCSS 코드를 다룰 때 다음과 같은 불편한 점이 생길 수 있다.class, id 이름을 짓느라 고민한 적이 있다.CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다.CSS 파일이 너무 길어져서 파일을 쪼개서 관리해 본 적이 있다.스타일
React Effect Hook
useEffect 는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다. useEffect 는 첫번째 인자로 콜백 함수를 받는다. useEffect 는 최상위에서만 Hook을 호출해야하며 반복문 , 조건문 혹은 중첩된 함수 내에서 호출을 하지말아
React Side Effect
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 얘기한다. 부작용이 있는 함수라고도 한다.React에서는 컴포넌트 내에서 fetch 를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side
HTTP / 네트워크
일반적인 모바일앱들을 보았을 때 인터넷 연결 없이 잘 작동하지 않는다. 그 이유는 상품 정보를 인터넷 어딘가에 존재하는 서버로부터 받아와야 하기 때문이다.만약 상품 정보들이 앱 안에 모두 담긴 경우라면 그 앱은 끊임없이 업데이트를 진행해야 한다. 새로운 상품, 삭제되
State & Props
컴포넌트 속성(Property)을 의미한다. Props는 외부로 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당된다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트 JavaScript함수와 클래스로, Props를 함수
React Intro
프론트엔드 프레임워크는 정적인 웹 페이지에서 동적으로 유저 인터렉션을 처리하는 웹 어플리케이션으로 규모가 커짐에 따라 개발에 용이하게 하기 위해 등장했다.정적인 페이지는 웹 서버에 미리 저장된 파일을 그대로 전달하는 방식이고 동적인 페이지는 사용자의 요청 정보를 가공
Daily Coding
코딩문제들을 풀어 주석으로 내의견을 정리해봤다.문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자가 대문자인 문자열을 리턴해야 한다.머쓱이네 양꼬치 가게는 10인분을 먹으면 음료수 하나를 서비스로 줍니다. 양꼬치는 1인분에 12,000원, 음료수는 2,000원입니다
Daily Coding
코딩문제들을 풀어 주석으로 내의견을 정리해봤다.연이율을 입력받아 원금이 2배 이상이 되는 때가 몇년이 되는지 확인해야하는 문제수를 입력받아 2의 거듭제곱인지 여부를 확인하는 문제while문을 사용해야합니다.2의 0승은 1입니다.Number.isInteger, Math.
Class, Instance
클래스와 인스턴스에 대해class 는 설계도와 같다. instance 설계도를 바탕으로 각각의 특정한 자동차 모델과 같다.일반적인 함수를 정의하듯 객체를 만들면 되는데 new 키워드를 써서 새로운 instance 를 만든다.class 문법은 ES6(ECAMScript
간단한 예상 질문 답변하기
간단한 예상 질문에 답변해보기개발자의 일반적인 질문을 추려서 질문에 대한 답변을 한번 적어보았다.일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 &l
간단한 계산기 만들기
계산기의 기본원리를 이용해 계산기를 만들어보자HTML , CSS를 이용하여 계산기 작업JS를 이용하여 버튼의 기능구현숫자버튼을 입력 (연달아 입력가능해야함)연산자버튼을 입력하면 다음 숫자를 입력할 수 있게 넘어가야함AC버튼을 누른 값들을 초기화 시켜야한다소수점을 누를때
간단한 회고록
난 여태껏 별로였던 사람이다.개인적인 블로그를 작성하고 싶어 작년에 개설했지만 사실상 취업준비에 아이디라도 있으면 도움이 될까 막연하게 생성만 하고 관리를 지나치게 못했다.웹 퍼블리셔 국비교육 이수 후 의욕상실과 나태함에 빠져 1년정도 방황하며 어디든 취업해보자라는
연산자(Operator)#2
loose equality 동등연산자(==)는 동일한지 확인하며, Strict equality 즉 일치연산자(===)와는 다르게 다른 타입의 value까지 같은지 확인한다.일치연산자(===)라는 동일하게 확인하는 동등연산자(==) 같은 방식이지만 타입이 다르다면 서로