IT&컴퓨터공학
-
[React Native] useState 를 이용해 Expandable View 만들기IT&컴퓨터공학/React&ReactNative 2021. 1. 24. 18:20
Material UI 에서 정말 맘에드는 Expandable 한 View 를 찾았는데 native 에는 지원을 안하는건지 돌아가지를 않아서 직접 간단하게 구현해보려고 한다. 일단 기능 구현에 집중한 뒤 , 스타일을 이쁘게 다듬어 보자 해당 화면에서 OPEN 이라는 버튼을 누르면 이렇게 파란 화면이 펼쳐지는 expandable View 를 만들어보자! 버튼을 눌렀을때 경우 1) 파란색 View 가 열려져있는경우 width : 0 px , height : 0px 로 바꾸고 경우 2) 파란색 View 가 닫혀져있는경우 width : 100% , height : 300px 로 바꾸자 구조잡기 //빨간색 View 귀여운 강아지 //파란색 View // Detail 은 styled component 로 따로 설정한..
-
[Javascript] 문자열 그리고 쓸모있는 문자열 메소드IT&컴퓨터공학/Javascript 2021. 1. 23. 22:57
작은따옴표 , 큰 따옴표, 백틱의 차이점 작은따옴표와 큰 따옴표는 큰 차이가 없다. let name ="Molly"; console.log(`HI ! my dog's name is ${name}`); 백틱(` `)의 경우 , 위에서 볼 수 있듯이 ${ } 를 이용해서 변수를 넣을 때 자주 사용한다. 문자열 메소드 str.length ( 메소드는 아니지만 ) : 문자열의 길이 let name ="Molly"; console.log(name.length); // 5 str.toUpperCase() : 문자에있는 모든 소문자를 대문자로 바꿔주는 메소드 let name ="Molly"; name = name.toUpperCase(); console.log(name); // MOLLY str.toLowerCase..
-
[Javascript] 생성자 함수란 ?IT&컴퓨터공학/Javascript 2021. 1. 23. 22:21
객체 리터럴 let user={ name : 'Mike', age : 30, } 객체 리터럴은 위와 같이 만들 수 있다. 그러나 개발을 하다보면 위와같은 객체 여러개를 만들어야 하는 경우가 발생한다. 예를들어 회원 관리를 위해 위와같은 user 객체 여러개를 만들어야 하는 경우가 생겼을때, 생성자 함수를 이용한다. 생성자 함수 function User(name,age){ this.name = name; this.age = age; } let user1 = new User('Mike',30); let user2 = new User('Jake',20); let user3 = new User('Jain',25); let user4 = new User('Emily',40); 생성자 함수는 앞글자를 대문자로 쓴다..
-
[Javascript] if 문으로 undefined / null 체크 방법IT&컴퓨터공학/Javascript 2021. 1. 23. 20:28
undefined 와 null 의 차이점 - null 은 의도적으로 null 을 할당한 것으로 , "값이 없음" 을 나타낸다. 때문에 null 의 변수 타입은 object 이다 - undefined 는 변수를 선언하고 값을 할당하기 전의 형태이다. 즉, "값이 할당되지않음" 을 나타낸다. undefined & null 체크 방법 var a; if(a===undefined) console.log("^^"); // 따옴표를 쓰지 않아야 한다 ! // a==='undefined' 라고 쓰면 오류 ! var a=null; if(a===null) console.log("^^"); - 기본적으로 따옴표를 쓰지 않고 사용한다
-
[Javascript] async 와 awaitIT&컴퓨터공학/Javascript 2021. 1. 22. 14:25
Promise chaining 대신 동기 처리를 더 간단하게 할 수 있는 방법 async async function getData(){ return 'data'; } getData() .then((Data)=>console.log(Data)) .catch( (err) => console.log(err)); - 함수앞에 async 를 붙이면 이 함수는 Promise 를 반환한다. Promise 가 아닌것을 반환하더라고 Promise 로 감싸서 반환한다. await function asyncItem() { return new Promise((resolve, reject) => { var item = [1, 2, 3]; resolve(item); }); } async function logItems() { v..
-
[Javascript] 콜백지옥을 해결할 수 있는 PromiseIT&컴퓨터공학/Javascript 2021. 1. 21. 15:07
Promise : 콜백함수로 비동기 처리를 하는 경우 앞에서 살펴봤듯이 콜백지옥이 만들어져 가독성이 떨어지고 디버깅하는데 어려움이있다. 때문에 등장한게 바로 Promise 다 ! Promise 는 콜백함수를 대신하여 비동기를 간편하게 처리할 수 있도록 도와주는 자바스크립트 객체다. const promise = new Promise( (resolve,reject) => { // 네트워크 통신, 파일을 읽어오는 등의 heavy 한 작업들은 // 동기적으로 작업하면 밑에 코드가 실행이 안돼서 시간이 오래걸리므로 // 비동기적으로 구현해야한다 console.log('doing something...'); }); 이렇게 코드를 구현하면 콘솔에 'doing something' 이 출력되는데 , 즉 , Promise..
-
[Javascript] callback 함수와 callback 지옥IT&컴퓨터공학/Javascript 2021. 1. 21. 13:10
Javascript 는 기본적으로 synchronous ( 동기적 ) 이다 즉 , *호이스팅 되고나서 순서에 따라 하나하나씩 실행된다 *호이스팅 : var 변수 / function declaration 들이 자동으로 제일 위로 올라가는 것 callback function 자바스크립트의 asynchronous ( 비동기성 ) 을 표현하는 가장 일반적인 기법 → 파라미터로 함수를 전달하는 함수 Synchronous callback console.log('1'); setTimeout( () => console.log('2'), 1000 ); // 1초뒤에 2를 출력해라 console.log('3'); function printImmediately(print){ print(); } printImmediately..
-
[React] Hook 이란 ?IT&컴퓨터공학/React&ReactNative 2021. 1. 19. 23:30
Hook 이란 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. Hook 을 이용해서 Class 를 작성할 필요없이 상태값과 여러 React 의 기능등을 사용할 수 있다 Hook 의 종류 State Hook : 가장 기본적인 Hook . 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌 위에서 useState 가 바로 hook 이다. useState 는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 위의 예제에서 현재의 state 값은 count , ..