노력하는 개발자

코드스테이츠 회고 목표 상기하기 목표 : 올해 10월말 ~ 11월 사이 스타트업 회사 취업하기 이런저런일을 하다 일을 쉬고 부트캠프를 하면서 공부를 하는 시간 동안 같이의 가치가 얼마나 소중한 것인지 깨달았다. 반년동안 혼자서 외로운 싸움을 한다면 벌써 무너지지 않았을까, 나를 버티게 하는 힘은 내가 아니라 나와 같은 싸움을 하는 사람들이었다. 이젠 서로가 알지 않을까 싶은 생각이 든다. 여기까지 걸어온 고생을 알기에, 헛되지 않았음을 알기에 그저 고생했다고 전하는 한 마디는 당신을 향한 위로이기도 하고, 날 향한 위로이기도 하다. Keep 50분 공부 후 10분 쉬는 시간을 갖는 것 8시 이전에 기상하여 9시까지 자습시간을 갖는 것 미니 프로젝트 틈틈히 만들기 Problem 운동을 꾸준히 하지 않아 체..

SOP 예를 들어 내가 네이버에서 로그인 후 서비스를 이용한 뒤 로그아웃을 깜빡하여 브라우저에 로그인 정보가 남아 있을 수 있다. SOP가 없다면 그 상태에서 내 정보를 노리는 해커가 네이버를 방문하여 내가 모르는 사이 내 정보를 이용하여 블로그나 카페에 스팸글을 업로드 할 수 있다. SOP는 다른 사이트와의 리소스 공유를 제한하기 때문에 내 로그인 정보가 타 서비스의 코드에 의해 새어나가는 것을 방지할 수 있다. 이러한 보안상 이점으로 SOP는 모든 브라우저에서 기본적으로 사용하는 정책이다. Same-Origin Policy의 줄임말 동일 출처 정책(같은 출처의 리소스만 공유 가능하다) 이 때 출처는 프로토콜, 호스트, 포트의 조합으로 이뤄져있다. 비교 URI 1 비교 URI 2 결과 https://w..

Hook이란 어떤 것일까? 리액트 16.8 버전부터 Hook이 등장하며 상태 관리를 위해 클래스형 컴포넌트를 이용하여 상태 관리를 할 필요성이 없어졌다. Hook은 함수형 컴포넌트에서 React state와 life-cycle을 연동할 수 있게 하는 함수이다. Hook의 장점은 코드가 간결해져 가독성이 좋고, 클래스형 컴포넌트에서 문제가 되는 HOC헬(추후 조사예정)을 벗어 날 수 있다. Hook에는 useState, useEffect 등의 함수가 포함되어 있으며 해당 포스트는 useState에 대해 소개할 것이다. class형 컴포넌트와 Hook을 사용한 함수형 컴포넌트에서 각각 상태 관리에 대한 코드 작성을 했을 시 Hook을 사용한 코드가 보다 가독성이 좋음을 확인할 수 있다(출처 : https:/..

부트캠프에서 postman 툴을 사용하는 법을 배워 관련 내용을 포스팅해보려 한다. Postman API 개발을 보다 빠르고 쉽게 구현 할 수 있도록 도와주며, 개발된 API를 테스트하여 문서화 또는 공유 할 수 있도록 도와 주는 플랫폼 직접 개발한 API 또는 타 API를 테스트할 때 개발 환경보다 빠르게 이용할 수 있다. Postman으로 openAPI의 데이터 조회하기 postman으로 api의 데이터를 조회하려면 다음과 같은 과정을 진행한다. postman 회원가입 postman workspace 생성 open API 사이트 회원가입 open API 사이트에서 조회하고 싶은 데이터 선택 및 API키 발급 postman에서 openAPI 데이터 조회하기 1. postman 회원가입 화면 우측 상단에..

웹 애플리케이션 아키텍처 클라이언트-서버 아키텍처 2-Tier Architecture 리소스가 존재하는 곳(server)과 리소스를 사용하는 앱(client)를 분리시킨 것을 2-Tier 아키텍처라고 한다. client와 server는 요청과 응답을 주고 받으며, server는 리소스를 전달해 주는 역할을 담당한다. server는 리소스를 전달할 뿐 데이터베이스라는 곳에 리소스를 저장한다. 기존 2-tier architecture에 데이터베이스가 추가된 형태를 3-tier architecture라 한다. 클라리언트는 사용자가 눈으로 볼 수 있는 영역이며, 터치 및 클릭등의 상호작용을 할 수 있으므로 프론트엔드 영역, 서버는 사용자가 눈으로 볼 수 없지만 로그인과 같은 권한 관리 및 사용자 인증을 다루고,..

useState에 대해 설명하기 전 읽고 가기 Hook이 나오기 이전에는 클래스형 컴포넌트를 이용하여 상태 관리를 했으며 이를 이용하여 코드 작성 시 this와 bind 및 클래스 문법에 대한 이해가 필요하며, 로직의 재사용이 어렵다. 하지만 Hook의 등장으로 함수형 컴포넌트에서도 상태관리를 할 수 있게 되었다. Hook이란 어떤 것일까? 리액트 16.8 버전부터 Hook이 등장하며 상태 관리를 위해 클래스형 컴포넌트를 이용하여 상태 관리를 할 필요성이 없어졌다. Hook은 함수형 컴포넌트에서 React state와 life-cycle을 연동할 수 있게 하는 함수이다. Hook의 장점은 코드가 간결해져 가독성이 좋고, 클래스형 컴포넌트에서 문제가 되는 HOC헬(추후 조사예정)을 벗어 날 수 있다. Ho..

[React State & Props] ㅇ props - 외부로부터 전달받은 값 - 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 - 클래스, 함수형 컴포넌트에서 사용 가능 - 여러 개 지정 가능 - read-only 객체 - props 사용하기 1. 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링 한다. ㅇ state - 컴포넌트 내부에서 변화하는 값 - useState : state를 다루는 방법 중 하나 호출 : import {useState} from "react" 선언 및 초기화 : const [state 저장 변수, state 갱신 함수] = useState(상태 초깃값); 배열 반환 - Rea..

생성자 함수 객체를 생성하는 함수 new 연산자와 함께 호출하여 객체를 생성하는 함수 new 연산자와 함께 생성자 함수를 호출하지 않으면 해당 함수는 생성자 함수로 동작한다 인스턴스 : 생성자 함수에 의해 생성된 객체 // [ new 연산자와 생성자 함수를 통한 객체 생성 ] // Array 생성자 함수를 통한 Array 객체 생성 const arr = new Array('A', 'B', 'C'); console.log(arr); // ['A', 'B', 'C'] // String 생성자 함수를 통한 String 객체 생성 const str = new String('문자열 str'); console.log(str); // '문자열 str' // Boolean 생성자 함수를 통한 Boolean 객체 생성 ..

내장 고차 함수 자바스크립트에는 기본적으로 내장된 고차 함수가 있다. 배열 메서드들 중 일부가 대표적인 고차 함수 filter 메서드 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메서드 걸러내는 기준이 되는 조건은 filter 메서드의 전달인자로 전달된다. 이 때, 함수의 형태로 전달된다. filter 메서드는 거러내기 위한 조건을 명시한 함수를 전달인자로 받기 때문에 고차 함수이다. filter 메서드는 배열의 요소를 콜백함수에 전달하며 콜백 함수는 전달받은 배열의 요소를 받아 함수에 실행하고 콜백 함수 내부 조건에 따라 boolean 타입을 리턴해야 한다. 기존 배열을 수정하지 않는다 예시1) number 타입을 요소로 갖는 배열에서 홀수만을 걸러내거나 100보다 작은 수를 걸러낸다..

일급 객체 대표적인 예시 : 함수 변수에 할당(assignment)할 수 있다 함수를 변수에 할당할 수 있기 때문에 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있다. 함수를 데이터(string, number, boolean, array, object)처럼 다룰 수 있다. 다른 함수의 전달인자(argument)로 전달될 수 있다 다른 함수의 결과로서 리턴될 수 있다. 고차함수의 이해 함수를 전달인자(argument)로 받을 수 있고, 함수를 리턴할 수 있는 함수 콜백 함수 : 다른 함수(caller)의 전달인자(argument)로 전달되는 함수 어떤 작업이 완료되었을 때 호출하는 경우가 많아서, 답신 전화를 뜻하는 콜백 함수라는 이름이 붙여졌다. 커링 함수 : 함수를 리턴하는 함수 고차 함수가 커링..