React
-
[JS] Array 메소드 정리(+ reduce, filter, indexOf, map, forEach, fill)React 2022. 10. 22. 19:28
Array.reduce() 배열의 모든 요소들에 대해 연산을 수행하여 하나의 값을 리턴해주는 함수이다. 하지만 한번에 2개의 요소를 계산하고 그 결과를 다음 요소와 계산하는 순차적인 방식으로 진행된다. acc 는 누산기이며, 반환값을 누적시켜준다. cur 은 처리할 요소이다. 동작시킬 명령을 { } 안에 적어주면 된다. idx 는 초기값으로, 만약 전달하면 acc 의 첫번째 값으로 대응되고 전달하지 않으면 배열의 첫번째 값이 acc의 첫번째 값으로 대응된다. let a=[1,2,3,4,5]; let result1=a.reduce((acc,cur,idx)=>{return acc+=cur},0); let result2=a.reduce((acc,cur,idx)=>{return acc+=cur},10); con..
-
[JS] 중급문법2 (+ Symbol, Math, toString, parseInt)React 2022. 10. 22. 14:17
Symbol const obj={ 1:'hi', false:'거짓', } console.log(Object.keys(obj)); //[ '1', 'false' ] console.log(obj['1']); //hi 원래 객체 키값(property key)은 숫자나 boolean형으로 주어져도, 문자열로 반환된다. 따라서 밸류값에 접근할 때도 키값을 문자열 형태로 전달한다. 그리고 객체의 property 키로 전달 가능한 형태가 문자열 말고 하나 더 있는데, 바로 Symbol 형이다. const a = Symbol(); const b = Symbol(); const c = Symbol('hi'); console.log(a===b); //false console.log(a==b); //false console..
-
[JS] 중급문법1 (+ 변수, let, const, 호이스팅, 스코프, 객체, 메소드 )React 2022. 10. 20. 23:56
변수 /** * 참조링크 * https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=50s */ /** * var는 한번 선언된 똑같은 변수명을 다시 선언 가능하다. * let은 똑같은 변수명으로 다시 선언할 수 없다. */ var name='Mike'; var name='Jane'; /** * var는 선언하기 전에 사용할 수 있다. * 왜냐하면 var name2='Amy'는 * var name2; * console.log(name2); * name2='Amy'; * 와 같은 의미이기 때문이다. * * var 로 선언된 변수는 실제로는 그렇지 않지만, * 최상위로 끌여올려진 것처럼 작동하기 때문이다. 이를 호이스팅(hoisting)이라고 한다. * 선언은 호이스팅되고 할당은 ..
-
[JavaScript] 기초문법5 (+ 객체, for in 반복문, method, this, array )React 2022. 10. 15. 12:50
객체 객체는 { }로 둘러싸여 있고, key : value 형태로 데이터를 갖는다. 객체명 다음에 .을 찍어서 접근할 수 있고, 마찬가지로 .을 찍어서 새로운 키:밸류 를 추가하거나 삭제할 수도 있다. const superman={ name:'clark', age:30, } superman.age superman['name'] 객체에서 단축 프로퍼티를 쓰면, 다음과 같이 줄여서 쓸 수 있다. 예를 들면, name이라는 키에 name이라는 변수를 밸류로 담은 것이다. 그리고 그 name 밸류에 'yong'이라는 문자열이 들어있다. const name='yong'; const age=28; const breadman={ name, //name:name age, //age:age gender:man, } 객체..
-
[JavaScript] 기초문법4 (+ 함수, 선언문, 표현식, 화살표 함수, 호이스팅, ES6)React 2022. 10. 12. 00:45
함수 중복해서 사용하는 동작을 할 때, 코드량을 줄이고 유지보수를 편하기 위해 사용한다. //작성법 function 함수명(매개변수){ 실행할 코드; } //실행법 함수명(매개변수); function sayHello(name){ let msg=`Hello.`; if(name){ msg+=name; } console.log(msg); } sayHello(); //Hello. sayHello('Justin'); //Hello.Justin msg라는 변수는 함수 내에서 선언된 지역변수이기 때문에, 해당 함수 그룹 안에서만 사용이 가능하다. 만약 함수 밖에서 사용하고 싶다면, 변수 선언을 함수 밖의 전역변수 구역에서 해주면 된다. 그러면 전역변수가 되어 전체에서 다 사용할 수 있다. * 전역변수와 지역변수는 같..
-
타입스크립트(TypeScript)란? (+ 우아한 형제 웹 프론트엔드 개발 직무 모집, DevOps)React 2022. 10. 10. 15:06
배민스토어 웹 프론트개발팀에서는 배달의 민족 기업의 '비마트', '배민스토어', '배민쇼핑라이브' 등의 커머스 서비스와 어드민을 개발 및 운영하고 있다. 주요 업무 - 모바일과 PC에 동시에 쓰일 수 있는 웹 서비스 디자인 컴포넌트 제작 - 배달의 민족 앱 내 웹 화면 구현(장바구니, 주문, 결제, 상품 등) - 커머스 서비스에 상품을 올리는 셀러들이 사용하는 업무용 오피스 개발 - 임직원들이 서비스를 운영할 수 있도록 하는 어드민 콘솔 개발 (아래는 예정) - PC 웹을 통해서 커머스 서비스 이용가능하도록 구현 - 배민쇼핑라이브 영상 편집 서비스 - 상품 콘텐츠 에디터 서비스 개발에 사용하는 기술 - 사용 언어 : TypeScript, JavaScript - 코어 : React, Next.js, Mo..
-
[JavaScript] 기초문법2 (+ 연산자, 증가, 감소, 비교, 논리, 조건문)React 2022. 10. 9. 11:25
연산자 %는 나머지 값을 출력할 때 사용한다. 특정 숫자를 2로 나눴을 때 나머지가 1이면 홀수, 0이면 짝수임을 알 수 있다. 그리고 어떤 값보다 작은 수만 출력하고 싶다면, 그 숫자로 나눠서 나올 수 있는 나머지 값들을 구하면 된다. 예를 들어 a%5를 하면, 0~4까지의 수만 나머지가 될 수 있다는 걸 알 수 있다. **를 쓰면 거듭제곱을 의미한다. 2**3 은 2*2*2 로 결과값은 8 이다. a+=1, a-=1, a*=2, a%=2 처럼 연산자를 줄여서 사용할 수도 있다. let a=5; a+=1; console.log(a) //6 a-=2 console.log(a) //4 a*=2 console.log(a) //8 a/=2 console.log(a) //4 a%=2 //나머지 console.l..