전체 글 335

22.05.17_TIL

📌 DOM을 사용한 유효성 검사를 해봤는데 역시 프론트엔드가 재밌다!! 📗 오늘 학습한 내용 DOM Create Append Read Update Remove Delete 회원가입 폼 유효성 검사 간단하게 회원가입 폼의 아이디, 비밀번호의 유효성 검사를 dom을 사용해 작업했다. Dom을 다양하게 더 사용할 수 있을 것 같다. 또한, 정규표현식에 대한 나의 지식이 아직 부족해 누군가에게 설명하는 것이 어려웠다. 📘 추가로 공부할 내용 React Component props states Github 아고라스테이츠 클론 작업해보기 코드스테이츠 과정에서 가장 먼저 사용하는 RestAPI를 먼저 공부해야겠다. Graphql이 RestAPI보다 좋다는 것은 많은 글과 영상을 봐서 알지만 현재 내가 먼저 사용하게 ..

22.05.16_TIL

📌 오늘은 Koasn를 주말간 남은 것에 대해 학습하고 나서 궁금한 점을 하나하나 페어와 함께 맞추는 시간을 가졌다. 📗 오늘 학습한 내용 JavaScript 배열 객체 ES6 신규문법 Spread rest 얕은 복사 깊은 복사 Koans (JS기초 문법 문제) Koans는 여태까지 배워왔던 내용을 종합해둔 문제들이었다. 비교적 복습을 많이 진행했다면 쉽게 풀 수 있던 문제라고 생각이 들었다. 하지만 뒤의 객체에 속성과 속성값에서는 많이 헷갈릴 수 있다고 생각한다. 그리고 블로그에 내용을 찾기전에 공식 문서를 보는 것이 첫번째라고 생각하는 계기가 되었다. 블로그에는 자신만의 생각으로 정리한 곳이다 보니 전문적일 수 없었다... 📘 추가로 공부할 내용 DOM Create Append Remove Upda..

22.05.15_TIL(일주일간 회고)

📌 일주일간 다양한 내용을 학습할 수 있었고 알고 있는 내용에서 놓쳤던 부분을 매꿀 수 있어서 좋은 기간이었다. 📗 일주일간 학습한 내용 Git clone: repository를 받아온다. fork: repository를 내 github에 복사한다. pull push add commit node.js npm nvm mocha chai 배열 순서가 있는 데이터의 저장공간 객체 속성과 속성 값이 있는 저장공간 복사 얕은 복사 깊은 복사 자료형 원시 자료형 참조 자료형 스코프 변수의 유효 범위 클로저 함수를 리턴하는 함수 외부 함수와 내부 함수가 존재 외부 함수의 변수는 내부 함수에서 참조 가능하지만 반대로는 불가능 ES6 신규 문법 Spread: ...배열 or ...객체 구조분해할당 배열 및 객체를 분해 ..

22.05.14_TIL

📌 다른 캠프의 지인도 열심히 하는 것을 보며 나도 열심히 해야겠다고 생각을 하는 날이 되었다. 📗 오늘 학습한 내용 JavaScript 스코프, 클로저 내용 정리 GraphQL 페이스북에서 만든 쿼리 언어 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것을 목적으로 둔다. REST API와 비교 GraphQL의 구조 Python 알고리즘 문제풀이 [Leectcode] Remove Element [Leectcode] Search Insert Position [Leectcode] Container With Most Water 주간에 배운 스코프와 클로저에 대해 자세히 정리하였다. 알고리즘 스터디 중 나온 GraphQL에 대한 내용을 개발자가 되기위해 공부해야 한다고 생각하여 추가적으로 공부하였다..

[JavaScript] 클로저

클로저란? 외부 함수의 변수에 접근 할 수 있는 내부 함수 JavaScript MDN: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합, 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다 어휘적 환경의 조합이라는 것이 낯설게 느껴진다. 하지만, 앞서 작성한 스코프에 대해서 이해를 하고 온다면 유효범위가 지역범위라는 것을 알 수 있다. 외부함수, 내부함수(클로저) 외부 함수 안에 있는 함수가 내부함수이며, 클로저라고 불린다. 외부함수는 내부함수의 변수를 사용하지 못한다. 내부함수는 외부함수의 변수를 사용할 수 있다. 내부함수는 여러개를 작성할 수 있다. function init() { let name = "minwoo"; // nam..

Coding/JavaScript 2022.05.13

22.05.13_TIL

📌 이제 section 마지막에 다가오니 기분이 묘하다... 앞으로 더 열심히 해야지!! 📗 오늘 학습한 내용 JavaScript 클로저 함수에 함수가 선언되어 return하는 구조이다. 클로저함수: 외부함수의 매개변수에 접근할 수 있는 내부함수 특징 데이터의 보존 정보의 접근 제한(캡슐화) 모듈화 외부함수 외부함수에 선언된 변수는 내부함수에서 접근이 가능하다. 내부함수 내부함수에 선언된 변수는 외부함수에서 접근이 불가능하다. ES6 신규 문법 Spread rest 3주간 배웠던 내용 종합 퀴즈 스코프, 클로저의 개념은 조금 어려울 수 있다. 내부함수, 외부함수, 외부함수의 변수 등 다양하게 데이터가 이리저리 움직인다고 생각하기 때문이다. 이럴때는 천천히 그림을 그려보면서 흐름을 이해하면 쉽게 할 수 있..

[JavaScript] 스코프

스코프(Scope) 변수의 접근할 수 있는 '유효범위'를 나타낸다. 스코프의 접근 범위 전역 스코프(Global Scope): 가장 바깥의 범위 전역 스코프에서 선언한 변수는 지역 스코프에서 사용이 가능하다. 지역 스코프(Local Scope): 전역 스코프가 아닌 나머지 범위 지역 스코프에서 선언한 변수는 전역 스코프에서 사용이 불가능하다. let hi = 'hello'; // 전역 스코프 function talkMessage(){ // 지역 스코프 let message = 'JavaScript'; return hi + ' ' + message; } console.log(talkMessage());// 'hello JavaScript' console.log(hi);// 'hello' console.lo..

Coding/JavaScript 2022.05.12

22.05.12_TIL

📌 오늘은 결국 몸살이나서 조금 힘들었지만 최대한 오늘 정해진 학습과정을 견뎌냈고, 추가로 복습, 예습까지 진행했다. 대신 빨리하고 쉬어야 할 것이라 생각해서 평소보다는 학습을 못한것은 주말에 채워야겠다. 몸건강이 우선이다!!! 📗 오늘 학습한 내용 JavaScript 원시자료형 고정된 저장 공간을 차지하는 데이터 number, string, boolean, undefined, ,symbol, (null) 하나의 변수에 하나의 데이터만 들어간다. 변수를 복사하여 사용해도 원본은 변경되지 않는다. 참조자료형 대량의 데이터를 다루는 배열(Array)과 객체(Object) 함수(function) 데이터를 저장 공간에 넣는 것이 아닌 주소를 할당한다. 저장 공간을 복사 할 경우 복사한곳의 데이터를 변경할 경우 ..

22.05.11_TIL

📌 개인적인 이슈가 생겨서 많이 힘들었던 날이다... 📗 오늘 학습한 내용 JavaScript 객체 객체의 속성과 속성값 for (let key in obj) 객체에 있는 속성을 변수 key에 할당 for (let [key, value] of Object.entries(obj) 객체에 있는 속성을 변수 key에 할당, 속성의 값은 value에 할당 원시자료형 고정된 저장 공간을 차지하는 데이터 number, string, boolean, undefined, null 참조자료형 대량의 데이터를 다루는 배열(Array)과 객체(Object) 배열은 사용할때 순차적으로 나와 구별하기 쉬웠지만, 객체의 경우 속성과 속성의 값을 둘다 변경하거나 삭제, 비교를 해야하는 과정에서 조금 헷갈렸던 것 같다. 코플릿으로 ..

[자료구조] 스택, 큐, 덱

스택(Stack) 데이터를 차곡차곡 쌓아 먼저 들어간 데이터가 나중에 나가는 후입선출(Last In First Out, LIFO) 방식을 사용하는 자료구조이다. JavaScript Code 및 사용 메서드 push(): 삽입 pop(): 삭제 let stack = []; stack.push('data 1'); console.log(stack);// ['data 1'] stack.push('data 2'); console.log(stack);// ['data 1', 'data 2'] stack.push('data 3'); console.log(stack);// ['data 1', 'data 2', 'data 3'] stack.pop() console.log(stack);// ['data 1', 'data ..

Algorithm 2022.05.10