디자인 패턴 디자인 패턴은 기본적으로 소프트웨어를 개발하는 과정에서 문제를 해결하기 위한 일반적인 접근 방식이나 코드 설계의 규칙을 의미한다이러한 패턴을 통해 코드의 재사용성을 높이고, 효율적으로 문제를 해결하는데에 활용된다 이러한 디자인 패턴에는 목적에 맞게 다양한 패턴들이 존재하며 패턴의 개념에 기반해 현대의 웹 개발에서도 다양한 패턴으로 발전하고 있다 예를들어, React의 어플리케이션에서 중요한 역할을 하는 Hooks의 경우 Reducer패턴을 활용해 복잡한 상태변화를 단일 액션으로 처리하는 패턴으로도 볼 수 있다 useEffect의 경우 컴포넌트가 렌더링될 때 특정 작업을 실행하게 해주는 옵저버 패턴에 해당한다 모듈 패턴 모듈 패턴은 캡슐화와 네임스페이스를 제공해 코드의 구조화, 유지보수 충돌..
여느 때와 같이 문제 푸려던 중 고민 고민해도 어떻게 해야 할지 감이 안 오는 문제가 있었다. 일단 prompt로 입력을 받을테니 "원범 원범 혜원 혜원 혜원 유진 유진" 이런 식으로 긴 문자열이 될 것이고, 그다음은 split(" ")으로 공백 단위로 쪼개 이름 한 개씩 갖는 문자열 배열을 만들었다. (이름 수를 세고 누가 많은지 계산하기 위해) 배열 중복 값 개수 구하기 검색하니 공통적으로 reduce가 검색되었다. reduce( ) arr.reduce(callback[, initialValue]) reduce는 배열의 각 요소에 대하여 주어진 reducer함수를 실행하고, 하나의 결과값을 반환한다. 여기서 이 reduce함수는 4개의 인자를 가진다. 누산기 (acc) : 콜백의 반환값을 누적함 현재..
에이 티 티 이 엔 티 아이 온 유 갓 미 룩킹 포 어텐션~ string을 배열로 바꿔 순서를 거꾸로 바꿔 출력하면 된다. string을 배열로 바꾸는 방법엔 여러 가지가 있다. 1. Spread Operator const str = 'attention'; const arr = [...str]; //빈 array에 attention요소 추가 console.log(arr); // output =>['a''t''t''e''n''t''i''o''n'] 2. Array.from() const str = 'attention'; const arr = Array.from(str); //문자열을 변환해 배열 생성 console.log(arr); //output => ['a', 't', 't', 'e', 'n', 't'..
모든 프로그래밍 언어의 반복문 단골 예제 별 탑 쌓기! 순조롭게 진행하던 와중 문제에 봉착했다. const n = prompt("숫자를 입력하세요."); for (var p = 1; p < n+1 ; p++) { const blank = []; const star = []; for (var i = p; i < n; i++) { blank.push(" "); }; for (var j = 1; j
티스토리를 정리할 때면 종종 노래를 들으며 정리하곤 한다. 기억을 되짚으며 하기에 가사 있는 노래는 피한다. 그래서 ASMR이나 연주곡을 듣곤하는데 요즘엔 쳇 베이커의 재즈에 빠졌다. 공부하며 들을 새로운 노래를 찾는 중이라면 맛보자. https://youtu.be/keU3J0HHQ4s NPM (Node Package Manager) 나에게 npm은 익숙한 친구이다. 다만, 친하지는 않은 안면이 있는 친구와도 같다. 강의를 듣고 실습을 진행하거나, 무언가 기능일 필요해서 추가할 때면 터미널 창에 항상 npm~ 이런 식으로 사용해 왔었다. npm은 풀네임에서 알 수 있듯이 노드 패키지들을 관리하는 기능을 한다. 좀 더 와닿게 말하면 개발 시 필요한 다양한 모듈들을 다운로드할 수 있게 해주는 도구이다. np..
자바스크립트와 리액트를 사용하면서 무심코 사용했던 import와 export 뭐 대충 파일 내보내고 가져오는 의미아닌가? 얼추 맞았다. 하지만, module에 대한 정확한 이해와 기존의 script를 통해 파일을 주고받는 것과 무슨차이가 있는지 보도록 하자. 1. 모듈, 모듈시스템 애플리케이션의 기능들을 추가하다보면 당연히 규모 확장이 될 것이다. 이 경우 한 개의 파일로 통솔하기엔 어려움이 많다.파일을 여러개로 분리하게되는데 이때 이 분리된 파일을 모듈이라고한다.추가로, 이렇게 분리된 파일들을 불러올 수 있게끔 하는 것이 모듈 시스템이다. 자바스크립트 상에선 script태그를 통해 파일을 주고 받는데 이경우 전역스코프를 공유한다는 문제가 발생한다. 예시로, a.js, b.js모두 number라는 변수에..
![]()
4월 동안 열심히 들은 바닐라 js 정리 내용 + 실습 후 결과물 당시에는 티스토리 안 해서 메모장에 적어놓았는데 더 가독성 좋게 정리 + 한 곳에 내 행보 정리함으로써 통일화하는 김에 업로드한다. (결과물 미리보기) - 노트북으로 들어가길 반응형 작업 1도 안 해서 이리 깨지고 저리 깨질 확률 99% https://minkyu0424.github.io/studyWithMe/ StudyWithMe minkyu0424.github.io 1. variables console을 통해 숫자 또는 문자를 입력받거나 출력하게 된다면, 일일이 숫자를 작성하고 수정해야 한다. 너무 많은 시간과 에너지를 소모하게 된다. 따라서 변수 사용 a+b한 후 매번 a와 b값을 변경하도록 한다. ex) const a=1; / co..
오래간만에 글 저장 안 하고 신나게 쓰다가 음악 바꾸려고 뒤로 가기 잘못 눌러서 두 번째 쓴다 ^_^ 몸뚱이야 미안해 뇌가 실수했어. 1.API(어플리케이션 프로그래밍 인터페이스) 맨 마지막에 인터페이스는 무엇일까 UI 유저 인터페이스도 많이 들어봤는데... 상호(사물-사물 또는 사물-인간 인간-인간) 간의 소통을 위해 만들어진 접점이라고 생각하면 편하다.리모컨을 생각해보면, 우리가 TV보고 음량을 키워!라고 한다 해서 음량은 커지지 않을 것이다.(음성인식 배제)리모컨 음량 버튼을 누르면 소리가 커지고, 여기서 리모컨이 인터페이스의 기능을 한다. (하드웨어적인 인터페이스)+ 배달앱 같은 경우는 소프트웨어 인터페이스라고보면 된다. + 위에서 내가 궁금한 UI의 경우 사용자가 사용하는 인터페이스이다. 인터페..
최근에 잠들기 전 영화를 가끔 보곤 한다. 하나에 오래 집중 못하고, 금세 졸려서 이용하는 방법이다. 강의에서의 코드 캡쳐본은 내가 듣는 강의인 짐코딩에서 가져왔다. https://www.youtube.com/channel/UCZ30aWiMw5C8mGcESlAGQbA 짐코딩의 CODING GYM 실용적인 코딩채널 CODING GYM 💪🏋️♀️ 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 【광고 및 제휴 문의 😙】 👉 bruce.lean17@gmail.com 【커피 한잔 후원 🙂】 👉 https://toon.at/donate www.youtube.com 내 기억이 맞다면 과거 await async, arrow function을 복습하는 과정 중에 this를 봤었다. 그..
