-
코딩앙마 자바스크립트 중급 강좌 스터디 요약 (2)
코딩앙마 자바스크립트 중급 강좌 스터디 요약 (1) 에 이어지는 내용입니다.아래 유튜브를 시청하고 중요한 내용을 요약해보겠습니다. NumbertoString()숫자를 다른 진법으로 변환하는 메서드이다. 기본적으로 10진법의 숫자를 다른 진법으로 변환할 때 사용된다.const num = 255;console.log(num.toString(16)); // "ff"console.log(num.toString(2)); // "11111111"//실행 결과는 각각 16진수로 'ff', 2진수로 '11111111' toFixed()숫자를 소수점 아래 몇 번째 자리까지 표현할지를 지정하는 메서드이다.const num = 3.14159;console.log(num.toFixed(2)); // "3.14"co..
코딩앙마 자바스크립트 중급 강좌
2024.10.15
-
코딩앙마 자바스크립트 중급 강좌 스터디 요약 (1)
유튜버 코딩앙마님의 자바스크립트 중급 강좌는 짜임새도나 내용의 퀄리티 측면에서 정말 우수합니다.아래 유튜브를 시청하고 중요한 내용을 요약해보겠습니다.(아래 사진을 누르면 유튜브 링크로 이동합니다) 변수자바스크립트의 변수는 동적이다. 즉, 특정 타입과 연결되지 않으며 모든 타입의 값으로 할당 및 재할당이 가능하다. 변수 생성 과정은 크게 세 단계로 나눌 수 있다: 선언, 초기화, 그리고 할당이다.자바스크립트에서 변수를 선언하는 방법으로는 let, const, var 세 가지가 있다. var는 함수 스코프를 따른다. 즉, var로 선언된 변수는 함수 내에서만 유효하고, 함수 밖에서는 접근할 수 없다.var는 선언과 동시에 초기화가 이루어지며, 할당 전에 호출해도 초기화되어 'undefined' 값을 가진..
코딩앙마 자바스크립트 중급 강좌
2024.10.15
-
내가 그동안 사용했던 디자인 패턴에 대한 고찰
서론저는 그동안 디자인 패턴에 대해 개념적으로만 알고, 몇 가지 대표적인 패턴에 대해서도 이름과 간단한 소개 정도로만 익숙했습니다. 그러던 중, 면접 과정에서 디자인 패턴에 대한 흥미를 묻는 질문을 받았고, 그 순간 제가 일하면서 사용한 패턴이 무엇인지 깊게 생각해 보지 않았다는 걸 깨달았습니다.저는 회사에서 사용했던 디자인 패턴을 MVC나 MVVM 구조라고 하며 이 둘의 개념에 대해 설명할 수는 있었지만, 실제로 디자인 패턴을 어떻게 적용했는지에 대해선 명확하게 말하진 못했습니다. 결과적으로 그 면접은 탈락했답니다. 집에 돌아와 면접에서 받은 질문들을 돌이켜보며, 제가 실무에서 적용한 것들이 어떤 디자인 패턴에 해당하는지, 그리고 그 패턴들이 어떤 문제를 해결하기 위해 어떻게 사용됐는지를 더 깊이 고민..
frontend
2024.10.08
-
자바스크립트 객체지향을 이해하기 위한 여정: 클래스, 생성자, 상속, static을 중심으로
제가 좋아라하는 Udemy 강사인 Colt Steele의 자바스크립트 심화강의인 JavaScript Pro: Mastering Advanced Concepts and Technique에서는 평소 제가 궁금해했던 자바스크립트의 난이도 있는 개념들, 그 중에서도 객체지향 개념을 잘 다뤄주고 있습니다. 오늘 포스팅은 해당 강의의 내용에 대한 복습입니다. 자바스크립트에서 객체지향 프로그래밍이란? 자바스크립트에서 객체지향 프로그래밍(Object-Oriented Programming, OOP)은 프로그램을 여러 객체로 나누어 관리하는 프로그래밍 방식입니다. 이 객체들은 데이터(속성)와 해당 데이터를 처리하는 메서드를 함께 포함하여, 서로 상호작용하면서 기능을 수행하게 됩니다. 자바스크립트는 본..
Udemy JavaScript Pro: Mastering Advanced
2024.09.30
-
React Portals와 Refs 사용법: 모달 컴포넌트 최적화하기
React 프로젝트에서 모달 컴포넌트를 구현할 때, UI의 구조를 더 깔끔하게 유지하고 접근성을 높이기 위해 React Portals와 Refs를 활용하는 방법을 알아보겠습니다. 이번 글에서는 강좌에서 소개된 코드를 바탕으로 이 두 가지 기능을 효과적으로 사용하는 방법을 설명합니다. 1. React Portals의 필요성 React에서 모달을 구현할 때, 모달 컴포넌트가 다른 요소들 위에 시각적으로 떠 있도록 설정하는 경우가 많습니다. 일반적으로 모달 컴포넌트는 div 태그 안에 중첩되어 출력됩니다. 하지만 이렇게 되면 스타일 문제나 접근성 문제를 초래할 수 있습니다. 이때 React Portals를 사용하면 모달을 실제 DOM의 더 상위 레벨, 예를 들어 body 바로 아래에 렌더링할 수 있습니다..
frontend
2024.09.13
-
리액트 프로젝트를 위한 koyeb 백엔드 배포 세팅법
리액트로 채팅앱을 만드려다가, 백엔드 구성에 너무 힘을 주고 싶지는 않기도 하고 AWS로 배포하기에 부담이 되어 알아보던 중 많은 분들이 Koyeb을 사용하는 것을 알고 백엔드를 이에 맞춰 구성하기로 했습니다. 배포 서비스를 Koyeb으로 설정한 이유는 간편하게 백엔드 서비스를 배포하고 관리할 수 있으며, 무료로 사용할 수 있어 비용 부담이 없기 때문입니다. 또한, GitHub 연동을 통해 코드 변경 시 자동으로 빌드 및 배포가 가능해 효율적인 개발 환경을 지원합니다. 오늘은 koyeb으로 백엔드를 초기 세팅하고 간단하게 배포하는 방법에 대해 포스팅 해보겠습니다. 이에 앞서 프론트엔드와 백엔드를 어떻게 구성했는지 알려드릴게요. 프로젝트 구성제 프로젝트는 React로 만든 프론트엔드와 No..
backend
2024.09.09
-
알고리즘 왕초보의 [자바스크립트 알고리즘 문제풀이 입문] 강의 수강 후기
안녕하세요. 오늘은 제가 알고리즘 2단계 시작도 못했던 상태에서 지푸라기라도 잡는 심정으로 들었던 '자바스크립트 알고리즘 문제풀이 입문'이라는 강의를 완강 후 후기를 알려드리고자 합니다. 포스팅에 앞서 제가 들었던 강의는 아래와 같습니다.인프런에서 제공하는, 김태원 강사님의 강의입니다. https://www.inflearn.com/course/ 수업 방식해당 강의는 총 95개의 강좌로 되어있습니다. 해당 강의를 듣기에 앞서 아래와 같이 공부하기를 요하고 있습니다. 즉 영상을 시청하기 전, 미리 문제를 최대한 풀고 듣기를 권장하고 있습니다.(아래서도 언급하겠지만 저는 이렇게 하지는 않았습니다)동영상 1개마다 '개념설명-해답' 구조로 되어있습니다. 강사님은 각 문제가 어떤 알고..
알아두면 유용한 것들
2024.09.03
-
MVVM 프레임워크, Flux, Redux 제대로 이해하기
리액트 애플리케이션에서 효율적인 상태 관리를 위해서는 다양한 패턴과 아키텍처를 이해하는 것이 중요합니다. 이번 글에서는 MVVM, Flux, Redux 패턴을 비교하고, 각각의 특징과 활용법을 알아봅니다. MVVM 프레임워크란 무엇일까?MVVM(Model-View-ViewModel) 프레임워크는 소프트웨어 개발에서 UI(User Interface)와 로직을 분리하기 위해 사용되는 아키텍처 패턴 중 하나입니다. MVVM은 특히 WPF(Windows Presentation Foundation), Xamarin, 그리고 최근에는 프론트엔드 웹 개발에서 많이 사용됩니다. MVVM 패턴은 다음과 같은 세 가지 주요 구성 요소로 나뉩니다. 1. Model 애플리케이션의 데이터와 비즈니스 로직을 다룹니..
frontend
2024.08.30
-
자바스크립트는 싱글 스레드 언어다 - 비동기 처리 방식과 Web API
어제 콜스택에 대한 포스팅에 이어, 오늘은 자바스크립트가 Web Api를 처리하는 방식을 통해 왜 싱글 스레드 언어라고 불리고 자바스크립트가 비동기 작업을 어떻게 처리하는지 알아보겠습니다. 이에 앞서 콜스택을 시각화해서 보여주는 사이트에서 Web Api 동작 방식을 이해할 수 있는 예시 코드가 담긴 사이트를 공유드립니다. 해당 코드는 유데미 인기강의인 The Web Developer 부트캠프 2024 를 참고했습니다. Web Api 동작 보러가기 위 사이트에 들어가면 간단한 코드가 있을텐데요. save+run 버튼을 누르면 자동으로 실행됩니다. 중간에 pause를 눌러 잠시 멈출 수 있고, resume을 눌러 코드를 재개할 수도 있습니다.이 때 중요한 것은 저 setTimeOut 함수..
frontend
2024.08.28
-
자바스크립트 콜스택 쌓이는 순서 확인하는 방법
자바스크립트를 잘 이해하기 위해선 콜스택이 쌓이는 방식을 눈으로 직접 확인해보는 것이 좋습니다.콜스택이 쌓이는 순서를 확인하기 위한 두 방법을 먼저 소개해 드리겠습니다. loupe 사이트 이용하기 아래는 콜스택을 시각화된 자료로 보여주는 loupe라는 사이트입니다. 아래 링크에서 콜스택을 시각화된 자료로 확인할 수 있습니다. 콜스택 시각화 예시 바로가기 개발자도구 snippet 활용하기위 사이트 말고도, 크롬 개발자도구의 상단 탭에 있는 Sources탭에 snippets를 추가하여 콜스택을 확인할 수도 있습니다. snippet에서 콜스택을 확인하는 순서는 아래와 같습니다. 1. snippets 탭에서 new snippet 추가2. 중앙 탭에서 콜스택을 확인할 코드 작성 3. ..
frontend
2024.08.27
