본문 바로가기

분류 전체보기

 (99)
[Node.js] NVM: 미즈마블 말고, 미즈노드! Node.js 버전 여행 ⚡️nvm, 놀라운 미즈노드 nvm(Node Version Manager)은 node.js 의 다양한 버전을 쉽게 설치하고, 사용할 수 있도록 하는 매니저이다. npm으로 node.js 기반의 다양한 패키지들을 다운받고 버전을 관리할 수 있다면, nvm은 node.js을 다운받고 관리하도록 해주는 것이다. 여기서도 슬프게도, 윈도우 환경에선 nvm을 사용할 수 없다고 한다.... 애도 물론 nvm이 아니더라도 node.js는 설치할 수 있다. 하지만 여러가지 node.js를 왔다갔다하며 개발이 필요한 경우, nvm이 엄청난 위력을 발휘한다. 예를 들어 다른 사람이 15.15.5버전으로 개발한 문서를 내 컴퓨터에서 git을 받아서 작성하려한다. 근데 현재 내 컴퓨터의 node.js버전은 16.16.0버전이..
[Node.js]Node.js와 javaScript의 차이 🏃🏻‍♀️런타임(runtime)이란 프로그램이 구동되는 환경, 즉 어떤 코드가 동작할 때, 이 코드를 실행시켜주는 수단(도구,프로그램)을 런타임이라고 한다. 💡Node.js = Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임 node.js는 자바스크립트 프로그래밍 언어로 작성된 코드를 컴퓨터에서 구동시켜주는 프로그램이다. 다시 말해, node.js는 자바스크립트 코드를 읽고 실행시켜주는 "런타임"인 것이다. 💻브라우저 안에도 JavaScript 런타임이 내장되어 있다. 이렇게 자바스크립트를 실행시켜주는 런타임이 Node.js만 있는 것은 아니다. 우리가 자바스크립트로 작성된 코드를 크롬이나 사파리 등의 브라우저 개발자 창에서 테스트할 수 있는것은, 브라우저 안에 자바스크..
macOS 터미널로 개발 시작하기 🦋맥에서 터미널 열기 맥에서 터미널을 열려면 두가지 방법이 있다. 런치패드를 누르고 검색창에 'terminal' 입력 or 런치패드 > 기타 > 터미널 클릭 cmd + 스페이스바 > 'terminal'입력 이렇게 터미널에 접속하고 나중을 위해서 하단 독바에 끌어다 저장해놓으면 편하게 가져다 쓸 수 있다. 🦋여러가지 CLI 명령어 pwd print workin directory / 현재 위치 확인 mkdir [폴더명] make directory / 폴더 만들기 li -l 로 확인 : 소유자 = 사용자 sudo mkdir [폴더명] 관리자 권한으로 폴더만들기 li -l 로 확인 : 소유자 = root touch [파일명] 파일 만들기 ls list / 현재 폴더에 들어있는 파일과 폴더 확인 ls -a all..
맥북 살거 아니면 우분투를 설치하라고? ⚡️기초 지식 1: 리눅스란 운영체제 리눅스란 윈도우나 MacOS 같은 컴퓨터의 운영체제(Operating System)이다. 운영체제란 간단히 말하면 컴퓨터 하드웨어를 구동하고 사용자의 요청을 받아 여러가지 응용프로그램을 실행시키는 프로그램을 말한다. 크롬 아이콘을 눌러서 크롬을 킬때, 운영체제가 요청을 알아듣고 브라우저를 가동하는 것이다. 우리가 pc를 사용할때 가장 밑바닥부터 일하는 고인물이라고 할까... ⚡️기초 지식 2: 리눅스의 다른맛들 디스트로 리눅스는 오픈소스(Open Source), 다시 말해 소스가 대중들에게 오픈되어 있다. (MacOS나 Window는 클로즈드 소스) 때문에 대중들은 소스가 무엇을 하는건지 들여다볼 수 있고, 그렇게 많은 사람들이 참여해서 개선하고 새롭게 배포할 수 있..
[코드스테이츠 FE 부트캠프 40기] 10일차 🔍배운 내용들 Command-Line Interface 리눅스 터미널을 실행할 수 있다. CLI를 이용한 작업과 GUI를 이용한 작업이 동일함을 이해할 수 있다. 리눅스 터미널에서 기본적인 명령어를 사용할 수 있다. 명령어를 사용할 때, 등장하는 키워드에 대해 이해할 수 있다. 관리자 권한을 이해할 수 있다. 절대 경로와 상대 경로의 차이를 이해할 수 있다. 텍스트 에디터 nano를 이용해 파일을 수정하고, 저장할 수 있다. 패키지와 패키지매니저 패키지와 패키지 매니저 필요성을 이해할 수 있다. 각 운영체제에 맞는 패키지 매니저를 사용할 수 있다. node.js nvm, Node.js, npm을 설치하고, 버전을 확인할 수 있다. 명령어 node를 이용해 JavaScript 파일을 실행할 수 있다. 과..
[코드스테이츠 FE 부트캠프 40기] 9일차 🔍배운 내용들 페어님과 함께 계산기 자바스크립트 코드를 받아 빈 부분을 채워 코드가 작동되도록 하는 챌린지를 받았다. 단계는 bare minimun, advanced, nightmare 세단계로 점점 올라가는데, 갈수록 추가해야할 조건이나 기능이 많아진다. 재밌게 진행하였으나 시간내에 nightmare까지는 다 풀지 못해서 추가로 공부가 필요하다. 코드를 어떻게 하면 깔끔하게 짤 수 있을까 생각하는 습관이 중요한 것 같다. 함께 알아보기 쉽도록! 결국 혼자할 수 있는 일은 아무것도 없으니, 내가 짠 코드를 남에게 충분히 이해시킬 수 있을 정도까지 완벽히 숙지하고 내 머리속에서 정리되도록 해야겠다. 계산기 로직에 대한 추가 학습 내용은 차차 아래에 링크로 추가하겠다.
[React] onClick 이벤트가 렌더링할 때 자동 호출 되는 문제 💥문제발생 onClick 이벤트로 함수를 전달하고자 하는데, 아래와 같은 식으로 작성하니 화면이 처음 랜더링 할때 함수가 실행되는 현상이 발생하였다. (함수는 writeConsole이라고 간단하게 콘솔창에 메세지만 띄우는 함수로 대체한다.) import React, { Component } from "react" class Message extends Component { writeConsole = string => {console.log(string)} render() { return (버튼) } } export default Message 이렇게하고 보니 처음 화면이 render할때만 함수가 실행되면서 콘솔창에 메세지가 뜨는 것이 아닌가. 그리고 버튼을 누르면 제대로onClick 함수가 자동하지 않았..
[코드스테이츠 FE 부트캠프 40기] 6일차 🔍배운 내용들 CSS 기초 CSS의 사용 목적을 이해한다. CSS의 기본 문법과 구조를 이해한다. CSS를 HTML에 적용하는 방법에 대해서 이해한다. HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다. CSS를 이용해 텍스트를 꾸밀 수 있다. CSS에서 쓰이는 단위를 기억하고, 각 단위가 적합한 경우를 구분할 수 있다. MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다. 박스모델 CSS 박스 모델을 이해할 수 있다. 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다. margin, border, padding, content 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다. CSS selector 다..
[javaScript] for문과 제곱근 사용해서 소수인지 알아내기 1.문제 발생 for문을 활용해서 인자로 들어온 수가 소수인지 알아내서 소수가 맞다면 true, 소수가 아니라면 false를 return하는 문제가 있었다. 애초에 소수가 무엇인지만 알면 풀 수는 있지만, 잘! 풀기 위해선 좀더 생각해볼 소수의 특징들이 있어서 그걸 정리해봐야겠다 싶었다. 2.필요 개념 소수란 1과 자기 자신만을 가지는 정수를 말한다 소수의 특징 -1은 소수가 아니다. -2는 소수이다. -2를 제외한 짝수는 모두 소수가 아니다. -다시말해, 2를 제외한 모든 소수는 홀수이다. 3.문제 해결 방법01. function isPrime(num) { if (num===1){ //거름망01: 1은 소수가 아니다 return false } if(num===2){ //거름망02: 2은 유일한 짝수인 ..
[코드스테이츠 FE 부트캠프 40기] 5일차 오늘은 한박자 쉬어가는 타임으로 html에대해 배웠다. 🔍배운 내용들 웹 개발 이해하기 웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다. VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다. VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다. HTML 기초 HTML을 CSS를 적용하고, JavaScript로 개발할 수 있게(Programmable) 작성할 수 있다. HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다. HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다. 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다. , 요소가 무엇이고, 어떤 차이가 있는지 설..

티스토리툴바