1. JavaScript 기초

1-1. 데이터 타입 & 변수

1-1-1. undefined와 null의 차이점에 대해서 설명해주세요

1-1-2. JavaScript의 데이터 타입에는 어떤 것들이 있나요?

1-1-3. let, const, var의 차이점을 설명해주세요

1-1-4. 호이스팅(Hoisting)이란 무엇인가요?

1-1-5. 스코프(Scope)에 대해 설명해주세요

1-1-6. 클로저(Closure)란 무엇인가요?

1-2. 함수

1-2-1. 화살표 함수와 일반 함수의 차이점은 무엇인가요?

1-2-2. call, apply, bind 메서드의 차이점을 설명해주세요

1-2-3. 콜백 함수란 무엇인가요?

1-2-4. 고차 함수(Higher-Order Function)에 대해 설명해주세요

1-3. 객체 & 배열

1-3-1. 객체를 복사하는 방법들을 설명해주세요 (얕은 복사 vs 깊은 복사)

1-3-2. 배열의 주요 메서드들(map, filter, reduce 등)에 대해 설명해주세요

1-3-3. 구조 분해 할당(Destructuring)에 대해 설명해주세요

1-4. 비동기 처리

1-4-1. 동기와 비동기의 차이점을 설명해주세요

1-4-2. Promise란 무엇이고, 어떻게 사용하나요?

1-4-3. async/await에 대해 설명해주세요

1-4-4. 콜백 지옥(Callback Hell)과 해결 방법을 설명해주세요

2. HTML/CSS

2-1. HTML

2-1-1. 시맨틱 HTML이란 무엇인가요?

2-1-2. DOCTYPE의 역할은 무엇인가요?

2-1-3. meta 태그의 용도를 설명해주세요

2-1-4. 웹 접근성(Web Accessibility)에 대해 설명해주세요

2-1-5. Node와 Element의 차이에 대해 설명해주세요

자세히 보기

2-2. CSS

2-2-1. CSS Box Model에 대해 설명해주세요

2-2-2. Flexbox와 Grid의 차이점을 설명해주세요

2-2-3. CSS 선택자 우선순위에 대해 설명해주세요

2-2-4. position 속성의 값들(static, relative, absolute, fixed)에 대해 설명해주세요

2-2-5. CSS-in-JS의 장단점을 설명해주세요

3. React

3-1. 기본 개념

3-1-1. React가 무엇이고, 왜 사용하나요?

3-1-2. Virtual DOM이 무엇이고, 어떤 장점이 있나요?

3-1-3. JSX란 무엇인가요?

3-1-4. 컴포넌트의 생명주기에 대해 설명해주세요

3-2. Hooks

3-2-1. useState와 useEffect에 대해 설명해주세요

3-2-2. useCallback과 useMemo의 차이점을 설명해주세요

3-2-3. useRef는 언제 사용하나요?

3-2-4. 커스텀 Hook을 만드는 이유는 무엇인가요?

3-3. 상태 관리

3-3-1. props와 state의 차이점을 설명해주세요

3-3-2. Context API에 대해 설명해주세요

3-3-3. Redux의 동작 원리를 설명해주세요

3-3-4. 전역 상태 관리가 필요한 이유는 무엇인가요?

4. 웹 개발 일반

4-1. 성능 최적화

4-1-1. 웹 성능을 최적화하는 방법들을 설명해주세요

4-1-2. 번들 사이즈를 줄이는 방법들을 설명해주세요

4-1-3. 이미지 최적화 방법들을 설명해주세요

4-1-4. 메모이제이션(Memoization)이란 무엇인가요?

4-2. 브라우저 & 네트워크

4-2-1. 브라우저 렌더링 과정을 설명해주세요

4-2-2. HTTP와 HTTPS의 차이점을 설명해주세요

4-2-3. CORS란 무엇이고, 어떻게 해결하나요?

4-2-4. 웹 스토리지(localStorage, sessionStorage)에 대해 설명해주세요

4-3. 보안

4-3-1. XSS와 CSRF 공격에 대해 설명해주세요

4-3-2. 보안 헤더들(CSP, HSTS 등)에 대해 설명해주세요

5. 협업 & 도구

5-1. 버전 관리

5-1-1. Git의 기본 개념과 주요 명령어들을 설명해주세요

5-1-2. Git Flow 전략에 대해 설명해주세요

5-1-3. 브랜치 전략에 대해 설명해주세요

5-2. 테스팅

5-2-1. 단위 테스트, 통합 테스트, E2E 테스트의 차이점을 설명해주세요

5-2-2. Jest와 같은 테스팅 라이브러리 사용 경험이 있나요?

5-3. 빌드 도구

5-3-1. Webpack의 역할과 주요 개념들을 설명해주세요

5-3-2. Babel이란 무엇인가요?

5-3-3. 모듈 번들러가 필요한 이유는 무엇인가요?

6. 프로젝트 & 경험

6-1. 실무 경험

6-1-1. 가장 기억에 남는 프로젝트와 그 이유를 설명해주세요

6-1-2. 프로젝트에서 겪었던 기술적 어려움과 해결 과정을 설명해주세요

6-1-3. 코드 리뷰에서 중요하게 생각하는 점들은 무엇인가요?

6-1-4. 새로운 기술을 학습할 때 어떤 방식으로 접근하나요?

6-2. 문제 해결

6-2-1. 디버깅할 때 주로 사용하는 방법들을 설명해주세요

6-2-2. 성능 문제를 발견하고 해결한 경험이 있나요?

6-2-3. 브라우저 호환성 문제를 어떻게 해결하나요?

7. 최신 트렌드

7-1. 개발 트렌드

7-1-1. SSR과 CSR의 차이점을 설명해주세요

7-1-2. JAMstack에 대해 알고 있나요?

7-1-3. 마이크로 프론트엔드에 대해 설명해주세요

7-1-4. PWA(Progressive Web App)란 무엇인가요?

7-2. TypeScript

7-2-1. TypeScript를 사용하는 이유는 무엇인가요?

7-2-2. any와 unknown의 차이점을 설명해주세요

7-2-3. 제네릭(Generics)에 대해 설명해주세요

반응형

'JS' 카테고리의 다른 글

[JS] 자바스크립트 메소드 체이닝  (0) 2024.02.07
[JS] 자바스크립트 DOM API  (0) 2024.02.06
[JS] 자바스크립트 조건문  (0) 2024.02.05
[JS] 자바스크립트 변수, 예약어  (0) 2024.01.30
[JS] 자바스크립트 데이터 종류(자료형)  (0) 2024.01.29

메소드 체이닝 (Method Chaining)

 

split 메소드:

문자를 split에 적용되어 있는 인수 기준으로 배열로 쪼개서 데이터로 변환해서 반환.
i.e. '문자'를 배열 데이터로 변환


reverse 메소드:

배열을 기본 순서가 아닌 반대의 순서로 뒤집어 주는 역할을 한다.


join 메소드:

배열 데이터를 인수 기준으로 문자들을 하나씩 붙여서 병합해 변환한다.

const a = 'Evelyn!';
const b = a.split('').reverse().join(''); 
// a 배열 뒤에 메소드+메소드+메소드... 이런 형식을 메소드 체이닝이라고 한다.

console.log(a); // Evelyn!
console.log(b); // !nylevE

콘솔창

반응형

'JS' 카테고리의 다른 글

JavaScript 기초 개념 스터디  (0) 2025.09.19
[JS] 자바스크립트 DOM API  (0) 2024.02.06
[JS] 자바스크립트 조건문  (0) 2024.02.05
[JS] 자바스크립트 변수, 예약어  (0) 2024.01.30
[JS] 자바스크립트 데이터 종류(자료형)  (0) 2024.01.29

DOM API (Document Object Model, Application Programming Interface)

(어플리케이션)웹사이트가 동작하도록 입력하는 프로그래밍 명령

i.e. 자바스크립트에서 (DOM)HTML을 제어하는 여러가지 명령들(API)이다. 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./main.js"></script>
</head>
<body>
    <div class="box">BOX!</div>    
</body>
</html>

 

CSS 선택자(.box)를 통해 HTML부분에서 특정 요소를 찾아서 그것을 변수 boxEl에 할당한다.

let boxEl = document.querySelector('.box');

console.log(boxEl);

 

하지만 브라우저가 위에서 아래로 HTML코드를 읽어 내려가는 특성으로

HTML <script> 영역까지 코드를 읽고 콘솔창에 값을 출력하는 오류가 발생된다. 

해당 값을 찾을 수 없다고 Null이 뜨게 된다.

 

여기서 script 코드에 defer를 추가하면 브라우저가 코드를 쭉 읽고 다시 <script>로 올라와서 요청한 값을 확인하여 출력하게 된다. 
(CSS .box > html class "box"를 가진 div요소를 찾아서 boxEl에 할당이 되어 출력)  

<title>Document</title>
<script defer src="./main.js"></script>		<!-- defer 추가 -->

콘솔창

 

DOM API  실행 과정

요소 1개만 검색,찾기를 통한 실행 과정

// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');
/*
querySelector: 메소드
('.box'): class 선택자 인수
boxEl: box요소 약자

해당 CSS 선택자를 통해 찾아진 요소 중 가장 먼저 찾은 요소 하나만 반환하는 특징이 있다.
*/

// HTML (boxEl)요소에 메소드 추가 가능
boxEl.addEventListener();

// 명령어 addEventListener 메소드에 인수(Arguments, 데이터X) 추가 가능
boxEl.addEventListener(1,2);

// 1 - 첫 번째 인수_이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
/*
사용자가 boxEl를 클릭했을 때의 상황을 브라우저는 '이벤트'라고 본다.
i.e. 클릭이라는 상황이 일어나면 무언가를 하겠다는 의미로 사용되는 코드이다.
*/

// 2 - 두 번째 인수_핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function (){
  console.log('click!');
});
/*
두 번째 인수에 익명 함수를 대신 넣어 데이터처럼 활용한다.
i.e. boxEl에 이벤트를 추가할지 듣고 있다가 클릭이 일어나면 익명 함수를 실행시킨다는 의미이다.  
*/

 

js에서 class 추가하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="./main.js"></script>
</head>
<body>
    <div class="box">BOX!</div>    
</body>
</html>

 

그리고 콘솔창에 active 추가/제거 하고 추가/제거 되었는지 확인도 함께 해준다.

let boxEl = document.querySelector('.box');

console.log(boxEl);

boxEl.addEventListener('click', function(){
  console.log('Click!');  // 콘솔창에 click! 출력하기
  boxEl.classList.add('active');
  console.log(
    boxEl.classList.contains('active') // 콘솔창에 class active 추가 확인하기
  );
  boxEl.classList.remove('active');
  console.log(
    boxEl.classList.contains('active') // 콘솔창에 class active 제거 확인하기
  );
});
콘솔창

콘솔창

 

요소 모두 검색,찾기를 통한 실행 과정

// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

// 찾은 요소들 반복해서 익명 함수로 실행
// 여기서 익명 함수를 인수로 추가했다.
boxEls.forEach(function (){});

// 첫 번째 매개변수(boxEl): 반복되는 요소 (이름 지정 가능)
// 두 번째 매개변수(index): 반복되는 번호 (통상적으로 index로 사용)
boxEls.forEach(function (boxEl, index){});

// 콘솔창 출력
boxEls.forEach(function (boxEl, index){
  boxEl.classList.add(`other-${index + 1}`);
  console.log(index, boxEl);
});

 

이런 데이터를 기반으로 js를 통해 box class order번호 만들어 보자!

const boxEls = document.querySelectorAll('.box');

boxEls.forEach(function (boxEl, index){
  boxEl.classList.add(`order-${index + 1}`);
  console.log(index, boxEl);
});

콘솔창

 

textContent 라는 속성을 통해 text로 된 내용을 얻고

이 text 를 다른 내용으로 지정하는 것을 보도록 하자!

const boxEl = document.querySelector('.box');

// Getter, 값을 얻는 용도
// textContent 라는 속성을 통해 text로 된 내용이 반환되는 것.
console.log(boxEl.textContent); // Box!!

// Setter, 값을 지정하는 용도
// textContent 부분에 1 대신 Evelyn!을 넣겠다(지정하겠다).
boxEl.textContent = 'Evelyn!';
console.log(boxEl.textContent); // Evelyn!!

콘솔창_문자데이터 1과 브라우저 화면에 1을 Evelyn!으로 지정된 것을 볼 수 있다.

반응형

'JS' 카테고리의 다른 글

JavaScript 기초 개념 스터디  (0) 2025.09.19
[JS] 자바스크립트 메소드 체이닝  (0) 2024.02.07
[JS] 자바스크립트 조건문  (0) 2024.02.05
[JS] 자바스크립트 변수, 예약어  (0) 2024.01.30
[JS] 자바스크립트 데이터 종류(자료형)  (0) 2024.01.29

조건문 (if, else)

조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문

bloolean 값으로 ture를 isShow 라는 변수 이름에 할당한다. 

let isShow = true;
let checked = false;


// if 조건 구문
if (isShow){
  console.log('Show!!'); // Show!
};

if (checked){
  console.log('checked!');
};

코드 설명
콘솔창

 

else 조건을 추가하여 보자!

isShow조건이 참인 경우, if (isShow)가 참이니 'Show!'를 출력하게 되고, 아니면(else) 'hide!'는 출력되지 않는다. 

let isShow = true;	// 주목!

if (isShow) {
  console.log('Show!');
}else{
  console.log('hide!');
};

콘솔창

 

isShow조건이 거짓인 경우, if (isShow)가 참이기에 'Show!'를 출력하지 않고, 아니면(else) 'hide!'가 출력된다.

let isShow = false;	// 주목!

if (isShow) {
  console.log('Show!');
}else{
  console.log('hide!');
};

콘솔창

반응형

'JS' 카테고리의 다른 글

[JS] 자바스크립트 메소드 체이닝  (0) 2024.02.07
[JS] 자바스크립트 DOM API  (0) 2024.02.06
[JS] 자바스크립트 변수, 예약어  (0) 2024.01.30
[JS] 자바스크립트 데이터 종류(자료형)  (0) 2024.01.29
[JS] 자바스크립트 표기법  (0) 2024.01.29

변수

저장된 데이터를 참조(사용)하는 용도로 데이터의 이름을 짓는 변수

변수를 만들 수 있는 데이터 이름 (var, let, const)

특징 : 
- 저장된 변수는 재사용이 가능하다.
- let키워드를 통해 변수a를 명시 후 데이터'2'를 집어넣는 행위를 변수 선언 이라고 한다.
- 값(데이터) let으로 재할당 가능 (const 재할당 불가) **재할당 용으로 let을 쓰고, 이 외는 const를 사용한다.
let a = 2; // let키워드를 통해 변수a를 명시 후 데이터'2'를 집어넣는다.
let b = 5;

console.log(a+b); // 7
console.log(a-b); // -3
console.log(a*b); // 10
console.log(a/b); // 0.4

a = 5; // 변수의 데이터 재할당 가능!

console.log(a+b); // 10
console.log(a-b); // 0
console.log(a*b); // 25
console.log(a/b); // 1

콘솔창

 

예약어(Reserves Word)

특별한 의미를 가지로 있어서, 변수와 함수의 이름으로는 사용할 수 없는 특정한 단어을 뜻 함.

let this = 'Hello :)'; // SyntaxError(문법에러) i.e.예약어를 사용하면 안되는데 사용했다는 뜻.
let if = 123; // SyntaxError
let break = true; // SyntaxError

이 처럼 예약이 되어져 있는 단어 (this, if, break)를 사용할 경우 문법에러가 뜨게 된다. 

사용할 수 없는 예약어의 종류들이 많아 에디터 도움으로 알아나가자.

 

예약어 종류 https://www.w3schools.com/js/js_reserved.asp

 

JavaScript Reserved Words

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

반응형

'JS' 카테고리의 다른 글

[JS] 자바스크립트 DOM API  (0) 2024.02.06
[JS] 자바스크립트 조건문  (0) 2024.02.05
[JS] 자바스크립트 데이터 종류(자료형)  (0) 2024.01.29
[JS] 자바스크립트 표기법  (0) 2024.01.29
[JS] javascript 자바스크립트 함수  (0) 2023.04.09

String (문자 데이터)

따옴표 사용 (쌍따옴표, 홑따옴표, 빽틱)

let myName = "Evelyn"; // myName이라는 변수에 "Evelyn"이라는 문자 데이터를 할당 한다.
let email = 'hj5678@gmail.com'; // 작은 따옴표로 표시된 문자 데이터도 동일하게 할당 한다.
let hello = `Helllo ${myName}!!`; // 빽틱 기호로 myName라는 데이터를 보관하겠다는 의미이다. i.e. "Evelyn"이라는 문자가 ${myName}에 들어가는 개념이다.

console.log(myName); // Evelyn
console.log(email); // hj5678@gmail.com
console.log(hello); // Hello Evelyn!!

콘솔창

 

Number (숫자 데이터)

정수 및 부동 소수점 숫자

let number = 123;
let opacoty = 1.37;

console.log(number); // 123
console.log(opacity); // 1.37

콘솔창

 

Boolean(불린 데이터)

true, false 값으로 이뤄진 논리 데이터

let checked = true;
let isShow = false;

console.log(checked); // true
console.log(isShow); // false

콘솔창

 

Undefined

값이 지정되지 않은 상태 (할당되지 않음)

자바스크립트 만의 특이한 문법이다. 

let undef;
let obj = { abc: 123 }; // (object의 약어 obj) (숫자 데이터123을 속성abc에 할당한다. => i.e. 데이터의 집합, 객체 데이터라고 한다.)

console.log(undef); // undefined
console.log(obj.abc); // 123 (obj변수 내부로 들어가 abc속성 데이터를 접근하여 그 값이 무엇인가 확인하는 코드)
console.log(obj.xyz); // undifined

콘솔창

 

Null

어떤 값이 의도적으로 비어있음을 의미

let empty = null; // i.e. 비어있는 값 임을 명시한 것이다.

console.log(empty); // null

콘솔창

 

Object(객체 데이터)

key: value 형식으로 저장하는 {데이터의 집합}

let user = {
  name: 'Evelyn',
  age: 22,
  isValid: true //boolean 데이터 true가 들어가 있음
};

console.log(user.name); // Evelyn
console.log(user.age); // 22
console.log(user.isValid); // true

콘솔창

 

Array(배열 데이터)

[데이터를] 순차적으로 저장

let name = ['Kate', 'Daniel', 'Anna'];

console.log(name[0]); // 'Kate'
console.log(name[1]); // 'Daniel'
console.log(name[2]); // 'Anna'

콘솔창

반응형

'JS' 카테고리의 다른 글

[JS] 자바스크립트 조건문  (0) 2024.02.05
[JS] 자바스크립트 변수, 예약어  (0) 2024.01.30
[JS] 자바스크립트 표기법  (0) 2024.01.29
[JS] javascript 자바스크립트 함수  (0) 2023.04.09
[Javascript] for loop (for문)  (0) 2023.04.07

+ Recent posts

티스토리툴바