익명의 개발노트

자바스크립트 어렵다고 느낀 부분 중에 하나이다. 익숙치 않아서 그런거 같은데.... 1. 작성된 트윗 뿌려주기2. 신규트윗 작성 및 시간반영3. 이름 선택시 필터링4. 새로고침 누를경우 필터링 풀기5. F5 누를 경우 데이터 유지하기 결론은 쥐어짰다. 나는 개발자랑 적성이 안맞는다고 느꼈다. 잘 안되면 이런 극단적인 생각까지 들지..... 원리와 도구가 뭐있는지 만 알면 요리하긴 쉬우니.. 익숙해지면 된다고 다짐을... 그리고 그냥 하면 된다. 1번 진행간 어려웠던 점은 ui, li 생성해가는데 상당히 애를 먹었다. object HTMLUListElement ← li를 HTML에서 클래스 이름으로 끌어와서 하다보니, 저넘이 계속 뜨고.. 몇시간 동안 삽질해서 잡았는데... 댓글이 아래로 들어가네???! ..

z-index 웹 페이지가 다이나믹 해지고 요소들의 배치가 자유로워지면서, 때때로 서로의 위치가 겹치는 요소들이 생기기 마련임. 이때 어느 것을 위에 표시할 것인가를 제어해주는 속성이 이것임. 파워포인트를 예를 들면 겹쳤을때 , 가장 위로, 가장 아래로 이런거랑 같다. 특징 1) z-index값을 사용하려면 해당요소의 position값이 relative, absolute, fixed 중 하나여야 한다. 2) position이 지정되지 않았다면, z-index값은 0인 것 처럼 작동한다. 숫자가 클수록 위로 올라온다. 3) z-index의 값은 같은 depth의 요소(형제요소, siblings) 끼리 비교하는 것이 원칙임. 4) z-index의 기본값은 auto이며, 부모의 z-index값이 auto인 경..

정렬 방법 1. float : 기본적으로 띄워지게 만드는 속성임. 블록요소를 가로로 나란히 정렬하기 위해 사용. 일단 이걸쓰면 더는 width가 100%가 아니다. 단점은 부모태그가 float 속성의 자식 태그를 인식하지 못함. 해결하려면 overflow: auto나 overflow: hidden 를 줘야함. 블록 요소를 가로로 나란히 정렬하기 위해서는 float을 이용float된 요소는 기본적으로 상위 요소가 영역을 파악하지 못함 (float가 요소를 띄움)float는 띄어지기 때문에, 보통 다음 블록 요소는 float된 요소 밑에 깔리게 됨.블록 요소는 기본적으로 float을 인식하지 못함. 텍스트, 인라인 요소, 그리고 float된 요소만 다른 float요소를 인식 함.float된 요소를 부모 요소..

1. static : 모든 태그들의 기본. 디폴드 값이 static이라 따로 써주지 않아도 됨. 2. relative : 태그 위치 변경하고 싶을때 position : relative 사용. top, right, bottom, left 속성 사용 할 수 있음. 각각의 방향을 기준으로 태그 안쪽방향으로 이동하기 때문에 바깥쪽으로 이동하게 하려면 -값을 줘야 하는 특징이 있음. static 상태를 기준으로 주어진 값만 큼 움직임. top, left, right, bottom 속성이 있어야 움직임. 3. absolute : position : static 속성을 가지고 있지 않은 parents를 기준으로 움직인다. 부모 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(b..

레이아웃 & 박스모델 1. margin : 다른 태그와의 거리를 나타냄. 2. border : 테두리이며, 가장 기준임. 3. padding : border와 content사이의 간격 4. content : 보통 태그가 차지하는 영역 이 중에서 기준은 border가 된다. 5. box-sizing : 너비를 직접 일일이 계산하고 싶지 않을때 사용. * padding과 margin은 width에 포함되지 않는다.( box-sizing: border-box 이면 margin만 미포함)

HTML 컨텐츠 관련 Tag 1. : 웹 브라우져를 열때 이부분은 표시가 안됨. 사용자에게 안보이는 부분임. 2. : 실질적인 html 을 작성하는 부분 3. : css를 html에 적용시키고자 할때 사용 4. : 실행가능한 코드를 문서에 포함시키거나 참조하기 위한 것. 5. : 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그. 6. vs : 영역을 설정할 때 사용함. 1) 차이점 : div는 줄바꿈이 되지만 span은 옆으로 붙어버림, 텍스트 표현시 div는 사각형 박스로 구역을 정하지만, span은 문장단위로 지정이 됨. div은 폭, 넓이 지정 가능하지만, span은 지정 불가. ※ table 태그대신 div와 span이용해서 간결한 표 만들 수 있음. 7. : 문서를 연결하는 Tag, 앵커..

콜백 함수 : 함수를 인자로 넘기는 함수. ex) function executableCode(){ } function otherCode(callback){callback();} 위 결과에서 1. otherCode(executableCode); 입력하면?? //undefinded 2. otherCode(executableCode()); 입력하면?? //typeEr ror 2번째는 클로져로 실행하면 됨.

비동기 호출이라고도 한다. 동기 호출과 비동기 호출의 차이점을 먼저 보면, 예) 식당에 간다. 식당에 왔다.메뉴판을 본다.김밥을 주문한다.테이블을 셋팅한다.김밥을 먹었다.계산한다. 위와 같은 흐름으로 진행한다 하면, 동기식은 순서대로 진행한다. 그렇기때문에 김밥을 주문하고 김밥이 나올때까지 암것도 못한다. 하지만 비동기식은 김밥주문하고 테이블 세팅하고 김밥나오면 먹으면 된다. 먼저 요청하고 응답받을때까지 기다리는게 아니라, 다른거 하면서 기다리는 거다. 통상 서버와의 요청시에 비동기식을 사용한다. 비동기식 사용 유형은 크게 3가지 1. 이벤트 핸들러2. 타이머에서 콜백(애니메이션)3. 서버에 자원요청(fetch이용) 대표적인 비동기식 함수는 setTimeout함수가 있다. 특징이 시간에 0을 넣어도 동기..

프리코스를 시작한지 1주 반이 지났다. 9일째군.. 그중에서 프리코스 과제3번인 Underbar에 대한 소감을 남긴다. 라이브러리 함수들을 조건에 맞게 수정하는 과제이다. 결론부터 말하자면... 의욕떨어졌다... 너무 어려웠다... 가장 헷갈리는 것은 part1, part2 에 주어진 함수들을 보고 수정하는게 너무 어려웠다. 이 문제의 키포인트는 자바스크립트에서 고유기능을 생각해보면 조금더 쉽게 접근할 수 있지 않았나?! 이다. 대부분의 문제를 배열을 활용해서 해결을 했다. 그 와중에 몰랐던 개념도 알게되고.... 나쁘지 않다. 왜? 과제를 거치면서 성장하는 느낌을 받는다. 물론 좌절감도 맛보게 될텐데... 너무 어렵다, 못하겠다 라고 마음만 먹지 않으면 될 듯 싶다. 이거 잘하면 뭐 더 잘하겠지만, 못..

자바스크립트에서 Arguments 는 모든 function() 안에서 사용할 수 있는 지역변수이다. 자바스크립트 프로그래밍에서 중요하다고 하며, 자바스크립트 라이브러리는 arguments 객체를 사용하기 때문에 자바스크립트 개발자라면 사용법에 익숙해야한다. 특징을 살펴보자. 1. argument는 함수 내에서 변수를 통해 접근할 수 있다. 2. 호출된 arguments 는 함수에 전달된 인수(arguments)를 배열 형태의 object로 표현한 것이다.. 하지만, 실제 배열은 아님. 유사배열?! 그래서, Array의 메소드를 .length 빼고 사용할 수 없음. ※ arguments.length는 실제 함수에 사용자가 넣은 인자(파라미터) 의 갯 수임. ex) function one(arg1){......