hourPerOur

4일 (월) - 다면평가 5일 (화) - 유저 배포를 앞 두고 반응형 사이트 반영을 위해 컴포넌트 디벨롭에 들어갔다. 에러 잡기, 디테일 수정. 6일 (수) - 구글폼 작성 완료, 반응형 셋팅이 딜레이 됨, 튜터님과 회의 후 배포 다음날로 보류. 7일 (목) - 점심에 유저 배포 완료, 이력서 작성해보기 특강. Feedback 수집 8일 (금) - 발표 일정 발제가 있었으며 곧 이어서 튜터님 특강이 진행됨. 들어온 Feedback을 필터링하며 일정 매니징. 반영해야 될 feedback list about 전체적으로 셋팅 image , size(+app size), layout - 전체적으로 정리가 덜 됐음 my page 1. 게시글이나 북마크한 스토어가 빈값일때 (처리) - footer 위에 min-wi..

WILs 2023. 9. 10. 23:55

기존에는 데이터를 가지고 있는 모델이 렌더링을 하기 위해 뷰레이어를 데이터로 보냈는데, 사용자의 상호작용이 뷰를 통해 일어났기에 사용자의 입력에 따라 뷰가 가끔씩 모델을 업데이트 해야할 필요가 있었다. 또한, 의존성() 때문에 모델이 다른 모델을 업데이트 해야할 때도 있었다. 이 외에도 이런 상황때문에 여러 연결된 다른 변경들을 초래하기도 했다. 또한 이런 변경들은 비동기적으로 생길 수도 있었고 하나의 변경이 다수의 변경들을 일으킬 수 있게 된다. 이러한 상황들을 데이터흐름의 디버그하기 어렵게 만든다. 그래서 마련한 해결책 : 단방향 데이터 흐름 위의 아키텍쳐를 Flux라고 부르게 된다. 액션 생성자(the action creator) 액션 생성자가 하는 일은 마치 전보기사(telegraph operat..

WILs 2023. 8. 7. 00:37

컴파인러 & tsc 타입 검사 : 컴파일러 숫자가 들어간 a 라는 변수를 문자열로 대입하는 순간 error를 간주하고 error 발생으로 표현 error를 잡아주며 문지기 역할을 한다 (error 메세지의 위치를 자세하게 띄워줌) 컴파일러의 끝은 "최적화" 비효율적으로 작성된 코드를 효율적으로 내부적으로 바꿔준다 코드가 최적화 되면 전반적으로 실행시간이 빨라질 수가 있다 컴파일러란 프로그래밍 언어로 작성돤 소스 코드 -> 다른 프로그래밍 언어로 변화하는 도구 typescript의 컴파일러은 tsc는 JS로 변환해줌 C언어 컴파일러는 C언어로 작성된 소스코드가 기계어로 변환되는 도구 소스코드를 검사해서 소스 코드의 구문과 구조를 검사해서 문자가 없는지 체크해서 유저에게 알려 줌 @types 라이브러리 등장..

WILs 2023. 7. 30. 20:25

타 팀들은 대부분 설문 조사 사이트나 youtube api를 활용한 기능구현을 진행했는데 우리 팀만 유일하게 map api를 활용한거로 보인다. 아닐수도? 올해 초에 따로 개인 프로젝트를 진행하면서 지도 api를 삽입하려는데 워낙 이해가 안되는 부분이라 좌절했었는데 현재는 팀 프로젝트이다 보니 너무 도전해 보고 싶었다. 앞선 TIL에서 언급했듯이 계획을 세우고 와이어프레임을 짜다 보니까 올해 초에 진행한 개인 프로젝트 보다 훨씬 복잡해지고 고도화되었다. 그래서 각 팀원 역할 분배할 때 지도를 하고싶다고 나서지 못 하였다. 그렇기 때문에 타 api를 요청해 오는 파트를 맡게 되었는데, 지도 api를 맡으신 분이 선발대에 속하신 잘 하시는 분인데 코드 공유가 아직 안된 상태라 로직이 이해가 안되어있다. 그래..

WILs 2023. 7. 23. 19:57

Redux Toolkit 기존의 Redux를 개량한 것으로 - 코드를 더 적게 더 편하게 쓰기 위한 기능들을 흡수하여 만든 것을 리덕스툴킷 줄여서 RTK createStore 보다는 configureStore 를 추천함. 이유는 이렇게 , // 일반 리듀서 사용 (API 두개를 사용) // const rootReducer = combineReducers({ // counter, // users, // }); // Redux Toolkit 사용 (API 하나만으로 충분) const store = configureStore({ reducer : { counter : counter, users : users, } }); + 타입핑이 너무 많다 / 불필요하다라는 의견을 적극 수용하여 한번에 만들 수 있는 API..

WILs 2023. 7. 9. 23:10

useContext react에서 context의 필요성 props를 부모-> 자식에게 넘겨줄 때 수없이 많이 깊어지고 복잡해지면서 props drilling 1 - 2 - 3 - 4 가 순서대로 있다면 굳이 2 , 3을 지나지않아도 되는 상황에서도 한 번씩 거치기 때문에 계속 깊어진다. context API에서는 전역적으로 선언된 데이터에 접근이 가능해지면서 이런 상황을 방지한다. context API createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) 보내줄 부모 (1)에서 .Provider 를 써주고 받을 컴포넌트에서 해당 컴포넌트 useContext(xxContext) 를 다시 변수로 저장해주고 ..

WILs 2023. 6. 26. 21:30

DOM : 은 원본 HTML문서의 객체 기반 표현 방식 html 문서의 내용과 구조가 - 객체모델로 변환되어 여러 프로그램에서 사용이 가능해진다. DOM 의 개체 구조는 "노드 트리"로 표현됨 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 각 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조이다. 이 케이스의 경우 루트 요소인 html은 부모 줄기, 내포된 여러 태그들은 자식 나뭇가지 그 요소안의 컨텐츠는 잎 DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다. DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습..

WILs 2023. 6. 19. 00:55

생각해보면 그렇게 어려운 과업은 아니었다고 생각한다. 개인 프로젝트에서 팀원 프로젝트 중 시멘틱한 코드를 선별하여 거기에 디벨롭을 얹히는거라.. 이전에 공부했던 localstorage를 통한 data 저장 및 불러오기 기능을 자원해서 진행했다. 해봤던 부분이라 빨리 진행되긴 했는데, 삭제 기능에서 너무 오래 정체되었다. 팀원분들은 튜터님에게 도움 받아보시고 힘들면 안해도 된다고 하셨는데, 개인적으로 너무 하고 싶어서 해보겠다고 했다. 결국 해결 안됐지만, 나 혼자 해보겠다고 고집 피우면 낭패 아닌 낭패가 될거라 생각해서.. 잠시 접어두고 다시 구현해 볼 계획이다. 다른 공부하다가 분명 떠오를거라고 생각한다. 이번 기회에 초기 팀프로젝트해서 많이 시도해 보지 않았던 git commit push를 많이 해봤..

WILs 2023. 6. 11. 23:03