Youngble_개발스토리

오늘은 캡스톤 발표 및 수상하는날 고생하고 기대못하다 상받아서 기분좋다.

캡스톤디자인이 끝났다. 팀장으로써 그리고 프론트엔드 솔로로 다 만들기위해 다른 과목에 시간투자하지않고 완성하기위해 많은 시간을 투자했다. 역시나 코딩뿐만 아니라 신경쓸게 너무많았다. 보고서, 피피티, 영상, 스케쥴 조율, 디자인, 데이터 취합, 팀워크, 인간관계 이제 끝냈으니 취업에 몰두할시간이다. udemy 강의다시보고 내 페이스대로 가자!

메인컨텐츠 랜덤 슬롯머신 구현화면 side effect : React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컫는다. → 랜덤게임 슬롯을 돌릴때 settimeout 을 사용하여 순서대로 0.8, 1.6, 2.4초에 false를 하기로결정했다. 초기에 useEffect에다가 쓰지않고 js 코드를 쓸수있는곳에 함수를 만들어 settimeout을 사용했는데 이때 문제는 동작하는데는 문제가 없지만 만약 시간이 다되어 끝나기전에 해당 컴포넌트를 닫아아버리면(unmount) 해당 settimout에서 state를 업데이트할때 닫혀진 컴포넌트 state 업데이트에 대한 에러가 발생하게된다. 초기한번만 발생하고 새로고침전까진 안뜨긴하지만 어쨋든 이러..

시험 종료 github actions 사용 CI/CD 구축완료 aws bucket의 access key, secret access key 만듬 github에서 settings-> secrets,actions에서 위의 key들을 암호화저장 actions-> new workflow->set up a workflow yourself push or pull request할 브랜치 설정, ci/cd 관련 install, build, deploy 설정(deploy에서 위의 keys를 사용하여 배포위치설정) http 이해를 위한 책 리딩 'HTTP가이드:웹은 어떻게 동작하는가' HTTP: 웹 프로토콜 통신 규약, 인터넷에서 데이터를 주고받을 수 있는 프로토콜 URI: URL, URN으로 나뉨 보통 URL과 URI를 ..

한것 기존 리액트 프로젝트 js 파일에서 tsx 타입스크립트로 교체 적용 타입스크립트 적용하면서 Generic 이라는 개념이 중요할거 같아서 나중에 더 공부할것. 그외에 type, interface 로 재활용, 코드수 감소 , 가독성 증가 활용 import export 로 컴포넌트내에서 코드 사용 최소화 및 image 파일 declare 처리하여 이용 할것 storybook 사용 방법 알아볼것 프로젝트 참고 책 조사할것 (DOM을 깨우치다, HTTP: the definitive guide(웹은 어떻게 동작하는가), 디자인패턴 관련책 ) 자동배포관련 알아볼것 current 값 에러 고치기 1. if 조건으로 null 일때 return 해버리게하면 아래 Id.current.value 부분 에러사라짐 2. o..

할게 너무많다. 한것 지원회사 과제전형 끝내고 다시 리액트+타입스크립트 공부 캡스톤 기능구현 시작->프로토타입 로그인 화면 구현 잔디심기 1천 돌파! 끗

배운것/한것 udemy 타입스크립트 강의- 모던 자바스크립트 문법 사용 리덕스 사용법 복습 웹프로그래밍 스몰과제를 통한 html 공부 캡스톤디자인 와이어프레임 설계/회의 지원회사 과제진행 전반적인 리액트 컴포넌트 구성 리마인드/Styled-components 응용 json-server 사용 테스트 db.json 로컬 server를 오픈하여 해당 json데이터 req/res 기존 postman 사용하여 똑같이 점검가능 전반적인 자바스크립트 공부가 필요하다고 느낌 코어 자바스크립트 ch01 공부 데이터타입 기본(원시)타입 참조 타입 자세히 공부(중급레벨)해보면 기본타입도 참조형 데이터타입이다. 얕은 복사/깊은 복사 얕은 복사 for 문을 통한 각각의 프로퍼티 복사 1단계 depth 복사 spread oper..

이전 JSX에 관해 작성한 포트스글: [TIL] XML, JSX, Babel(바벨) 리액트를 사용하면 JSX 문법을 자연스럽게 접하게 된다. 막상 쓰는법은 알지만 이것이 정확히 무슨뜻이고 무슨 원리이고 어떤 배경이 있는지는 자세히 알지못했다. 풀어쓰면 Javascript XML 인데 이 youngble.tistory.com 이전에도 JSX가 무엇인지 다뤘는데 뭔가 더 정확히하고싶었고 지금 리액트를 복습중인데 JSX를 반복적으로 언급하고 설명하기때문에 다시한번 간단하게 정리하기로했다. 리액트: https://www.udemy.com/course/best-react/#instructor-2 타입스크립트 : https://www.udemy.com/course/best-typescript-21/ 현재 Udemy..

요새 캡스톤디자인+ 학교수업때문에 개인공부할시간이 없다 취업준비도해야하는데.. 그래서 따로 블로그에 글을 올리지 못했는데, 일기식으로라도 쓰고 기록해야할거같아서 온라인강의 틀어놓고 이렇게 쓰고있다. 요번에 캡스톤디자인에서 다시 웹개발을 진행하는데 기존 리액트+타입스크립트로 진행할려고 하고있다 새로운걸 적용하면서 기존에 썼던 리액트도 다듬고 싶었다. 디자이너 1명 백엔드인원 3명 프론트 1명(나), 백엔드의 경우 아직 경험이없고 공부하면서 진행해야하기때문에 백엔드에 많은 인원을 구했고, 경험이 있던 내가 팀을꾸려서 팀장으로써 진행해야하기때문에 (사실 프로젝트 혼자할수있으면 혼자할려고했는데 2인이상이라고해서 웹개발 프로젝트로 구하다보니 팀장을 맡았다) 전반적이 이해가 필요할거같다고 생각하여 요새 프론트 백엔..

자바스크립트의 경우 싱글 스레드 기반 언어이기 때문에 네트워크 관련 요청을 비동기적으로 처리하게 된다. 만약 동기적으로 처리한다면 즉시 처리되는 요청은 사용자에게 불편함을 주지 않으나, 어느 정도 시간이 걸리는 경우에는 클라이언트(브라우저)에서 네트워크 요청 처리하기 위해 다른 작업이 중단 될 것이다. 그래서 브라우저 에서는 이런 비동기 작업들을 처리하기 위한 장치들로 이벤트 루프와 태스크 큐 등을 가지고 있다 V8과 같은 자바스크립트 엔진은 단일 호출 스택(Call Stack)을 사용하며, 요청이 들어 올 때마다 해당 요청을 순차적으로 호출 스택에 담아 처리한다. 단일 호출 스택만을 사용한다면, pop을 통해 호출 스택에 있는 요청을 처리하기 때문에 비동기 요청 및 동시성에 대한 처리는 불가능해 진다...