JavaScript_자바스크립트 첫걸음/독학 방법 추천/ 사이트 추천

자바스크립트에 대한 기초를 제대로 쌓지 않은 채 프로젝트를 진행하다 보니

이해도나 활용도 측면에서 한계를 많이 느꼈다.

다시 처음부터 공부한다는 생각으로 자바스크립트 초급 독학하는 방법을 소개하고자 한다.

1. MDN 

 

 

MDN은 HTML, CSS, HTTP, WebAPI, Java Script 등 다양한 웹 기술에 대한 설명을 볼 수 있다. 

자바스크립트에 대한 기본 문법과 예제를 익힐 수 있고, 각 주제 별 테스트 예제, 실습 예제들이 있어

직접 코드 작성을 하며 익힐 수 있어서 좋다.

https://developer.mozilla.org/ko/docs/Learn/JavaScript

JavaScript - 동적인 클라이언트 사이드 스크립트 언어 - Web 개발 학습하기 | MDN

실습 예제 예시 링크

 

Function과 Event에 대한 실습 예제로 예제에 대한 가이드와 설명을 따라

제공되는 코드 틀 안에서 주제에 대한 코드를 직접 작성해볼 수 있다.

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Image_gallery

이미지 갤러리 - Web 개발 학습하기 | MDN

<실습 예제 작성 예시>

 

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Declaring the array of image filenames */
const images = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg'] ;

/* Looping through images */
for(let i = 1; i<=images.length; i++ ){
    const newImage = document.createElement('img');
    newImage.setAttribute('src','images/pic' + i+'.jpg');
    newImage.style.width = '20%';
    newImage.style.float= 'left';
    
    thumbBar.appendChild(newImage);
}
thumbBar.addEventListener('click', e => {
    const clickImage = e.target.getAttribute('src')
    displayedImage.setAttribute('src',clickImage);
});
/* Wiring up the Darken/Lighten button */

btn.addEventListener('click', () =>{
    if(btn.className == 'dark'){
        overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
        btn.textContent = 'Lighten';
        btn.setAttribute('class','light');
    }else{
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
        btn.textContent = 'Darken';
        btn.setAttribute('class','dark');
    }
});

<실습 예제 작성 예시>

 

 

2 .TCPSchool

자바스크립트 외 다양한 웹 기술의 기초 문법에 대해 간단한 설명과 예제, 테스트를 해볼 수 있다.

깔끔하게 정리되어 이해하기 쉽고, 헷갈리는 문법이나 정의를 찾아보기에 좋다.

 

http://www.tcpschool.com/javascript/intro

코딩교육 티씨피스쿨

 

 

3. 인프런

개인적으로 강의나 유튜브가 잘 맞는 스타일은 아니지만,

인프런에 좋은 무료 강의들도 많고 어떻게 작성하고 어떤 흐름으로 작성하는지 

가볍게 눈에 익힌다 생각하고 보기에 좋다.

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC-%EC%A4%91%EA%B8%89-1/dashboard

자바스크립트+jQuery 기초부터 실무까지 : 중급 Part.1 - 인프런 | 강의

---

📌총정리

1. MDN 

- 장점: 가이드 느낌으로 예제를 풀어보며 따라가기 좋다.

- 단점: 한국어 버전이 자동번역인 듯해서 어색하고 이해 안 될 때가 있다.

 

2. TCPSchool

- 장점: 기본에 충실한 깔끔하고 간단한 요약집 느낌이다.

- 단점: 실습 예제가 따로 없다.

 

3. 인프런 

- 추가적으로 필요시 참고 삼아 보면 좋을 거 같다.

 

---

자바스크립트 공부한다고 따로 책 살 필요 없겠죠??

부족하지만 읽어주셔서 감사합니다.