본문 바로가기

2주차

 (27)
자바스크립트 - 배열 고차 함수 안녕하세요, 35기 웹파트 YB 김태욱입니다. 2주차 과제가 끝난지 거의 한 달이 넘은 것 같은데... 이제서야 2주차 공유과제를 올리게 되었습니다. 😂 제가 작성할 주제는 이번 합동세미나에서도 정말 많이 사용했고, jsx와 tsx 사용시에 정말 많이 사용하게 되는 자바스크립트의 배열 고차 함수입니다. 고차 함수란, 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드를 일컫고 함수형 프로그램 (JS, 파이썬)의 핵심이기도 합니다. - 함수형 프로그래밍이란?함수형 프로그래밍은 함수를 다른 함수의 매개변수로 넘길 수도 있고 return 값으로 함수를 받을 수도 있는 프로그래밍 형태를 말한다. - 배열 고차 함수1. forEach()- for문을 대체하는 고차함수- 반복문을 추상화하여 구현되었고, ..
JavaScript의 식별자 안녕하세요! YB 이윤지 입니다.이번 2주차 과제를 하면서 몰랐던 것들이 정말정말정말 정말 많았는데요..!그 중에서 이 안에 있는 $ (dollor) 왜 사용할까? 궁금해서 이번 주차 아티클의 주제로 삼게 되었습니다! 먼저 식별자는 무엇일까?식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다.자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어 (_) 또는 달러 ($) 만을 사용할 수 있습니다. 식별자를 작성하는 방식은 크게 두 가지가 있습니다. 식별자 작성 방식1. Camel Case 방식2. UnderScore (_) Case 방식 먼저, Camel Case 방식은 식별자가 여러 단어로 이루어질 경우에 첫 번째 단어는 모두 소문자로 작성하고,그 다음 단어부터는 첫 문자만 대문..
dialog 태그로 모달창 구현하기! 안녕하세요! YB 김채은입니다.2주차 과제를 하면서 모달창 구현 방법에 대해 찾아보다 태그를 알게 되었는데요, 아주 편리하게 모달창을 만들 수 있어 소개해보려 합니다 !! 먼저 요소는 HTML5에 추가된 대화 상자 요소로, 기존의 로 만든 대화 상자보다 접근성, 스타일링 측면에서 장점이 많습니다. 예를 들어, 별도의 라이브러리 없이도 모달 창을 쉽게 구현할 수 있고, 페이지의 흐름을 차단하는 모달 모드와 일반 대화 상자로 사용할 수 있어 다양한 사용자 경험을 지원할 수 있습니다. 요소의 기본 구조와 사용법 요소는 초기에는 보이지 않고, JavaScript의 show()와 showModal() 메서드를 통해 화면에 표시할 수 있습니다. open 속성: 요소가 화면에 나타나는 상태를 설정하는 속성. o..
[JavaScript] 자바스크립트의 데이터 타입에 대해.araboza 안녕하세요 웹파트 OB 김가연입니다. 사실 글이 날아가서 너무 우울해요. 2주차 아티클로 자바스크립트의 데이터 타입에 대해서 알아보려고 합니다. 저는 파이썬 말고는 C랑 java만 공부해봐서 항상 데이터 타입을 선언하는 언어에 익숙했는데요, 자바스크립트는 파이썬과 비슷하게 인터프리터 언어라서 데이터 타입을 선언할 필요가 없더라구요. 그렇다고 데이터 타입을 몰라서 되냐?!?그건 절대 아니지요. 그래서 데이터 타입이 뭔지, 왜 필요한지, 그리고 자바스크립트에는 어떤 데이터 타입이 있는지 아티클로 알아봅시다! 데이터 타입이란?데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 말합니다. 데이터는 여러 형태를 가질 수 있으며, 각 데이터 타입은 그 데이터가 어떻게 저장되고 처리되는지를 결정합니다...
[JS] 스코프(Scope) 안녕하세요:) 웹 파트 YB 유서연입니다! 이번 글에서는 2주차 세미나 내용 중 흥미로웠던 '스코프'에 대해 알아보겠습니다.스코프란?function add(x,y) { console.log(x, y); // 2 5 return x + y; }add(2, 5);console.log(x, y); // ? 위 코드에서 함수 add 외부의 console.log(x, y);는 무엇을 출력할까요?우리는 ReferenceError를 발생시킬 것이라 예상할 수 있습니다.왜냐하면, x와 y 값은 함수를 호출할 때 지정하는 매개변수이므로 함수 내부에서만 참조할 수 있기 때문이죠.이처럼 변수를 참조할 수 있는 유효 범위를 '스코프'라고 합니다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정합니다..
🤫 NaN을 조심하세요... 안녕하세요 웹 YB 김다현입니다. 개발을 하다 보면 NaN이라는 친구를 마주칠 때가 있는데요. 보통 숫자를 다룰 때 등장하지만 진짜 숫자처럼 다루면 곤혹을,,, 치룰 수도 있는 함정 같은 친구랍니다. 코드가 의도치 않게 NaN을 반환하거나, NaN을 제대로 처리하지 않으면 예상치 못한 오류가 발생할 수 있어요. 이번 기회에 NaN의 개념을 확실히 이해하고 미리 실수를 방지해볼까요?   🔎 그래서 NaN이 뭔데?자바스크립트로 개발을 하다 보면 숫자가 있어야 할 자리에 뜬금없이 NaN이라는 값이 튀어나올 때가 있는데요. NaN은 "Not-a-Number"의 약자로, 말 그대로 숫자가 아니라는 의미랍니다. 자바스크립트는 주로 숫자를 다루는 계산이 이상하게 꼬였을 때 NaN을 반환해요. 예를 들어, 숫자가 ..
[JS] 자바스크립트 가비지 컬렉션 (GC) 안녕하세요 웹 YB 이진혁입니다! 이번에는 이전에 단순히 불필요한 메모리를 삭제해주는 좋은 친구라고만 생각했던 가비지 컬렉션(GC)에 대해 JS 관점에서 알아보려고 합니다. https://curryyou.tistory.com/275(웹파트 세션 자료에 포함된 JS 메모리에 관련된 자료입니다!)     메모리 관리 프로그래밍 언어의 메모리 관리는 애플리케이션 성능과 안정성을 결정하는 중요한 요소이다. 자바스크립트를 사용해서 애플리케이션을 개발할 때도 이는 마찬가지이다. 예를 들어 리액트를 사용해 SPA(Single Page Application)을 구현하게 된다면 상호작용도 빈번하고 데이터가 계속해서 갱신된다면 메모리 관리가 필수적일 것이다.  프로그래밍 언어와 무관하게 메모리는 다음과 같은 생명주기를 가..
[JS] localStorage 사용법을 알아보자. localStorage란? localStorage는 웹 브라우저에서 클라이언트 측에서 데이터를 저장할 수 있는 여러 메커니즘 중 하나로, 특정 네트워크 요청을 통해 값을 저장하고 불러오는 것이 아니라 key-value 쌍을 사용하여 브라우저의 리소스만을 사용해서 데이터를 저장하고 불러올 수 있다는 특징이 있다. 심지어 브라우저를 종료하고 다시 실행해도 유지되어 데이터 관리에 유용하다. localStorage 다루기로컬스토리지(LocalStorage)를 다루는 방법은 localStorage라는 객체를 사용할 때,localStorage의 각 메서드를 활용하면 손쉽게 저장하고 불러오고 삭제하고 초기화 할 수 있다.메서드는 다음과 같다. setItem() - key, value 값 저장하기getItem() - ..

티스토리툴바