2024/05 19

useState 공식문서 스터디(1)

useState(initialState)초기에 state를 설정할 값으로 모든 데이터 타입이 허용되고 초기 렌더링 이후에는 무시된다.함수를 initialState로 전달하면 이를 초기화 함수로 취급한다. 이 함수는 반드시 어떠한 값을 반환해야 한다.React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장한다. -return (반환하기)useState는 두 개의 값을 가진 배열을 반환한다. useState는 훅이므로 컴포넌트의 최상위 레벨이나 직접 만든 훅에서만 호출할 수 있다. 반복문이나 조건문 안에서는 호출할 수 없다. 필요하다면 새 컴포넌트를 추출하고 state를 그 안으로 옮기면 된다.Strict Mode 에서 리액트는 의도치 않은 상황을 위해 초기화 함수를 ..

마크다운(MarkDown) 사용법 공부

팀원들과 어쩌다가 보니 스터디를 같이 하게 되어 튜터님이 알려주신 깃허브로 스터디 내용을 공유하기로 하였다.그래서 마크다운 사용법에 대해 간단하게 익혀보려고 한다! 마크다운의 각 문법은 HTML로 변환되어 CSS와 함께 출력되기 때문에화면에 표시되는 모양이 사용하는 스타일 구성에 따라 달라진다.그래서 눈에 보이는 대로가 아닌 문법의 의미에 맞게 사용해야 하므로 같이 공부해 보자.! 문법, , 등을 대신하여#, ##, ### 이렇게 표기하고 하나의 마크다운 파일에서는 하나의 (대제목)만 사용해야 한다 또한 과 는 제목 1=======제목 2------이렇게도 표기한다고 한다. 강조(기울임), (두꺼움), (취소선) 등의 강조를 표현하는 마크다운 표현법은기울임 >> * 내용* 혹은 _내용_ 를 사용하면 된..

카테고리 없음 2024.05.16

리액트 개인과제 map 오류

to do list를 만드는 과제중최종 단계에서뭐지 이건,, map이 엉뚱한데서 적용되고 있는 것 같은데튜터님한테 바아로 찾아갔다 해결방법은 너무 간단했음저 workingbox를 감싸고 있는 div 자체를 map해야하는데div안의 내용만 map돌리고 있었음 ㅜㅜ저 맨 윗줄 바로 아래에 있던 div를 return 아랫줄로 옮기고 Content에 부여했던 key값을 최상위의 div에게 부여해줬다 그러면이렇게 짜잔 ! 이제 css만 좀 더 건들이면 완성ㅇ~~그건 내일 놀고 생각해보자 공휴일이니까!!

React 2024.05.14

맥북 터미널 상태바에 랜덤 이모티콘 삽입하기

터미널에서 vi ~/.zshrc를 입력하면이렇게 zsh 편집창이 뜨는데 마지막 줄에  prompt_context() {# Custom (Random emoji)  emojis=(“🐶” “🍒” “💙” “💗” “🦋” “🍄” “🌸” “🥔” “🍭” “💌” “💞”)  RAND_EMOJI_N=$(( $RANDOM % ${#emojis[@]} + 1))  prompt_segment black default "Hyunah ${emojis[$RAND_EMOJI_N]} "} 이 코드만 삽입해주면 된다 이모티콘은 본인이 원하는 것으로 추가하기 그럼 터미널 창을 열 때 마다 다른 이모티콘이 뜬다! 이걸 왜 하냐고 물으신다면..기분이 조크등요 ㅎㅎ

카테고리 없음 2024.05.13

time 속성으로 댓글 수정, 삭제하기

if (inputPassword === commentToDelete.password) { const filteredComments = comments.filter((comment) => comment.time !== commentToDelete.time); localStorage.setItem("comments", JSON.stringify(filteredComments)); loadComments(); alert("댓글이 삭제되었습니다."); } else { alert("비밀번호가 일치하지 않습니다."); } 댓글 삭제기능을 구현하는데 time 속성을 사용하는 이유에 대해 궁금해졌다.인덱스가 있는데 왜 time 속성으로 filter하는걸까? time 속성을 사용하는 이유는 각 댓글이 유일한 시간을 가지..

JS 2024.05.08

로컬스토리지

팀프로젝트를 하는 와중에 로컬스토리지를 사용하라는 조건이 있어서 사용해보기 전에 정보를 검색해보았다. 로컬스토리지는 웹 브라우저에 데이터를 저장하는데 사용되는데이 데이터는 사용자가 브라우저를 닫아도 계속해서 유지되며,도메인 레벨에서 제한된 용량 내에서 저장된다. 로컬스토리지에 데이터 저장하는 법localStorage.setItem('key', 'value'); 데이터 불러오기var value = localStorage.getItem('key'); console.log(value); 데이터 삭제하기localStorage.removeItem('key'); 모든 데이터 삭제하기localStorage.clear(); 로컬스토리지에는 문자열만 저장할 수 있다.만약 객체를 저장하고 싶다면 객체를 JSON 문자열로 ..

카테고리 없음 2024.05.07

export import

자바스크립트 코드를 짜면서 같은 api를 여러 자바스크립트 페이지에서 사용해야 할 때 Export (내보내기) 와 Import(가져오기) 기능을 쓰면 된다. 우리 조 같은 경우에는 같은 api 주소를 각각 다른 페이지에 불러와야 해서 사용해보았다.export const options = { method: "GET", headers: { accept: "application/json", Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI3ZTI2NzY3Mzk4NGFkOThiNjIxM2EwMzY0YjI4MDk4ZCIsInN1YiI6IjY2Mjc5MGQ4MjljNjI2MDE3ZTRhNGY2YSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJza..

카테고리 없음 2024.05.02

깃허브 프로필 꾸미기

튜터님 깃허브 프로필을 구경해보다가 화려하게 꾸미신게 탐나서 찾아보게 되었다.!우선 많은 기능이 있었는데 복잡해서 하나만,, ㅎㅎ 이 친구를 프로필에 넣어보겠다! 1. ID 레파지토리를 생성한다! 레파지토리 이름을 본인 깃허브 아이디로 설정한다add a readme file 체크하고 create repository 클릭  read me 파일에 연필모양 버튼을 클릭하면 편하게 수정이 가능하다. https://80000coding.oopy.io/865f4b2a-5198-49e8-a173-0f893a4fed45 깃허브 프로필 꾸미기!깃허브에 들어갈 때마다 허전한 내 프로필..80000coding.oopy.ioiterm2 연동 후에 테마 적용해주면 끝!!

카테고리 없음 2024.05.01