'Basic' 카테고리의 글 목록

2023. 10. 31. 15:03 Basic

우선 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를 바꾸도록 명령한다..

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

2023. 8. 17. 01:09 Basic/JavaScript

예를 들어 숫자를 표현할 때, 네자리 고정으로 출력하기를 원할 때가 있다. 예를 들어, 네자리를 채우고 싶고 100을 입력하면 0100, 5를 입력하면 ***5 등등.. 보통 비밀번호 표시, 혹은 숫자 카운팅에 많이 쓰인다. 이를 구현하기 위해 padStart와 padEnd를 사용하면 구현하기 쉽다. padStart 내장함수를 사용하면 입력한 문자열 앞에 원하는 문자 또는 문자열로 만족하는 문자열 길이까지 채워준다. 반대로 padEnd는 입력한 문자열 뒤에서 채워준다. MDN의 예시를 한 번 보자 "abc".padStart(10); // " abc" "abc".padStart(10, "foo"); // "foofoofabc" "abc".padStart(6, "123465"); // "123abc" "ab..

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

2023. 6. 8. 01:12 Basic/etc

파이어베이스에서 제공하는 많은 기능들이 있지만, 모두 번외로 하고 자신이 만든 프로젝트를 실서버(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 파이어베이스에 접속(상단 링크 참고)하여 "시작하기" 또는 "콘솔로 이동" 버튼을 클릭하여 다음 스텝으로 진행한다. "프로젝트 추가" 영역을 ..

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

2023. 5. 30. 00:20 Basic/etc

MVC 패턴의 개념을 설명하는 document나 블로그는 많으니, 간단하게 정리하고 그 예시에 대해서 자세히 알아보자. MVC 패턴이란? "MVC(모델-뷰-컨트롤러)는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다." (참고 문헌: https://developer.mozilla.org/ko/docs/Glossary/MVC ) MVC (Model-View-Controller) 패턴 Model: 데이터와 비즈니스 로직을 처리한다. View: 사용자에게 표시되는 인터페이스를 담당한다. Controller: 사용자의 입력을 처리하고 Model과 View를 관리한다. 결과적으로 이 패턴을 사용함..

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

2023. 5. 28. 00:42 Basic/etc

개발자의 기본 소양의 덕목 중, 디자인패턴이 있고 실제로 많은 기업에서 다양하고 깊은 이해를 바탕을 가진 개발자를 원한다. 그럼 디자인패턴은 무엇이고 왜 필요할까? 디자인 패턴은 소프트웨어 디자인에서 반복적으로 발생하는 문제들을 해결하기 위한 일련의 해결책이다. 소프트웨어 개발자들은 많은 문제들을 매번 처음부터 해결하는 대신에, 이전에 해결되었던 유사한 문제들에 대한 해결책을 재사용함으로써 시간과 노력을 절약할 수 있다. 디자인 패턴의 사용은 개발자들 사이에서 소통과 이해를 촉진하고, 소프트웨어의 유지보수성과 재사용성을 높이는 데 도움을 줄 수 있다. 또한 디자인 패턴은 개발자들이 공통된 언어와 개념을 가지고 소프트웨어 디자인에 접근할 수 있도록 도와줌으로써 개발 프로세스를 향상시킬 수 있다. 개발자가 ..

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

2023. 5. 15. 23:37 Basic/JavaScript

자바스크립트는 단일 쓰레드(single-threaded) 언어이다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 처리할 수 있다는 것을 의미한다. 다른 많은 프로그래밍 언어들은 멀티 쓰레드(multi-threaded)를 지원하여 동시에 여러 작업을 처리할 수 있다. 멀티 쓰레드 언어에서는 한 쓰레드가 작업을 처리하는 동안에도 다른 쓰레드가 다른 작업을 처리할 수 있다. 그러나 자바스크립트는 단일 쓰레드 언어이므로 한 번에 하나의 작업만 처리할 수 있다. 이는 자바스크립트 코드가 순차적으로 실행되는 것을 의미한다. 자바스크립트는 이벤트 루프(event loop)와 비동기 콜백(callback)을 통해 비동기적인 작업을 처리할 수 있게 한다. 이벤트 루프는 콜백 함수를 대기열에 추가하고, 대기열의 작업이..

[Network] HTTP 네트워크 에러 코드 종류

2023. 5. 15. 22:10 Basic/etc

네트워크 에러는 다양한 종류가 있다. 개발 시, 일반적으로 발생하는 네트워크 에러에 대해 나열하면 이렇다. 1. 400 Bad Request (잘못된 요청): 서버가 요청을 이해할 수 없거나 유효하지 않은 요청 2. 401 Unauthorized (인증되지 않음): 요청한 리소스에 대한 인증이 필요하며, 인증 정보가 제공되지 않았거나 유효하지 않음 3. 403 Forbidden (접근 금지): 요청한 리소스에 대한 액세스가 거부. 클라이언트는 추가적인 권한이 필요 4. 404 Not Found (찾을 수 없음): 요청한 리소스가 서버에서 찾을 수 없음 5. 408 Request Timeout (요청 시간 초과): 서버가 요청을 처리하는 데에 너무 많은 시간이 소요되어 요청이 중단 6. 500 Intern..

데이터 캐싱으로 웹소켓 성능 개선하기 (불필요한 네트워크 트래픽 없애기)

2023. 5. 10. 19:20 Basic/JavaScript

이전에 받은 데이터를 캐싱하여, 같은 데이터를 여러 번 받을 필요가 없도록 하여 웹소켓 로직의 성능을 개선할 수 있다. 객체를 이용하여 해당 기능을 구현해보도록 하자 class WebSocketManager { constructor() { // WebSocket 연결 this.socket = new WebSocket("ws://localhost:8080"); // 데이터를 캐싱하기 위한 객체 this.dataCache = {}; // WebSocket에서 데이터가 도착하면 호출되는 콜백 함수, 데이터 캐싱 this.socket.onmessage = (event) => { const data = JSON.parse(event.data); this.dataCache[data.id] = data; }; } /..

[JavaScript] 세미콜론 자동 삽입(Automatic Semicolon Insertion, ASI) 주의하기 - 코드 컨벤션

2023. 5. 9. 20:00 Basic/JavaScript

세미콜론 자동 삽입(ASI, Automatic Semicolon Insertion)은 줄바꿈이 자동으로 세미콜론으로 대체되는 것을 의미한다. 때로 의도하지 않은 동작을 초래할 수 있기 때문에 코드를 작성할 때 주의해야 한다. 특히, 함수 이름과 중괄호를 다른 줄에 작성할 경우, JavaScript에서는 이를 한 줄로 인식하여 세미콜론이 삽입되어 함수가 올바르게 작동하지 않을 수 있다. 다음 예시 코드를 보자 function someFunction() { // 코드 블록 } 위 코드에서는 함수 이름과 중괄호가 다른 줄에 작성되어 있다. 이 경우, 세미콜론을 자동으로 삽입하여 다음과 같이 해석한다. function someFunction(); { // 코드 블록 } 이 경우, someFunction은 함수 ..

티스토리툴바