스터디 로그

const Experience = () => { const { classes } = useStyles(); /* 좌표값을 담을 useState */ const [y, setY] = useState(); /* 어떤 엘리먼트를 참조(ref)할 것인지 */ const experienceRef = useRef(null); /* y좌표값을 가져올 함수 */ const getPosition = () => { const y = experienceRef.current?.offsetTop; setY(y); }; /* 마운트될 때 함수 실행하기 */ useEffect(() => { getPosition(); window.addEventListener("resize", getPosition); }, []); console...

Study with me 2023. 1. 31. 19:02

문제 문자열 s가 입력되었을 때 다음 규칙을 따라서 이 문자열을 여러 문자열로 분해하려고 합니다. 먼저 첫 글자를 읽습니다. 이 글자를 x라고 합시다. 이제 이 문자열을 왼쪽에서 오른쪽으로 읽어나가면서, x와 x가 아닌 다른 글자들이 나온 횟수를 각각 셉니다. 처음으로 두 횟수가 같아지는 순간 멈추고, 지금까지 읽은 문자열을 분리합니다. s에서 분리한 문자열을 빼고 남은 부분에 대해서 이 과정을 반복합니다. 남은 부분이 없다면 종료합니다. 만약 두 횟수가 다른 상태에서 더 이상 읽을 글자가 없다면, 역시 지금까지 읽은 문자열을 분리하고, 종료합니다. 문자열 s가 매개변수로 주어질 때, 위 과정과 같이 문자열들로 분해하고, 분해한 문자열의 개수를 return 하는 함수 solution을 완성하세요. 제한사..

Programmers_JS 2023. 1. 5. 22:37

와우 난생 처음 코딩테스트라는 걸 해보았다...! 주로 공부하면서 웹 기능 구현에 막히는 부분들이 결국은 코딩테스트 및 알고리즘 공부로 보충이 된다는 이야기를 들어 반쯤 떠밀리듯 ...ㅜㅠ 시작했다. 근데 머 하다보면 내 공부 되는 거니 힘내보자! 약간 새해 목표인가 ㅋㅋ 문제 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 14..

Programmers_JS 2023. 1. 3. 14:32

local storage를 사용해 새로 입력하는 데이터들이 클라이언트 브라우저에 저장되고, 그 저장된 데이터를 가져와 화면에 리스트로 표현하는 작업을 했습니다. 추가로 데이터를 좀 더 넣어 그럴듯하게 만들어보겠습니다. 이미 리스트 화면상에 있지만 ㅎㅎ 삭제 버튼도 만들고, 이제 함수를 만듭시다. // Post.js const PostItem = ({ handleClick, contents, handleDelete }) => { return ( {contents.length > 0 ? ( contents.map((content, index) => ( handleClick(content)}> {content.title} {content.visitedAt} Del )) ) : ( 콘텐츠가 없습니다. )} );..

Study with me 2023. 1. 2. 18:04

모달창으로 작성한 데이터가 리스트 화면에 뜬다고 해서 끝이 아닙니다. 현 단계에서 새로고침을 하면 화면에 리스트 아이템이 사라지니까요. 데이터를 저장하는데에는 서버나 클라우드를 사용해도 되겠지만, 클라이언트 단, 그러니까 브라우저상에 저장할 수 있는 웹 스토리지(local storage, session storage) 중 localStorage를 사용해 이전의 mock데이터를 옮겨주고, 새로 추가하는 데이터 또한 새로고침해도 보여지도록 하겠습니다. 우선 초기 데이터 세팅을 합니다. const initialPostData = localStorage.getItem("contents") ? JSON.parse(localStorage.getItem("contents")) : []; 그리고 이 초기 데이터를 co..

Study with me 2023. 1. 2. 15:17

이번에는 새로운 object data를 추가해 list 화면에 보여주고자 합니다. 주의할 점은 1. input 하나만이 아니라, 여러 input이 들어간 object 형식 2. 지난번과 마찬가지로 추가하는 정보를 담은 양식을 컴포넌트화할 것이기 때문에 props 전달 3. 그리고 저장 버튼을 눌렀을 때 list 화면에 보여줌 4. 이 때에 기존 array에 push하는 것이 아니라, useState를 통해 기존 data array를 유지 입니다. 일단 컴포넌트부터 제작 ㄱㄱ const NewPostForm = () => { return ( 새 맛집 추가하기 저장 ); }; 아참 css는 emotion을 사용하고 있습니다. 적당히 맘대로 이쁘게 만듭시다. input에 있는 name과 value는 원래 ar..

Study with me 2022. 12. 29. 19:09

list item을 클릭하면 해당 item에 맞는 object정보를 담은 modal을 띄우고, 그 안에 정보들을 표시해보도록 합니다. JavaScript 기초 지식이 없어서 쩔쩔 해맸음ㅜㅜ 🤔 어디까지나 제가 대충 이해한 내용으로 정리했을 뿐, 정확하지 않습니다..! 우선 modal은 다른 컴포넌트로 분리합니다. function Modal() { return ( 제목 종류 ❌ 📌: 주소 📞: 전화번호 📆: 방문일 ); } Modal컴포넌트는 list들이 map()을 통해 나열되도록 만든 부분 아래에 두었습니다. return ( 블로그 남천동 맛집리스트 정렬변경 {contents.length > 0 ? ( contents.map((content, index) => ( {content.title} {cont..

Study with me 2022. 12. 28. 01:41

Object로 이루어진 Array를 map()을 사용하여 리스트를 만들었다. const posts = [ { id: 1, title: "마이웨이 린린", sort: "중식", address: "부산 수영구 수영로408번길 24-4", call: "", createdAt: "2022. 12. 22", }, { id: 2, title: "레브꽁뜨", sort: "카페", address: "부산 수영구 수영로408번길 32", call: "051-611-4127", createdAt: "2022. 12. 23", }, { id: 3, title: "덴푸라마켓", sort: "분식", address: "부산 수영구 수영로388번길 6", call: "051-622-1522", createdAt: "2022. 1..

Study with me 2022. 12. 26. 16:01