프로그래밍

웹 & 모바일 개발에 관련된 것들

프로그래밍

NextJS 스크롤 포지션 유지/복구하기

NextJS에서는 라우팅을 할 때마다 페이지 컴포넌트가 페기되고 리빌딩이 되기 때문에 그 때마다 스크롤 포지션이 리셋되는 현상이 나타난다. 예를 들어 검색 결과 리스트가 나오고 상세 페이지로 라우팅 했다가 다시 뒤로 가기를 했을 경우, 리스트가 리빌딩 되면서 스크롤 포지션이 리셋되고 만다. UX적인 관점에서는 좋지 않은 경험이기 때문에 이를 수정 할 필요가 있다.

Flutter

Flutter를 이용한 앱 개발 준비

본격적으로 Flutter를 이용한 앱 개발을 시작하기 전에 갖춰야 할 개발 환경과 알아두면 좋은 것들에 대하여 정리 해 보았다. # IDE 설정 Flutter 개발은 Flutter SDK만 컴퓨터에 설치 되어 있으면 어떤 IDE를 사용해도 개발 자체는 가능하지만, 개발을 편하게 하기 위해선 Android Studio를 추천한다. 그 다음으로 추천하는 건 Visual Studio Code. Android Studio를

앱 개발

앱을 만들 때 알아두면 좋은 것들

일반적으로 앱을 만들 땐 기획, 디자인, 개발 이렇게 나뉘는 경우가 많다. 보통 각 분야를 한명씩 맡아서 하게 된다. 혼자서 할 땐 이 3가지를 모두 스스로 해야하는데, 실제로 개발에 들어가기 전에 알아두면 좋은 것들을 정리해보았다. #간단한 기획 제대로 된 앱 디자인을 하기 전에 간단하게 기획서를 적는 것이 좋다. 처음부터 이것 저것

UI/UX

Adobe XD에 UI Kit 추가하기

Adobe XD는 무료로 사용할 수 있는 프로토타이핑 툴이다. 앱 디자인 툴은 Sketch나 Figma 같은 툴도 자주 사용되고 있지만 난 무료라는 이유 하나만으로 Adobe XD를 사용하고 있다. 앱을 개발할 때 iOS든 Android든 각각 애플과 구글에서 디자인 가이드를 배포하고 있다. 이번 포스팅에서는 Adobe XD에 UI Kit를 추가하는 방법을 간단하게 알아본다. #UI Kit

Flutter

Flutter로 Android앱을 개발하기 위한 설정

이번 포스트에서는 Flutter의 Android앱 용 설정에 대해 알아본다. #Android Studio 설치 우선 Android Studio가 설치되어있어야한다. 공식 홈페이지에서 자신의 os에 맞는 버전을 다운로드 하여 설치하자. #에뮬레이터로 실행하는 방법 설치가 끝나면 Android Studio를 실행하고 자신의 flutter 프로잭트가 있는 폴더안에 있는 android 폴더를 선택해서 열어준다. (사실 새로운 프로잭트 생성, 혹은 아무 다른 프로잭트를

Flutter

Flutter앱을 실제 iPhone에서 테스트하기 위해 필요한 설정

지난 포스팅에서는 iOS앱을 시뮬레이터로 돌리기 위한 설정에 대해 설명하였다. 이번 포스팅에서는 실제 아이폰에서 구동시키기 위해 필요한 설정에 대해서 알아보도록 한다. 우선 터미널을 열고 자신의 flutter 프로잭트가 있는 디렉토리에서 아래 커맨드를 실행한다. open ios/Runner.xcworkspace 그러면 xcode가 열린다. 우선 아이폰을 컴퓨터에 연결한다. 그 다음 왼쪽 위에 "Runner > iPhone xx" 부분을

Flutter

Flutter에서 iOS 앱 개발을 위한 설정

Flutter를 이용하여 iOS 앱을 개발하기 위해서는 Flutter의 기본적인 설치 외에 해야 하는 설정들이 있다. 이번 포스트에서는 필요한 설정에 대해 알아본다. # Xcode 설치 iOS 앱을 개발하기 위해서는 무조건 Xcode가 설치되어 있어야 한다. 앱스토어에서 다운로드 받을 수 있다. 다운로드 받고 설치가 끝났다면 터미널에서 아래 커맨드를 실행해주자. sudo xcode-select --switch /Applications/Xcode.app/

Flutter

Flutter를 설치해보자

Flutter는 구글에서 개발한 프레임워크로 모바일웹, 웹앱, 데스크탑앱을 모두 하나의 코드베이스로 만들 수 있다. 사용하는 프로그래밍 언어는 DART. 이번 포스팅에서는 MacOS에서 Flutter를 설치하는 법을 알아본다. 리눅스와 윈도우에서도 Flutter를 사용할 수 있지만 iOS앱을 만들 수 없다. iOS앱을 패키징 하는데는 Xcode가 필수인데 맥에서 밖에 지원이 안되는 것으로 알고 있다. # Flutter 파일 다운로드 공식

파이썬

pysftp로 파일 업로드 하기

최근에 sftp로 파일을 업로드 하는 파이썬 스크립트를 쓸 일이 있어서 코드 공유. 우선은 pip을 이용하여 pysftp 패키지를 설치 pip install pysftp 그 다음은 아래 코드를 사용해주면 된다. 유의 할 점은 해당 호스트에 처음 접속을 시도 하는거라면 스크립트를 실행하는 서버에 호스트에 대한 호스트키가 없기 때문에, 따로 설정을 해주지 않으면 호스트에 접속이

자바스크립트

[자바스크립트 기초-8] Array 기본 메소드-2

지난 포스팅에 이어 이번 포스팅에서도 기본 메소드에 대해 알아보도록 하겠습니다. #알파벳 순서대로 정렬 Array의 아이템들을 알파벳 순서대로 정렬할 땐 sort()를 쓰면 됩니다. var arr = ["Bear", "Cat", "Ant", "Elephant", "Dog"]; arr.sort(); console.log(arr); // 결과 -> ["Ant", "Bear", "Cat", "Dog", "Elephant"] 한글도 가나다 순서로 정렬 할 수 있을까요? var

자바스크립트

[자바스크립트 기초-7] Array의 기본 메소드

개발을 하다보면 반드시 사용하게 될 Array (배열). 이번 포스팅에서는 기본적으로 사용할 수 있는 array의 메소드들에 대해 알아보도록 하겠습니다. 이런게 가능하구나 정도로만 알고 있으면, 나중에 개발할 때 솔루션을 생각할 때 도움이 됩니다. #Array의 기초 자바스크립트에서 array는 []로 표현합니다. var arr = []; // 아이템이 없는 빈 array var arr = ["Hello", "Bye", "World", "Good", 100,

자바스크립트

[자바스크립트 기초-6] 변수를 생성하는 법

자바스크립트에서 변수를 생성하는 방법은 3가지가 있습니다. 이번 포스트에서는 각각의 변수 생성법에 어떤 차이가 있는지 알아보도록 하겠습니다. #var 우선 가장 기본적인 형태는 var를 이용하는 것입니다. 영어 "Variable"의 약자로 변수를 뜻합니다. 특징으로는 생성한 변수의 값을 바꾸는 것이 가능하고, 다시 같은 이름의 변수를 재정의 하는 것이 가능하다는 점입니다. var a = "Hello"; console.

MongoDB

MongoDB 검색 기능 활용하기

어플리케이션을 만들다 보면, 검색 기능은 빠질 수 없는 기능 중 하나이다. 하지만 실제로 구글처럼 키워드나 문장을 넣어서 검색되는 기능을 구현하려면 매우 복잡해진다. 일반적으로 검색엔진에서 검색 기능은 다음과 같이 구현된다. 1. 이용자가 넣은 키워드 혹은 문장을 읽어들인다. 2. 문장이라면 키워드를 뽑아서 나눈다 3. 데이터베이스에서 해당 키워드와 문장을 이용하여 검색을 돌린다. 4.

자바스크립트

자바스크립트의 모듈화와 표준에 대하여

자바스크립트는 기본적으로 모듈화 기능이 없었다. 여러 .js 파일로 쪼개서 모든 파일들을 일일이

자바스크립트

[자바스크립트 기초-5] this에 대해 알아보자

자바스크립트 코드를 읽다보면 this가 자주 언급되는 것을 볼 수 있습니다. this는 함수 안에서 사용되는데, 처음엔 그 사용법이 헷깔릴 수 있습니다. 간단하게 말하면 this는 해당 함수를 실행한 오브젝트를 뜻합니다. var a = "Hello" function test() { var a = "Bye"; console.log(this.a); } test(); // 결과 -> "Hello" 위 코드를 실행해보면 결과가 test 함수

자바스크립트

[자바스크립트 기초-4] 함수 (Function) & 콜백 (Callback)

함수는 프로그램의 특정 동작을 수행하는 코드를 말합니다. 다른 말로는 메소드(method)라고 불리우는데, 오브젝트 안에 있는 속성들 중, 값이 primitive data types가 아니고 함수인 경우를 해당 오브젝트의 속성이 아닌 메소드라는 식으로 표현합니다. var obj = { name: "John", age: 20, say_hello: function () { console.log("Hello"); } } obj.say_hello(); // 결과 -> Hello

자바스크립트

[자바스크립트 기초-3] 변수

변수(Variable)에는 두가지 종류가 있습니다. 1. 글로벌 (Global) 변수 -> 어플리케이션 어디에서도 값을 불러올 수 있는 변수 2. 로컬 (Local) 변수 -> 함수 안에서만 유효한 변수 #글로벌 변수 글로벌 변수는 두가지 방법으로 생성할 수 있습니다. var a; typeof a; // 결과 -> undefined b; typeof b; // 결과 -> undefined 앞에

자바스크립트

[자바스크립트 기초-2] 데이터 타입 과 레퍼런스

어떤 프로그래밍 언어든 이해할 수 있는 데이터의 종류가 있습니다. 이러한 종류들을 데이터 타입이라고 하는데, 변수에 데이터를 저장할 때 이 데이터 타입의 종류와 차이를 아는 것은 매우 중요합니다. 레퍼런스(Reference)는 직역하면 참조라는 뜻이 됩니다. 변수를 생성하고 그 값을 지정해줄 때 다른 변수를 참조하는 경우가 있는데, 그 결과는 참조하는 변수가 어떤

서버

서버의 Proxy 설정 변경사항이 크롬에서 바로 반영이 되지 않을 때 대처법

nginx를 사용하든 apache를 사용하든 서버에서 proxy 관련 사항을 수정한 후, 서버를 재시작 했음에도 불구하고 크롬에서는 계속 이전 설정이 반영된 상태에서 나타날 때 대처하는 방법을 소개한다. 결론부터 말하자면 원인은 크롬이 해당서버의 프록시 관련 설정을 캐시해서 저장해두기 때문이다. 해당 서버에 접속할 때, 전에 캐시해둔 프록시 설정을 불러오기 때문에 새로운 프록시 설정이 반영이

자바스크립트

[자바스크립트 기초-1] 오브젝트

아래 예제 코드들을 크롬 브라우저의 Developer Tools의 Console 탭에서 직접 실행해 가면서 진행하면 좋습니다. 맥에서는 option+command+i 단축키로, 윈도우는 F12 혹은 Control + Shift + i 단축키로 Developer Tools를 실행 할 수 있습니다. 실제로 이론적인걸 완벽하게 이해하기 보다는, 직접 코드를 쳐보면서 어떻게 움직이는지 원리를 감각적으로 익히는 것이 도움이 더 많이 됩니다.

모바일 앱

모바일 앱의 형태

모바일 앱에는 크게 3가지 형태가 있다. 각 형태에 따라 개발하는 방법이 조금씩 다른데, 자신에게 주어진 상황, 프로젝트 내용에 따라서 개발 형태를 고르면 좋다. (2019.09.14) 네이티브 앱에 관한 정보 추가 #첫번째: 네이티브 앱 (Native App)   우리가 스마트폰 어플에 대해 떠올리는 가장 보편적인 형태. 안드로이드는 Eclipse나 Android Studio 같은 IDE로

서버

http를 https 통신으로 강제 전환 시키기 (아파치)

http://www.test.com 으로 접속한 사용자를 강제로 https://www.test.com 으로 전환 시키는 방법에 대해서 알아보자. 사실 아주 간단한 웹사이트라면 굳이 SSL 증명서를 추가하여 https 통신을 해야 할 이유는 없다. 하지만 로그인처럼 이용자가 개인정보를 서버에 보내야 하는 웹사이트에는 https 통신이 필수이다. 그러한 웹사이트는 이용자의 정보 보호를 해킹으로 부터

서버

하나의 서버에 여러 도메인 연결하기 (Apache)

서버 하나에 여러가지 웹사이트 혹은 웹앱을 호스팅 하고 싶은 경우엔 버츄얼 호스트를 만들어주면 된다. www.test.com 이라는 도메인과 www.example.com 이라는 도메인을 한 서버 (같은 IP)에 있는 각기 다른 서비스에 연결 하고 싶을 경우, 아파치에서 어떻게 설명하는지에 대해 알아보았다. #아파치 설정파일 우선 아파치의 설정파일은 서버에 따라 이름과

자바스크립트

iframe안에서 바깥 element 제어하기

iframe안에 있는 요소로 iframe 밖에 있는 요소를 제어하는 방법입니다.