Cotist

내가 생각하는 저연차 개발자의 물경력과 극복법 - 1

Cotist — Fri, 24 Jan 2025 14:46:27 +0900

결론부터 말하자면, 근본적으로 문제 해결 능력이 부족하다는 것이다. 이는 사고방식과 업무를 대하는 태도에서 비롯된다고 생각한다.

무언가 해결되지 않은 문제가 생기면, 그 문제에 몰두하다가 시야가 좁아지고 사고가 멈추는 상태에 빠질 때가 있다.

이때, 문제를 해결하지 못한 채 누군가에게 질문을 하더라도 정리가 안 되어 두서없는 상황이 된다.

문제 해결을 위해 무엇부터 풀어야 할지도 모르는 경우가 많다.
이런 상태가 심해지면 질문조차 제대로 하지 못하고, ChatGPT와 같은 도구를 사용할 때도 단순히 코드를 복사해 붙이며 "이거 해결해줘", "이거 만들어줘" 같은 요청만 하게 된다.

결국, 이런 방식으로는 도구조차 제대로 활용하지 못한다.

이 문제를 극복하려면 먼저 맞닥뜨린 이슈의 핵심이 무엇인지 명확히 인지해야 한다.

그 후, 문제를 해결하기 위해 어떤 과정을 거쳐야 할지 사고가 뻗어나가야 한다. 머릿속으로 정리가 안 된다면 메모장이나 도구를 활용해 순서도 형식으로 정리하며 복기해보자.
코드 관련 문제라고 해서 모니터 앞에 앉아야만 하는 것은 아니다.

출퇴근길이나 샤워 중에도 문제를 곱씹고 생각을 정리하며 사고 연습을 할 수 있다.

이러한 연습이 쌓이면 어느 순간 스스로 엄청난 성장을 이뤘음을 느끼게 될 것이다.

최소한 로직을 짜지 못해서 해결하지 못하는 일은 90% 이상 줄어들 것이라 확신한다. (물론 코드의 '질'은 또 다른 이야기지만…)

---> 나 엄청 개발 잘한다라고 우매함의 봉우리를 겪을 수도 있는데 각별히 주의하자...

[개발 교육, 외주 문의]

open.kakao.com/o/sjqi3lDc

Ruby 버전 업데이트 및 전역 적용하는 방법

Cotist — Tue, 31 Oct 2023 15:03:24 +0900

우선 ruby 버전을 변경하기 위해서는 brew가 기본적으로 설치를 해야 한다. (아래 링크 - brew 다운로드 사이트)
https://brew.sh/

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

brew 설치가 완료되었다면 rbenv를 설치하자

brew install rbenv

rbenv를 설치하였다면 ruby 설치 가능한 버전 리스트를 확인한다.

rbenv install -l

리스트 중에 원하는 버전을 명시하여 설치한다. 이때 반드시 리스트에 있는 버전으로 기입한다.

# rbenv install x.x.x(설치 버전 기입)
rbenv install 3.0.6

전역적으로 rbenv에 설치된 버전으로 ruby를 바꾸도록 명령한다.

rbenv global 3.0.6

ruby 버전을 확인한다. 이때 적용이 안되는 경우가 있는데, 그 경우에는 아래 스텝까지 실시한다.

ruby -v

zshrc 파일을 연다.

open ~/.zshrc

zshrc 파일에 아래 환경변수 구문을 넣고 저장하고 닫는다.

eval "$(rbenv init - zsh)"

터미널에 아래 명령어로 적용시킨다.

source ~/.zshrc

터미널을 재실행하여 다시 루비 버전을 확인한다.

ruby -v

[Javascript] 문자열 자리수 채우기 - padStart, padEnd

Cotist — Thu, 17 Aug 2023 01:09:54 +0900

예를 들어 숫자를 표현할 때, 네자리 고정으로 출력하기를 원할 때가 있다. 예를 들어, 네자리를 채우고 싶고 100을 입력하면 0100, 5를 입력하면 ***5 등등..

보통 비밀번호 표시, 혹은 숫자 카운팅에 많이 쓰인다.

이를 구현하기 위해 padStart와 padEnd를 사용하면 구현하기 쉽다.

padStart 내장함수를 사용하면 입력한 문자열 앞에 원하는 문자 또는 문자열로 만족하는 문자열 길이까지 채워준다.

반대로 padEnd는 입력한 문자열 뒤에서 채워준다.

MDN의 예시를 한 번 보자

"abc".padStart(10); // "       abc"
"abc".padStart(10, "foo"); // "foofoofabc"
"abc".padStart(6, "123465"); // "123abc"
"abc".padStart(8, "0"); // "00000abc"
"abc".padStart(1); // "abc"

abc라는 문자열을 받아 새로운 문자열을 반환을 한다.

첫번째 인자는 목표 문자열의 길이를 정의하고 이는 필수 인자이다.

두번째 인자는 목표 문자열의 길이까지 채우기 위한 "채워넣기용 문자(열)"을 정의하며 정의하지 않으면 " "로 인식하고 반환된다.

응용하여 초단위의 number를 받으면 "00:00(분:초)" 형식으로 반환하는 함수를 만들자.

// number로 넘어오는 refresh 타임을 형식에 맞게 변형하기 위한 함수 (ex: 30 -> 00:30)
export const handleFormatRefreshTime = (refreshTime: number, setFormattedTime: React.Dispatch<React.SetStateAction<string>>): void => {
  // 초를 분과 초로 나누어서 표시
  const minutes = Math.floor(refreshTime / 60);
  const seconds = refreshTime % 60;

  // 시간 형식으로 변환하여 저장
  const timeFormatted = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  setFormattedTime(timeFormatted);
};

참고 문헌

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

String.prototype.padStart() - JavaScript | MDN

padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.

developer.mozilla.org

맥북 충전기 연결음 on/off 하기

Cotist — Tue, 11 Jul 2023 00:42:18 +0900

맥북 충전기를 연결한 채로 사용하다보면 불안정한 접촉때문에 연결이 됐다 안됐다를 반복하여 계속해서 연결할 때 나는 소리를 내며 신경쓰이게 한다.

연결 단자를 고칠 수 없다면, 소리를 꺼보자.

터미널을 켜고, 아래 명령어를 치면 소리가 꺼진다.

defaults write com.apple.PowerChime ChimeOnNoHardware -bool true; killall PowerChime

다시 소리를 키고 싶다면 아래 명령어를 치면 된다.

defaults write com.apple.PowerChime ChimeOnAllHardware -bool true; open /System/Library/CoreServices/PowerChime.app &

[Firebase] 파이어베이스로 React 프로젝트 3분만에 호스팅하기 (무료로 URL, 웹사이트 구축하기)

Cotist — Thu, 8 Jun 2023 01:12:15 +0900

파이어베이스에서 제공하는 많은 기능들이 있지만, 모두 번외로 하고 자신이 만든 프로젝트를 실서버(URL)에 등록(호스팅)만 하는 방법에 대해 알아보자.

https://firebase.google.com/?hl=ko

Firebase

Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world.

firebase.google.com

파이어베이스에 접속(상단 링크 참고)하여 "시작하기" 또는 "콘솔로 이동" 버튼을 클릭하여 다음 스텝으로 진행한다.

"프로젝트 추가" 영역을 클릭하여 파이어베이스의 새로운 프로젝트를 추가할 준비를 한다.

적당한 프로젝트 네이밍을 등록해주고 "계속" 버튼을 클릭한다.

가이드대로 터미널에서 "npm install -g firebase-tools" 명령어를 실행하여, 곧 Firebase CLI를 전역으로 설치해주고, "다음" 버튼을 클릭한다.

그 다음 스텝에 대한 설명이 나오는데, 해당 포스터에서 설명하며 진행할 예정이니 모두 "다음" 클릭하여 완료시킨다.

그렇다면 해당 페이지에 진입했을 것인데, 파이어베이스 프로젝트 생성에 성공한 것이다.

도메인 변경을 하는 것이 아니라면, 더 이상 파이어베이스 콘솔 페이지에서 해줄 것은 없다.

호스팅하고자 하는 프로젝트로 돌아와, 터미널에 "firebase login"을 해준다.

당연히, 계정 로그인은 firebase 프로젝트를 생성한 계정과 동일하게 진행한다.

(이전에 firebase login을 한 적이 있었고, 에러가 뜬다면 "firebase login --reauth"를 해주자. 토큰을 재갱신하는 과정이다.)

로그인이 완료되었다면, "firebase init"을 입력하자.

여러 항목의 리스트가 나올 건데, 키보드 위아래 화살표를 이용하여 포커스가 가능하다.

"Hosting"에 포커스하여 "스페이스바"를 누른 뒤 "엔터"를 친다.

이미 firebase 프로젝트를 생성하였기 때문에, "Use an existing project"에 포커스한 뒤 엔터를 한다.

괄호 친 부분이, 이전에 입력하였던 firebase 프로젝트 이름이다. 맞는 곳을 선택하여 넘어간다.

그 다음은 업로드 될 파일을 명시하라고 한다. 기본 입력지가 public으로 나올건데 public으로 절대 하지 말고, 같은 루트 파일에 build 폴더를 생성한 뒤에 아래 스크린샷처럼 "build"를 입력하고 엔터를 친다.

위의 모든 과정을 완벽히 완료하였다면, 호스팅을 할 준비는 마쳤다.

create-react-app으로 react 앱을 세팅하였다면, package.json에 build를 수행하는 스크립트가 기본적으로 세팅이 되어 있다.

"build": "react-scripts build",

해당 명령어를 실행(yarn build)해주면 build 파일에 프로젝트를 구성하는 모든 소스파일들이 묶이게 된다.

yarn build

build까지 완료가 되었다면 build에 묶여있는 소스코드를 연결된 firebase 프로젝트로 올리는 명령어만 치면 배포가 완료된다.

firebase deploy

console의 마지막 문구인 Hosting URL에 보여지는 URL에 접속하면 실서버에 올라가 있음을 최종적으로 확인할 수 있다.

추후 업데이트 시에도 빌드(build) 후 배포(deploy)하는 과정을 거치면 된다.

파이어베이스 호스팅 가이드 자료를 만들기 위해 만든 프로젝트 URL과 깃헙 레포지토리

https://fir-hosting-guide-20515.web.app

React App

fir-hosting-guide-20515.web.app

https://github.com/bluetg2001/firebase-hosting-guide

[React Native] react-native-bottom-sheet, AndroidManifest.xml 내 android:windowSoftInputMode 설정 충돌 방지하기

Cotist — Wed, 7 Jun 2023 20:39:48 +0900

https://github.com/gorhom/react-native-bottom-sheet

gorhom/react-native-bottom-sheet는 React Native로 bottom sheet를 구현할 때 필요한 거의 대체 할 수 없는 필수 라이브러리이다.

GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options

A performant interactive bottom sheet with fully configurable options - GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options

github.com

아래 링크의 공식 문서를 살펴보면, "andorid_keyboardInputMode"의 default 설정이 "adjustPan" 임을 확인 할 수 있다.

이를 간과하고 "AndroidManifest.xml"의 "android:windowSoftInputMode의 값을 설정값을 똑같이 맞추지 않으면, 설정 충돌이 발생하므로 간헐적으로 원하지 않는 액션이 발생 할 수 있다.

https://github.com/gorhom/react-native-bottom-sheet

GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options

A performant interactive bottom sheet with fully configurable options - GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options

github.com

[디자인패턴] MVC 패턴의 간단한 개념과 구현 예시

Cotist — Tue, 30 May 2023 00:20:30 +0900

MVC 패턴의 개념을 설명하는 document나 블로그는 많으니, 간단하게 정리하고 그 예시에 대해서 자세히 알아보자.

MVC 패턴이란?

"MVC(모델-뷰-컨트롤러)는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다."

(참고 문헌: https://developer.mozilla.org/ko/docs/Glossary/MVC )

MVC (Model-View-Controller) 패턴

Model: 데이터와 비즈니스 로직을 처리한다.

View: 사용자에게 표시되는 인터페이스를 담당한다.
Controller: 사용자의 입력을 처리하고 Model과 View를 관리한다.

결과적으로 이 패턴을 사용함으로서 코드의 재사용성과 유지보수성을 높이는 것을 기대한다.

주로 프론트엔드에서 사용하는 패턴이니 javascript의 예시로 확인하자.

// Model
class UserModel {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  getName() {
    return this.name;
  }
  
  getAge() {
    return this.age;
  }
  
  setName(name) {
    this.name = name;
  }
  
  setAge(age) {
    this.age = age;
  }
}

// View
class UserView {
  displayUser(user) {
    console.log(`Name: ${user.getName()}, Age: ${user.getAge()}`);
  }
  
  displayErrorMessage(message) {
    console.log(`Error: ${message}`);
  }
}

// Controller
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
  
  updateUser(name, age) {
    if (name && age) {
      this.model.setName(name);
      this.model.setAge(age);
      this.view.displayUser(this.model);
    } else {
      this.view.displayErrorMessage("Invalid input");
    }
  }
}

// Usage
const user = new UserModel("Elon Musk", 52);
const view = new UserView();
const controller = new UserController(user, view);

controller.updateUser("Charlie Kim", 30);

UserModel은 데이터와 관련된 비즈니스 로직을 처리하는 모델을 나타낸다.

UserView는 사용자에게 정보를 표시하는 뷰를 담당하고, UserContoller는 사용자의 입력을 처리하고 Model과 View를 관리하는 역할을 한다.

Controller의 "updateUser" 메서드는 사용자의 이름과 나이를 인자로 받아 Model의 데이터를 업데이트하고, View를 통해 업데이트된 정보를 표시한다. 입력이 유효하지 않을 경우에는 View를 통해 에러 메시지를 표시한다.

이런식으로 Model, View, Controller 간의 역할을 분리하여 코드를 구성하면, 코드의 재사용성과 유지보수성이 향상됨을 기대 할 수 있다.

[디자인패턴] 디자인패턴(design pattern)이란 무엇일까?

Cotist — Sun, 28 May 2023 00:42:29 +0900

개발자의 기본 소양의 덕목 중, 디자인패턴이 있고 실제로 많은 기업에서 다양하고 깊은 이해를 바탕을 가진 개발자를 원한다.

그럼 디자인패턴은 무엇이고 왜 필요할까?

디자인 패턴은 소프트웨어 디자인에서 반복적으로 발생하는 문제들을 해결하기 위한 일련의 해결책이다.

소프트웨어 개발자들은 많은 문제들을 매번 처음부터 해결하는 대신에, 이전에 해결되었던 유사한 문제들에 대한 해결책을 재사용함으로써 시간과 노력을 절약할 수 있다.

디자인 패턴의 사용은 개발자들 사이에서 소통과 이해를 촉진하고, 소프트웨어의 유지보수성과 재사용성을 높이는 데 도움을 줄 수 있다. 또한 디자인 패턴은 개발자들이 공통된 언어와 개념을 가지고 소프트웨어 디자인에 접근할 수 있도록 도와줌으로써 개발 프로세스를 향상시킬 수 있다.

개발자가 다양한 디자인 패턴을 기본 소양으로 알아야 하는 이유는 구분지어 나열하면 다음과 같다.

1. 재사용성과 생산성 향상

디자인 패턴은 이미 검증된 솔루션이므로, 개발자는 처음부터 문제를 해결하기 위한 설계를 만들지 않아도 된다. 패턴을 재사용함으로써 생산성이 향상되고 코드의 재사용성이 증가된다.

2. 일관성과 표준화

디자인 패턴은 개발자들 사이에서 공통된 언어와 개념을 제공한다. 이는 팀 내외의 소프트웨어 개발자들 사이의 소통과 협업을 용이하게 만들어준다. 또한 일관된 패턴의 사용은 소프트웨어 시스템의 일관성을 유지할 수 있도록 한다.

3. 유지보수성 향상

디자인 패턴은 코드의 구조를 명확하게 만들어준다. 이는 소프트웨어 시스템의 유지보수성을 향상시키고, 변경에 대한 영향 범위를 제한함으로써 버그의 발생 가능성을 줄인다.

4. 최적화와 확장성

디자인 패턴은 소프트웨어 시스템을 최적화하고 확장 가능하게 만들기 위한 가이드를 제공한다. 패턴은 시스템의 구성 요소들 간의 상호작용을 개선하고, 유연성과 확장성을 고려한 설계를 돕는다.

5. 전문성의 향상

다양한 디자인 패턴을 알고 있다는 것은 소프트웨어 개발자로서의 전문성을 나타내는 요소이다. 패턴을 이해하고 활용할 수 있는 능력은 개발자의 실력을 향상시키고, 좀 더 높은 수준의 소프트웨어 개발을 가능케 한다.

[React Native] WebView로 Android PDF 링크 띄우기

Cotist — Wed, 17 May 2023 17:53:58 +0900

안드로이드의 WebView에서 PDF 관련 링크를 띄우려고 할 때, SSL 인증서의 문제로 발생할 수 있다. 기본적으로 WebView는 안전하지 않은 SSL 인증서를 가진 웹 사이트에 대해 경고를 표시하고 해당 사이트에 접속을 차단한다.

차단을 풀고 접속하는 방법에 대해 알아보자.

1. WebView 컴포넌트의 ignoreSslError 추가

 <WebView
 	source={{ uri: link }}
 	javaScriptEnabled
 	originWhitelist={['*']}
 	ignoreSslError // 추가된 옵션
 />

2. AndroidManifest.xml에서 보안 설정 변경

매니페스트에서 "android:usesCleartextTracffic" 속성을 추가하여 앱이 텍스트 트래픽을 사용할 수 있게 변경한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.yourapp">

  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:usesCleartextTraffic="true"
    ...>
    ...
  </application>

</manifest>

3. 강제로 구글 드라이브로 이동하여 표시하기

const { url } = route.params; 

const googleDriveUrl = `https://drive.google.com/viewerng/viewer?embedded=true&url=${encodeURIComponent(url)}`;

  return (
    <Wrapper>
      <Wrap>
        {renderSpinner()}
        <WebView
          source={{ uri: googleDriveUrl }} // 구글 드라이브 접근 uri로 접근하는 커스텀 uri 삽입
          javaScriptEnabled
          originWhitelist={['*']}
        />
      </Wrap>
    </Wrapper>
  );
};

googleDriveUrl 변수를 이용하여 PDF url을 인코딩한 후, 구글 드라이브의 PDF 뷰어 URL과 조합하여 WebView에 전달한다.

구글 드라이브를 사용하므로 SSL 인증서 문제를 우회하여 보여줄 수 있다.

[Javascript] 자바스크립트는 싱글 스레드 (+비동기 심화 학습)

Cotist — Mon, 15 May 2023 23:37:35 +0900

자바스크립트는 단일 쓰레드(single-threaded) 언어이다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 처리할 수 있다는 것을 의미한다.

다른 많은 프로그래밍 언어들은 멀티 쓰레드(multi-threaded)를 지원하여 동시에 여러 작업을 처리할 수 있다. 멀티 쓰레드 언어에서는 한 쓰레드가 작업을 처리하는 동안에도 다른 쓰레드가 다른 작업을 처리할 수 있다.

그러나 자바스크립트는 단일 쓰레드 언어이므로 한 번에 하나의 작업만 처리할 수 있다. 이는 자바스크립트 코드가 순차적으로 실행되는 것을 의미한다. 자바스크립트는 이벤트 루프(event loop)와 비동기 콜백(callback)을 통해 비동기적인 작업을 처리할 수 있게 한다.

이벤트 루프는 콜백 함수를 대기열에 추가하고, 대기열의 작업이 완료되면 순차적으로 실행하는 방식으로 동작한다.

단일 쓰레드로 동작하는 자바스크립트의 장점은 코드 실행 순서를 예측하기 쉽고, 동시성 관련 문제를 처리하기 간단하다는 것이다.

하지만 복잡한 계산이나 처리량이 많은 작업을 처리할 때는 단일 쓰레드로 인해 성능 저하가 발생할 수 있다.

간단한 예시를 보자.

console.log("시작");

setTimeout(function() {
  console.log("타이머 콜백 함수");
}, 2000);

console.log("끝");

위 코드는 "시작"을 출력한 뒤, 2초 후에 "타이머 콜백 함수"를 출력한다. 마지막으로 "끝"을 출력한다.

이 코드에서 `setTimeout` 함수는 지정된 시간인 2초가 지난 후에 콜백 함수를 실행한다. 자바스크립트는 단일 쓰레드로 동작하기 때문에 콜백 함수를 기다리는 동안 다른 작업을 처리할 수 없기에 "타이머 콜백 함수"는 "끝"을 출력한 뒤에야 실행된다.

만약 자바스크립트가 멀티 쓰레드로 동작한다면, "타이머 콜백 함수"는 2초 동안 대기하는 동안에도 다른 작업을 처리할 수 있어야 했을 것이다. 그러나 단일 쓰레드로 동작하는 자바스크립트는 이러한 순차적인 실행 방식을 따르기 때문에 "타이머 콜백 함수"는 이전 작업이 모두 완료된 후에 실행된다.

여기서 비동기 처리와의 개념이 충돌나 헷갈릴 수 있다.

비동기 처리는 여러 작업을 동시에 처리할 수 있는 기능을 제공하지만, 자바스크립트의 단일 쓰레드 특성으로 인해 실제로는 각 작업을 빠르게 번갈아가면서 실행하는 것이다.

비동기 처리는 일반적으로 콜백 함수, 프로미스(Promise), async/await 등을 사용하여 구현된다. 비동기 작업은 메인 스레드의 실행을 차단하지 않고 백그라운드에서 동작하며, 작업이 완료되면 결과를 처리하는 콜백 함수나 프로미스 체인을 통해 알림을 받을 수 있다.

예를 들어, 다음은 비동기적으로 이미지를 불러오고, 불러온 이미지를 화면에 표시하는 예시 코드를 보자

console.log("시작");

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error("이미지를 불러올 수 없습니다."));
    image.src = url;
  });
}

async function displayImage() {
  try {
    const image = await loadImage("image.jpg");
    document.getElementById("myImage").src = image.src;
    console.log("이미지 표시 완료");
  } catch (error) {
    console.error(error);
  }
}

displayImage();

console.log("끝");

위 코드에서 loadImage 함수는 이미지를 비동기적으로 불러오는 작업을 수행한다. displayImage 함수는 await를 사용하여 이미지 로드가 완료될 때까지 기다린 후, 로드된 이미지를 화면에 표시한다.

비동기 작업인 이미지 로드는 메인 스레드의 실행을 차단하지 않고 백그라운드에서 수행되므로, 다른 작업을 처리할 수 있다. 하지만 자바스크립트는 여전히 단일 쓰레드로 동작하므로, 비동기 작업이 진행되는 동안에도 다른 작업을 동시에 처리하는 것은 불가능하다.

[참고 문헌]

https://developer.mozilla.org/en-US/docs/Glossary/Thread

Thread - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Thread in computer science is the execution of running multiple tasks or programs at the same time. Each unit capable of executing code is called a thread.

developer.mozilla.org