Hello World

실습중 에러 내용React로 비디오 에디터 만드는 실습 중 Ffmpeg 라이브러리 사용하다가SharedArrayBuffer 찾을수 없다는 에러가 나온상황  에러 원인 이해SharedArrayBuffer를 사용할 때 "찾을 수 없다"는 오류와 CORS 관련 에러가 발생하는 이유는 브라우저의 보안 정책 때문이라고 한다.. SharedArrayBuffer는 고성능 멀티스레딩 기능을 지원하지만, Spectre와 Meltdown 같은 보안 취약점으로 인해 엄격한 보안 조치가 필요 이로 인해 SharedArrayBuffer를 사용할 때는 특정 HTTP 헤더를 설정해야 한다고 한다. 왜 SharedArrayBuffer가 기본적으로 비활성화되었는가?(GPT)2018년에 발견된 Spectre 및 Meltdown 취약점은..

실습내용React css 라이브러리 대표 3개를 맛보기로 실습1.ReactBootstrap2.AntDesign3.Material-UI(MUI) 실습과정ReactBootstrap공식 사이트 : https://react-bootstrap.netlify.app/ React Bootstrap | React BootstrapThe most popular front-end framework, rebuilt for Reactreact-bootstrap.netlify.app AntDesign공식 사이트 : https://ant.design/ Ant Design - The world's second most popular React UI frameworkAn enterprise-class UI design languag..

실습내용리액트 완료 프로젝트 빌드 및 배포 실습 실습과정리액트 빌드1. npm run build로 프로젝트 빌드 하기(build 디렉터리 생성됨) 2. npm install -g serve 설치 하기 3. serve -s build 실행하여 로컬에서 빌드 프로젝트 실행하기 아래 블로그 내용 참고https://velog.io/@nnoshel/react-%EB%B9%8C%EB%93%9C%ED%95%98%EA%B8%B0 npm run build 터미널에 위와 같은 명령어를 작성하" data-og-host="velog.io" data-og-source-url="https://velog.io/@nnoshel/react-%EB%B9%8C%EB%93%9C%ED%95%98%EA%B8%B0" data-og-url="ht..

실습내용리액트 개발자 도구인 React developer tools 설치 및 사용법실습 개발자 도구의 중요성개발을 진행함에 있어 개발자 도구는 필수적인 요소라 할 수 있다. 디버깅과 성능 최적화 측면에서, 개발자 도구는 이러한 작업을 효율적으로 수행할 수 있도록 다양한 기능을 지원한다.예를 들어, 컴포넌트 탐색, 상태 및 props 디버깅, 성능 프로파일러 등은 개발자 도구가 제공하는 주요 기능들이다. 실습과정설치 및 작업중 사용법은해당 툴이 있다는것만 기억하고 구글서치하여 진행. 설치 방법 및 사용법 아래 블로그 참고https://velog.io/@seesaw/React-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC-%ED%99%9C%EC%9A%A9%ED%95%98..

실습내용리액트의 핵심 부분을 감성일기장이라는 심플한 프로젝트 실습을 통하여 배우고 익힌다. 실습과정useState상태를 관리하는 훅 ex) DiaryEditor.js 컴포넌트 일부 date 현제 데이터setDate 업데이트될 데이터useState() = 기본값(현제 날짜 기본값으로 셋팅)getStringDate 함수 : 생성된 날짜를 특정 포맷으로 변환 해주는 공용 함수 input 태그가 change 될때 e.target.value 데이터 값으로 setDate 에 넣어 날짜 상태값 업데이트 date 는 업데이트 된 값이 들어오므로 value 값에 date 표시. *훅 이란 함수형 컴포넌트에서 상태(state) 및 생명주기(lifecycle) 기능등을 사용할 수 있게 해주는 기능 useRefDOM 요소나 ..

실습내용문서로된 해설을 참고하여 인사정보 페이지를 만든다. 실습과정각 화면의 UI요소 컴포넌트화 index.js : html에서 body 요소를 가져와 인스턴스를 생성(body 태그 아래에 랜더링 할 수 있도록) App.js : 각 컴포넌트와 상태값, api 관리 제어할 수 있도록 컴포넌트 생성 CardView : 인사카드 데이터 랜더링 및 클릭 리스너 이벤트 관리할 수 있도록 컴포넌트 생성코드는 한화면에 담기 힘들어서 블로그에서 생략(git 참고) Storage : 인사카드 데이터 및 카드 플립 상태 데이터 로컬스토리지에 저장될 수 있도록 컴포넌트 생성 컴포넌트별 상태값을 어떻게 처리할건지 진행기존 강의 참고 하여 App.js 와 각 컴포넌트(CardView.js)에 setState 함수를 생성하여 관..

실습내용해설강의를 참고하여 고양이 사진첩 웹사이트를 만든다. 실습과정각 화면의 UI요소는 컴포넌트 형태로 추상화 하여 동작하도록 진행 아래와 같이 컴포넌트를 나눌수 있다. App.js : 각 컴포넌트 와 상태값,api 관리 및 제어하는 jsapi.js : 이미지에는 없지만 api를 요청하는 jsconst API_END_POINT = 'https://cat-photos.edu-api.programmers.co.kr'export const request = async (url) => { try { const res = await fetch(`${API_END_POINT}${url}`) if (!res.ok){ throw new Error('API Call Fail') } ..

실습 내용주어진 시간(4시간) 안에 고양이 사진첩 웹사이트를 만든다.  실습 과정0. 각 화면의 UI요소는 컴포넌트 형태로 추상화 하여 동작하도록 진행.기존 고양이 검색 사이트 구조 참고하여 진행중(명일 강의 참고하여 진행 예정) 1. 각 컴포넌트가 서로 의존성을 지니지 않게 해야함.기존 고양이 검색 사이트 구조 참고하여 진행중 (명일 강의 참고하여 진행 예정) 2. API 호출시 fetch 이용 및 async,await 문을 사용 (문제 발생하였으나 해결)기존 고양이 검색 사이트 api.js 복붙하여 API 호출 하였으나 에러가 발생 하였다.약 2시간 가량 콘솔찍으면서 찾아보니, 기존 API 와 출력 하는 형식이 달라 생기는 문제 였다.  기존 고양이 검색 사이트의 API 반환값은 JSON 형태이며, ..

실습 내용해설 강의를 들으면서 컴포넌트화 및 동작 구조에 대해 파악. 실습 과정(주요 내용 요약)0. 라이브러리 사용x, 바닐라 스크립트만을 이용한다.- 리액트 사용전 바닐라로 컴포넌트,상태관리,API 호출 등 베이스가 되는 것을 먼저 배워 개념을 익히는것 같다.) 1. 화면 구성 요소는 컴포넌트로 만들어 구조화 한다.동작구조1-1. index.html(main.js 불러오기) 1-2. main.js(App.js 불러오기)1-3. App.js(애플리케이션의 메인 컨트롤러 역할을 하며, 다양한 컴포넌트들을 불러오며 초기화 및 관리 한다.,$target 매개 변수를 주어 페이지의 어느 부분에 렌더링 될지를 지정한다. 그 외 api 호출 및 상태 관리라던가 로컬스토리지등 중요한 기능은 App에 몰아 넣었다.)..

동기작년 4월, 대표님 오더가 있었다. 고객이 홈페이지(아입웹 이용)에서 청소 서비스의 견적 신청 및 서비스까지 신청할 수 있는 프로세스의 웹페이지를 구축해달라는 내용이였다.그러나 작업중간에 네이버 쇼핑 및 아임웹 쇼핑몰 등록으로 변경되면서 해당 프로젝트는 중단 되었다..ㅠ약 2개월동안 진행 하였으며 작업한 부분이 아쉬웠었다. 데브 코스 강의를 듣다보니 예전 작업 해놓은 프로젝트가 떠올라 시간이 많이 지났지만 작업한 부분까지 블로그에 기록해 볼려고 한다. *작업된 부분까지는 특정번호에서만 동작 되도록 하였다.*오렌만에 테스트 해보았는데 여전히 잘동작된다. 동작 프로세스1.고객이 홈페이지에서 청소 서비스 신청시 알림톡으로 견적페이지 링크가 발송된다.2.운영 페이지에 신청 내역이 넘어가며 운영진은 첨부된 사..