스토리북 만들기 처음에 키노트에 캡처해서 개선점 찾으라해서 일단 다 캡쳐해서 다 올렸는데 개선점을 찾기가 어려웠다. 솔로프로젝트 피그마에서 토큰을 만들어서 추출하는 줄 알았는데 토큰이 없었다..! 어느 부분부터 만들어야 하는지 헷갈렸는데 스토리북의 의미를 다시 되새겨본다면... 콘셉트를 잡는 것? 버튼은 이런 모양~ 모달은 이런모양~ 이렇게 정해두는 것 그중 컴포넌트 중에 드롭다운, 토스트를 해보기로 결정했는데 드롭다운기능을 못 넣은 드롭다운 메뉴만 만들기 성공했다. 내일은 드롭다운기능 + 스토리북 배포까지 해보기! 만난 오류 app-index.js:32 Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded, data-gr-ext..
코드스테이츠 부트캠프에서 솔로프로젝트를 진행했습니다. 디자인 시안은 피그마로 전달받았고 데이터는 Swagger API 문서를 참고하여 불러왔습니다. 🔨구현 기능 - 모달 redux를 사용하여 모달창 on, off의 상태를 전역에서 관리하였습니다. 아이템 컴포넌트 이미지를 클릭하면 모달창이 열리게 구현을 했습니다. 모달이 닫히는 경우는 다음과 같습니다. 1. 모달창 위의 X 버튼 클릭 2. 모달 이외의 영역 클릭 이미지 위의 북마크 기능을 수행하는 별이미지에는 클릭 시 event.stopPropagation() 메서드를 사용해 이벤트 버블링을 막았습니다. - 무한스크롤 react-intersection-observer 라이브러리의 useInView훅을 사용했습니다. 불러오는 데이터의 최하단 부분요소에 re..
보안/인증 주간이었습니다. 섹션 2에서 서버 코드 짜는 것을 특히 어려워했던 저는 이번주에도 페어활동이 아니었다면 과제 시작조차 못했을 것 같습니다. 이번주에 배운 내용은 크게 아래와 같습니다. 1. http/https 2. 쿠키/세션 3. 토큰 4. OAuth 블로깅 챌린지로 지난 유닛의 http의 개념을 간단하게 복습했었는데 이번 유닛에는 https서버를 직접 만들어보는 실습을 가졌습니다. 로컬환경에서 mkcert라는 프로그램을 이용해서 인증서를 생성하고 인증서를 통해 간단하게 HTTPS서버를 만들어 볼 수 있었습니다. HTTPS는 HTTP와는 달리 요청과 응답으로 오가는 내용을 암호화해서 더 안전합니다. 이 암호화 방식에는 2가지가 있습니다. 대칭키와 비대칭 키 암호화 방식이 있는데 후자의 방식..
주간회고를 쓴다고 다짐한 지 2주 만에 처음 써보는 주간회고입니다. 굉장히 떨리네요.. 우선 이번주에 무엇을 배웠는지 살펴보겠습니다. 1. React 상태관리 2. 웹표준&접근성 이렇게 크게 두가지를 배웠습니다. React에서는 useState훅으로 상태관리를 합니다. 만약 부모컴포넌트의 상태를 자식 컴포넌트가 변경을 하게 될 경우에는 직접 변경하지 못하고 상태변경함수를 props를 통해 객체로 전달받아 간접적으로 상태를 변경할 수 있습니다. 여기서 만약에 부모의 자식의 자식의 자식의 자식의 자식 컴포넌트에서 부모컴포넌트에 있는 상태를 변경을 하려면 props를 단지 전달 용도로만 1231번 사용되는 props drilling이 발생하게 됩니다. 이러한 불편함에서 벗어나기 위해서 페이스북은 모든 상태를 ..
🥡오늘 한 것 - 블로깅마니했다 과연 영양가가 있는지 모르겠지만..? 하루에 개념 + 실습을 하는데 둘 다 적는게 맞는건지 모르겠다. 어젠 실습을 오늘은 개념을 블로깅해봤는데 개념이..더.. 나은거같기도... 개념을 적으면서? 예제로 ? 실습을 넣는다! 적으면서 해결했다 감사합니다. - 오늘 했던 실습을 바탕으로 클론코딩중인데 막상 처음부터 리액트를 쓰려니 헷갈린다 분명 더 간단한거같은데😟 계속 써보면서 손에 익히기! 🥡해야할 것 - 내일 당장 또 새로운 개념들을 배우는데 월요일 까지인거 보면 분명.. 대단한 건가본데... 얼른 리액트 라우터쓰는거 마저끝내기
🫒오늘 한 일 - 블로깅을 세개 했다! 데일리코딩, 리액트과제, TIL - 애플코딩님 리액트강의 이벤트.. 넘 신기하고 짜릿해..... 간단한 과제만 했는데 다른것도 시도해보고싶다! 🫒해야할 일 - JSX쓰는 방법이 아직 낯설다! 강의 들으면서 만들어보고싶은거 하나씩 꼭 만들어보기 - 요즘 너무너무너무너무 피곤하다 :( 심각 수준 영양제 잘 챙겨먹고 아침 산책 다시나가기!!
🍅오늘 한 일 - 비동기, 프로미스 영어프레젠테이션을 했다! - 리액트 맛보기를 했다 🍅알게된 점 - Promise의 pending 상태에 대해 헷갈렸었다. 비동기처리를 시작하기전인지 진행중인지 단순히 resolve, reject 메소드를 안적어줬을 뿐인지 스터디원분이 질문 안해줬으면 얼렁뚱땅넘어갔을 것이다. Promise의 state는 오직 resolve, reject 메소드만이 바꿀 수 있으며 한번 fulfilled 혹은 rejected 상태가 되면 돌아갈 수 없다. 또한 pending 상태가 아니라면 settled 상태이다. settled는 fulfilled 와 rejected상태를 의미한다. 프로미스 상태 정보 의미 변경 조건 pending 비동기 처리가 아직 수행되지 않은 상태 프로미스 생성 직..
🏍️ 오늘 한 일 - 프로토타입 체인 블로깅 - 비동기 맛보기 - 커밋 🏍️ 깨달은 점 - prototype : 저장소 -__proto__: 저장소의 주솟값 - 클래스 객체에서의 this는 instance객체이다. - 클랙스 객체에서 생성자 함수 안에서 return this가 생략된다. - super 생성자는 한번만 호출할 수 있다. - 생성자 함수랑 super 생성자함수는 매개변수 없어도 상속받은 속성이나 메소드를 사용할 수 있다. - 두개 이상의 다른 부모객체를 상속받을 때 extends() 키워드 괄호안에 연산자 사용이 가능하다. - 속성은 super() 키워드 괄호 안에 {대괄호}에 나열해준다. 🏍️ 해야할 일 - 비동기 관련 유튜브영상 찾아보기 (드림코딩! 애플코딩!)
🌲오늘 한 일 - 거의 복붙한 블로깅 4개 - 클래스,프로토타입 관련 유튜브강의듣기 - 모자딥다 읽기 - 영어스터디 🌲깨달은 점 - 이해하는것을 목표로하자! 그렇~게 조급해하지 말자고 떡하니 써놨건만 진도에 급급해 결국 이해하는데 너무너무 오래걸렸다. 나의 소중한 취침시간을 지키려면 효율적으로 행동하자! 🌲해야할 일 - 오늘 후다닥 쓴 블로그 수정하기 - 영어스터디 월요일 발표 주제 정하기 => 지금부터 준비하자..
🍩오늘 한 것 - 코플릿을 다 풀었다......... 사실 레퍼런스 본 것도 있어서 100% 이해했다고는 할 수없다. 🍅깨달은 것 - array 에서 in 연산자 object에서 of연산자 - if else 문에서 구문이 한 줄 일 때 {중괄호} 생략가능 - 화살표함수에서 리턴문이 한 줄일때 {중괄호}, return문 생략가능 - reduce 초깃값 없을때 배열의 첫 번째 element가 초깃값이 된다. - map : 배열 => 배열 , 배열의 요소 하나하나를 만지고싶을 때 - filter : 배열 => 배열, 배열을 조건에 따라 필터링 하고싶을 때 - reduce : 배열 => 하나의 결과 값, 만능엔터테이너 ✨해야 할 것 - 내일 영어스터디주제인 OOP MDN영어로 찾아보기.. + 노마드코더
