티스토리

steady

검색하기

블로그 홈

steady

so-nerdy.tistory.com/m

언어 수집가 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Flutter] 안드로이드 appbundle에 서명되는 업로드 키를 분실했을 때 대처방안 1. 다음 명령어로 새로 키스토어를 만든다. keytool -genkey -v -keystore key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key 2. 만들어진 key.jks 파일을 /android/app 밑에 넣는다. 3. /android 밑에 key.properties 파일을 생성하고 다음을 작성한다 storePassword=[비번] keyPassword=[비번] keyAlias=key storeFile=./key.jks 4. /android/app/build.gradle의 android{} 위에 다음 내용을 추가한다. def keystoreProperties = new Properties() def keystorePropertiesFile .. 공감수 1 댓글수 0 2022. 10. 12.
JSON Serialization 보호되어 있는 글입니다. 공감수 0 댓글수 0 2021. 10. 22.
flutter ios app Firebase Distribution으로 배포 1. Firebase Distribution에 앱 등록 + Provisioning Profiles 등록 2. flutter 프로젝트 폴더 -> 터미널에서 flutter build ipa 실행 3. 요런 녀석이 나오면 클릭 distribute app 클릭 ad hoc 모드 선택 이렇게 export된 폴더 안에 ipa 파일이 있다. 여기에 업로드. 그리고 테스터 초대 공감수 0 댓글수 0 2021. 10. 21.
ReadMe 파일 작성 방법 1. 프로젝트 이름 2. 컨트리뷰터 리스트(깃허브 닉네임이 좋음) 3. Tech Requirements(Tech Stack) 4. Docker(도커를 어떤 식으로 쓰고 있는지, 빌드와 관련된 것들) 5. Script(스크립트 정리를 통해 협업하는 동료들끼리 도움이 됨) npm run dev, npm run build 등 공감수 0 댓글수 0 2021. 10. 9.
react 리액트를 사용하는 이유, 리액트에서 함수형 컴포넌트를 사용하는 이유 강력한 커뮤니티 확장성 - next.js, getsby.js 등 react-native 경쟁상대의 부재 커리어 채용문제 ---- 함수형 컴포넌트의 사용이 주류가 된 이유 원래 함수형 컴포넌트에서는 클래스 컴포넌트 생명주기(componentDidMount 등)를 사용할 수 없어서 컴포넌트가 변화된 후 리렌더링을 할 수가 없었다. 그러나 리액트 훅의 등장으로 함수형 컴포넌트에서도 이것이 가능해졌다. + 지금은 함수형 컴포넌트가 성능 면에서도 더 뛰어나다(실행되는 속도가 조금 더 빠름). hooks란? 쉽게 말하면 A라는 액션이 실행될 때 A라는 액션과 동시에 실행되는 함수를 정의하는 것이다. 또한 hooks는 기본적으로 함수로 뺄 수 있기 때문에 useEffect()에서 실행해야 하는 함수를 별도의 파일로 .. 공감수 0 댓글수 0 2021. 10. 9.
MSA 마이크로 서비스 아키텍처, MFA 마이크로 프론트엔드 아키텍처, 모노레포 하나의 코드 베이스에 모든 것을 때려넣은 모놀리틱 아키텍처와 대비되는 개념. 모놀리틱은 구현 속도는 빠르지만 스파게트 코드가 되기 쉽다. 초기 스타트업에서 빠른 개발을 위해 모놀리틱을 사용하는 경우가 많다. MSA는 서비스를 잘게 쪼갠다. 예를 들어, 상품 서비스, 결제 서비스, 장바구니 서비스 등으로 쪼개서 각자 따로 관리한다. 하나의 서비스가 다른 서비스에 영향을 미치지 않는다는 장점이 있다. MSA를 사용할 때는 프론트와 백 사이에 API 게이트웨이를 두어서 엔드포인트를 하나로 통일할 수 있게 하는 경우가 많다. 이렇게 되면 프론트는 각각의 서버에 대해서 알 필요가 없어지고 API를 찌르기만 하면 된다. API 게이트웨이는 여러 API를 묶어주는 aggregation 역할 이외에도, 스케일링, 인증.. 공감수 0 댓글수 0 2021. 10. 8.
SSG 정적 사이트 생성 Static Site Generation SSR, CSR 모두 유저가 리퀘스트를 날린 시점마다 렌더링을 한다는 공통점이 있었다. 서버에서 렌더링을 하든 클라이언트에서 렌더링을 하든 유저가 어느 시점에 요청을 보내는지가 중요했다. 그러나 모든 콘텐츠가 유저가 요청을 보낸 시점에 렌더링이 되어야 할까? 그렇지 않다. 뉴스 기사 사이트, 상품 진열 사이트 등을 생각해보자. SSG는 사이트를 빌드하는 시점에 미리 html을 만든다. 미리 만들어 놓은 html을 유저에게 전달하는 것이다. 장점은 API 서버에 대한 부하가 훨씬 줄어들게 된다는 것이다. 규모가 큰 서비스의 경우 비용 측면에서 훨씬 절약이 된다! 정적 사이트 빌드 -> 정적인 html, css, js로 나옴 -> CDN, S3에 업로드 -> S3, .. 공감수 0 댓글수 0 2021. 10. 8.
SSR 서버 사이드 렌더링 CSR, SSR 모두 콘텐츠를 컨텐츠를 어디서 만들어내는가에 포커싱이 맞춰져 있다. 콘텐츠를 서버에서 만들면 SSR, 클라이언트에서 만들면 CSR. SSR은 서버에서 html을 미리 만들어서 내려줌. CSR은 클라이언트에서 html을 만든다. SSR의 장점은 빠르다는 것이다. 서버는 클라이언트보다 훨씬 성능이 강력하다. 크로미움이나, 브라우저에 비하면 컴퓨팅 파워가 훨씬 강력하다. SSR을 구현하기 위해서는 Next.js나 Node.js의 템플릿 엔진 등을 사용할 수 있다. 또한 리액트로도 가능한데, React DOM(리액트와 DOM을 연결시키는 역할)의 hydrate라는 메소드를 사용하면 리액트 DOM 내에서 리액트를 랜더링 할 때 SSR 방식으로 렌더링을 시켜준다. 어차피 Next.js도 이것을 사용.. 공감수 0 댓글수 0 2021. 10. 8.
CSR 클라이언트 사이드 렌더링 클라이언트 사이드 렌더링에서 클라이언트는 브라우저를 의미! html을 가장 기본적인 것만 가져온 뒤 자바스크립트를 이용해서 DOM을 생성해서 html에 그려주면 어떨까? 라는 접근이 CSR이다. DOM을 js가 직접 그려주기 때문에 html의 용량은 현저히 낮다. 대신 js의 용량이 커짐. 필요한 DOM만 그때그때 만들어 쓸 수 있다는 장점. html을 매번 불러오는 것이 아니라 js로 필요한 것만 그려낸다. 이때 history API를 통해서 라우팅 처리를 하고 DOM을 이용해서 렌더링을 수행하게 된다. 리액트, 뷰, 앵귤러와 같은 SPA 프레임워크는 기본적으로 브라우저에서 컴포넌트를 만들어서 그 컴포넌트를 렌더링 시키는 것을 최우선 목표로 한다. 즉 리액트에서 컴포넌트를 만드는 행위가 DOM을 만드는.. 공감수 0 댓글수 0 2021. 10. 8.
브라우저의 원리 브라우저가 이해할 수 있는 언어는 4가지밖에 없다. html, css, js, wasm html 파싱 -> DOM(Document Object Model) - html 요소 데이터 css 파싱 -> CSSOM - css 요소 데이터 이 둘을 결합해서 렌더 트리를 만들게 됨 렌더 트리를 바탕으로 그리는 일을 수행 레이아웃 - 배치 과정(CPU를 많이 먹음) 페인트 - 그리기 - 이때야 비로소 화면에 나타나게 됨(GPU를 많이 먹음) 렌더 - 다 그려진 상태 DOM이 변경 된 경우 다시 렌더 트리를 그린다 -> 레이아웃 변경시에는(width, height 변경 시) 다시 배치 -> 페인트는 무조건 다시 함 -> 렌더 웹에서 렌더링이 되는 건 모두 60fps를 유지해야 한다. 그래야 유저들이 부드럽다고 느낀다.. 공감수 0 댓글수 0 2021. 10. 8.
웹 애플리케이션 배포 방법 1. 프론트 엔드와 백 엔드의 분리 React, Vue, Angular 등은 JavaScript 라이브러리 혹은 프레임워크이다. 즉, 이것들은 클라이언트의 브라우저 단에서 실행되는 JavaScript를 멋지게 코딩할 수 있도록 도와주는 수단일 뿐이다. 특히 React나 Vue의 경우 JavaScript 코드를 작성할 때 필요한 만큼만 적재적소에 사용할 수 있기 때문에 이것들을 사용한다고 해서 프론트 엔드와 백 엔드가 구분되는 것은 절대 아니다. 다만 이것들을 활용하면 프론트 엔드와 백 엔드를 완전히 구분하여 두 기능을 독립적으로 개발할 수 있게 된다. 그렇다면 그것이 어떻게 가능한 것인지, 그 동작 원리를 한 번 살펴보도록 하자. 개발자가 React 라이브러리를 활용하여 클라이언트에게 제공할 JavaSc.. 공감수 4 댓글수 0 2021. 8. 5.
운영체제 메모 입출력 시스템 구성: 장치 구동기(device driver), 장치 제어기, 장치(예: HDD, SSD) 장치 구동기는 커널 안에 있음. 커널 안에서 파일 시스템이나 응용프로그램으로부터 장치구동기가 시스템콜을 받아서 장치 제어기로 명령을 내리거나 자료를 주고받음. 장치제어기는 장치를 직접 제어함. 장치 제어기 안에는 명령 레지스터, 상태 레지스터, 자료 레지스터가 존재. 명령 레지스터: 장치 가동을 위한 명령 코드 적재 상태 레지스터: busy/done 플래그, 오류코드 표현, 컴퓨터 구조 자료 레지스터: 장치 내의 하드웨어 버퍼 HW 인터페이스 장치 경영 방식 ◦ 접근 방식에 의한 분류(장치제어기의 레지스터 접근 방식) 격리형(isolated I/O): 하드웨어 구조상 주변장치를 위하여 메모리와는 별도.. 공감수 0 댓글수 0 2021. 6. 17.
hyperledger fabric 동영상 강의! www.youtube.com/watch?v=cTYco3L50Og&list=PLlYCl1UOH8dima_f8QOIeY1ieuOAYKo_G&index=12 delegated 모델 - 서버가 유저의 키를 다 가지고 있음. 외부의 클라이언트와 소통할 때는 토큰을 가지고 소통, 서버는 토큰으로 유저를 인식해서 트랜젝션 처리. 완전한 탈중앙화까지는 못감. decentralized 모델. fabric이 모바일 쪽 지원은 좋지 않다. 아직 구현이 쉬운 단계는 아님.. developer.ibm.com/?q=%20&DWContentType[0]=Code%20patterns&DWTechnology[0]=Blockchain Search Results for “ ” – IBM Developer developer... 공감수 0 댓글수 0 2021. 4. 14.
Java Tree 자료구조, 순회 공감수 0 댓글수 0 2021. 4. 11.
(개선된)다익스트라 알고리즘 공감수 0 댓글수 0 2021. 4. 3.
크루스칼 알고리즘 - 최소 스패닝 트리 간선들을 가중치를 기준으로 오름차순으로 정렬 가중치가 작은 간선들부터 확인하면서 사이클이 발생하지 않으면 더해줌. 공감수 0 댓글수 0 2021. 4. 3.
백준 알고스팟 - 우선순위 큐, 너비우선탐색 공감수 0 댓글수 0 2021. 3. 21.
node.js PM2 모듈 npm install pm2 -g -> PM2 모듈을 사용하면 node.js로 만든 서버를 관리받을 수 있다. 서버가 갑자기 다운되지 않게 해주고, 메인 파일을 수정해도 바로바로 업데이트가 되도록 도와준다. pm2 monit - 상황 모니터링 pm2 stop name - 해당 name의 앱 실행 종료 pm2 start main.js --watch - 변경 사항 바로 반영해줌! - 이러면 코드에 문제가 있는지 모를 수 있음 - pm2 log - 문제점 보여줌. 공감수 0 댓글수 0 2021. 3. 21.
백준 - 유기농 배추 - bfs 공감수 0 댓글수 0 2021. 3. 19.
리액트 bind(), state 수정, props에서 함수 만들기. 1. bind() bind()는 어떤 함수에서 this 값으로 특정 객체를 받고싶을 때 사용한다. 함수선언이 끝나는 부분이나 함수 이름 뒤에 .bind(원하는 객체이름)을 덧붙여주면 this 값을 매개변수에 넣은 객체로 받는 새로운 함수가 생겨난다. **또한 bind()는 인자를 여러 개 받을 수도 있다. bind(this, 인자1, 인자2) -> function(인자1, 인자2) 2. state 수정 state는 처음 초기화된 이후 쉽게 바꿀 수 없다. 반드시 위와 같은 함수를 이용해서만 바꿀 수 있다. setState()를 통해서 수정해야만 리액트가 state값이 변화된 것을 알고 render()를 재호출할 수 있다. 3. props에서 함수 만들기 공감수 0 댓글수 0 2021. 3. 19.
리액트 state 1. 값이 한 개일 때. render() 함수 실행 전에 미리 초기화하고 싶은 코드는 constructor(props) 안에 작성한다. 이러한 내용은 this.state = { subject: {title: 'WEB', sub: 'World Wide Web'} } 와 같이 작성되고 이는 외부에서 접근이 불가능하다. 앱이 내부적으로 사용할 상태는 state라는 형태로 구현한다. ** 상위 컴포넌트인 App의 state를 하위 컴포넌트에 전달하고 싶을 때에는, 그것을 하위 컴포넌트의 props(속성) 값으로 넣어주면 된다. 2. 값이 여러 개일 때. 리액트에서는 props값이나 state 값이 변하면 해당 클래스의 render()가 다시 호출되도록 약속됨. 공감수 0 댓글수 0 2021. 3. 18.
리액트 - 컴포넌트 파일로 쪼개기 js 파일을 만들고 Component를 import한 뒤 컴포넌트 클래스를 구현한다. export는 본 클래스의 사용 범위를 지정한다. 그리고 App 파일에 컴포넌트를 import해주면 끝 공감수 0 댓글수 0 2021. 3. 18.
리액트 개발자 도구 크롬 웹 스토어에서 React Developer tools를 다운받으면 개발자도구에 Components 메뉴가 추가된다. 이를 통해 리액트 식으로 html 문서를 확인할 수 있고, 개발자 도구로 바로 props를 수정할 수도 있다.!! 공감수 0 댓글수 0 2021. 3. 18.
리액트 컴포넌트 만들기 - 정리 도구. 위와 같은 것을 '리팩토링'이라 부른다. 공감수 0 댓글수 0 2021. 3. 17.
드롭다운 목록 활용 드롭다운은 기본적으로 select 태그로 구현 공감수 0 댓글수 0 2021. 3. 14.
JavaScript 글자 입력 양식 이벤트 사용자로부터 어떤한 입력을 받을 때 사용하는 요소를 입력 양식이라고 부른다.(예: input, textarea, button, select) 공감수 0 댓글수 0 2021. 3. 14.
JavaScript 이벤트 발생 객체 이벤트 리스너를 외부로 빼낸 경우, 어떻게 이벤트를 발생시킨 객체에 접근할 수 있을까? event.currentTarget 속성 사용 - 화살표함수와 일반 함수에 모두 적용 가능 this 키워드 사용 - 일반 함수에만 적용 가능 위와 같이 listener 메소드가 분리되면, 메소드 안에서 외부의 이벤트에 접근할 수 없기에 event.currentTarget 코드로 이벤트를 발생시킨 객체에 접근할 수 있게 만든다. 공감수 0 댓글수 0 2021. 3. 14.
JavaScript 이벤트 설정 모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거나 할 때 이벤트라는 것이 발생한다. 그리고 이 이벤트가 발생할 때 실행할 함수를 addEventListener() 메소드를 통해 지정할 수 있다. 문서객체.addEventListener(이벤트 이름, 콜백 함수- 이벤트 리스너 또는 이벤트 핸들러라고 부름) *이벤트 제거 문서객체.removeEventListener(이벤트이름, 이벤트리스너) 공감수 0 댓글수 0 2021. 3. 14.
JavaScript 문서 객체 조작 자바스크립트에서는 html 요소들을 문서객체라 부른다. 1. DOMContentLoaded 이벤트 바디 태그가 생성되기 전인 head 태그 에서 바디 태그에 무언가를 출력하려고 하면 문제가 생긴다. DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고나서 실행하는 이벤트다. 다음과 같이 코드를 구성하면 DOMContentLoaded 상태가 되었을 때(문서 객체를 다 읽었을 때) 콜백 함수를 호출한다. document.body.innerHTML 코드는 문서(document)의 바디(body) 안에 있는 HTML 코드를 자바스크립트로 조작할 수 있게 해주는 코드다. document.addEventListener('DOMContentLoaded', () => {})는 앞으로 나오는 대부.. 공감수 0 댓글수 0 2021. 3. 14.
JavaScript 객체와 배열 고급 - 얕은 복사, 깊은 복사 1. 얕은 복사. 1-1. - 배열은 복사해도 다른 이름이 붙을 뿐이다. 1-2. 객체 얕은 복사. 2. 깊은 복사 2.1. 배열 얕은 복사 - 복사한 두 배열이 완전히 독립적으로 작동하게 함 - 과거에는 반복문을 사용했으나, 지금은 전개연산자를 사용해 쉽게 깊은 복사가 가능하다. [...배열] 2-2. 객체 얕은 복사. 다음과 같이 '구름'이라는 객체에 변경하고 싶은 속성만 넣어서 추가로 입력한다면 다음과 같다. 객체 전개는 순서가 중요하다. 전개를 뒤에서 하면 앞에 적어놓은 속성값을 뒤에 전개된 속성값들이 덮어쓸 수 있다. 공감수 0 댓글수 0 2021. 3. 14.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.