JavaScript 미니프로젝트-팀소개 웹사이트 제작 -1, 상단바 만들기 일단 우리조는 기술적인 부분을 합의하기로 하여 html,css,javascript,bootstrap 전부를 사용하기로 하였다. 디자인을 잘 모르는 우리 팀이기에...그냥 웹사이트 하나를 참고하여 아예 그 컨셉을 그대로 따라가기로 하였다. 후보는 4가지였다...그중 우리는 팀소개라는 주제에 어울려 보이는 컨셉을 참고하기로 하였다. 목업이 정해지자마자 우리는 각자 어느 부분을 맡을건지 역할 분담... 미니프로젝트JavaScriptCSShtmlCSS 기초 정리 - 1 문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표시가 불가! NaN '존재하지 않는', '비어 있는', '알 수 없는' 값을 명시적으로 나타냄 '값이 할당되지 않은 상태'를 암시적으로 나타냄 유일한 식별자(ID) 지수, 큰(Bi... JavaScriptJavaScript API 반복 호출 피드백 던전앤파이터 아이템 검색 사이트(던드랍)을 배포 후 특정 사용자의 특정아이템의 보유 아이템 표시가 되지 않는 다는 문의를 받음. 원인 캐릭터별 타임라인 API 조회시 row 제한 개수가 존재 해서 최근 아이템 획득 100건 이후에 아이템은 보유 아이템 처리가 되지 않음. 해결 만약 타임라인의 다음 row가 존재하여 next key 값이 리턴 되는 경우 next key이 리턴 되지 않을... 던드랍JavaScriptJavaScript [JS] 자바스크립트 동작 원리 자바스크립트 엔진의 주요 구성요소로는 메모리 힙(Memory Heap)과 콜 스택(Call stack)이 있다. 만약 우리가 특정 함수를 실행하게 되면, 해당 함수는 콜 스택의 가장 상단에 위치하게 된다. 그리고 함수 실행이 끝나게 되면, 해당 함수는 콜 스택에서 제거되게 된다. 콜 스택은 정해진 스택 사이즈가 존재하고, 하나씩 쌓이기 때문에 정해진 용량을 초과하게 되면 에러가 발생하게 된다... JavaScriptJavaScript [JS ] 🔭 Intersection Observer API 알아보기 Intersection Observer API(교차 관잘자) 는 타켓 요소가 화면에 보이지는지 여부를 관찰하는 API 이다. React로 Infinite Scroll 구현을 위해 플러그인을 찾아보던 중 JavaScript API로도 가능하다고해서 정리해보고자한다. 이를 해결하기 위해 디바운싱(Debouncing)과 쓰롤틀링(Throttling)을 사용해야 한다. 쓰롤틀링 / Throttlin... JavaScriptJavaScript 본격 개발! 2일차 테두리를 지웠다 디자인 시무 14조를 통해 깔끔한 디자인을 위해 캐릭터 인기도를 알 수 있는 평가란을 별표로 표시하기로 했다 아이콘 라이브러리를 쓰고 별표 크기를 조절했다 폰트를 넣었다 구글 폰트를 썼는데 크기가 작아서 크기를 키우는 CSS 코드를 썼다 마치며 사진을 일정한 크기로 일렬로 배열하거나 슬라이드를 이용해서 표시하고 싶은데... 사진이 위아래로 표시되거나 슬라이드가 넘어가다가 사진... bootstrapJavaScriptCSS웹개발CSS [2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this 18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는 생성된 그 객체를 가르킨다. 생성자 함수를 정의하고 user1로 아이유를, user2로 은하 인스턴스를 생성하고 출력해보았다. 각 인스턴스별 가르키는 this가 다르다는 것을 확... 생성자함수자바스크립트JavaScript이벤트리스너jsstudy공부thisJavaScript JS_daily_algorithm_02 문제: 내가 쓴 코드: 모범 답안: Impressive Point & Learning Point 기본적으로 Math 함수를 활용하느냐 안 하느냐에 차이에서 크게 갈리는 문제였던 것 같다. 알게되어서 좋았고, 함수를 사용하지 않고, 사용하고 두 가지의 방법으로 모두 풀어보아서 좋았다. Javascript언어에 math 객체에 존재의 유무에 대해 알게되었다. math 객체에 있는 ceil 속성이... JavaScriptalgorithmJavaScript [CSS] Full screen 팝업 띄우는 방법 기존 웹 서비스에서 띄어주고 있는 팝업의 크기가 작아 사용성이 떨어진다는 피드백을 받았다. 팝업 크기를 full screen으로 띄워주면 좋을 것 같아 수정 작업을 진행했다. Step 1) Add HTML Step 2) Add CSS overlay 에 transition 속성 활용 시 애니메이션 효과를 낼 수도 있다. (ex. transition: 0.5s;) Step 3) Add JavaS... JavaScriptCSSCSS [Javascript] script async 와 defer의 차이점 사용자가 HTML파일을 다운로드 받았을 때 브라우저는 HTML을 한줄씩 읽으며 CSS와 병합하여 DOM 요소로 변환한다. HTML을 파싱하다가 <script>...</script> 태그를 만나면 HTML 파싱을 잠시 멈추고 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. <script src="..."></script>를 만났을 때 외부에서 스크립트를 다운받고 실행한 후에 남은 페이지... asyncDeferJavaScriptscriptDefer 📕 [ TIL ] : 2일차_2022.04.19.(화) GitHub) README.md 생성, 마크다운 및 캐시파일삭제 명령어 vscode에는 pycharm처럼 venv 폴더 생성하지 않고도 anaconda로 가상환경 설정 가능 (pip 설치 용이. 발생했던 오류 : 여백 및 오타 오류부터 파일 경로 설정, aws 키체인 저장한 곳 바뀔 시 서버 초기 실행할때부터 경로 다시 설정해야함 [ ✏️ 리마인드 : 서버 업데이트시 중요한것! [ ✏️ 수업... 내일배움단JavaScriptTILhtml개발자스파르타코딩클럽모든개발자분들파이팅입니다js웹개발스파르타코딩JavaScript [Megabyte School] Javascript 특강 : 기본 개념 알아보기 아래와 같이 HTML 문서 내용을 원하는 내용으로 단순하게 바꾸는 것부터 알림창, 검색창 등 무궁무진하게 만들 수 있는 것들이 많다. => div 태그에 있는 "Hello World"를 "Hello Javascript"로 바꿔줘! 두 개의 버튼을 만들고, 그 버튼들을 클릭할때마다 각각의 알림창이 뜨게 하고, 또 그것을 닫을 수 있는 버튼을 만들어 보자. 그리고 버튼에는 onclick 기능을 ... JavaScriptJavaScript [엘리스 sw 엔지니어 트랙] 7일차 Javascript 오늘 수업은 이론수업은 없고 엘리스에서 문제 풀이로만 이루어져 있다. 문제 풀이 껌이쥐~! 하고 시간 널널하게 남을줄 알았는데 나의 실력이 여기서 드러나 버렸다.. 그래도 오늘치 문제는 전부 성공! 소수의 합 구하기(1~200까지) 1부터 200까지의 소수의 합 결과 값이다. 짝수 반화 함수 배열에 있는 값중 짝수의 값만 반환하는 함수 배열의 값을 숫자로 출력하는 함수 배열에 있는 값을 문자... 엘리스부산JavaScript코딩캠프JavaScript DOM 요소 다루기 문제 출처 : 엘리스 SW 엔지니어 트랙 2기 'Home'이라고 적힌 <li> 태그를 생성 insertBefore()를 사용해서 menu의 <li> 태그 앞에 'Home'을 삽입하세요. insertBefore() 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. insertBefore()를 사용해서 calender의 첫 번째 child로 예약 알람 문구를 삽입하세요. re... JavaScriptDOMDOM Closure(in JavaScript) 클로저란? 자신의 상위 스코프에 있는 변수에 접근할 수 있는 함수 실제로, 함수가 상위 스코프 변수에 접근할 때, 그 함수는 자동으로 클로저가 된다. 일반적인 함수보다 더 많은 메모리와 컴퓨팅을 요구한다. 스코프: 변수의 유효 범위, 변수에 접근할 수 있는 범위 클로저가 아닌 일반 함수의 경우, 변수가 스택 메모리에 저장된다. → 수명이 짧다. 클로저의 경우, 변수가 힙 메모리에 저장된다. ... closureJavaScriptJavaScript [TIL11] import, export로 js모듈화와 Class 📍 오늘배운 내용 이후에 react를 배울때 나오는 컴포넌트라는 개념을 위해서는 import, export 을 어떻게 사용하는지 알아야한다! 클래스형 컴포넌트보다 함수형을 더많이 사용하지만 Class 사용법을 알고있자 > import 지원 여부 export 는 public 함수 (외부에서도 사용 가능!) import를 활용하여 외부에 있는 public 함수에 접근 모듈화 시켜야 제대로 작동 ... JavaScriptJavaScript Day 2 - ReactJS로 영화 웹 서비스 만들기 사이트 : 노마드코더 강의 : ReactJS로 영화 웹 서비스 만들기 시각 : 2022.04.18 ◆ 완료한 강의 : #3 [2021 UPDATE] STATE: #3.0 Understanding State ~ #3.8 Recap const [] = React.useState() 사용하면 Array 한개가 생김. [ 담을 데이터용 변수, 담을 데이터를 처리할 함수용 변수] 이렇게. 두번째 항에... ReactDOM코딩JSXhtmlReactJavaScriptJSX [Javascript Basic] 03. 공튕기기 게임(1) 학습목표 Canvas API 이용하여 html에 그려보기 document, context 학습 html javascript 학습 내용 canvas api를 이용해 도형그리기 arc, rect, beginPath, closePath 등등 각 메소드 이해 그리드개념 이해 참고... JavaScriptJavaScript [javascript] AJAX와 Axios & Fetch 즉, AJAX는 자바스크립트에서 비동기 HTTP 통신이 가능하도록 해주며 서버와 통신 시 XMLHttpRequest 객체를 사용하여 다양한 데이터 포맷을 주고 받는다. 위에서 언급한 XMLHttpRequest 객체의 다양한 데이터 포맷이란 XML 뿐만 아닌 JSON, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 말한다. 객체명에서 충분한 오해의 소지가 있으므로 XMLHttpR... JavaScriptJavaScript 자바스크립트로 프로젝트 진행할 때 알아두면 좋은 왕기초지식 이런 형식으로 생긴 함수로 자바스크립트 코드가 감싸져있는 것을 자주 볼 수 있다. 자바스크립트의 장점(?)이면서 단점인 전역변수는 지양하는 것이 좋기 때문에 최소한으로 써야하는데, 이 즉시실행함수를 쓰면 함수 내에서 쓴 것들이 전역변수, 전역 함수가 되지 않는다.(이 함수 없이 그냥 쓴다면 다 전역변수, 전역함수가 되어버리는거다.) 일단 HTML에서 짜놓은 태그들을 선택할 수 있어야 그 태그... JavaScriptJavaScript 📲 자바스크립트의 AJAX Ajax(Asynchronus JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로... ajaxJavaScriptJavaScript javascript 생성자 함수(prototype) JavaScriptJavaScript Array에 쓸 수 있는 유용한 함수 "slice" "The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. => slice()메서드는 기존 ... JavaScriptJavaScript TIL-11일차(feat.이고잉님) 강의 시작하기 앞서, 보편적인 개발과 개인적인 개발에 대해서 이야기를 시작했다. 보편적인 개발은 우리가 주로 사용하는 어플리케이션으로 인스타그램, 페이스북 등등 누구나 사용 할 수 있는 어플리케이션을 개발하는 것이 보편적인 개발이라는 뜻이다. 개인적인 개발은 우리가 스스로 필요해서 만들어가는 어플리케이션을 말한다. 간단한 예로 TODOLIST를 직접 만들어보는 것들이 있을것이고, 개인적인 용... 엘리스SW트랙JavaScriptTILJavaScript (Javascript) 재귀(recursion)와 메모이제이션(Memoization) (1) factorial 함수를 만들었는데 그 안에 factoral 함수를 또 호출합니다. 자기 자신을 호출하는 건데요 인자만 n 에서 n-1 로 바꿨습니다 factorial (3) 호출을 하면 내부적으로는 3*factorial(2) 가 호출됩니다. factorial(2) 는 2factorial(1) 호출하고 factorial(1)은 1factorial(0) 을 호출합니다 factorial(0) =... memoizationJavaScriptrecursionJavaScript JSON.stringify(), JSON.parse() localStorage에는 배열을 저장할 수 없다. localStorage에는 string값(문자열)만을 저장할 수 있다. 배열을 string 값으로 바꿔주고 쓸 때는 다시 객체화 시켜서 꺼내 쓰면 된다. 위 코드의 comment 를 보면 알 수 있듯이 처음 생각했던 대로 와 같이 localStorage에 저장하면 배열을 저장할 수 없으므로 따라서 이를 JSON.stringify 라는 함수를... JavaScriptJavaScript 패스트 캠퍼스 MGS 3기 - 4월 19일(Javascript 특강) 함수 선택자 -getElementById, getElementsByClassName, querySelector 내가 어떤 기능이 필요한지 파악하고, 버튼을 클릭하면 모달창을 띄우는 예제를 만들어 보자! 🤔 tip html 태그에서 on은 '~을 기다린다'로 해석하면 이해가 쉽다. 위의 두 부분(Dry 1, Dry 2)에서 반복이 일어나고 있으므로 코드를 바꾸어 보자! addEventListe... JavaScriptTIL패스트 캠퍼스JavaScript 자동차 경주 게임 : click이벤트로 요소 움직이고 초기화 시키기 문제 출처 - 엘리스 SW 엔지니어 트랙 2기 버튼을 클릭하면 자동차 요소들이 경주를 진행하고, 어떤 차가 이기는지 확인 후 초기화 하는 코드 reset 함수로 초기화 두 자동차의 경주가 끝나고 다시 초기화하는 함수 clearTimeout 을 이용해 타이머를 초기화합니다. car1.timer 에서 timer는 임의로 지정한 변수입니다. CSS :disabled 의사 클래스는 모든 비활성 요소... JavaScriptJavaScript JavaScript 기본 문법 정리 이번주부터 백엔드 세션에 참여하기로 했다.....!!!! 미루고 미뤄오던 백엔드 공부,,, 드디어 시작,,, 그 기념으로 javascript 문법 다 까먹어서 기억이 나지 않는 기본적인 내용들은 복습을 해보려고 한다💨 강의는 생활코딩 강의를 참고했습니다:) true와 false는 변수명으로 사용하면 안돼! 비교연산 1 == 1 true 1 == 2 false 1 > 2 false 1 === ... web멋쟁이사자처럼JavaScriptjsJavaScript 이전 기사 보기
미니프로젝트-팀소개 웹사이트 제작 -1, 상단바 만들기 일단 우리조는 기술적인 부분을 합의하기로 하여 html,css,javascript,bootstrap 전부를 사용하기로 하였다. 디자인을 잘 모르는 우리 팀이기에...그냥 웹사이트 하나를 참고하여 아예 그 컨셉을 그대로 따라가기로 하였다. 후보는 4가지였다...그중 우리는 팀소개라는 주제에 어울려 보이는 컨셉을 참고하기로 하였다. 목업이 정해지자마자 우리는 각자 어느 부분을 맡을건지 역할 분담... 미니프로젝트JavaScriptCSShtmlCSS 기초 정리 - 1 문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표시가 불가! NaN '존재하지 않는', '비어 있는', '알 수 없는' 값을 명시적으로 나타냄 '값이 할당되지 않은 상태'를 암시적으로 나타냄 유일한 식별자(ID) 지수, 큰(Bi... JavaScriptJavaScript API 반복 호출 피드백 던전앤파이터 아이템 검색 사이트(던드랍)을 배포 후 특정 사용자의 특정아이템의 보유 아이템 표시가 되지 않는 다는 문의를 받음. 원인 캐릭터별 타임라인 API 조회시 row 제한 개수가 존재 해서 최근 아이템 획득 100건 이후에 아이템은 보유 아이템 처리가 되지 않음. 해결 만약 타임라인의 다음 row가 존재하여 next key 값이 리턴 되는 경우 next key이 리턴 되지 않을... 던드랍JavaScriptJavaScript [JS] 자바스크립트 동작 원리 자바스크립트 엔진의 주요 구성요소로는 메모리 힙(Memory Heap)과 콜 스택(Call stack)이 있다. 만약 우리가 특정 함수를 실행하게 되면, 해당 함수는 콜 스택의 가장 상단에 위치하게 된다. 그리고 함수 실행이 끝나게 되면, 해당 함수는 콜 스택에서 제거되게 된다. 콜 스택은 정해진 스택 사이즈가 존재하고, 하나씩 쌓이기 때문에 정해진 용량을 초과하게 되면 에러가 발생하게 된다... JavaScriptJavaScript [JS ] 🔭 Intersection Observer API 알아보기 Intersection Observer API(교차 관잘자) 는 타켓 요소가 화면에 보이지는지 여부를 관찰하는 API 이다. React로 Infinite Scroll 구현을 위해 플러그인을 찾아보던 중 JavaScript API로도 가능하다고해서 정리해보고자한다. 이를 해결하기 위해 디바운싱(Debouncing)과 쓰롤틀링(Throttling)을 사용해야 한다. 쓰롤틀링 / Throttlin... JavaScriptJavaScript 본격 개발! 2일차 테두리를 지웠다 디자인 시무 14조를 통해 깔끔한 디자인을 위해 캐릭터 인기도를 알 수 있는 평가란을 별표로 표시하기로 했다 아이콘 라이브러리를 쓰고 별표 크기를 조절했다 폰트를 넣었다 구글 폰트를 썼는데 크기가 작아서 크기를 키우는 CSS 코드를 썼다 마치며 사진을 일정한 크기로 일렬로 배열하거나 슬라이드를 이용해서 표시하고 싶은데... 사진이 위아래로 표시되거나 슬라이드가 넘어가다가 사진... bootstrapJavaScriptCSS웹개발CSS [2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this 18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는 생성된 그 객체를 가르킨다. 생성자 함수를 정의하고 user1로 아이유를, user2로 은하 인스턴스를 생성하고 출력해보았다. 각 인스턴스별 가르키는 this가 다르다는 것을 확... 생성자함수자바스크립트JavaScript이벤트리스너jsstudy공부thisJavaScript JS_daily_algorithm_02 문제: 내가 쓴 코드: 모범 답안: Impressive Point & Learning Point 기본적으로 Math 함수를 활용하느냐 안 하느냐에 차이에서 크게 갈리는 문제였던 것 같다. 알게되어서 좋았고, 함수를 사용하지 않고, 사용하고 두 가지의 방법으로 모두 풀어보아서 좋았다. Javascript언어에 math 객체에 존재의 유무에 대해 알게되었다. math 객체에 있는 ceil 속성이... JavaScriptalgorithmJavaScript [CSS] Full screen 팝업 띄우는 방법 기존 웹 서비스에서 띄어주고 있는 팝업의 크기가 작아 사용성이 떨어진다는 피드백을 받았다. 팝업 크기를 full screen으로 띄워주면 좋을 것 같아 수정 작업을 진행했다. Step 1) Add HTML Step 2) Add CSS overlay 에 transition 속성 활용 시 애니메이션 효과를 낼 수도 있다. (ex. transition: 0.5s;) Step 3) Add JavaS... JavaScriptCSSCSS [Javascript] script async 와 defer의 차이점 사용자가 HTML파일을 다운로드 받았을 때 브라우저는 HTML을 한줄씩 읽으며 CSS와 병합하여 DOM 요소로 변환한다. HTML을 파싱하다가 <script>...</script> 태그를 만나면 HTML 파싱을 잠시 멈추고 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다. <script src="..."></script>를 만났을 때 외부에서 스크립트를 다운받고 실행한 후에 남은 페이지... asyncDeferJavaScriptscriptDefer 📕 [ TIL ] : 2일차_2022.04.19.(화) GitHub) README.md 생성, 마크다운 및 캐시파일삭제 명령어 vscode에는 pycharm처럼 venv 폴더 생성하지 않고도 anaconda로 가상환경 설정 가능 (pip 설치 용이. 발생했던 오류 : 여백 및 오타 오류부터 파일 경로 설정, aws 키체인 저장한 곳 바뀔 시 서버 초기 실행할때부터 경로 다시 설정해야함 [ ✏️ 리마인드 : 서버 업데이트시 중요한것! [ ✏️ 수업... 내일배움단JavaScriptTILhtml개발자스파르타코딩클럽모든개발자분들파이팅입니다js웹개발스파르타코딩JavaScript [Megabyte School] Javascript 특강 : 기본 개념 알아보기 아래와 같이 HTML 문서 내용을 원하는 내용으로 단순하게 바꾸는 것부터 알림창, 검색창 등 무궁무진하게 만들 수 있는 것들이 많다. => div 태그에 있는 "Hello World"를 "Hello Javascript"로 바꿔줘! 두 개의 버튼을 만들고, 그 버튼들을 클릭할때마다 각각의 알림창이 뜨게 하고, 또 그것을 닫을 수 있는 버튼을 만들어 보자. 그리고 버튼에는 onclick 기능을 ... JavaScriptJavaScript [엘리스 sw 엔지니어 트랙] 7일차 Javascript 오늘 수업은 이론수업은 없고 엘리스에서 문제 풀이로만 이루어져 있다. 문제 풀이 껌이쥐~! 하고 시간 널널하게 남을줄 알았는데 나의 실력이 여기서 드러나 버렸다.. 그래도 오늘치 문제는 전부 성공! 소수의 합 구하기(1~200까지) 1부터 200까지의 소수의 합 결과 값이다. 짝수 반화 함수 배열에 있는 값중 짝수의 값만 반환하는 함수 배열의 값을 숫자로 출력하는 함수 배열에 있는 값을 문자... 엘리스부산JavaScript코딩캠프JavaScript DOM 요소 다루기 문제 출처 : 엘리스 SW 엔지니어 트랙 2기 'Home'이라고 적힌 <li> 태그를 생성 insertBefore()를 사용해서 menu의 <li> 태그 앞에 'Home'을 삽입하세요. insertBefore() 메소드는 참조된 노드 앞에 특정 부모 노드의 자식 노드를 삽입합니다. insertBefore()를 사용해서 calender의 첫 번째 child로 예약 알람 문구를 삽입하세요. re... JavaScriptDOMDOM Closure(in JavaScript) 클로저란? 자신의 상위 스코프에 있는 변수에 접근할 수 있는 함수 실제로, 함수가 상위 스코프 변수에 접근할 때, 그 함수는 자동으로 클로저가 된다. 일반적인 함수보다 더 많은 메모리와 컴퓨팅을 요구한다. 스코프: 변수의 유효 범위, 변수에 접근할 수 있는 범위 클로저가 아닌 일반 함수의 경우, 변수가 스택 메모리에 저장된다. → 수명이 짧다. 클로저의 경우, 변수가 힙 메모리에 저장된다. ... closureJavaScriptJavaScript [TIL11] import, export로 js모듈화와 Class 📍 오늘배운 내용 이후에 react를 배울때 나오는 컴포넌트라는 개념을 위해서는 import, export 을 어떻게 사용하는지 알아야한다! 클래스형 컴포넌트보다 함수형을 더많이 사용하지만 Class 사용법을 알고있자 > import 지원 여부 export 는 public 함수 (외부에서도 사용 가능!) import를 활용하여 외부에 있는 public 함수에 접근 모듈화 시켜야 제대로 작동 ... JavaScriptJavaScript Day 2 - ReactJS로 영화 웹 서비스 만들기 사이트 : 노마드코더 강의 : ReactJS로 영화 웹 서비스 만들기 시각 : 2022.04.18 ◆ 완료한 강의 : #3 [2021 UPDATE] STATE: #3.0 Understanding State ~ #3.8 Recap const [] = React.useState() 사용하면 Array 한개가 생김. [ 담을 데이터용 변수, 담을 데이터를 처리할 함수용 변수] 이렇게. 두번째 항에... ReactDOM코딩JSXhtmlReactJavaScriptJSX [Javascript Basic] 03. 공튕기기 게임(1) 학습목표 Canvas API 이용하여 html에 그려보기 document, context 학습 html javascript 학습 내용 canvas api를 이용해 도형그리기 arc, rect, beginPath, closePath 등등 각 메소드 이해 그리드개념 이해 참고... JavaScriptJavaScript [javascript] AJAX와 Axios & Fetch 즉, AJAX는 자바스크립트에서 비동기 HTTP 통신이 가능하도록 해주며 서버와 통신 시 XMLHttpRequest 객체를 사용하여 다양한 데이터 포맷을 주고 받는다. 위에서 언급한 XMLHttpRequest 객체의 다양한 데이터 포맷이란 XML 뿐만 아닌 JSON, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 말한다. 객체명에서 충분한 오해의 소지가 있으므로 XMLHttpR... JavaScriptJavaScript 자바스크립트로 프로젝트 진행할 때 알아두면 좋은 왕기초지식 이런 형식으로 생긴 함수로 자바스크립트 코드가 감싸져있는 것을 자주 볼 수 있다. 자바스크립트의 장점(?)이면서 단점인 전역변수는 지양하는 것이 좋기 때문에 최소한으로 써야하는데, 이 즉시실행함수를 쓰면 함수 내에서 쓴 것들이 전역변수, 전역 함수가 되지 않는다.(이 함수 없이 그냥 쓴다면 다 전역변수, 전역함수가 되어버리는거다.) 일단 HTML에서 짜놓은 태그들을 선택할 수 있어야 그 태그... JavaScriptJavaScript 📲 자바스크립트의 AJAX Ajax(Asynchronus JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로... ajaxJavaScriptJavaScript javascript 생성자 함수(prototype) JavaScriptJavaScript Array에 쓸 수 있는 유용한 함수 "slice" "The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. => slice()메서드는 기존 ... JavaScriptJavaScript TIL-11일차(feat.이고잉님) 강의 시작하기 앞서, 보편적인 개발과 개인적인 개발에 대해서 이야기를 시작했다. 보편적인 개발은 우리가 주로 사용하는 어플리케이션으로 인스타그램, 페이스북 등등 누구나 사용 할 수 있는 어플리케이션을 개발하는 것이 보편적인 개발이라는 뜻이다. 개인적인 개발은 우리가 스스로 필요해서 만들어가는 어플리케이션을 말한다. 간단한 예로 TODOLIST를 직접 만들어보는 것들이 있을것이고, 개인적인 용... 엘리스SW트랙JavaScriptTILJavaScript (Javascript) 재귀(recursion)와 메모이제이션(Memoization) (1) factorial 함수를 만들었는데 그 안에 factoral 함수를 또 호출합니다. 자기 자신을 호출하는 건데요 인자만 n 에서 n-1 로 바꿨습니다 factorial (3) 호출을 하면 내부적으로는 3*factorial(2) 가 호출됩니다. factorial(2) 는 2factorial(1) 호출하고 factorial(1)은 1factorial(0) 을 호출합니다 factorial(0) =... memoizationJavaScriptrecursionJavaScript JSON.stringify(), JSON.parse() localStorage에는 배열을 저장할 수 없다. localStorage에는 string값(문자열)만을 저장할 수 있다. 배열을 string 값으로 바꿔주고 쓸 때는 다시 객체화 시켜서 꺼내 쓰면 된다. 위 코드의 comment 를 보면 알 수 있듯이 처음 생각했던 대로 와 같이 localStorage에 저장하면 배열을 저장할 수 없으므로 따라서 이를 JSON.stringify 라는 함수를... JavaScriptJavaScript 패스트 캠퍼스 MGS 3기 - 4월 19일(Javascript 특강) 함수 선택자 -getElementById, getElementsByClassName, querySelector 내가 어떤 기능이 필요한지 파악하고, 버튼을 클릭하면 모달창을 띄우는 예제를 만들어 보자! 🤔 tip html 태그에서 on은 '~을 기다린다'로 해석하면 이해가 쉽다. 위의 두 부분(Dry 1, Dry 2)에서 반복이 일어나고 있으므로 코드를 바꾸어 보자! addEventListe... JavaScriptTIL패스트 캠퍼스JavaScript 자동차 경주 게임 : click이벤트로 요소 움직이고 초기화 시키기 문제 출처 - 엘리스 SW 엔지니어 트랙 2기 버튼을 클릭하면 자동차 요소들이 경주를 진행하고, 어떤 차가 이기는지 확인 후 초기화 하는 코드 reset 함수로 초기화 두 자동차의 경주가 끝나고 다시 초기화하는 함수 clearTimeout 을 이용해 타이머를 초기화합니다. car1.timer 에서 timer는 임의로 지정한 변수입니다. CSS :disabled 의사 클래스는 모든 비활성 요소... JavaScriptJavaScript JavaScript 기본 문법 정리 이번주부터 백엔드 세션에 참여하기로 했다.....!!!! 미루고 미뤄오던 백엔드 공부,,, 드디어 시작,,, 그 기념으로 javascript 문법 다 까먹어서 기억이 나지 않는 기본적인 내용들은 복습을 해보려고 한다💨 강의는 생활코딩 강의를 참고했습니다:) true와 false는 변수명으로 사용하면 안돼! 비교연산 1 == 1 true 1 == 2 false 1 > 2 false 1 === ... web멋쟁이사자처럼JavaScriptjsJavaScript 이전 기사 보기