NOW OR NEVER

함수 정의와 호출 컬렉션 자바의 getClass() = 코틀린의 javaClass : 해당 객체가 어떤 클래스에 속하는 지 확인 가능 자바 컬렉션 = 코틀린 컬렉션: 코틀린은 자신 만의 컬렉션 기능을 제공하는 것이 아닌 기본 자바 컬렉션을 활용한다 코틀린이 자체 컬렉션을 제공하지 않는 이유 표준 자바 컬렉션 활용 시 자바 코드와 상호작용하기 훨씬 쉬움 자바에서 코틀린 함수 호출 혹은 코틀린에서 자바 함수 호출 시 자바와 코틀린 컬렉션을 서로 변환 필요X 함수 호출 간소화 이름 붙인 인자 코틀린에서 사용예시 joinToString(collection, seperator = "", prefix = " ") 함수에 인자로 전달한 것들이 각각 어떤 역할을 하는 지 구분할 수 있게 도와준다. 디폴트 파라미터 값과..

함수 프로그래밍을 짤 때 무언가 반복적으로 계산되는(수행되는) 로직들이 있을 때 함수로 만듦. 왜냐하면 함수로 만들면 재사용이 가능하기 때문이다. 함수 선언 function 함수이름(인자){기능 수행 영역(code block)} 함수 선언시 function 키워드 사용 {} 즉 코드 블럭을 수행하는 것들을 함수이름으로 가리키게 됨 함수 이름 함수 자체를 가리키는 것 함수를 가리키고 있는 주소(refernce)를 가지고 있다 함수 이름 지정 가능 가능하면 의미있는 이름으로 설정 변수에서 이름을 원하는대로 지정하는 것처럼 함수 또한 원하는대로 이름 지정 가능 짧고 간결하지만 의미있는 이름으로 설정 인자 함수를 호출하는 사람으로부터 필요한 data를 받아오기 위해서 그리고 필요한 data를 받아올 때 함수 내..

함수에서 헷갈릴 수 있는 부분 정확히 이해해야 하는 포인트 선언과 호출의 차이점 이해 함수 선언 어떤 값을 전달받아 올건지 인자들을 정의하고 나서 코드 블럭 작성 선언만 해놓으면 작성한 코드블럭은 수행되지 않는다. javascript에서는 function이라는 키워드를 이용하며 함수 이름을 원하는 이름으로 작성 가능 function Name(parameter){ 실제로 함수 안에서 실행될 코드 } 함수 호출 functionName(); 정의한 선언한 함수를 실행하기 위해서는 함수를 호출해야 한다. 함수를 호출하기 위해서는 함수이름 옆에 괄호를 이용해서 함수에서 원하는 정의된 인자값들을 전달하면서 호출해야 한다. 괄호를 쓰지않고 함수 이름만 어디에 할당하거나 전달하면 함수 자체를 전달하는 것이다. 함수를 ..

Array APIs 1. join arrayName.join('seperator'); join(separator?: string): string; 배열에 있는 모든 아이템들을 문자를 통해서 각각 구분자(seperator)를 넣어 더해서 seperator string으로 return ? 뜻은 전달해도 되고 안해도 된다는 뜻, 즉 seperator은 넣어도 되고 안넣어도 되는데 안넣게 되면 구분자는 ,로 들어가게 됨 2. split arrayName.split('seperator', limit); split(separator: string | RegExp, limit?: number): string[]; seperator과 limit 총 두가지의 parameter을 받음 seperator 필수 작성 stri..

Array 배열 자료 구조란? 일상생활에서 비슷한 것들만 모아서 각 바구니에 모아놓는 것처럼 프로그래밍 언어에서도 비슷한 종류의 데이터들을 묶어서 한 곳에다가 보관해놓는 것들을 자료구조라고 한다. 자료구조에는 어떤 방식으로, 어떤 형식으로 데이터를 담느냐에 따라서 굉장히 다양한 타입들이 있다. object와 자료구조의 차이점 object는 서로 연관된 특징과 또는 행동들을 묶어놓는 것을 말한다. 자료구조는 비슷한 type의 objec들을 묶어놓는 것을 말한다. js가 아닌 다른 언어에서는 보통 자료구조에는 동일한 type의 object를 담을 수만 있다. 즉 type이 있는 언어에서는 동일한 type의 데이터만 담을 수 있다. js는 dynamically typed language이기에 type이 동적으..

JS 프로처럼 쓰는 팁 tenary-operator 삼항 연산자 조건 ? true일시 return 값 : false일시 return값; 사용하는 경우 조건이 두가지인 경우 불필요한 else if 문 사용 자제 바로 리턴하는 경우 nullish coalescing operator 함수안에서 변수 선언 = 함수 선언시 설정한 인자 값이 호출할 때 있는 경우 return 값 ?? 함수 선언시 설정한 인자 값이 호출할 때 없는 경우 return 값; left Expression ?? right Expression value만 넣을 수 있는 것이 아닌 코드를 넣어 실행한 값을 할당하게 할 수도 있다. ?? 기준으로 왼쪽코드가 null이거나 undefined인 경우에만 ?? 오른쪽에 이어지는 문장이 실행됨(defa..

TypeScript 자바스크립트를 알고 있다면 금방 배움 장점 자바스크립트는 weakly type으로 실수를 하게 될 수 있음 코드가 실제로 실행이 되어야만 실수한지 안한지 알 수 있음 타입스크립트 사용시 이런 문제점 보완 가능 VS code 같은 IDE 사용시 많은 도움을 얻을 수 있음 함수 사용시 어떤 파라미터 넣는지 컴포넌트의 props에 어떤 값을 넣는지 실수로 빠뜨린 props 있을 시 에러 감지 사소한 실수 많이 방지 파일 생성 법 디렉토리 생성 : git bash 에서 mkdir 디렉토리명 git bash 에서 cd 디렉토리명 package JSON 생성 : git bash 에서 yarn init -y 해당 디렉토리 에디터로 열기 : git bash 에서 code ./ typescript(t..

리액트 Redux 상태 조회 hook: useSelector const { number, diff } =useSelector(state => ({})) 여기서 state는 store.getState()로 조회한 값으로 리덕스의 현재 상태이다. 액션 디스패치 할 경우 useDispatch Hook 사용 디스배치 함수 사용 가능 프리젠테이셔널 컴포넌트와 컨네이너 컴포넌트 컨테이너와 프레젠테이셔널 컴포넌트를 따로 분리해서 작성하게 되면 프리젠테이셔널 컴포넌트의 재사용율도 높여줄 수 있고 관심사를 분리할 수 있어서 굉장히 유용한 패턴이다. 리덕스 사용시 이런 형태로 개발하는 것 정석이긴 하지만 무조건 답은 아니다 복잡한 상태 로직을 분리시키기 위함이지만 꼭 이렇게 분리해서 작업하지 않아도 된다. 디렉토리 상에서..

리액트 Router 리액트 라우터 라이브러리 Single Page Application(SPA) 라우팅을 클라이언트가 담당 단점 앱의 규모가 커지면 JS 파일의 크기가 너무 커질 수 있다.(해결책 : Code Splitting) 브라우저에서 자바스크립트가 구동되지 않으면 UI를 볼 수 없다.(해결책 : Server Side Rendering) ex) 검색엔진에서 크롤링 불가능 라우팅 : 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업 리액트 라우터는 컴포넌트를 기반으로 라우팅을 한다. react-router-dom 설치 주요 컴포넌트 BrowserRouter : HTML5 History API 사용, 주소만 바꾸고 페이지는 다시 불러오지 않음, 가장 많이 사용 HashRouter : 옛날에 사용 하..

Javascript 입문 배열 한 변수 혹은 한 상수 안에 여러가지 정보를 담기 위함이었다면 배열은 여러 개의 항목들이 들어있는 리스트와 같다. 배열 생성 방법 배열을 만들 땐 [ ] 대괄호 사용하고 넣고 싶은 원소(아무거나 가능를 넣어준다. 배열 안 원소들은 ,로 구분 여러가지 종류를 나열해서 넣을 수 있는 것 자바스크립트의 배열은 배열 안에 있는 모든 원소들이 똑 같은 형태(숫자, 문자열, 객체, key: value 형태, 또다른 배열 등)일 필요 없다. 객체이름[n]: n번째 항목 조회 가능(0부터 시작, 즉 배열에서 첫번째 항목은 0번째) 객체의 정보 받아오기 key 값들을 배열 형태로 받아올 때 : Object.keys(객체이름) value 값들을 배열 형태로 받아올 때 : Object.valu..