UX·UI - FrontEnd Dev. Story

프론트엔드 117

자바스크립트 < 비구조화 할당 (구조분해 할당)에 대해 알아보기>

변수에 넣어논 특정값들을 변수에 쉽게 담을 수 있는데 그것을 비구조화 할당이라고 한다. 만약 비구조할당이 없을때는 어떻게 작업을 해야했는지에 대한 불편함을 알아보자. 1. 배열 데이터값을 이용한 비구조화 할당 const names = ["Chloe", "Jake", "David", "Tom"]; const name1 = names[0]; const name2 = names[1]; const name3 = names[2]; const name4 = names[3]; console.log(name1);//Chloe console.log(name2);//Jake 이렇게 배열에 담긴 값들을 변수 하나 하나 각자 생성해서 각 [ index ] 넘버를 지정 설정하면서 할당했다. 4개까지는 쌉가능이지만... 만약 배..

자바스크립트 parseInt() / parseFloat() - 해당값을 정수/실수로 반환 - JS

문자를 숫자로 변환할 수 있는 내장함수 1. parseInt (변환할 값) - 해당값을 정수로 반환 const num = "5"; const num1 = "5.7" console.log(parseInt(num)); // 5 console.log(parseInt(num1)); // 5 // 반올림 상관없이 정수로 무조건 반환. 2. parseFloat (변환할 값) -해당값을 실수로 반환 const num = "5.8"; const num1 = "5.3"; console.log(parseFloat(num)); // 5.8 console.log(parseFloat(num1)); // 5.3 // 소수점 살려서 실수로 무조건 반환

JS 문자열 내장함수 - slice/indexOf/substr/replace/split - 자바스크립트

1. indexOf( ) - 찾고자하는 문자열의 위치 반환 2. slice( ) - 문자열에서 특정 부분 찾아서 새로운 문자열로 반환 3. substr( ) - 문자열에서 특정 부분 잘라냄 4. replace( ) - 문자열에서 특정 문자값 바꿔치기 5. split( ) - 문자열을 배열로 반환 1. 문자열.indexOf() - 찾고자하는 문자열의 위치 반환 const txt = "Hello World"; console.log(txt.indexOf("apple")); // -1 apple이란 단어를 찾기했을 때, 값이 없으면 -1을 반환한다. 만약 글자가 있다면 그 글자의 위치를 찾아서 숫자로 반환. indexOf는 단어가 있는지 없는지 확인할 때 사용을 많이 한다고한다. 2. 문자열.slice() - ..

배열전용 내장함수 반복문 forEach() / map() 자바스크립트 JS 공부

자바스크립트에 미리 포함 된 함수를 내장함수라 한다. 배열에 사용하는 반복문 내장함수에는 forEach() / map() 이 있는데 알아보자. forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다. ex) forEach( el, idx, arr ) el : 반복 돌고있는 대상 idx : 순서값 arr : 배열자체 1. forEach() const colors = ["red", "green", "blue"]; colors.forEach((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 ) console.log(el); //red green blue console.log(idx); // 0 1 2 console.log(arr)..

자바스크립트 for / for of / for in 반복문 사용법 - JS

1. for() 반복문 1-1) 배열에서 for() 이용하기 // 배열에서 사용법 const colors = ["red","green","blue","aqua"]; for( let i=0; i < colors.length; i++ ){ console.log(colors[i]); //red green blue aqua } 1-2) 객체에서 for() 이용하기 // 객체에서 사용법 const classA = [ {name: "Chloe", age: 20, address: "Seoul"}, {name: "Andy", age: 25, address: "Busan"}, {name: "Jane", age: 18, address: "Daegu"}, ]; for(let num=0; num < classA.length;..

자바스크립트 대입연산자 ( = , += ) 사용법

자바스크립트에서 연산자 공부할 때 +, -, /, * 등등 이해가 잘 가는데.. +=는 매번 헷갈렸다. 그래서 정리를 해보았다..! let num1 = 2; num1 = num1 + 2; console.log(num1); //num1은 2 + 2가 되어서 4가 나온다. //// 이것을 함축형으로 바꾸면 num1 += 2; // 자기자신 num1(초기값)에다가 2를 더한다는 의미 console.log(num1); //4 결국은 num1 + 2 라는 의미.. easy하네

React 프로젝트 시작 셋팅 yarn 이용해서 작업 순서 알아보기

리액트 프로젝트를 시작할때 첫 셋팅과 진행방법을 정리해서 포스팅하려고 한다. 우선 git / Node JS / npm / yarn 설치가 되어있어야한다. * git 설치 확인 git --version * Node JS 설치확인 node -v * npm 설치 확인 npm -v * yarn 설치 확인 yarn -v 1. React 프로젝트 만들기 yarn create react-app 프로젝트명 - VScode를 열어서 터미널에 이 명령어를 넣는다. BUT!! 제대로 했는데 혹시나 이런 오류가 뜬다?! ( 뭐하나 한방에 되는게 엄숴.. ) Error Couldn't find a package.json 영어에 당황하지 말자, 이제 영어에 더 이상 쫄면 안된다.. 익숙해져야한다...... 해석해보면 packag..

터미널 Git으로 GitHub 사용하는 방법 A부터 Z까지(깃, 깃허브)

Git으로 GitHub에 버전관리를 하려고 할때마다 매번 헷갈렸다.. clone이 어쩌고 add가 어떻고, branch가 머시기고... 그럴때마다 검색하면 push에 대한 설명이라던지 commit 사용법이라는지 그런것만 있지 어떤 순서로 어떻게 하라는건지 제대로 된 설명이 없었다. 그래서 이 참에 그냥 내가 정리를해서 포스팅을 했다. 포스팅하고보니 이제 여기만 들어오게 된다..ㅋㅋㅋ 다른 깃 초보자들에게도 이 포스팅이 도움 되길 바라며.. [바로가기 버튼] 1. Git 초기화 설정으로 Git 버전관리하기 2. GitHub에서 저장소 만들어서 프로젝트 Git 이랑 연결하기 3. 작업한 프로젝트들을 버전으로 gitHub에 올리는 방법 4. 브랜치 만들기 5. 깃 저장소(Git Hub)에 업로드 6. 깃과 깃..

크롬/Chrome 주소 HTTPS 에서 HTTP로 전환해서 바꾸는 방법/리다이렉트 해제

1. 주소창에 URL을 입력했는데 HTTP가 HTTPS가 되어버렸어요! 크롬 웹브라우저에서 SSL이 적용된 사이트에 접속하다보면 홈페이지 주소 앞에 사용되는 프로토콜이 HTTP 에서 HTTPS 로 변경되어서 접속하게 된다. 즉 강제로 https 리다이렉트 된다!!! * SSL이 궁금하다면 아래 링크 클릭! 정보계층보안 SSL(Secure Sockets Layer)인증서 의미/정의 1. SSL [ Secure Sockets Layer ] - 정보 계층 보안이란? 암호화 기반의 인터넷 보안 프로토콜로 개인정보 보호, 인증, 데이터 무결성을 보장하기 위해 개발되었다. * 무결성 ? 더보기 - 데이터의 chlolisher.tistory.com * 프로토콜이 궁금하다면? [프론트엔드 용어] 프로토콜, IP주소, ..

반응형