본문 바로가기

javascript

자바스크립트 ES6 문법을 통한 입력값 주기 Feat. React 최근 프로젝트를 하며 알게 된 내용 중 하나를 공유하고자 합니다 React에서 input 태그의 입력값을 구해와야 할 때 일일이 한 개의 input 태그의 입력값을 구해왔던 분들이 있을 겁니다 물론 저도 지금까지 그래 왔습니다 예를 들어 클릭 이벤트를 발생시킬 때 함수를 한 개씩 만들었던 것처럼 말이죠 한 개의 함수로도 쉽게 여러 개의 input값을 가져올 수 있습니다 예시와 함께 바로 보도록 하겠습니다 const onPostChange = (event) => { const { target: { value, name }, } = event; } onPostChange라는 함수 안에 파라미터로 event를 받고 있습니다 함수안 객체를 선언후 프로퍼티로 target이라는 이름의 키값과 객체 value, na.. 더보기
JSON을 알고 계신가요? Javascript Object Notation 데이터를 저장하거나 전송할때 많이 사용되는 Data 교환 형식, JSON은 사람과 기계가 이해하기 쉬우며 용량도 작아 많이 사용하는 방식, JSON은 단순히 데이터를 표시하는 표현 방법, JSON의 공식 인터넷 미디어 타입은 application/json이며, JSON의 파일 확장자는 .json이다. JSON의 특징이라고 한다면 - Javascript의 object(객체)와 굉장히 유사한 형태를 가지고 있다 - Javascript를 사용하여 JSON형식의 데이터를 손쉽게 Javascript의 object형태로 변환 할 수 있다 - 특정 언어에 종속되지 않으며, 대부분 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다 JS.. 더보기
[React] 이중map react에서 대부분의 UI를 구현할 때 map() 함수를 자주 사용한다 사실 거의 반 필수로 사용하는거 같은데 데이터가 배열 객체 형태로만 존재할 경우 쉽게 데이터를 가져올 수 있다 하지만 점점 데이터의 형태가 복잡해진다면 한번의 map으로 내가 원하는 데이터를 가져올 수 없다 예시를 통해 알아본다 map()을 활용하기 위한 데이터 만들기 const productData = [ { id: 1, name: '블랙 셔츠', }, { id: 2, name: '하얀 반팔티', }, { id: 3, name: '파란 에어리즘', } ]; 상품 데이터라는 배열안에 상품 한 개에 해당하는 객체가 존재한다 여기서 이 객체는 배열의 인덱스[0], [1], [2]에 해당한다고 볼 수 있다 이 상품 전부의 name이 필요.. 더보기
[Team Project] 쓰레빠 Threppa Project 2 mamuree~ 오늘 제로콜라 한잔 했습니다.. 드디어 2주간 팀 프로젝트, 쓰레빠 프로젝트를 마무리(manuree)했습니다 저희 팀은 다른 팀들보다 한 명이 적은 상태로 출발했습니다 팀원들 전부 mbti가 i로 시작하는 사람들이라 싫어도 싫은 소리 못 냈을 팀원분들 너무 고생 많이 하셨습니다 처음 해보는 팀 프로젝트, 그리고 딱 겹친 장마철의 습함 덕분에 불쾌지수도 올라가고 코딩의 열기도 올라가ㄱㅗ... 응?? 음악 하나 틀고 들으면서 마무리 스크롤 한번 내려보겠습니다 클릭클릭클릭클릭클릭클릭클릭클릭클릭 프로젝트 명 : 쓰레빠(Threppa) Project 팀 구성 : Front 3명, Back 1명 Github(깃허브) 본인 담당 : 제품 상세 페이지, 푸터 Demo 영상부터 보겠습니다 유튜브 영상 구성은 이렇습니다 .. 더보기
[React] map()을 통한 반복적인 태그 줄이기 리액트를 접하기 시작하면 반복적으로 하드 코딩되는 부분이 발생한다 예를 들어 function App() { return ( Safari belted half shirt 6월17일 예약 발송 Flap pocket open collar shirt 6월17일 예약 발송 Aircrew half shirt 6월17일 예약 발송 Multi stripe pique tee 6월17일 예약 발송 ); } 이렇게 상품이 여러개가 존재하고 상품 한 개마다 비슷한 구조의 태그들을 가지고 있다면 State를 통해 배열안에 담거나 data로 만들어 코드를 줄이면서 효율적으로 관리할 수 있다 const [productData, setProductData] = useState([ 'Safari belted half shirt', '.. 더보기
[JS / javascript] scroll X, Y 값 구해보기 필요한 학습 문법이 있습니다 addeventlistener 알고 계시면 scroll값을 편하게 구할 수 있습니다 이것을 통해 간단하게 스크롤 이동을 할 수 있습니다 예시를 통해 봅시다 제가 간단하게 만든 자기소개 페이지입니다 지금 보이는 화면은 페이지의 하단이고 우측 하단에 보이는 TOP 이라는 버튼을 누르면 페이지의 제일 상단으로 이동하고 싶습니다 순서를 정리해 보자면 1. 화면의 스크롤 Y 값을 구한다 2. 버튼을 누르면 구한 스크롤 Y 값으로 페이지가 이동한다 3. 부드럽게 이동시켜 본다 1. 스크롤 값 구하기 window.addEventListener('scroll', function() { console.log(window.scrollY); }); console창으로 확인 했을때 페이지 제일 상.. 더보기
[JS / javascript] if문 조건식 한번에 여러개 비교하기 if문의 조건을 두 가지, 세 가지 한 번에 비교할 수 있는 방법이 있습니다 우리가 아는 형태의 if문 입니다 저기 조건식 부분에 조건을 여러 개 넣고 비교하려면 여러 가지 방법이 있겠으나 제가 아는 방법입니다 한 번에 비교하기 &&(논리 연산자)는 두 개의 조건식이 모두 맞아야 ture를 출력하는 연산자입니다 예시) num이라는 파라미터에 5라는 숫자를 넣었을 경우 두 가지의 조건식이 만족하는지 확인합니다 첫 번째 조건식은 10 보다 작은 숫자인가? 두 번째 조건식은 num 숫자가 5와 일치하는가? 이렇게 두 가지 조건식이 일치할 경우 내가 실행하고 싶은 자바스크립트 코드가 실행됩니다 더보기
[JS / javascript] addEventListener에 사용할 수 있는 문법 보통 이벤트리스너로 버튼을 클릭했을 때 ~~ 이러한 코드를 실행 주세요 라는 기능을 많이 사용한다 클릭뿐 많이 아니라 이벤트리스너로 사용할 수 있는 예약어들이 있다 내가 보려고 만드는 것이니 하나하나씩 추가하겠다 click 예를 들면 버튼을 클릭했을 때 실행할 코드~ mouseover 마우스를 요소에 스윽 가져다 놓았을 때 정확히는 내가 찾은 id라는 요소 안으로 마우스가 들어왔을 때를 얘기함 input input 창에 입력값이 들어왔을 때 더보기

티스토리툴바