분류 전체보기154

• 

  리액트 axios 라이브러리 사용하기 리액트에서 promise를 기다릴 때 fetch api를 사용하면 두가지 문제점이 생긴다. 하나는 호환성이 낮은 explorer와 같은 브라우저를 사용할 때 호환이 안되는 문제이고 fetch api를 사용할 경우 key를 url주소로 받아와야하기 때문에 가독성이 떨어진다는 단점이 존재한다. 따라서 위의 두 문제를 해결하기 위해 axios라는 라이브러리를 사용하는데 리액트로 개발을 하는 경우 yarn을 통해 패키지 관리를 하고 있다면 yarn add axios 라는 명령어 하나로 쉽게 설치가 가능하다. axios가 설치되면 fetch를 사용하는 곳에서 변경이 가능한데 promise를 생성하는 객체의 생성자에서 axios.create명령어를 이용해서 axios를 만들어주면 된다. 이 때 axios를 만들 때.. front-end/react 2021. 8. 12.

• 

  리액트(html 요소에 직접 접근) (Ref) CreateRef vs UseRef 리액트에서는 레퍼런스를 사용하기 위한 두 가지 방법이 존재하는데 바로 내장함수 CreateRef() 와 UseRef()이다. 리액트에서 Component를 만드는 방법에는 두 가지가 있는데 바로 class를 사용하는 것과 functional하게 만드는 방법이다. 원래 function 기반 component는 state를 가지는 것이 불가능했고 단지 부모로부터 props속성 값을 받아와서 보여주는 역할을 수행하는 간단한 component였으나 ReactHook이라는 개념이 도입된 후 부터 함수 내에서도 Use로 시작하는 함수들을 통해 class기반 component와 마찬가지로 state를 다룰 수 있는 기능들을 쓸 수 있게 되었고 이번 포스팅에서는 UseRef()함수를.. front-end/react 2021. 8. 12.

• 

  리액트(call-back함수 전달 과정) 리액트에서의 call-back함수는 prop으로 전달이 가능하다. 다음은 youtube-clone 코드에서의 일부이다. 다음은 함수형으로 작성한 (react hook)을 이용한 app에서의 전달 과정이다. 현재 상속 구조는 app -> Video_list -> Video_item순이고 prop을 전달하는 과정 또한 다음 순서와 같다. 목표는 콜백함수가 어떻게 전달이 되는 지를 아는 것이기 때문에 console.log함수를 이용해 log기록을 확인해보면서 진행하였다. 만약 call-back 함수 onVideoClicktolist가 호출되면 app.jsx에 존재하는 selectVideo함수가 호출된다. Video_list.jsx 파일의 Video_list component 정의 부분은 다음과 같이 decon.. front-end/react 2021. 8. 11.

• 정규표현식(REGEX) 정규표현식이란? 정규표현식이란 특정한 규칙을 가진 문자열을 표현해내는 방식을 의미한다. 위와 같이 설명하면 어려울 수 있지만 우리가 흔히 이메일 주소나 url 주소와 같은 형식을 보면 일정한 형식을 가지고 문자열을 배치하지 않는가 그와 같은 형식을 검색하거나 받아들일 수 있는 표현식을 말한다. 우리가 흔히 웹이나 앱서비스를 개발할 때 회원가입과 같은 기능에서 어떠한 형식을 통해 비밀번호나 아이디를 만들라고 하지 않는가 그 때 많이 쓰는 표현식이다. 아래는 유튜브 주소를 검색하거나 받아들일 수 있는 식이다. /(?:https?:\/\/)?(?:www\.)?(?:(?:youtu\.?be\/?)(?:\.com\/)?(?:watch\?v\=)?(?:embed)?)([a-zA-Z0-9]{11})/ 유튜브 주소는 .. front-end/JavaScript, TypeScript 2021. 8. 11.

• 

  경주 - 울산 - 부산 경주에서 하루를 묵고 친구의 고향인 울산을 들려 다시 부산으로 향했다. 울산에서 생소한 음식을 먹어 봤는데 냉우동이라는 음식이었다. 행복했다. 아주 만족! 여기는 아키라 우동이라는 음식점이었는데 울산 삼산동에 위치하고 있다. 정식이라 가격은 저렴하진 않지만 양과 맛 모두 만족스러웠다. 부산으로 돌아온 뒤 친구가 광안대교가 보이는 오마카세 집에서 저녁을 사주었다. 참 얻어 먹는데 마음 편한 친구가 있어 다행이라 생각 들었다. 돈보다 중요한 사이를 갖게 되어 따뜻한 저녁이었다. 식당은 구로마쯔라는 철판 오마카세집이었다. http://naver.me/x5LEgcdK 네이버 지도 구로마쯔 map.naver.com 분명 위보다 더 많은 음식이 나왔는데 내가 먹는 것에 정신이 팔려 아마 찍지 못했던 것 같다. 정말.. 일상 2021. 7. 31.

• 

  언양- 경주-1 1일차 - 인천 - 부산 2일차 - 언양 - 경주 3일차 - 경주 - 부산 4일차 - 부산 - 거제 - 부산 5일차 - 부산 - 인천 4박 5일 경남 여행 일정이었다. 확실히 남쪽은 특유의 분위기가 있다. 수 많은 리단 길이 sns바람을 타고 생겨나는 요즘 수 많은 리단 길 중 하나에 불과할 것이라고 생각했던 황리단 길은 생각보다 규모도 컷고 통일된 한옥 인테리어 속에 개성있는 식당들은 내가 가본 리단 길 중 가장 특색있고 좋았던 것 같다. 이 날 경주는 참 예뻤다. 이 날 우린 화랑 게스트 하우스라는 게스트 하우스에서 묵었는데 1인 2만원의 저렴한 숙박비에도 불구하고 조식 제공에 심지어 주차비까지 지원이 된다. 뭐가 남지..? http://www.hwaranghostel.com/ 경주 게스트하우스 화랑.. 일상 2021. 7. 31.

• 

  타입스크립트 stack <generic> ver { interface Stack{ // generic 선언은 interface, type, class 의 선언부에 행한다. readonly size: number; push(value : T) : void; pop() : T; } type StackNode = { readonly value : T; readonly next?: StackNode; } class StackImpl implements Stack{ private _size : number = 0; private head? : StackNode; get size() { return this._size; } push(value : T ) { const node : StackNode = {value,next: this.head}; this.head.. 카테고리 없음 2021. 7. 29.

• 

  소스트리 The requested URL returned error: 403 다음과 같은 에러가 발생한 경우는 많은 경우의 수가 있지만 나는 다양한 디바이스를 사용할 때 다른 디바이스로 깃허브에 로그인하여 소스트리를 사용하던 디바이스에서 로그아웃 되었을 경우에도 위와 같은 에러가 발생한다. 위와 같은 에러는 대게 권한 문제로 터미널에 git remote -v명령어를 통해 원격 저장소의 위치를 확인한다. 그 후 git remote set-url origin http://사용자 이름@github.com/사용자이름/레포지토리 이름.git 위의 명령어 형식으로 원격 저장소 위치를 설정해주면 다시 github 로그인 창이 뜨게 되고 정상적으로 push가 된다. 에러관련 2021. 7. 28.

• 

  타입스크립트로 stack 구현하기 { //Linked list 기반 stack interface stack{ readonly size : number; push(value : string) : void; pop() : string; } type node = { nextNode? : node; prevNode? : node; str : string; } class Stack implements stack { private Head? : node; private Tail? : node; private size1 : number = 0; // getter와 이름이 겹치면 안됨 get size() { return this.size1; } push(str : string) { const temp : node = {str}; if(this.size.. front-end/JavaScript, TypeScript 2021. 7. 28.

• 

  React 개념(1) 리액트에서 ui들을 구성하는 방법에는 크게 두 가지 방법이 존재한다. 하나는 클래스형, 나머지 하나는 함수형이다. 이 때 클래스형에는 component와 성능향상을 위해 PureComponent가 존재하고 함수형에는 function과 성능 향상을 위해 memo와 reacthook이 존재한다. *클래스 컴포넌트 component 클래스를 상속받아 만든 클래스에서는 render()함수가 무조건 구현이 되어야한다. 클래스를 구성하는 데 있어서 안에 쓰이는 멤버 변수나 parameter들은 this.prop(or)state.멤버 변수 형태로 쓰여져야한다. 클래스의 특성상, 한 번 생성이 되면 클래스 내부의 함수를 아무리 많이 호출해도 멤버 변수를 직접 수정하지 않는 한 그 값이 계속 유지가 된다. 따라서 ren.. front-end/react 2021. 7. 2.

• 

  Kotlin(2) 1. 코틀린의 제어흐름 프로그램을 만들다보면 프로그램의 흐름을 제어 해야하는 경우가 있다. 프로그램의 flow는 조건에 따라 달라지고 조건에 따라 실행이 되는 코드 실행이 되지 않는 코드들이 존재한다. 코틀린에서도 다른 프로그래밍 언어들과 마찬가지로 if else문을 사용한다. if -else if -else문의 사용법은 c++이나 js, 파이썬과 모두 유사하다. val a: Int = 5; val b:Int = 10; if(a > b) { println("a가 b보다 크다") } else { println("a가 b보다 작다") } println("3번") [출처] 코틀린(2)|작성자 호정 위의 코드는 if - else문을 사용한 경우이다. if(a>b) { println("a가 b보다 크다") } /.. 카테고리 없음 2021. 6. 19.

• 

  Kotlin(1) 1. 코틀린의 변수 모든 프로그래밍 언어에서 자료형을 안다면 그 언어의 반을 아는 것과 같다는 말이 있다. 따라서 나는 어떠한 언어를 공부할 때 자료형을 제일 먼저 정리해두고 가는 편이다. 코틀린에는 변수를 선언할 수 있는 방법이 두 가지가 있다. 하나는 var키워드를 이용하는 것이고 나머지 하나는 value키워드를 이용해 변수를 선언하는 것이다. 1. var 키워드를 이용한 변수 선언: var (변수이름) = (변수 값) 의 형태로 선언한다. (물론 괄호는 생략한다.) var로 변수를 선언했을 때는 변수에 대입되는 값이 바뀔 수 있다. (밑에서 다른 값을 할당해주면 그 값으로 값이 변한다.) ​ 2. value 키워드를 이용한 변수 선언: value (변수이름) = (변수 값) var와 비슷하나 val.. 안드로이드 스튜디오 2021. 6. 19.