본문 바로가기

전체 글393

[모던JS] 006. [기본] 코드 구조(문, 주석) 원문이 문서에서는 코드 블록을 만드는 방법에 대해 다룬다.문(statement)문의 의미어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 말함.alert('hello, world!')와 같은 것이 문이다.문을 작성하는 방법세미콜론(;)으로 구분세미콜론을 작성하지 않으면 코드가 끝나지 않았다고 생각되어 에러가 발생할 수 있음.세미콜론에 대해서는 아래에서 추가적으로 다룸.가독성을 위해 하나의 문은 한 줄에 작성하기// 바른 예alert("hello");alert("world");// 에러 예제 1alert("에러가 발생합니다.")[1, 2].forEach(alert) // 단일 문으로 인식// 에러 예제 2alert("에러가 발생합니다.")[1, 2].forEach(.. Programing/JavaScript 2024. 3. 25.
[모던JS] 005. [기본] Hello, world!(JS 작성법, 내외부 스크립트) 원문script 태그자바스크립트의 코드는 HTML 문서에서 사용하는 방법이 두 가지가 있다.HTML 태그 내에서 모던 마크업HTML의 그런데 태그 내부에 자바스크립트 코드를 직정 작성하는 방식은 스크립트가 간단할 때만 사용한다.대부분은 별도로 외부 스크립트를 작성해서 불러온다고 생각하면 좋다.이유는 한 두개의 페이지가 아니라 웹 사이트는 여러 페이지에서 동일한 스크립트를 사용하기 때문에 매번 같은 코드를 작성하는 것도 번거롭고 수정도 불리하다. 그리고 가장 큰 문제는 스크립트를 별도 파일로 저장해서 불러오면 캐시(cache)에 저장하기 때문에 페이지를 새로고침 했을 때 다시 불러오지 않아 스크립트 파일을 한 번만 불러와 로딩 속도에서 유리하다.정리HTML 내부에서 자바스크립트를 사용할 때, 또는 외부 .. Programing/JavaScript 2024. 3. 25.
[모던JS] 004. [소개] 개발자 콘솔 원문개발자 콘솔이란?웹 브라우저들에는 자체적인 개발자 도구가 있다. 특히 Chrome이나 Firefox가 그 성능이 우수하다.윈도우 기준 F12를 누르면 개발자 콘솔이 뜬다. 여기에서 코드의 어느 라인에서, 어떤 에러가 발생했는지 메시지를 보여준다.다른 브라우저들도 개발자 도구가 있지만 성능이 Chrome이나 Firefox만 못하다.웹 페이지가 로드되었을 때 이 페이지에서는 에러 내용이 보이지 않는다. F12를 눌러 개발자 콘솔을 열어 콘솔창을 확인해야 비로소 에러 메시지가 출력된다.ChoromeF12를 누르면 개발자 도구가 열린다. 콘솔에서 에러 메시지와 에러가 발생한 코드의 라인을 알 수 있고, 직접 코드를 타이핑 해볼 수 있다. 당연히 여기서 타이핑한 코드는 HTML이나 JS파일에 저장되는 것이 아.. Programing/JavaScript 2024. 3. 25.
[모던JS] 003. [소개] 코드 에디터 원문코드 에디터란?코드 에디터는 개발자가 코드 입력을 도와주는 프로그램을 말한다.크게 통합 개발 환경(IDE)와 경량 에디터로 나뉜다.통합 개발 환경(Integrrated Development Environment, IDE)통합 개발 환경(Integrrated Development Environment, IDE)는 버전 관리 시스템, 테스팅 환경 등 프로젝트 수준의 작업을 할 수 있게 해주고 프로젝트에 기반한 자동완성 기능도 제공한다.대표적으로 MS의 Visual Studio가 있다. Viscual Studio Code는 경량 에디터이다.경량 에디터통합 개발 환경보다 라이트한 버전이지만 속도가 빠르고 단순하다는 장점이 있다.경량 에디터와 IDE와의 큰 차잉점은 IDE는 프로젝트 수준에서 작동한다는 점이다.. Programing/JavaScript 2024. 3. 25.
[모던JS] 002. [소개] 매뉴얼과 명세서 원문명세서ECMA-262 명세서(specification)는 자바스크립트와 관련된 가장 심도있고 상세한 정보를 담고 있는 공식문서이다. 매년 새로운 버전이 나오지만 초보자가 이 내용을 이해하기는 쉽지 않다.매뉴얼MDN JavaScript Reference는 모질라 재단에서 운영하는 사이트이다. 특정 함수나 메서드에 대한 깊이 있는 정보를 얻고 싶다면 이 사이트가 좋다.이 사이트에서 직접 원하는 내용을 찾아도 되지만 구글에 'MDN 원하는 용어'로 검색해도 MDN 사이트의 자료가 나오기 때문에 이런 방법도 학습에 좋다.호환성 표자바스크립트는 계속 신기능이 나오고 보완되는 언어이다. 따라서 웹 개발자가 사용자의 브라우저별로 이 기능이 호환이 되는지 체크해야 할 필요가 있다.두 개의 사이트가 대표적이다.can.. Programing/JavaScript 2024. 3. 25.
[모던JS] 001. [소개] 자바스크립트란? 원문정의자바스크립트란?자바스크립트(JavaScript)란 웹페이지에 생동감을 불어 넣기 위해 만들어진 프로그래밍 언어이다.자바스크립트는 최초 LiveScript라는 이름으로 불렸다. 그러나 당시에 Java라는 프로그래밍 언어가 인기가 좋았기에 이에 편승하기 위해 자바스크립트라고 이름을 바꾸었다.스크립트란?스크립트(script) : 자바스크립트로 작성한 프로그램을 스크립트라고 부른다.스크립트는 HTML로 작성된 웹 페이지의 HTML 안에 작성할 수 있는데 웹 페이지를 불러올 때 스크립트가 자동으로 실행된다.스크립트는 다른 언어처럼 별도의 컴파일이 필요 없다.자바스크립트의 동작자바스크립트는 웹 브라우저에서 실행할 수 있고, 서버에서도 실행할 수 있다. 그리고 자바스크립트 엔진(JavaScript Engine.. Programing/JavaScript 2024. 3. 23.
[ONEBITE-REACT] 021. JS 심화 - 배열 메서드 2. 순회와 탐색 이번 강의에서는 배열을 순회하고 탐색하는 메서드 5가지에 대해 학습한다. forEach 개념 모든 요소를 순휘하면서 각각의 요소에 특정 동작을 수행시키는 메서드이다. 기본형 배열명.forEach(element, index, array)(function() {};) 배열의 모든 값을 하나씩 순회하면서 출력한다. forEach에 콘솔에 출력하는 기능을 넣는다거나 특정 동작을 배열의 값마다 순회하면서 동작하게 하려면 파라미터로 위와 같이 콜백 함수를 넣으면 된다. // 콜백 함수 (익명 함수) 배열명.forEach(ele, idx, arr)(function () {}); // 축약(화살표 함수) 배열명.forEach(ele, idx, arr)(() => {}); 매개 변수 3가지 forEach의 매개변수로는 .. Programing/React 2024. 3. 20.
[ONEBITE-REACT] 020. JS 심화 - 배열 메서드 1. 요소 조작 의미 메서드(Method)란 객체에 속한 함수를 말한다. 배열(Array) 또한 객체(Object)이고 이러한 객체들은 데이터와 메서드로 이루어진다. 데이터는 말 그대로 값이고 메서드는 배열을 조작하는 함수의 역할을 하는 것이다. 이번 강의에서는 크게 6가지의 요소 조작 메서드에 대해서 배운다. 6가지의 요소 조작 메서드 push 개념 배열의 맨 뒤에 새로운 요소를 추가하는 메서드 기본형 let 객체변수명 = [값1, 값2, ...] 객체변수명.push(추가할 값1, 추가할 값2, ...) 예제 let arr1 = [1, 2, 3]; arr1.push(4); console.log(arr1); // [1, 2, 3, 4] newLength 배열의 push 메서드는 newLength라는 변수의 값으로 초기화.. Programing/React 2024. 3. 20.
비전공자를 위한 IT 지식 (비공개) 보호되어 있는 글 입니다. 2024. 3. 19.
GitHub로 협업 하기 학습 출처 | 유튜브 코딩알려주는누나 Git과 GitHub에 대한 개념이 있더라도 이를 통해 팀원들과 협업하는 과정은 어렵다. 별도로 학습해야 할 필요가 있다. 이 내용을 학습하려면 Git과 GitHub에 대한 이해가 선행되어야 한다. 학습 순서 Repository 생성 팀원 초대 프로젝트 환경설정 develop 브랜치 생성 master 브랜치 보호 프로젝트 보드 생성 Git issue 생성 feature 브랜치 생성 팀원 역할 시작 (협업 시작) 프로젝트 클론 feature 브랜치 생성 개발 진행 소스코드 업로드 풀 리케스트 (PR) 생성 코드리뷰 깃 충돌 해결하기 develop 브랜치에 최신 코드 가져오기 다시 feature 브랜치로 돌아가기 feature 브랜치에서 develop 브랜치와 merge.. Programing/Git 2024. 3. 16.

티스토리툴바