Study

[#5] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. 이벤트 버블링- 이벤트가 자식요소에서 부모요소로 전파되는 현상- 막기위한 방법으로는 e.stopPropagation()을 사용 const $table = document.createElement('table'); const rows = []; let turn = 'o'; const callback = (e) => { if (e.target.textContent) { alert('빈칸이 아닙니다.'); return; } e.target.textContent = turn; ..

[#4] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. 배열 중복 확인하는 방법a) Set 함수 사용const numbers = [1, 2, 3, 4, 5, 6]if (new Set(numbers).size !== 6) { return alert('중복된 숫자를 입력했습니다.');}b) forEach, inclues 사용 (Set 함수 없이)const numbers = [1, 2, 3, 4, 5, 6];const newNumbers = [];numbers.forEach((v) => { // 각 원소들을 돌면서 if (!newNumbers.includes(v)) { // 새로운 배열에 없는 값인 경우 집어넣기 newNumbers.push(v); // 즉, 이미 있는 값인 경우 안담김 }});if (newNumber..

[#3] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. Math.random( ) 생각하는 과정let m = Math.random()// 1-1 (디폴트)0  2. 선언할 때, 배열 vs 객체배열: 단순히 값만 담을 때객체: 각 값에 키값, 즉 이름이 필요할 때 3. event.preventDefault()원래 내장된 객체의 기능을 제거하고 싶을 때 ( , )ex) form 객체에서 button 클릭 시, 자동으로 새로고침 되는 경우-> 기존에 담아놓은 변수들이 비워지게 됨-> 새로고침 안되게 event.preventDefault() 사용 4. 중복값을 제거하는 Set 함수Set 함수 길이는 length 대신 size사용// 사용법const array = [1, 1, 2]const a = new Set(array) // [1, 2]a.size // 2..

[#2] 복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. 고차함수 (코드 정리)let num1 ='';let num2 ='';let operator ='';const $result = document.querySelector('#result');// #1const onClickNum = (number) => { return () => { // return 안쓸 경우 'return undefined;'가 생략되어있기 때문에 결과 값이 'undefined'가 됨 (event) => { // () => {} 함수를 return에 넣어주면 해당 함수가 바로 실행됨 => 고차함수 if (operator) { Number(num2) += number; }else{ Numbe..

챗지피티와 공부한 Git에 대해..

[모든 답변은 chat gpt 4o에서 발췌했습니다]Git이란?| 분산 버전 관리 시스템으로, 소스 코드의 변경 사항을 추적하고 여러 명이 공동 작업을 할 수 있도록 도와줍니다. Git에서 해시(Hash)란?| 커밋을 고유하게 식별하기 위해 사용되는 40자 길이의 SHA-1 해시 값을 의미합니다. 이 해시 값은 커밋의 내용, 작성자, 작성 시간 등의 정보를 바탕으로 생성됩니다. SHA-1 해시는 Git의 버전 관리 시스템에서 매우 중요한 역할을 합니다.해시의 특징-- 고유성: 각 커밋은 고유한 해시 값을 가지며, 동일한 내용이라도 커밋 시간, 작성자 등이 다르면 다른 해시 값을 가집니다.-- 불변성: 커밋의 내용이 변경되지 않는 한 해시 값도 변경되지 않습니다. 따라서 커밋의 무결성을 보장합니다.-- 추..

복습하는 자바스크립트 with <코딩자율학습 제로초의 자바스크립트 입문>

1. typeof NaN은 number이다.2. 숫자parslint("3월") // 3Number("3월) // NaN3. falsy 값!!false // false!!'' // false!!NaN // false!!0 // false!!undefined // false!!null // false4. typeof의 버그typeof null // object (원래는 null이 떠야하지만 자바스크립트 언어 개발자의 실수로 굳혀짐)-> == null 로 체크해야함5. 선언문let num = 1 // num은 변수명6. 덧셈 연산자// 셋다 동일i = i + 1i += 1i++7. for문for(시작(1); 조건식(2); 반복식(4)) 동작문(3)// 1->2->3->4->2->3->4->...for(l..

creacte-next-app 없이 next.js 구축하기

아래의 내용은 중 한 부분입니다. create-react-app과 create-next-app은 각각 리액트, 넥스트 애플리케이션을 손쉽게 만들기 위한 CLI 도구이다. 해당 도구들은 애플리케이션 구축에 필요한 대부분의 작업을 대신해주기 떼문에 프로젝트 구조를 공부하기는 어렵다. 그리고 2023년도에 리액트 팀은 "create-react-app은 미래에 더이상 보일러플레이트 CLI가 아니라 여러 리액트 기반 프레임워크를 제안하는 런처 형태로 변경될 예정이다."라고 했기 때문에 아무것도 없는 상태에서 리액트 프레임워크를 구축하는 방법을 공부할 필요가 있다. CLI란? Command Line Interface의 약자로, 컴퓨터와 사용자 간의 상호 작용을 위해 텍스트 명령어를 사용하는 인터페이스를 의미합니다..

서버 사이드 렌더링이란? | with Next.js

전통적인 사이드 렌더링과 SPA 비교 위의 이미지를 보면, 최초 요청 이외에도 계속 서버에서 HTML을 받아올지 아닌지의 차이를 볼 수 있다. 쉽게 말하면 웹페이지 랜더링의 책임을 어디에 두느냐에 따라 SPA냐 아니냐가 구분된다. 여기서 Ajax란 브라우저가 갖고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법으로, ES6의 fetch().then()문법과 비슷하다고 생각하면 된다. 서버 사이드 렌더링의 장점 ✓ 최초 페이지 진입이 비교적 빠르다. - 서버에서 HTTP 요청을 수행하고 서버에서 HTML을 그려서 내려주는 것이 클라이언트 단에서 수행하는 것보다 빠름 ✓ 검색 엔진 최적화에 유용하다. - 검색 엔진 작동 과정 1...

SEO 최적화

SEO는 요즘 빠질 수 없는 개념인 것 같다. SEO때문에 Server Side Rendering을 편하게 쓸 수 있는 Next.js를 사용하는게 아닌가 싶기도 하다. 여기서 태그들의 예시는 예전에 했던 유튜브 클론코딩 프로젝트로 한다. SEO는 무엇일까? 검색 엔진 최적화(Search Engine Optimization)라고 불리며 보통 줄여서 SEO라고 많이 한다. 웹사이트의 검색 엔진 결과 페이지(SERP)에서 높은 순위를 차지하도록 웹사이트를 최적화하는 프로세스이다. 웹사이트를 네이버, 구글과 같은 검색 엔진의 동작에 적합하게 맞추어 관련 정보를 검색할 때 웹사이트 노출이 더 잘되게 만드는 작업인데 해당 서비스의 수익성과 직결된다고 볼 수 있다. 대표적인 SEO Tag - Title WETUBE ..

AbortController in UseEffect | UseEffect 내부에서 비동기함수 실행 할 때

요즘 웹 개발에서 api를 패치하는 비동기 작동을 다루는 것은 흔한 일이고 나도 프로젝트에 당연하게 사용하고 있다. 그런데, 이 행위는 생각보다 오래 걸리고 예기치 못한 이슈를 발생시키면서 불필요한 메모리를 잡아먹기도 한다. 이때 필요한 것이 바로 자바스크립트의 기능 중 하나인 AbortController이다. 특히 React의 useEffect 훅과 사용할 때 굉장히 유용하다. AbortController란? abort는 '중단하다'라는 뜻으로, 이전 요청을 취소하는 취소하는 역할을 한다. AbortController을 fetch할 때 사용할 때의 장점 1. 효율적인 리소스 관리 한 api가 완료되는데 오래 걸릴때, 그 요청을 취소함으로써 불필요한 메모리 소비를 막을 수 있다. 2. 빠른 유저 경험 만..

5탄 [프로그래머스 입문 문제] 코테에 필요한 파이썬 기초 문법 정리

프로그래머스 입문문제 100개 중(정답률 높은 문제 순으로) 100개를 풀면서 헷갈렸던, 몰랐던 문법들을 정리했다.라스트 5탄! 앞에 1-4 탄이 있지만 각각 별개의 문법이라 순서 상관없이 보면 된다. 현재 이코테 기출문제와 소마백준문제집을 중점으로 풀고있는데 거의 몇 가지 문법을 돌려서 쓰게 된다. 하지만 덕분에 이제 기초 문법을 고민하느라 시간을 더 뺏기진 않는다.😃 1. 바다코끼리 연산자 := def solution(id_pw, db): if db_pw := dict(db).get(id_pw[0]): return "login" if db_pw == id_pw[1] else "wrong pw" return "fail" ---------------------- # 바다코끼리 사용 안했을 때 def so..

[2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79 | 모던 리액트 딥다이브

*** 읽을 때 주의할 css 1. [링크] 2. 밑줄 밑줄에 대한 개념 설명 3. h1제목 4. h2제목 모던 리액트 딥다이브 [2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79 (자세한 예시는 꼭 책을 참고하시길 추천합니다.) 1.4 클로저 1.4.1 클로저란? 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합 *변수가 코드 내부에서 어디서 선언됐는지 말하는 것 함수가 속한 렉시컬스코프를 기억하여 함수가 그 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능 1.4.2 변수의 유효 범위, 스코프 전역 스코프 (global scope) 전역 레벨에 선언 브라우저 환경에서 전역 객체는 window이다. 함수 스코프 함수 레벨에 선언 자바스크립트 특징 { }블럭이 ..

코딩테스트 파이썬 | 백준 SW마에스트로 모음집, 프로그래머스 고득점 kit 문제 답 모음집

- 백준 SW마에스트로 12기 지원대비 문제풀이 - 프로그래머스 고득점 kit - SQL 고득점 kit - 이코테 기출문제 답과 간단설명 및 문제별로 링크를 걸어놨다. README를 참고하길 바란다. GitHub - MaraisLee/coding_test: 코딩테스트 연습 코딩테스트 연습. Contribute to MaraisLee/coding_test development by creating an account on GitHub. github.com 혹시 필요하신 분들, ⭐️눌러놓고 맛있게 잘 사용하세요. 계속 업뎃될 예정! 소마 코테 1차까지 달려보자아~

[1주차] 자바스크립트의 동등 비교, 함수, 클래스 | 모던 리액트 딥다이브 공부

1.1 자바스크립트의 동등 비교 1.1.1 자바스크립트의 데이터 타입 원시타입 객체가 아닌 모든 타입, 메서드를 갖지 않음 boolean 0, NaN, ””, null, undefined 모두 falsy 한 값 null 명시적으로 비어 있음을 나타내는 값 undefined 선언됐지만 할당되지 않은 값 number 최대 2^53-1저장 가능 string 템플릿 리터럴(백틱``사용, 줄바꿈0, 표현식0) symbol 고유한 값을 나타낼 때 사용, Symbol()함수 사용 bigint number의 숫자 크기 제한을 극복, ES2020 객체타입 object 원시 타입 이외의 모든 것 배열, 함수, 정규식, 클래스 참조를 전달 (=참조 타입) 1.1.2 값을 저장하는 방식의 차이 원시 타입 변하지 않는 형태의 ..

에라토스테네스의 체 | 프로그래머스 소수찾기 | 파이썬

프로그래머스 > 코딩테스트 > 알고리즘 고득점 Kit > 완전탐색 > 소수찾기 문제를 해결하기 위해 구글링을 하다가 '에라토스테네스의 체'를 알게 되었다. '에라토스테네스의 체'는 수학에서 소수를 찾는 빠르고 쉬운 방법이다. 고대 그리스 수학자 에라토스테네스가 발견했다고 한다. 알고리즘은 아래와 같다. 이렇게 풀어 설명한 것을 보면 되게 쉽게 느껴지는 알고리즘이다. 하지만 이렇게 간단하게 생각하기까지가 참 어려운 것 같다... 아래는 python(3.6.4)으로 구현한 코드이다. def prime_list(n): # 에라토스테네스의 체 초기화: n개 요소에 True 설정(소수로 간주) sieve = [True] * n # n의 최대 약수가 sqrt(n) 이하이므로 i=sqrt(n)까지 검사 m = int..