헬리_storage

👀 컴퓨터 안에있는 파일 이미지를 이용해서 업로드 할 수 있는 기능을 구현해 보았다! 생각보다 간단해서 정리해 보았다 :) 이용한 것 - input type: file - useState import React, { useState } from 'react'; import * as S from './Mypage.style'; const Mypage = () => { const [uploadedImage, setUploadedImage] = useState(null); const onChangeImage = e => { const file = e.target.files[0]; const imageUrl = URL.createObjectURL(file); setUploadedImage(imageUrl); }..

🙋🏻‍♀️ 위코드에서의 2차 프로젝트를 마쳤다 🙋🏻‍♀️ 정말이지.. 1차때보다 더 어려운 예시 홈페이지들이 많았고, 그 중 우리는 cgv를 참고로하는 프로젝트를 진행하게 되었다. ' 영화관 예매 서비스 컨텐츠 ' 우리 small box의 회고를 시작하겠다 . CGV : 다양한 장르의 영화와 경험을 상영함으로써 관객에게 관람환경 뿐만 아니라 그 이상의 서비스와 감동을 전달 함으로써, 다양한 즐거움과 특별환 경험을 통해 total lifestyle을 선도하는 종합 생활문화 공간 제공 을 한다면 small box ‘독립영화, 즉 신선한 장르와 특별한 소재를 좋아하거나 입문하고자 하는 관객에게 영화를 선보이자 ’ 라는 목표를 두고 다양한 장르에서 보다 감성적인 인디영화에 포커스를 두어 주 매니아층 그리고, 다..

오늘도 여전히 기업협업 중이다.. 오늘은 Footer를 하다가 막히는 부분을 뚫어보았기 때문에 이렇게 글을 써본당..히히 구현하고자 한것 하나하나 누른것들만 주황색 글씨와 그림이 바뀌게 해야했다. 맨처음 구현한 코드 import React, { useState } from 'react'; import * as S from './Footer.style'; import FOOTER_LIST from './FooterList'; const Footer = () => { const [clicked, setClicked] = useState(false); const handleClicked = () => { return setClicked(!clicked); }; return ( {FOOTER_LIST.map(f..

여전히 프로젝트 중이다. 위치를 맵에 표기하기 위해 카카오 api를 구현해 보았다. 지도안에서 검색까지 되는 기능은 아니고, 정해진 위치를 가준으로 주변이 보이게 해 보았다. https://apis.map.kakao.com/web/guide/ 구현했던 순서대로 나열해 보겠다 1. 카카오 developers에 가서 로그인 후 프로젝트 중인 app 을 추가한다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 해당 app의 키들 중 JavaScript키를 public/index.js 파일에 ..

Styled component 를 이용해서 각 다른 css 효과를 주기위해 버튼 3개를 만들어 보면서 각각 다르게 적용해 보았다. props를 이용해서 해보았다.... 어렵ㄷㅏ... 😂 바로 적용한 코드 적고, 그 밑에주석으로 설명을 좀 덧붙여 보았다. Practice.js (자식 컴포넌트) import styled, { css } from 'styled-components'; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; border: 1px solid lightgray; font-size: 1rem; line-height: 1.5; color: ${p => p.color || 'gray'}; background: ..

내가 여태 동적 라우팅을 배우기 전에 사용했던 정적라우팅..! 정적라우팅이란? 이렇게 미리 사용할 수 있는 경로들과 해당 경로로 접속 했을 때 보여줄 컴포넌트를 모두 정의 해 두는 방식이다. 하지만 이런 간단한 페이지가 아니라 복잡하고 규모가 큰 어플리케이션에서는 이렇게 일일이 다 정의 해 두는데에 어려움이 있다. 여태까지 나는 이렇게 쓰고있었다... 그렇지만 이번에 동적 라우팅을 배우게 되어 이제 정적라우팅이라는 작별이다 ...! ⭐️ 예시로 블로그 어플리케이션이 있다고 가정해보자! 블로그에 포스팅 목록을 보여줄 수 있는 '리스트 페이지' 와 포스팅의 내용을 보여주는 '상세페이지' 가 있다고 가정할때, 일반적으로 '리스트페이지'를 기본경로 route ( / ) 로 설정하고, ' 상세페이지 '를 ( /p..

1차 프로젝트를 하면서 비슷한레이아웃을 가진 컴포넌트를 어떻게 사용해야하는지 궁금했는데, 마침 배우게 되어서 정리를 해 보았다. 어려울 것 같았으나, 알고보니 되게 간단하게 구현 할 수 있었다. 이런것도 할 수 있다니... 아주 좋구만... 🌝 컴포넌트 분리는 대부분 관심사에 따라 분리를 하는데, 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는것 을 의미한다. 복잡한 컴포넌트 일수록 재사용이 어려워 가독성과 유지보수성이 떨어지기 때문에 컴포넌트를 따로 분리하여 관리하면 앞서말한 문제들을 야기시키지 않아 아주 유용할 것이다. 컴포넌트를 분리하는 기준 -> UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우 분리 한번 이제 예를 들면서 배웠던 것을 정리해 보겠다. 1. 컴포넌트 분리..

위코드에서의 1차 프로젝트를 하며 멘토님께 받았던 리뷰를 간단하게 정리하고, 내가 뭐가 부족한지 알아보는 시간을 가져보았다. 🌝 코드...진짜 알면 알수록...어렵지만,, 또 재미있는...ㅠ ^ㅠ 1. useState setState 함수의 인자로는 1. 새로운 state가 될 값 2. 콜백함수 () => {} 두가지 유형의 인자를 전달할 수 있는데, 콜백함수를 인자로 전달한다면 콜백함수는 인자로 이전의 state값을 전달받고 함수에서 return 한 값이 새로운 state가 된다. 장점 - 이전 state 값을 명시적으로 기억할 필요가 없음 - 함수가 호출될 당시 최신의 state값이 인자로 전달되므로 비동기 상황에서 안정적 위와 같은 이유들로 인해 이전 state 값을 이용해서 새로운 state값을 ..

바로 전에 parseInt( ) 으로 string-> num 변환도 했고, isNaN ( ) 으로 값이 숫자가 아닌지 맞는지도 해봤는데, 이걸로 이어서 조건문을 이용해 본 것을 정리해 볼 예정이다. (그전) 참고참고 https://hayley-0616.tistory.com/19 [Javascript] string->num , NaN 판별 Javascript 복습중 string->num으로 바꾸는 새로운 방법을 알게되었다! 바로 parseInt를 쓰는것!!!! parseInt( )를쓰면 string->num으로 변환시켜주는데 예를 들어 설명해 보겠다. 이렇게 prompt로 나이를 묻는 창 hayley-0616.tistory.com 조건문은 이런 구조로 구성되고 있다. if(condition){ // con..

Javascript 복습중 string->num으로 바꾸는 새로운 방법을 알게되었다! 바로 parseInt를 쓰는것!!!! parseInt( )를쓰면 string->num으로 변환시켜주는데 예를 들어 설명해 보겠다. 이렇게 prompt로 나이를 묻는 창을 생성했다고 해보자 여기에 숫자값을 넣는다면 숫자로 나올 줄 알았으나.. 29를 입력했으나, string으로 나온 것을 볼 수 있었다. 이제 이 string 으로 나오는 것을 num으로 변환을 해 줄것인데, 이때 사용하는게 위에서 언급한 parseInt( ) 이다. 이렇게 사용해보자! 29라는 숫자를 아래처럼 둘다 ""로 감싸주었을때, pareseInt를 이용한 데이터의 타입은?! console.log(typeof "29" , typeof parseInt..