프로그래밍 공부하기

오늘 CSS 작업을 하던 중 last-child가 생각대로 작동하지 않는 상황을 발견하였다. 해당 요소가 문제가 있나 싶어서 nth-child()로 선택을 했더니 이건 또 선택이 됐다. 이를 검색해보니 다음과 같은 결론을 얻었다. "마지막 자식 아래에 또다른 요소가 존재한다면 last-child는 사용할 수 없다." 이 상황을 코드로 나타내면 다음과 같다. See the Pen yLaXMRK by ImHyeLim1209 (@imhyelim1209) on CodePen. a:last-child는 a 태그의 마지막 자식 즉 Last Tag 부분이 #00ff00 색으로 바뀔 줄 알았지만 실제로는 동작하지 않았다. a 태그 아래에 div 태그가 존재하기 때문이다! a태그의 마지막 부분을 선택하기 위한 해결방법은..

호이스팅은 Javascript의 특징으로 함수선언 혹은 변수선언을 위로 끌어올린다는 의미이다. 즉, 코드가 내 의도와 다르게 실행될 수 있다는 의미이므로 호이스팅이 되는 코드를 작성하는 것은 지양해야 한다. 1. 변수 호이스팅 function foo() { console.log(a); // undefined var a = 100; console.log(a); // 100 } foo(); 위의 코드에서 변수 a는 첫 번째 콘솔로그 출력 때 선언되어있지 않으므로 오류가 나야한다. 그러나 호이스팅으로 인해 console.log(a) 위에 var a; 라는 변수 선언문이 있는 것처럼 실행이 되어 결과는 undefined가 나온다. function foo2() { console.log(a); // Referenc..

할당과 얕은 복사, 깊은 복사는 헷갈리는 개념이므로 한 번 정리해본다. 1. Assignment vs Copy 할당과 복사의 차이는 무엇일까. 처음에는 reference type을 할당하면 얕은 복사가 된다고 생각했었다. reference를 참조하게 되었기 때문이다. 하지만 엄밀히 말해서 이는 다른 의미이다. let originObj = { pro1: 'AA', pro2: 'BB', pro3: ['C', 'CC', 'CCC'], pro4: { 'D': 'E', 'DD': 'EE' }, }; let assignObj = originObj; let copiedObj = Object.assign({}, originObj); //얕은 복사 위 코드처럼 originObj, assiginObj, copied Obj..

오늘배운 것) 깊은복사 얕은복사 배운 것들 전체적인 복습 [매개변수 vs 인자] function fn(x){ //x는 매개변수(Parameter) console.log(x); } fn("Hello");//"Hello"는 인자(argument) [함수.length vs arguments.length] 함수.length) 함수에 정의된 매개변수의 수 arguments.length) 함수로 전달된 인자의 수(매개변수보다 많을 수도 있다) [arguments] arguments는 함수 내에 자동으로 선언되는 유사배열객체(Array-like object) 함수로 전달된 인자를 값으로 갖고있다. 배열같이 생겼지만 배열은 아니고 [0],[1].. 이라는 속성을 가진 객체이다. 함수 매개변수 중 인자로 들어올 수도 있..

오늘 레슨에서 Closure라는 개념을 새로 배웠다. Java, C#에도 클로저라는 개념이 있었지만 써본 적이 없어서 한 번 정리해보려 한다. Closure란 함수와 함수가 선언된 어휘적 환경의 조합이다. 이해하기 쉽게 말하자면 내부함수에서 외부함수의 문맥에 접근할 수 있는 것. 그러한 내부함수를 클로저 함수라 부른다. Scope Chaining에 의해 외부함수의 문맥에 접근하기 때문에 어휘적 환경의 조합이라 부른다. (스코프는 선언할 때 발생하기 때문이다.) [예시1] function OuterFn() { let num = 123; console.log("num(outer)>>" + num); function InnerFn() { num++; console.log("num+1(inner)>>" + nu..

오늘 git의 기본적인 사용방법을 배워서 정리해본다. 1. 코드를 가져오고 싶은 프로젝트를 찾아 Fork 하기 위처럼 Git의 프로젝트 이름칸 맨 우측에는 Fork라는 버튼이 있다. 이 버튼을 누르면 다른 사람의 저장소(git서버)에 있는 코드를 나의 저장소(git서버)로 가져올 수 있다. 2. 내 로컬 저장소(PC)로 Clone 하기 git clone https://github.com/ImHyeLim1209/Solve_Algorithm_Problem.git git clone https://username:password@github.com/ImHyeLim1209/Solve_Algorithm_Problem.git git Clone git 주소 명령어로 내 로컬 저장소로 해당 프로젝트를 복사해올 수 있다...

오늘 배운 것) git 사용 기본 사용방법 Fork: Main 저장소에서 내 저장소(서버)로 가져오기 Clone: 저장소에서 내 로컬 저장소(PC)로 가져오기 새로운 저장소를 만들어 그 곳에 저장 Push: 수정된 코드를 올리기 Pull: 저장소에서 내 로컬 저장소(PC)로 가져오기 이미 있는 저장소에 새로운 코드 저장 내가 로컬에서 작업하던 내용과 저장소에서 변경된 내용이 merge 같은 부분을 수정하고 있었다면 충돌 merge + fetch git 기본 Branch master: 사용자에게 배포된 코드 develope: 개발 중인 버전 master에서 branch feature: 하나하나의 기능 개발 develope에서 branch하여 하나의 기능 개발 -> 개발 끝나면 develope branch에..

Javascript문서를 보다보면 ...arg라는 표현이 있다. 이 것이 무엇을 의미하는지 정리해본다. ...arg라는 표현이 나오면 2가지 경우로 나누어 해석해야 한다. 1. Rest Parameter 파라미터로 넘어오는 것들을 배열로 묶는다. value1, value2... -> 배열 function printArgs(...args) { console.log(args[1]) // -> 30출력 } printArgs(10, 30, 40) 2. Spread syntax 배열 값을 펼친다. 배열 -> value1, value2... function printArgsPlus(x,y){ console.log(x+y) // -> 7출력 } let arr = [3,4]; printArgsPlus(...arr)

오늘 배운 것) Primitive value vs Reference value Primitive value: number, string, boolean, undefined, symbol, bigint, null(엄밀히 말하면 primitive가 아님) 고정된 크기의 값을 갖는다. 값 자체에 대한 변경은 불가능 하지만 변수에 다른 데이터를 할당할 수 있다. Refefence value: array, object, function 주소 값이 저장된다. 주소 값으로 참조하여 값을 가져온다. 실제 데이터 값은 Heap 영역에 할당되며 이 영역에서 새로운 값이 추가되거나 제거된다.(크기가 동적으로 변한다) Scope: 변수가 유효한/접근 가능한 범위 var: Function Scope/값 재정의 가능/재선언 가능..

오늘 배운 것) Javascript 배열 if([] == []) //->false 배열은 Reference(주소)이기 때문에 빈배열을 찾을 때 위처럼 찾으면 안된다. -> if([].length === 0) 으로 찾자 배열 앞/뒤 요소 추가 = unshift/push 배열 앞/뒤 요소 제거 = shift/pop Uncaught TypeError: tt.push is not a function의미 -> tt가 배열이 아닌데 push를 해서 그런 것! 객체 객체접근방법1) object.property 접근할 속성이 고정되어있다. Dot Notation 객체접근방법2) object['property'] 접근할 속성이 바뀔 수도 있다. Bracket Notation 객체 속성추가 object.newAttr = ..