본문 바로가기

분류 전체보기

 (123)
UI와 UX UI UI(User Interface, 사용자 인터페이스)는 사용자가 사물 또는 시스템,기계 , 컴퓨터 프로그램등등 과 상호작용 하기 위한 것 이라고 할 수 있습니다 대표적인 예로 핸드폰의 터치를 통한 상호작용과 컴퓨터의 마우스를 통한 상호작용이 있습니다 UX UX(User Experience, 사용자 경험)은 제품, 애플리케이션, 시스템 또는 서비스를 사용할 때 사용자가 경험하는 느낌을 말합니다. 사용자가 제품을 얼마나 잘 탐색할 수 있는지, 사용하기 쉬운지, 표시된 콘텐츠가 얼마나 관련성이 있는지 등 모든 것을 포괄할 수 있는 광범위한 용어입니다. UI와 UX의 차이점 UI와 UX는 혼용되어 사용되는 경우가 많지만 실제로 두문자어를 쓰면 User Interface와 User Experience가 상당..
손 인식 인공지능 만들기 목표: 손모양을 인식하는 인공지능을 만들껍니다 개발언어 : 파이썬 ​ ​ 언어는 파이썬을 사용하며 ​ cv2 , mediapipe, numpy를 사용합니다 ​ mediapipe는 얼굴인식, 다손추적, 헤어분할, 물체감지 및 추적등등 멀티 모달 (예 : 비디오, 오디오, 모든 시계열 데이터), 크로스 플랫폼 (예 : Android, iOS, 웹, 에지 장치) 적용 ML 파이프 라인을 구축하기위한 프레임 워크입니다. ​ https://google.github.io/mediapipe/solutions/hands Hands Cross-platform, customizable ML solutions for live and streaming media. google.github.io HTML 삽입 미리보기할 수 없..
코드스테이츠 Section2을 마치고서 회고 코드스테이츠 부트캠프 Section 2을 마쳤다. 유닛 1 ~11까지의 교육과정이었다 유닛 1에서는 고차함수에 대해 배웠고 유닛 2에서는 객체지향 프로그래밍을 배웠고 유닛 3에서는 비동기에 대해 배웠고 유닛 4~6에서는 리엑트의 SPA , State & Props 에 대해 배웠고 유닛 7~8에서는 http, 네트워크에 대해 배웠고 유닛 9에서는 리엑트 Ajax요청에 대해 배웠고 유닛 10에서는 웹서버에 대해 배웠고 유닛 11에서는 나만의 아고라스테이츠 서버라는 소규모 프로젝트를 했다 Keep : 잘하고 있는 점. 계속 했으면 좋겠다 싶은 점 고차함수는 처음에는 어려웠지만 Section 2에서 사용 할 일이 많아서 지금은 쉽게 쉽게 사용하고 있다 객체지향 프로그래밍은 너무 쉬웠다 처음 배웠던 프로그래..
Same-Origin Policy와 CORS 동일 출처 정책(Same Origin Policy)는 같은 출처의 리소스만 공유가 가능하다’라는 정책이고 이것을 해결하기 위해 나온것이 CORS입니다 CORS의 동작 방식에는 크게 세 가지가 있습니다. 1. 프리플라이트 요청 (Preflight Request) 실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 프리플라이트 요청 2. 단순 요청 (Simple Request) 단순 요청은 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것을 말합니다. 3.인증정보를 포함한 요청 (Credentialed Request) 요청 헤더에 인증 정보를 담아 보내는 요청입니다. 출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키..
HTTP 메세지 구조란? HTTP Messages는 클라이언트와 서버 사이에서 데이터를 주고받는 방식입니다 HTTP Messages에는 요청과 응답이 있습니다 둘다 유사한 구조를 가지는데 먼저 첫번째 줄에는 start line이 있고 이곳에는 요청과 응답의 상태를 나타냅니다 요청할때는 GET, POST, PUT, DELETE 등으로 서버가 수행해야 할 동작이 추가됩니다 그 다음에는 HTTP headers가 있습니다 이곳은 메세지의 본문을 설명하는 헤더의 집합이 담겨져 있습니다 //인코딩 방식이라던가 언어라던가 그 다음에는 empty line이 있고 이곳은 헤더와 본문을 구분하는 빈 줄 입니다 마지막에는 body가 있습니다 body는 요청이나 응답과 관련된 데이터나 문서가 담겨져 있습니다 요청과 응답의 유형에 따라 선택적으로 사용..
GET 메서드와 POST 차이점 GET 메서드와 POST의 차이점은 get은 요청할때 필요한 데이터를 쿼리스트링을 통해 전송하고 post는 body에 데이터를 담아서 전송합니다 get요청의 특징으로는 캐시가 가능합니다 get 요청의 캐시는 동일 또는 중복요청이 발생할때 서버로 요청을 보내지 않고 캐시된 데이터를 사용합니다 또한 get요청은 브라우저 히스토리에 남습니다 그리고 get요청은 길이제한이 있습니다 이러한 이유로 중요한 정보는 get으로 다루면 안됩니다 post는 리소스를 생성하거나 변경하기 위해 설계되었기 때문에 get보다 더 큰 데이터를 전송하기 위해 body에 데이터를 담아 전송 할 수 있습니다 http에서는 body의 길이제한 없이 데이터를 전송 할 수 있습니다 그러기 때문에 post는 대용량 데이터를 전송하는데 적합합니..
CSR과 SSR의 차이점 CSR(Client Side Rendering)은 서버에서 필요한 부분만 받아 클라이언트에서 렌더링을 하는것 이고 SSR(Server Side Rendering)은 서버쪽에서 렌더링준비를 끝마친 후 클라이언트에 보내는 것 입니다 두가지의 가장 큰 차이점은 서버에서 렌더링하느냐 클라이언트에서 렌더링 하느냐의 차이입니다 CSR는 SEO가 우선순위가 아닌경우와 사이트에 상호작용이 많은 경우 빠른 라우팅을 통해 이점을 가집니다 SSR는 SEO가 중요한 경우 웹페이지의 첫 화면을 빠르게 렌더링 하고싶은 경우 단일 파일 용량이 작은 경우와 사이트에 상호작용이 적은 경우 유리합니다
useEffect의 dependency array useEffect는 리엑트에서 side effect를 처리할 때 사용하는 함수입니다 쉽게말해 사이드 이펙트가 발생할꺼같은 코드는 useEffect에 넣어 처리합니다 useEffect에는 dependency array라는것이 있습니다 useEffect는 1번째 인자로 실행시킬 함수가 들어가고 2번째 인자로 배열이 들어가는데 이 배열을 dependency array라고 합니다 2번쨰 인자를 생략하면 렌더링 될때마다 1번째 인자로 준 함수가 실행되고 2번째 인자를 넣으면 2번째 인자값이 변할때마다 실행됩니다 처음 1번만 실행하고 싶다면 빈 배열을 넣으면 됩니다 사용 예시로는 ajax 요청, DOM reference 참조 및 변경을 할때 side effect가 발생하는데 이런 처리를 할때 useEffect로 처..
React 컴포넌트의 key 속성 리엑트에서 key속성은 어떤 항목을 변경,추가,삭제할지 식별하는것을 돕는 역할을 합니다 리엑트는 컴포넌트의 상태나 속성이 변할때마다 렌더링을 하는데 효율적으로 동작하기 위해 모든것을 랜더링하지 않고 바뀐 부분만 재렌더링을 합니다 이때 바뀐 부분을 체크하기 위한 방법으로 리엑트의 key를 사용합니다 key값을 설정 할 때 조건으로는 유일한 값을 지정해야 됩니다 key값을 설정하면 장점으로는 전체를 렌더링하지 않고 바뀐 부분만 효율적으로 렌더링을 할 수 있다는 장점이 있습니다
React Props, State 프롭스(Props)는 외부로부터 전달받은 값이고 스테이트(State)는 컴포넌트 내부에서 변할 수 있는 값을 의미합니다 먼저 프롭스의 특징으로는 프롭스는 객체형태로 어떤 타입의 값도 전달 할 수 있고 사이드 이펙트를 막기 위해 프롭스는 읽기 속성이라는 것 입니다 즉 프롭스는 부모가 자식에게 전달해주는 객체형태의 데이터이며 변하지 않는 불변성을 가졌습니다 스테이트는 내부에서 변할 수 있는 값을 의미합니다 컴포넌트내에서 변할 수 있는 값은 스테이트로 다루어야 됩니다 예를들어 사용자가 값을 입력하는 input이나 textarea의 값은 사용자가 입력할때마다 변하기 때문에 스테이트로 데이터를 다루는것이 적절합니다 또한 스테이트의 값이 변경되면 자동으로 재랜더링을 해주기 때문에 실시간으로 바뀌면서 그것을 보여줘야..

티스토리툴바