camille

RESTful API

📕 RESTfulAPI라는 것은?API 시스템을 구현하기 위한 아키텍처 중에 가장 널리 사용되는 형식이다.Graphql,SOAP,GRPC,REST...etc📕 Representational State Transfer웹상에서 사용되는 여러 리소스를 HTTP URI로 표현하고 그 리소스에 대한 행위를 HTTP Method로 정의 하는 방식. 즉 리소스(HTTP URI로 정의된)를 어떻게 한다.(HTTP Method + Payloda)를 구조적으로 깔끔하게 표현한다.왜 restfulAPI를 많이 사용하는가?코드의 복잡성이 올라가면서 직관적인 코드가 필요시 되기때문에 JSON을 사용한다.💡 기본적인 배경지식URI(Uniform Resource Identifier)해당사이트의 특정 자원의 위치를 나타내는 유..

Codekata | 03

문제String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제일 긴 단어의 길이를 반환해주세요.str: 텍스트return: 중복되지 않은 알파벳 길이 (숫자 반환)예를 들어,str = "abcabcabc"return은 3=> 'abc' 가 제일 길기 때문str = "aaaaa"return은 1=> 'a' 가 제일 길기 때문str = "sttrg"return은 3=> 'trg' 가 제일 길기 때문💡 Answerfunction getLengthOfStr(s) { let strArr = []; let prevStrArr = []; for (let i = 0; i 체크하는 문자열이 저장 될 배열(strArr)와 중복된 문자열을 찾았을 경우 그 전까지의 문자열을 기록할 배열 (pre..

Codekata | 02

문제reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요.x: 숫자 return: 뒤집어진 숫자를 반환!예들 들어, x: 1234 return: 4321x: -1234 return: -4321x: 1230 return: 321nums: 숫자 배열target: 두 수를 더해서 나올 수 있는 합계return: 두 수의 index를 가진 숫자 배열💡 Answer1const reverse = x => { if (x >= 0) { return Number(x.toString().split("").reverse().join("")); } else { let originNum = Math.abs(x); return Number(originNum.toStri..

CodeKata | 01

문제twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.nums: 숫자 배열target: 두 수를 더해서 나올 수 있는 합계return: 두 수의 index를 가진 숫자 배열예를 들어,nums은 [4, 9, 11, 14] target은 13nums[0] + nums[1] = 4 + 9 = 13 이죠?그러면 [0, 1]이 return 되어야 합니다.가정target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다.Try일단 return되는 값이 배열이기 때문에 새로운 배열을 선언해줘야 한다고 판단했고,그 다음엔 들어오는 nums배열에서 가져온, 숫자들을 더한 값과 target의 비교해서해당 값이 맞으..

HTTP

📕 1. 통신과 HTTP: HTTP는 Hyper Text Transfer Protocol의 두문자어로, 인터넷에서 데이터를 주고받을 수 있는 프로토콜이라고 할 수 있다.HT (hyper text):문서와 문서가 링크로 연결되어 있음을 뜻한다.T (transfer):HTML로 만든 웹페이지 문서를 보낸다.P (protocol): 컴퓨터끼리 어떻게 HTML파일을 주고 받을 지에 대한 소통 방식 또는 약속📕 2. Request / Response (응답 / 요청)소통의 핵심은 요청과 응답이다. 인간의 소통방식이 컴퓨터 끼리 소통방식에도 적용된 것이다. 말이 아닌 메세지의 형식으로 요청하고 응답한다.📕 3. StatelessHTTP개별 통신은 모두 독립이어서, 과거의 HTTP 통신의 결과를 보존하지 않는..

인증(Authentication) & 인가(Authorization)

📕 인증은 왜 필요한가?우리 서비스를 누가 쓰며 어떻게 사용하고 있는지, 추적이 가능하도록 하기 위해서 필요하다.인증이 필요한 것들은 id, email, pw 등과 같은 것들이 있다.그중에서도 가장 중요한 것은 password라고 할 수 있다.📝개인 정보 보호법은 개인정보의 암호화에 대해서 다음과 같이 규정하고 있다.: 비밀번호, 바이오정보, 주민등록번호 등과 같은 주요 개인정보가 암호화 되지 않고, 개인정보 처리시스템에 저장되거나 네트워크를 통해서 전송 될 경우, 노출 및 위ㆍ변조 등의 위험이 있으므로 암호화 등의 안전한 보호치가 제공되어야 한다."암호화"는 개인정보 취급자의 실수 또는 해커의 공격으로 등으로 인해 개인정보가 비인가자에게 유ㆍ노출 되더라도 그 내용 확인을 어렵게 하는 보안기술이다. ..

React : map함수 적용시 key props를 부여하는 이유

📕 key?Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이며, 대부분의 경우 데이터의 ID를 key로 사용한다.📕 key props를 부여해야하는 이유?React에서는 key의 값을 통해서 어떤 아이템에 변화가 있었는지를 인식한다.하지만 key props를 지정해주지 않으면 사이트가 전체적으로 불필요한 렌더링을 진행한다.따라서 map을 사용할 때는 고유한 key값을 반드시 사용해줘야 한다.map의 두번째 인자인 index를 사용하는 것보다는 좋아요, 삭..

Design : UI 컴포넌트 종류 및 특징

📕 컴포넌트란?위로 다른 요소와 구분하고, 행동하고 반응하고, 현재상태에 대한 정보를 전달 해야한다.Status bar•디바이스의 현재 상태에 대한 정보를 표시•모든 방향에서 화면의 상단에 사용자가 설정해둔 디바이스의 현재상태및 각종 정보 노출•(네트워크연결, 비행기, 진동, 알람 등 사용자가 설정한 각종모드/ 푸시 알람 배터리 잔량 )•예전에는 스페이스바를 건들 수 없었는데 이젠 가능App bars: top•스테이터스바 바로 아래 위치• OS별 제공하는 기능이 조금씩 다르고 각기 다른 이름으로 호칭,•안드로이드의 액션바는 주로 액션실행이 가능한 버튼 위치• IOS의 네비게이션 바는 말그대로 상위 하위 뷰로 이동가능한 네비게이션 역할App bars: bottom•하단 앱바는 현재 화면의 맥락에 사용할..

Map Method 이해하기

📘 Mapmap() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환한다. for of forEach처럼 배열 내 요소들을 반복하는 반복문의 한 종류인데, 조금 독특한 부분은 매 반복마다 returm되는 결과에 따라 새로운 배열을 만들어 낸다는 것이다.First ex)const array1 = [1, 2, 3, 4, 5];const map1 = array1.map(x => x* 2);console.log(map1); { return currentElement * 2;});console.log(map2)map 메서드는 파라미터(매개변수)로 콜백함수를 받는데, 그 콜백 함수의 파라미터는 요소, index, 그리고 현재 메서드를 호출한 배열이다.Secon..

React : State, Props, Event

📕 Hook 이란?React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리라고 할 수 있다.📕 Hook의 특징함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로서로의 장점을 전부다 가지고 있다선택적 사용 : 기존의 코드를 다시 작성할 필요 없이, 일부의 컴포넌트들안에서 Hook을 사용할 수 있다. 하지만 당장 Hook이 필요하지 않다면 사용하지 않아도 된다.100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다.Hook은 알고 있는 React 컨셉을 대체하지 않음 : 대신, Hook은 prop, state, context,..