TopCode

📒 JS 객체(Object) prototype이 붙어있지 않은 메소드는 정적 메소드(정적 static) Object.assign(대상객체, 하나 이상의 출처 객체..) : 열거할 수 있는 하나 이상의 출처 객체로부터 대상객체로 속성을 복사할 때 사용합니다. 대상객체를 반환합니다. 두 객체를 병합해서 새로운 객체 반환. 출처객체 내용이 대상객체에 덮어씌워짐. 출처객체 → 대상객체. Object.assign(대상객체, 출처객체) https://developer.mozilla.org/ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Object Object | MDN Object 생성자는 객체 래퍼(wrapper)를 생성합니다. developer.mozill..

✏️ JS 배열(Array) - 1 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org JS의 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 따라서 밀집도가 보장되지 않습니다. 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요. // 배열 // 제로베이스. // 인덱스 : 배열 내 순서 // element(요소), item : 배열 내 요소 const numbers = [1, 2, 3, 4] const..

🍋 JS 숫자 데이터 toFixed() : 괄호 안에 숫자만큼의 소수점 뒷자리까지 문자로 바꿈 parseInt() : 문자열을 정수로 변환 parseFloat() : 문자열을 실수로 변환(소수점 단위 포함) const pi = 3.14159265358979 console.log(pi) const str = pi.toFixed(2) // 소수점 뒷자리까지 문자로 바꿈 console.log(str) console.log(typeof str) // 전역함수 // setTimeout, setInterval, clearTimeout, clearInterval const integer = parseInt(str) // 문자열을 정수로 변환 const float = parseFloat(str) // 문자열을 실수로 ..

🎃 JS 문자데이터 문자 데이터 종류 String: "", '', `` Number Boolean: true, false undefined null Array: [] Object: {} 🎃 String - JavaScript/MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 리터럴 : '' {} [] 기호를 통해서 데이터를 손쉽게 만드는 방법 브라켓([ ]) 표기법을 사용하여 문자에 접근하는 경우 , 이러한 프로퍼티들에 새로운 값을 할당하거나 삭제할 ..

🧀 1. 생성자 함수(prototype) Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사되는 것이 아님을 재차 언급합니다. 체인(-)을 타고 올라가며 접근할 뿐입니다. 같은 내용의 메소드가 반복되면 클래스를 활용! const heropy = { firstName: 'Heropy', // 속성 혹은 멤버 lastName: 'Park', getFullName: function () { // 메소드 return `${this.firstName} ${this.lastName}` // this : 현재 객체를 지칭 } } console.log(heropy) console.log(heropy.getFullName(..

🍯 조건문 if, else import random from './getRandom' // 조건문 (If statement) // console.log(random()) const a = random() if (a === 0) { console.log('a is 0') } else if (a === 2) { // if 조건이 false일때 넘어옴. console.log('a is 2') } else if (a === 4) { // 맞으면 나머지 무시. console.log('a is 4') } else { console.log('rest...') } 🍯 조건문 Switch 조건문 (Switch statement) 깔끔해보이지만 수직으로 길어짐. 값이 하나로 딱 떨어질 때 사용하면 효율적. import r..

🍋 ECMA Script 개요 자바스크립트 국제 표준화 기구 2015년도에 6버전이 나오면서 JS의 전성기가 시작됨. 클래스와 모듈같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가 프로젝트가 어떤 버전을 적용하는지 확인하기 최신버전에서 구버전에서도 구동될 수 있도록 해주기도 함. 'JAVA' 와는 다른 새로운 문법. 자바와 직접적인 관계가 없음. https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 ECMA스크립트 - 위키백과, 우리 모두의 백과사전 ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 ..

https://toproot.tistory.com/35 [Node.js] Node 설치방법과 NVM 사용법 정리 ☘️ Node.js 개요 Node.js 란? Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. 런타임 : 프로그램 언어가 동작하는 환경 JS : 프로그래밍 언어 변환의 필요성 Node.js 환경 : 자바스크립트라는 프로.. toproot.tistory.com 🍀 NPM 개요 NPM NPM(Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리 npm 생태계에는 여러가지 패키지들이 담겨있음. npm install로 이러한 패키지(모듈)들을 설치해서 사용 가능. 모듈 패키지들을 모듈과 같이 사용해서 프로젝트에 적용 ..

☘️ Node.js 개요 Node.js 란? Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임. 런타임 : 프로그램 언어가 동작하는 환경 JS : 프로그래밍 언어 변환의 필요성 Node.js 환경 : 자바스크립트라는 프로그래밍 언어를 활용해서 HTML,CSS로 변환하여 브라우저에 출력 ☘️ Node.js 설치 LTS(Long Term Supported)는 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전으로, 유지/보수와 보안(서버 운영 등)에 초점을 맞춰 대부분 사용자에게 추천되는 버전입니다. (짝수버전, 연습용으로는 권장) 현재버전 : 최신기능을 사용할 수 있지만 자주 업데이트가 되기 위해서 안정적이지 못할 수 있다. https://nodejs.org/ko/ Nod..

🔍 진정한 개발자가 되기위해서 오픈소스랑 친해지기! 취업준비를 해서 현업을 가게 되면 실제로 바닥부터 코드를 짜는 경우는 매우 적다고 합니다. 보통 그 회사에서 개발중인 서비스개발에 참여하거나, SI와 같은 명세서에 따른 프로그래밍을 하게 되는데, 이러한 회사에서 사용되는 대부분의 코드들은 오픈소스를 사용하고 있습니다. 따라서 진정한 개발자가 되려면 오픈소스가 무엇인지 알고, 어떻게 활용하는지 알면 알수록 매우 도움이 되기 때문에 오늘은 오픈소스에 대해 RedHat사이트를 통해 공부를 해보려고 합니다! https://www.redhat.com/ko/topics/open-source/what-is-open-source 오픈소스란? 오픈소스란 오픈소스 소프트웨어(Open Source Software, OSS..

📬 Git 이란? Git(깃)은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에, 해당 파일 작업을 조율하기 위한 대표적인 버전관리 시스템(VCS)입니다. Download for MacOS http://git-scm.com/download/mac Git - Downloading Package Download for macOS There are several options for installing Git on macOS. Note that any non-source distributions are provided by third parties, and may not be up to date with the latest source release. Homebrew Install homebrew if ..

🌈 HTML, CSS, JS로 만드는 간단한 클론코딩 예제 HTML,CSS에 대한 기초 수업을 들으며 그동안 공부했던 웹기초를 다시 복습했다. 기존에 ssafy 수업에서는 빠르게 넘어간 부분이기도 하고, 웹의 기초인데 공부가 부족했다는 느낌이 들어서 꼼꼼히 다시 복습했다. HTML과 CSS,JS를 연결하고 색상,위치조정등을 Bootstrap이나 Vuetify를 사용하지 않고, 조금 원시적인지만 하나씩 채워나가다 보니 기존에 사용했던 패키지들이 어떻게 작동하고 있었는지 왜 그러한 코드들이 필요했는지에 대한 이해가 되기도 하였다. ☕️ 다양한 반응형 효과들이 들어간 스타벅스 홈페이지 처음 완성된 예시 화면을 보았을 때는 bootstrap의 nav, parallax 등과 같은 컴포넌트들이 생각이 나서 과연 저..

🌐 React로 만드는 Tic Tac Toe React 공식 홈페이지의 튜토리얼에 따라서 코딩을 해봄으로써 기본적인 CRUD 기능 구현을 익힘 https://ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1. 기본구조 초기코드는 공식문서에서 제공 index.js는 3개의 클래스로 구성 Square Board Game 2. Props를 통해 데이터 전달하기 부모 Board 컴포넌트에서 자식 Square 컴포넌트로 "prop" 전달. Board class Board extends React.Component { renderSqua..

🧑🏻‍💻 Mac M1 사용현황 M1을 개발용으로 사용한지 6개월정도가 되었습니다. 그동안 학습하면서 여러가지 프로그램도 다운받고 프레임워크들도 사용하였는데, 어느 순간부터인지 터미널에서 프로젝트를 빌드하거나 다운로드할 때 속도가 처음 사용할때보다 많이 느려지고 있는 것을 체감하게 되었습니다ㅠ 따라서 구글링으로 여러가지 방법들을 시도해보았는데, 그중에서 효과가 있는 방법을 정리해보겠습니다. 🚑 1. 내 컴퓨터에 쌓여있는 로그 기록들 지워주기! 우리가 여러가지 작업을 할때 컴퓨터는 나도 모르는 새애 특정 작업을 하기도 합니다! 그 중에서 로그 기록을 예로 들 수 있는데요. 오래 사용하다보면 이 기록들이 쌓여져 용량을 차지하기 때문에 속도저하가 나타날 수 있습니다. 따라서 아래와 같은 방법으로 지워주시면 됩니..

🧑🏻‍💻 티스토리의 밋밋한 코드블럭을 뜯어고쳐보자! 기존의 티스토리 코드블럭은 회색의 밋밋한 블럭이었기에.. 프로 개발자 같은 코드블럭을 만들어보겠습니다. 주의! 시작하기전에 플러그인의 Syntax Highlight를 '해제' 해주시기 바랍니다. 🏄🏻‍♂️ highlight.js 사이트에서 CDN 방식으로 설치하기 공식 홈페이지를 참고하여 아래의 코드를 HTML 편집 > 태그 안쪽에 작성해주시기 바랍니다. 공식 사이트 : highlightjs.org/ 저는 zenburn 테마를 사용하였는데요! 다른 테마를 사용하고 싶으시면 아래 사이트에서 테마 이름을 복사한뒤 위의 1번 코드 맨 뒷부분 zenburn부분을 지우고 원하는 테마이름을 작성해 줍니다. 여기서 주의할점! Theme 이름은 소문자로, 띄어쓰기는 ..

🌈 매일 보는 터미널 눈이 즐겁게 꾸며보자! 기존에 사용하는 터미널은 꾸미는 데에 한계가 있기 때문에, iTerm2 터미널을 설치해주어서 그 터미널을 커스텀 하는 방법입니다. 아래의 방법을 천천히 따라해보세요! 🛠 iTerm2 설치 간단하게 사이트에 접속해서 다운로드 받으시면 됩니다. https://iterm2.com/ iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain iterm2.com 🛠 zsh 설치 zsh를 설치하기 전에 Homebrew를 먼저 설치해 ..

🧑🏻‍💻 한 달 동안 프론트엔드 마스터하기? ssafy 1학기가 끝나고 6월 jop pair가 시작되었다. 일주일의 휴식기를 가지고 이번주 월요일부터 계절학기가 시작되었는데, 7월 동안 프로젝트 기간이 시작되기 때문에 이 기간을 통해서 프론트엔드 공부를 조금 더 탄탄하게 다지고 싶어서 공부방법을 생각해보았다. 주변 동기 중에는 youtube나 공식문서를 통해서 react공부를 목표로 삼았는데, 한 달이라는 기간인 만큼 조금 더 기초부터 다시 다지는 시간을 가지고 싶어서 검색을 통해 FastCampus "한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online."을 수강하기로 했다. (광고아님ㅋㅋ) https://fastcampus.co.kr/dev_online_frontend 한 번에 끝내는 프론트엔드..

📌 Netlify란? WebProject를 만들고 배포할 때 더욱 쉽게 할 수 있도록 도와주는 사이트입니다. 보통 Project를 배포하고 여러 가지 변경사항이 존재할 때 그 변경사항들을 관리하는 일이 쉽지 않았습니다. 하지만 Netlify는 쉽게 배포를 도와주면서 변경사항도 자동으로 적용해주어 웹사이트의 유지보수도 용이하게 도와줍니다. Github를 이용한 간단한 배포방법! Netlify를 이용해서 배포를 할 때 필요한 것은 Github 아이디만 있으면 됩니다. https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuit..

🌲 트리(Tree) 개념 트리는 비선형 구조로 원소들 간에 1:N 관계를 가지는 자료구조입니다. 원소들 간에 계층 관계를 가지며 상위 원소에서 하위원소로 내려가면서 확장되는 트리(나무) 모양의 구조입니다. 용어 루트(root) : 노드 중 최상위 노드 노드(node) : 트리의 원소 간선(edge) : 노드를 연결하는 선, 부모 노드와 자식 노드를 연결 루트 노드(root node) : 트리의 시작 노드(부모가 없는 노드) 잎 노드(leaf node) : 단말 노드(자식이 없는 노드) 차수(degree) : 노드의 차수는 노드에 연결된 자식 노드의 수 단말 노드(리프 노드) : 차수가 0인 노드, 자식 노드가 없는 노드 노드의 높이 : 루트에서 노드에 이르는 간선의 수. 노드의 레벨 트리의 높이 : 트리..

🎱 파이썬 SWEA-Problem[D-2] 1974.스도쿠 검증 주어진 9X9 배열을 가지고 스도쿠 검증을 합니다. 올바른 스도쿠 퍼즐일 경우 1을, 아닐경우 0을 출력합니다. 💡 아이디어 가로/세로, 블럭을 구분해서 카운팅정렬을 사용하여 스도쿠 퍼즐을 검증합니다. 가로와 세로는 하나의 for문으로 검증가능하여 한번에 검사하고, 블럭은 새로운 for문을 이용합니다. 검증의 용이성을 위해 sdoku 함수를 만들어 리스트와 num(1~9)를 입력받아 사용합니다. 🎲 파이썬 코드 ※ SW Expert 아카데미의 문제를 무단 복제하는 것을 금지합니다. > 문제보기 T = int(input()) # 스도쿠 검사하는 함수 def sdoku(list, nums): check = [0 for _ in range(9)]..

✍🏻 K-MOOC 강의 듣기 도전! 비전공자 입장에서 IT교육을 받고 언어나 알고리즘 공부도 중요하지만 CS관련 지식도 IT업계에 진출(?)하기 위해서는 필수적인 부분이기 때문에 틈틈이 공부해야 합니다. 류쌤의 추천으로 '빅데이터와 머신러닝 소프트웨어'수업을 듣기 시작했는데, 서울대 교수님의 수업을 온라인으로나마 들을 수 있어서 두근거리면서 기대가 되었습니다. 오늘은 강의에 대한 소개를 간단하게 해보려고 합니다! 📔 강의소개 빅데이터와 머신러닝 소프트웨어는 다양한 데이터를 분석하고 예측 모델을 만드는 소프트웨어이다. 첫째, 다양한 빅데이터 분석 방법 (배치 처리, 스트림 처리, 인터액티브 질의, 그래프 처리 등)을 학습한다. 배운 개념을 활용하여 스파크/하둡 기반으로 실제 데이터 분석을 어떻게 하는지 학..

🔎 DFS DFS(Depth-First Search)는 그래프의 깊은 부분부터 우선적으로 탐색하는 알고리즘 노드와 간선으로 이루어진 그래프 구조에서 시작점을 기준으로 인접 노드의 깊은 부분부터 탐색하는 알고리즘 입니다. DFS는 스택자료구조를 이용하여 인접 노드의 방문여부를 체크하고 모든 노드를 방문한 즉, 노드의 깊은부분에 도달하면 스택에서 상단 노드를 pop 하는 방식으로 목표 노드를 탐색합니다.메모리 효율적인 부분에서 그래프는 인접리스트 방식이 더 우월하지만, 특정한 두 노드의 연결정보를 얻기 위해서는 인접행렬방식이 더욱 유리합니다. 🔍 BFS BFS(Breadth First Search)는 너비우선탐색으로 가까운 노드부터 탐색하는 알고리즘 너비우선탐색인 BFS는 DFS와 다르게 큐(Queue)자료..

🚛 파이썬 SW문제해결 기본 - 큐(Queue) 주어진 N개의 수를 다음과 같은 조건을 통해 8가지 암호를 만드는 문제입니다. 조건은 주어진 N개의 수를 큐(Queue)라고 생각하고 맨앞의 수에서 1~5를 순서대로 뺀 후 큐의 맨 뒤에 append하는 싸이클입니다. 💡 아이디어 큐, 8개의 숫자 중 첫번째 숫자를 1~5씩 마이너스하는 싸이클을 돌며 8개의 한자리 수가 남을 때까지 반복하고 맨 마지막 자리가 0이면 종료 반복횟수가 정해지지 않았으므로 while을 사용해서 반복. 맨앞자리가 계속해서 뒤로 가므로 슬라이싱을 이용하여 배열을 다시 만들어줌. 맨 뒷자리가 0이 되었을때 break로 탈출. while문 탈출할때 for문한번 나오고 또 나와야 하므로 check라는 종료조건 생성. 🎲 파이썬 코드 ※ ..

🚛 파이썬 SW 문제해결 기본 - Stack2 주어진 계산식을 1) 후위표기식으로 변경하고 2) 그 표기식을 계산하는 문제입니다. 연산자는 +, * 두 가지이고, 괄호의 유효성여부는 항상 옳은 경우만 주어집니다. 💡 아이디어 문제 그대로 후위표기식으로 주어진 문자열을 변경하고, 계산해주는 함수를 만들었습니다. 후위표기식 변경 시 숫자는 그대로 append하고 문자는 '(', '+', '*', ')' 에 대한 조건을 각각 만들어 스택에서 연산자 우선순위를 반영하는 코드를 만들었습니다. 후위표기식으로 바꿔서 계산하기, +, *, (,) 괄호는 항상 유효. 피연산자 0~9 + : 괄호가 없으면 스택에 있는 것들 pop, 괄호있으면 append * : 괄호가 없으면 스택에 있는 '*' 모두 pop, 괄호있으면 ..

🚛 파이썬 SW문제해결 기본 - Stack2 NxN 배열에서 세로당 하나의 숫자를 선택해 모두 더했을 때 최소의 합을 구하는 문제입니다. 같은 세로열에서 2개의 숫자를 선택할 수는 없습니다. 💡 아이디어 순열과 조합 문제, DFS를 구현하여 풀고 계산량을 줄이기 위해 가지치기 사용합니다. 가지치기를 하지 않으면 계산량초과로 오류가 발생하기 때문에 유의하여야 합니다. 한 세로열 당 방문함을 체크하고 다음 열로 넘어가는 코드를 신경써서 배치하였습니다. 백트래킹을 사용하여 좀 더 효율적인 코드를 완성하였습니다. 🎲 파이썬 코드 ※ SW Expert 아카데미의 문제를 무단 복제하는 것을 금지합니다. # TODO Learn 4881 배열최소합. def per(k, midV): # 최솟값 가져오기. global m..

🚛 파이썬 SW문제해결 기본 - Stack2 가위바위보할 상대를 구할 때 주어진 카드 순서를 절반씩 나누어 토너먼트 형태로 시합 대진을 구성하는 문제입니다. 최종적으로 상대가 나눠지게 되면 가위바위보를 진행하고 최종적으로 승자를 가려내어 출력합니다. 💡 아이디어 반복되는 작업을 함수와 재귀를 활용해서 해결합니다. 범위를 둘로 나눌때 구간을 잘 나누어 주어야 겹치는 부분이 발생하지 않습니다. 🎲 파이썬 코드 ※ SW Expert 아카데미의 문제를 무단 복제하는 것을 금지합니다. # TODO 4880 토너먼트 가위바위보 def game(i, j): # 종료조건..점점 줄어들기 때문에 자신과 같아지면 i 출력 if i == j: return i # 게임을 시키는 범위. # 범위를 둘로 나눠서 재귀를 돌림.. ..

🚛 파이썬 SW문제해결 기본 - Stack2 델타값과 스택을 활용해서 상하좌우 4방향을 체크하는 문제입니다. 델타값을 이용해서 4방향을 체크할때에 배열의 범위를 벗어나지 않도록 체크하는 것이 중요합니다. 💡 아이디어 DFS 알고리즘을 기반으로 미로의 시작점에서 부터 4방향을 체크해가며 목적지를 찾아나가는 방식으로 코드를 구성했습니다. Stack에는 이동가능한 곳들을 담아주고 방문한 곳은 기본 배열에서 0으로 초기화 되어있던 것을 1로 바꾸어줍니다. 계속해서 이동하며 목적지인 3에 도착하면 break하여 반복문을 빠져나옵니다. 🎲 파이썬 코드 ※ SW Expert 아카데미의 문제를 무단 복제하는 것을 금지합니다. """ - 문제 미로 : 2(출발), 3(도착), 0(통로), 1(벽) 도착할 수 있으면 1 ..

🚛 파이썬 SW문제해결 기본 - Stack2 스택을 활용한 후입표기법 계산기 만들기 문제입니다. 후입표기법으로 주어진 문자열을 계산만 하면 되는 문제이기 때문에 크게 어렵지 않은 문제였습니다. 💡 아이디어 숫자와 문자열을 구분하는 isdigit, isalpha 메소드를 활용합니다. 전체적으로 숫자일때와 문자열일때를 구분하고 문자열안에서는 '.'를 기준으로 조건문으로 나눠주었습니다. 💻 파이썬 코드 ※ SW Expert 아카데미의 문제를 무단 복제하는 것을 금지합니다. T = int(input()) for tc in range(1, T+1): lst = list(map(str, input().split())) Stack = [] for i in range(len(lst)): # 숫자일 경우.. if lst..

🔐 macOs Big sur 11.2.1 이번 맥 OS 업데이트가 진행된 이후에 파이참 실행시에 오류가 발생했습니다. xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun 저도 갑작스런 오류에 많이 당황했는데요! 간단하게 해결할 수 있는 방법을 알려드리겠습니다. 터미널에 코드작성 xcode는 애플이 개발한 OS X의 개발 툴 모음입니다. 이번 업데이트가 되면서 xcode 부분이 리셋되었거나 지워져서 발생하는 문제인데요! 터미널을 클릭하시고 아래와 같은 코드를 복사 붙여넣기하여 xcode를 설..

알고리즘 문제를 풀때 기본이 되는 개념은 정렬(Sort)입니다. 대부분 input값을 입력받고 output을 내야하는 문제상황속에서 내가 원하는 결과를 내기 위해서는 입력받은 자료를 문제를 풀기위한 구조로 재배열하는 작업이 필수적이기 때문입니다. 정렬에는 여러종류가 있지만 그 중에서 기초적인 개념 '버블 정렬', '카운팅 정렬'에 대한 내용입니다. 📌 정렬의 종류 버블 정렬(Bubble Sort) 카운팅 정렬(Counting Sort) 선택 정렬(Selection Srot) 퀵 정렬(Quick Sort) 삽입 정렬(Insertion Sort) 병합 정렬(Merge Srot) 시간복잡도 빅오 O() 시간복잡도를 확인하고 상황에 맞는 정렬을 사용하자! 많은 양의 데이터들을 다루다보면 그 데이터들을 연산하는 ..