IT Study/FE
-
[알고리즘] DFS, BFS 탐색 알고리즘 (Feat. JavaScript로 구현하기)IT Study/FE 2023. 11. 7. 16:07
탐색 알고리즘이란? 그래프의 모든 정점들을 특정한 순서에 따라 방문하는 알고리즘입니다. ⭐️ DFS(깊이 우선 탐색)이란? 시작점부터 갈 수 있는 정점까지 깊이있게 파고 드는 탐색 알고리즘 DFS 장단점 장점 1. 직관적인 코드, 구현이 용이 단점 1. 깊이가 깊어질수록 예측하기 어려운 메모리 비용 2. 최단 경로 파악 불가 DFS의 원리 *스택 (LIFO) push() : 배열 끝에 새로운 요소 추가 및 새로운 길이 반환 pop(): 배열의 마지막 요소 제거 및 그 요소 반환 A B D E F C G H I J 순으로 깊이를 기준으로 먼저 탐색하는 알고리즘입니다. 위 그림을 기준으로 DFS의 원리를 확인해보도록 하겠습니다. (1) A를 시작 정점으로, 스택에 A를 넣습니다. (스택 : A) (2) A를..
-
[코딩테스트 후기] 애플리케이션 보안 기업 `모니터랩` (Feat. 첫 코테)IT Study/FE 2023. 11. 6. 13:27
안녕하세요. 지난주 토요일 `모니터랩` 회사의 코딩테스트를 보고 온 Three입니다. 먼저, 코딩테스트에 대한 결과는 아래와 같습니다. 2/5 (5문제 중 2문제 정답) 48/100 (100점 만점 기준 48점, 코딩테스트 통과 기준 80점 이상) 참으로... 속상한 결과인데요. 코딩테스트를 위해 제가 앞으로 나아가야 할 방향에 대해 정리하고, 스스로에 다짐을 하고자 블로그 글을 작성합니다. 🧪 시험 방식 기업 `모니터랩`의 시험은 프로그래머스를 통해 진행하였습니다. 180분 (3시간) 기준으로 시험이 치러졌으며, 줌이나 화면에 대한 모니터링 없이 진행되는 듯하였습니다. 📄 문제 리뷰 1번 문제는 비교적 난이도가 낮은 문제였습니다. 그러나 문제를 꼼꼼히 읽지 않아 놓친 부분이 있었습니다. 여러 테스트 케..
-
[JavaScript] `==`, `===` (Feat. 값에 의한 참조, 주소에 의한 참조?)IT Study/FE 2023. 10. 10. 14:08
안녕하세요. Three입니다. Java를 공부할 때, equals(), `=`, `==` 를 비교하고 그 개념을 기억하고 있었는데요. [Java] String 클래스의 equals(), ==, = 의 차이점 String 클래스에서 사용하는 equals와 ==, = 의 차이점에 대해 알아보도록 하겠습니다. equals( ) 메서드 두 개의 객체가 서로 내용이 같은지 비교합니다. 즉, 주소값이 아닌 문자열 자체의 내용이 같은 1-three.tistory.com 그러나 자바스크립트를 공부하며 자바에서의 개념과 많이 헷갈리게 되더라고요... ⭐️ 그래서 ⭐️ 자바스크립트의 `=`, `==`, `===` 의 차이에 대해 공부해보려고 합니다. 이번 글을 통해 `=`, `==`, `===` 차이를 명확히 알아보도록 ..
-
[JavaScript] null, undefined, NaN 완벽 정복IT Study/FE 2023. 10. 5. 14:57
null, undefined, NaN에 대해 완벽히 정복해 보겠습니다. (ㅋ_ㅋ) 🌟 Point null과 undefined는 값인 동시에 데이터 유형입니다. 1. undefined undefined는 초기화되지 않은 변수의 기본 값으로, 변수를 선언하고 =(등호)로 값을 할당하지 않을 경우 이 변수는 undefined가 됩니다. 또 undefined는 배열에서 생성되지 않은 인덱스로 접근하려 했을 때 뜨기도 하는데요, 아직 없는 요소에 접근하려고 했기 때문에 undefined를 반환합니다. 즉, undefined는 아무것도 없음을 나타내는 값이죠. 또 undefined는 데이터 유형이기도 하는데요, 숫자와 문자열이 데이터 유형인 것처럼 undefined 또한 데이터 유형입니다. 그러나 undefined..
-
[JavaScript] 변수 섀도잉IT Study/FE 2023. 10. 2. 13:28
이번 글에서는 자바 스크립트의 변수 섀도잉에 대해 깊게 파헤쳐보겠습니다 :) 🎨 예시 코드로 시작하기 let userName = "max"; function greetUser(name) { // 함수 내부에서의 userName이 매개변수 name으로 섀도잉 let userName = name; alert(userName); } // 전역 범위에서의 userName을 "Manu"로 변경 userName = "Manu"; // 함수 호출, 알림창에는 "Max"가 표시 greetUser("Max"); // 전역 범위의 userName을 출력, 콘솔에는 "Manu"가 출력 console.log(userName); 함수 내부에서 선언된 변수(userName)는 외부 변수(userName)와 이름이 같더라도 서로 ..
-
[CSS3] ID 셀렉터와 클래스 셀렉터를 구분하여 사용하는 이유는?IT Study/FE 2023. 9. 28. 11:31
HTML5부터 시작하여 CSS3 등의 개념을 다시 읽어보는 와중에 "ID 셀렉터와 클래스 셀렉터" 파트가 나왔습니다. 왜 이들을 구분하여 사용할까요 ? id와 클래스가 사용되는 이유를 다시 떠올리면 알 수 있을 것 같은데요, 그 이유에 대해 정확히 알아봅시다. ✏️ 1. 원하는 요소를 정확하게 선택하기 위해서 구분하여 사용합니다. ID 셀렉터(#) id는 문서 내에 고유한 식별자여야 하므로, 특정 요소 하나만들 정확하게 선택하는 데에 사용됩니다. 하나의 웹 페이지에 동일한 id를 가진 요소는 오직 하나만 존재합니다. 따라서 ID 셀렉터를 통해 특정 요소를 정확하게 선택할 수 있습니다. 클래스 셀렉터(.) 클래스는 하나 이상의 요소에 동일한 스타일을 적용하기 위해 사용합니다. 여러 요소를 선택하고 스타일을..
-
TypeScript 5.2의 새로운 키워드: 'using' - 자원 관리의 혁신IT Study/FE 2023. 9. 18. 09:00
안녕하세요! 오늘은 정말 흥미로운 소식을 들고 왔습니다. 함께 공부하는 친구가 갑자기 "대박"이라고 하며, 노마드 코더의 영상 링크를 공유했는데요, 그 내용은 바로 TypeScript의 새로운 키워드 'using'이 나왔다는 것입니다. 저도 이 흥미로운 키워드에 대해 더 알아보고 공유하려 합니다. 바로 시작하겠습니다! 'using' 키워드란? 'using'은 TypeScript 5.2에서 새롭게 도입할 키워드로, 'using' 키워드가 적용된 코드 블록이나 함수의 실행이 종료될 때 Symbol.dispose 또는 Symbol.asyncDispose 메서드가 있는 객체를 자동으로 해제해 줍니다. 이를 통해 코드를 깔끔하고 안전하게 만들어 주며, 자원 관리를 효율적으로 할 수 있습니다. Symbol.disp..
-
[JavaScript] 문제를 통해 `실행 컨텍스트, 클로저, 스코프` 이해하기IT Study/FE 2023. 9. 15. 16:57
1. 다음 코드 조각을 살펴보고, 각 console.log 라인에서 출력될 값과 그 이유를 설명하세요. var a = 10; function outer() { var b = 20; function inner() { var c = 30; console.log(a); // 1번 라인 console.log(b); // 2번 라인 console.log(c); // 3번 라인 } inner(); console.log(a); // 4번 라인 console.log(b); // 5번 라인 console.log(c); // 6번 라인 } outer(); console.log(a); // 7번 라인 console.log(b); // 8번 라인 console.log(c); // 9번 라인 라인 답변 위치 접근 여부 1 10..