책 소개요즘 IT 기술은 뭐가 있는지 IT 기업들은 어떤 비지니스 전략을 펼치고 있는지, 앞으로 IT 기술은 어떻게 될 것인지에 대해 다루고 있다. IT에 대한 이해도와 상관없이 흥미롭고 유익한 이야기들이 가득하기 때매 비전공자들도 재밌게 읽을 수 있다. 기억에 남았던 내용 몇가지를 소개해보려 한다!1. 구글 검색은 어떻게 작동할까?구글은 사용자가 검색어를 입력하면 무려 30조 개가 넘는 웹페이지를 뒤져 가장 좋은 결과물을 10개로 추린다.사용자는 가장 좋은 결과물 10개 중 하나를 첫 페이지에 받을 수 있고 92%의 확률로 그 게시물을 클릭하게 된다.구글 검색은 30조 개가 넘는 결과물 중에서 10개를 가려내는 동작을 0.5초만에 수행 한다는 것이다. 어떻게 가능한 것일까? 바로 검색 알고리즘 덕분이다..

useState 훅을 사용할 때, 상태를 업데이트하는 데에는 두 가지 방식이 있다. 하나는 값으로 직접 상태를 업데이트하는 방식이고, 다른 하나는 이전 상태를 기반으로 새로운 상태를 계산하는 함수를 사용하는 방식이다. 후자를 함수형 업데이트라고 한다. 함수형 업데이트// 기존에 우리가 사용하던 방식setState(number + 1);// 함수형 업데이트 setState(() => {}); 위 코드와 같이 setState의 ( ) 안에 수정할 값이 아니라, 함수를 넣고, 인자에서는 현재의 state을 가져와서 변경할 수 있다.// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다.setState((currentNumber)=>{ return currentNumber + 1 });..

1. 불변성불변성이란 메모리에 있는 값을 변경할 수 없는 것.자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다. 2. 변수를 저장하면 메모리에 어떻게 저장될까?num1과 num2는 변수의 이름은 다르지만, 같은 메모리 공간을 바라보고 있다.let num1 = 1;let num2 = 1;console.log(num1 === num2); // true //같은 메모리 공간을 참조하고 있다는 의미 데이터를 수정해도, 원시 데이터는 불변성을 가지고 있다. 기존 메모리에 저장 되어 있는 1이라는 값은 변하지 않고, 새로운 메모리 저장 공간에 2가 생기고 num1이 그 공간을 참조하는 것이다.  하지만 원시 데이터가 아닌 값. 객체, 배열, 함수의..

스타일드 컴포넌트(Styled Components)는 리액트(React) 애플리케이션에서 사용되는 자바스크립트 라이브러리 중 하나로, 컴포넌트 기반 스타일링을 위한 솔루션 중 하나. 스타일드 컴포넌트를 사용하면 자바스크립트 파일 안에서 컴포넌트와 함께 스타일을 정의할 수 있다. 1. 설치npm install styled-componentsyarn add styled-components 2. 사용- 기본 스타일드 컴포넌트 작성헬로우 //스타일컴포넌트라는 표시로 St + 명명const Span = styled.span` //백틱 안에 CSS를 작성` 헬로우//form 태그와 같이 특수한 태그의 경우, 기능을 잃어버릴 수도 있음 //그때는 이렇게 속성을 다시 넣어주기 - 조건부 스타일링부모 컴포넌트에서 보낸..

1. 기본 타입 지정let name : type = 내용 기본적으로 타입을 지정할때는 변수 옆에 : 을 찍은 후 type을 적어준다.let str: string = 'hi';let num: number = 10;let isLoggedIn: boolean = false; 배열 타입은 타입을 적은 후 [] 로 배열을 표기한다.//배열안에 무조건 string만 가능let 팀: string[] = ["수지", "철수"];let arr: number[] = [1,2,3];let arr: Array = [1,2,3]; //제네릭표기 객체 타입은 객체를 만들어 key는 그대로, value에 타입을 적어주면 된다.//객체 타입 지정let 내정보 : { age : number } = { age : 20 } undefin..

1.  자바스크립트 냅두고 타입스크립트를 사용하는 이유는 뭘까?자바스크립트는 매우 유연한 언어.let answer = 1 + [1,2,3] // 11,2,3 숫자 + 배열 을 실행해도 오류 없이 계산해준다.프로젝트 규모가 작을때는 금방 오류를 찾을 수 있지만, 규모가 커질수록 위와 같은 오류들이 발생했을때 찾기 어려워진다.​이런 자바스크립트의 위험성에서 벗어나 더욱 안전하게 개발할 수 있도록 도와주는게 타입스크립트다. 2. 타입스크립트 사용의 이점정적 타입 검사: 타입스크립트는 코드를 작성할 때 변수, 함수 및 객체의 타입을 명시적으로 지정하므로 코드의 오류를 사전에 발견할 수 있다. 이로써 런타임 오류를 줄이고 안정성을 향상시킨다.코드 가독성과 유지 보수성 향상: 타입스크립트는 코드에 타입 정보를 포함..

1. reCAPTCHA 란? 투표를 하거나, 사이트에 새로 가입할 경우 이 "로봇이 아닙니다" 박스를 종종 보게 되는데, 이게 리캡차(reCAPTCHA)이다.reCAPTCHA(리캡차)는 구글에서 개발한 자동화된 프로그램이나 봇으로부터 웹사이트를 보호하기 위한 보안 기술 중 하나. 주로 웹 양식의 자동 제출을 방지하고, 스팸 댓글을 막는 등의 목적으로 사용된다. 즉, 사용자가 사람인지 봇인지를 판별해준다. 2. reCAPTCHA flow 플로우는 위의 사진에 적힌 순서대로 이루어진다.화면에서 사용자가 어떤 동작을 했을때(회원가입, 글작성 등) 구글에 토큰을 요청한다.구글에서 화면으로 토큰을 전달한다.전달된 토큰을 백엔드 서버로 전송한다.백엔드 서버는 구글서버에 토큰을 전달한다.구글에서 사용자의 동작을 점수..

1. Subquery: 원하는 데이터를 더 쉽게 얻어보기 쿼리 안의 쿼리라는 의미. 하위 쿼리의 결과를 상위 쿼리에서 사용하면, SQL 쿼리가 훨씬 간단해짐쪼개서 생각하자. 둘다 만든 다음에 합치면 된다.-- 예) kakaopay로 결제한 유저들의 정보 보기select u.user_id, u.name, u.email from users uinner join orders o on u.user_id = o.user_idwhere o.payment_method = 'kakaopay'-- 이걸 다른 방법으로 나타낼 수 있음! 우선 kakaopay로 결제한 user_id를 모두 구해보기select u.user_id from orderswhere payment_method = 'kakaopay'-- 그 후에, us..

1. Join: 여러 정보를 한 눈에 보는 것두 테이블의 공통된 정보 (key값)를 기준으로 테이블을 연결해서 한 테이블처럼 볼 수 있다. 테이블은 기본적으로 한 정보만 담아두는게 효율적으로 좋기 때매 분리해서 데이터를 저장한다.만약, 두 테이블의 정보를 연결해서 함께 보고싶을때는 어떻게 해야 할까? 이럴 때를 대비해서 user_id 처럼 동일한 이름과 정보가 담긴 필드를 두 테이블에 똑같이 담아놓으면, 이 필드를 이용해 연결할 수 있다.두 테이블을 연결시켜주는 열쇠라는 의미로 "key" 라고 부른다. 2. Join의 종류: Left Join, Inner Join- Left joinSQL에서의 Join은 두 집합 사이의 관계와 같다.A, B는 각 테이블을 의미하고 둘 사이의 겹치는 부분은, 테이블 A, ..

- 데이터 분석의 목적: 쌓여있는 날것의 데이터 → 의미를 갖는 '정보'로의 변환- 더 나아가면? '범주 (category)' 각각의 정보 (예) 과목별 신청자 평균 연령, 과목별 신청자수, 성씨별 회원수 등- 통계 구하기: 기존 방법의 한계. 기존의 방법대로만 한다면 where 절을 사용해서 수십개의 쿼리를 작성해야 함. 그래서 이걸 사용한다. - 동일한 범주의 데이터를 묶어주는 Group by동일한 범주를 갖는 데이터를 하나로 묶어서, 범주별 통계를 내주는 것을 의미Group by를 이용하면 1) 같은 성씨의 데이터를 하나로 묶고 2) 각 성씨의 회원수를 구할 수 있음 - 깔끔하게 데이터를 정렬해보자: Order by오름차순 또는 내림차순으로 정렬 1. 범주의 통계를 내주는 Group by-- 예) ..