Category: 수업내용

수업 마지막날 : 원래는 18일에 수료일이였으나 근로자의 날 쉬었기 때문에 하루 늘어남 AOS(Animate on Scroll) – 특정 조건 스크롤 시 애니메이션을 넣을 수 있는 라이브러리. 그냥 검색하면 모바일에 탑재하는 AOS(안드로이드 OS)와 게임장르인 AOS가 섞여서 나오기 때문에 구별해서 찾아주거나 조건을 달아줘야 한다 https://www.npmjs.com/package/aos 대부분 사이트에서 스크롤을 내리면 생기는 기능들을 여기서 추가한듯 하다. 스크롤 애니메이션 이라고 검색하면… Read more

깃허브 페이지 배포 관련 재정리 설치해야하는 라이브러리 : gh-pages 와 react-router-dom react-app 설치하기 – npm create react-app ‘이름’ package.json 의 디버그(script) 부분에 “predeploy” : “npm run build”, “deploy” : “gh-pages -d build” 추가 index.js 에서 BrowserRouter로 App 감싸기. BrowserRouter는 react-router-dom에서 import도 해줘야 함 github에서 레퍼지토리 생성 git init~git push 까지 진행 package.json의 2번째 줄(name부분) 처럼… Read more

금요일 과제 내용 정답과 내가 작성한 내용 확인 다른 구인정보들도 확인중 – 대부분 경력직을 구하는건 비슷함 허울인 자격요건 : N년에 준하는 실력을 가진 신입 – 뻥경력의 경우 신입과 똑같을 수도 있지만 진짜 1년 경력인 경우 그게 준하는 실력을 가진 신입이 존재하는가?     Read more

오후시간 : 기업 자료 +기타 자료 수집 R&D(Research and Development) : 연구개발 ts에서 export와 import export는 일반적인 js나 jsx 때 처럼 똑같이 적어도 된다 import는 조금 다르다. {}로 일부를 들고 올 수 있고 모든 것을 들고오고 싶다면 import * from 컴포넌트 형태로 들고와야 한다 또한 설치한 패키지 중에서 쓰는 이름과 똑같은 경우 {A as B} 와 같이… Read more

JEST React에서 쓰기 계속됨 queryByText를 쓸 때 주의점 : 조금이라도 틀리면 내용물이 아닌 null 이 나온다 이 부분을 확인된 이유가 분명 같이 썼다고 생각했는데 계속해서 null이 나와서 에러가 떠서 강사님에게 물어보고 실제로 고쳐본 결과이기 때문이다 it(”,()=>{ render(실행할 컴포넌트) const initalState=screen.queryByText(예상되는 html 엘리먼트) expect(initalState).toBeTruthy() } queryByText로 예상되는 html 엘리먼트와 같으면 값이 있고, 다르면 null이 되어 toBeTruthy에서… Read more

자유시간-취업관련 자료 찾기 SAAS(Software as a Service) : 서비스형 소프트웨어 소프트웨어 및 관련 데이터는 중앙에 호스팅되고 사용자는 웹 브라우저 등의 클라이언트를 통해 접속하는 형태의 소프트웨어 전달 모델 SI(System Integrator) : 시스템 통합 업체 정보 시스템의 개발에 관하여 상담하고 그에 따라 설계, 개발, 운용, 보수, 관리 등 일체 업무를 담당하는 정보 통신 기업 스톡옵션 기업의 임직원이… Read more

JEST 리엑트에서 테스트 실행하기 https://jestjs.io/docs/tutorial-react   Read more

비동기함수-Promise객체 사용 function fetchUserPromise(id){ return new Promise((resolve)=>{ console.log(“0.1초가 걸립니다”) setTimeout(()=>{ const user={id:id, name:”User”+id} resolve(user)} ,100) }) } 값을 전달받아 실행하는 방법은 2가지가 있다 then을 쓰는 경우 : 값을 가져 올 때 return을 써야 한다 test(‘userPromise’,()=>{ return asyncfn.fetchUserPromise(“2″).then( (user)=>{expect(user).toEqual({id:”2″,name:”User2”})} )} ) async/await를 쓰는 경우 : 위의 then보다 짧다 test(‘userPromise async/await’,async()=>{ const user=await asyncfn.fetchUserPromise(“3″); expect(user).toEqual({id:”3″,name:”User3”}) })   Read more

JEST수업 비동기 사용 방법(생각보다 많이 복잡함) 콜백함수를 사용하는 경우 예시로 0.1초 뒤에 동작하는 함수를 만들었다 function fetchUser(id,checkTest){ setTimeout(()=>{console.log(“0.1초가 걸렸습니다”) const user={ id:id,name:”User”+id} checkTest(user)},100); const asyncfn={fetchUser}; module.exports=asyncfn; Jest에서 쓰기 위한 .test.js 부분 const asyncfn=require(“./asyncfn”); test(“setTimeout확인”, (done)=>{expect (asyncfn.fetchUser(“Green”,(user)=> {expect(user).toEqual({id:”Green”,name:”UserGreen”}); done();}) ); }); 분석해보면 다음과 같다 일단 checkTest(user)가 없고 expect도 1개만 쓰인 경우expect(asyncfn.fetchUser(“Green”)).toEqual({id:”Green”,name:”UserGreen”}) 두가지 FAIL이 나온다. 첫번째는 0.1초… Read more

5시간 가량 자유시간(이력서 업로드/프로젝트 관리/기타) jest에서 보았던 것 중 특이한것 : 정규표현식 특정한 규칙을 가진 문자열의 집합을 표현할 때 사용하는 형식 언어 구분문자 : 정규식과 일반 문자열을 구분하기 위한 문자.  javascript에서는 /내용/ 과 같이 쓴다 메타문자 : 일정한 의미를 가지고 사용되는 특수문자 리터럴 : 의미가 없는 문자 그대로 사용되는 문자들 플래그 : 정규식 패턴과 문자를… Read more