TIL

첫 팀프로젝트 후기

1. 소개 2주 동안 팀 프로젝트로 이케아 페이지를 클론 코딩 프론트엔드와 백엔드를 나눠서 진행했으며 프론트엔드 분야를 맡았다. 이케아 - 인테리어 가구, 소품을 판매하는 사이트 카테고리,신제품, 가격 등에 따라 필터링이 가능하다 1. 소개 2주 동안 팀 프로젝트로 이케아 페이지를 클론 코딩 프론트엔드와 백엔드를 나눠서 진행했으며 프론트엔드 분야를 맡았다. 이케아 - 인테리어 가구, 소품을 판매하는 사이트 카테고리,신제품, 가격 등에 따라 필터링이 가능하다 2. Tech Skills 3. 구현 부분 메인 페이지 - 자바스크립트로 구현한 이미지 캐러셀(추천 제품) - 상품 품목에 따른 필터링 구현 로그인 페이지 - 데이터 통신을 통한 에러 핸들링 - 로그인 여부에 따라 토큰 저장 회원가입 페이지 - 아이디..

자바스크립트 함수

함수 함수 - 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 함수는 왜 사용 하는가 ? -> 코드의 재사용 / 유지보수의 편의성 / 코드의 가독성 함수 정의 방식 함수 정의 방식 예시 함수 선언문 function add(x, y){ return x+y; } 함수 표현식 var add =function(x, y){ return x+y; } Function 생성자 함수 var add = New function('x', 'y', 'return x + y') 화살표 함수(ES6) var add = (x, y) => x + y; 함수 표현식 - 함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식 함수 표현식은 '표현식인 문' 함수 호이스팅 - 변수로 할당된 함..

AWS

전통 적인 서버 저장소는 물리적인 공간에서 보관 문제점 datacenter 렌트 비용을 지불 power supply, cooling, maintenance 비용을 지불 새로운 하드웨어(서버)를 추가하거나 교체할 때 시간이 많이 소모된다. 확장하는데 제한사항이 많다. 현재 유지되고 있는 인프라를 24/7 모니터링 할 인원을 고용해야 한다. 천재지변에 대응하기 어렵다. Cloud Computing IT 리소스를 인터넷을 통해 on-demand로 제공해주는 서비스 사용한 만큼만 지불하는 pay-as-you-go pricing이 적용 정확하게 필요한 타입과 크기의 리소스를 지정하여 사용할 수 있다. 기존보다 간편하게 서버, 스토리지, 데이터베이스 등에 접근가능한 솔루션을 제공한다. 클라우드의 장점 Flexibi..

라우팅

동적 라우팅 1. Routing 라우팅 - 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것. 2. 동적 라우팅 id 값에 따라 많은 url이 나타나고 각각의 모든 url에 대해 모든 경로의 형태와 개수를 결정할 수 없기 때문에 쓴다 그래서 url에 들어갈 id를 변수처럼 다룬다. 이처럼 정적이지 않은 동적일 수 있는 경로에 대해 라우팅 하는 것을 동적 라우팅이라 한다. 2-1 동적 라우팅 처리하는 방법 path parameter vs query parameter 1. query parameter /products?id=1 /products?id=5 /products?id=15id란 변수에 값을 담아 백엔드에 전달하는 방식이 Query string이다. products에 담긴 정보 중 ..

자바스크립트 간단 요약 ver2

자바스크립트 개념 요약 ver2 타입 변환 타입변환 - 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것 명시적 타입 변환 - 개발자의 의도에 따라 다른 타입으로 변환 문자열 타입으로 변환 - String(), toString(), 문자열 연결 연산자(+) 숫자 타입으로 변환 - Number(), parseInt(), 산술연산자 이용 불리언 타입으로 변환 - Boolean(), !!사용 암묵적 타입변환 - 표현식 평가 도중 자바스크립트에 엔진에 의해 암묵적으로 타입이 자동 변환 문자열 타입으로 변환 - +연산자는 피연산자 중 하나 이상이 문자열이면 피연산사 중 문자열이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환 숫자 타입으로 변환 - 자바스크립트 엔진은 산술 연산자 표현식을 평가하..

[TIL] RESTful API

RESTful API REST(Representational State Transfer) 웹상에서 사용되는 여러 리소스를 HTTP URI로 표현하고 그 리소스에 대한 행위를 HTTP Method로 정의하는 방식. 즉, 리소스(HTTP URI로 정의된)를 어떻게 한다(HTTP Method + Payload)를 구조적으로 깔끔하게 표현 RESTful API란? REST 특징을 지키면서 API를 제공한다는 의미 장점 : Self-descriptiveness - RESTful API는 그 자체만으로 API의 목적이 쉽게 이해된다. 단점 : 표준 규약이 없어, 안티패턴으로 작성되는 경우가 흔하다 안티패턴 : 실제 많이 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴 URI / HTTP Method / Paylo..

[TIL] 리액트에서 FontAwesome 사용하기

1. npm 사용하여 패키지 설치 $ npm i @fortawesome/fontawesome-svg-core // 무료아이콘만 설치 (solid, regular, brands) $ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons // 리액트 컴포넌트 형태로 사용할 수 있게 변경 $ npm i @fortawesome/react-fontawesome2. 쓰고 싶은 js에서 임포트하기 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@..

[TIL] HTML 신기한 태그

HTML 신박한 태그!! 1. 1줄로 진행률 표시줄을 제공 max,value 속성이 있다 두개만 지정해주면 나머지 작업은 브라우저가 알아서 해준다. css로 추가 커스터 마이징이 가능하다. 자바스크립트로 동적 값 설정해서 다양하게 쓸 수 있다. progress[value] ::-webkit-progress-bar{ background-color: whitesmoke; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } #progress[value]{ appearance: none; border-radius: 15px; overflow: hidden; position : relative; display: flex; align-items: center; } #progr..

[TIL] 인증 & 인가

인증, 인가 인증(Authentication) 인증은 왜 필요한가? 우리 서비스를 누가 쓰는지, 어떻게 사용하는지, 추적이 가능하도록 인증에 필요한 것은 아이디, 이메일주소, 비밀번호 등 -> 가장 중요한 것은 비밀번호(개인 정보로써 다른 사람이 알 수 없도록 관리) 비밀번호를 어떻게 관리해야하는가 법규상의 강제 - 법으로 비밀번호, 바이오정보, 주민등록번호 등과 같은 주요 개인정보는 암호화되도록 조치를 취해야한다. 데이터베이스에 저장 시 개인 정보를 해싱하여 복원할 수 없도록 함. 통신 시 개인 정보를 주고받을 때 SSL을 적용하여 암호화(HTTPS) 암호화는 어떻게 하나? 단방향 해쉬(one-way hash function) 단방향 해쉬함수는 암호학적 용도로 사용 원본 메시지를 변환하여 암호화된 메시..