시작은코딩이지만끝은뭐가될지모르는 시작은코딩이지만끝은뭐가될지모르는

2주짜리 짧다면 짧고 길다면 긴 프로젝트가 끝났다.. 토요일 발표까지 마치고나니 4시,, 시원섭섭하게 프로젝트는 끝이 났다. 진심어린 소감은 회고 이후 맨 아래 적어보려 한다. 월요일 220530 상품 카테고리 페이지를 만들었다. 사실상 내가 작성하는 페이지에서 가장 중요한 메소드였던 건 insertAdjacentHTML 이었다. html의 요소들을 클릭하거나 화면에 보여줄 때 insertAdjacentHTML 을 사용하여 보여주는걸 자주 사용했는데, 예를 들면 이런 거다. //query String value값 선언 const [_, query] = location.href.split('?'); const [queryKey, queryValue] = query.split('='); //데이터 받아오기 ..

기록의 중요성을 앎에도 꾸준히 적지 못했다. 하루하루 따라가기에 바빠서,, 는 핑계라고 할 수 밖에 없으려나. 그래도 프로젝트에 대한 기록은 짧게라도 해야겠다. 엘리스의 커리큘럼 상 8~9주차는 프로젝트 기간이다. 레이서들 4명, 5명이 짝을 짓고 한 팀이 되어 제시하는 프로젝트를 하는 주이다. 프로젝트 해! 하고 던져주는 게아닌, 7주동안 배웠던 HTML, CSS, JS 및 Node, Express, Mongoose 등을 이해하고 활용하는 기간이라고 보는 게 좋다. 이미 기본 틀을 갖춰두고 시작을 하는데, 그 안에서 각자 스스로 구성을 하는 것이다. 우리 팀은 전공자 2 , 복수전공 1, 비전공 2명으로, 그 중 2명은 백엔드, 3명은 프론트엔드로 구성됐다. 월요일 처음 뼈대 코드(스켈레톤 코드)를 받..

자바스크립트의 this 레이서 한 분이 질문했는데, 튜터님의 답변이 너무나 이해하기 쉬워 따로 적어놓는다. 우선 아래 3가지 규칙이 this와 관련한 규칙 전부입니다. 이 이외에는 없습니다. 1. 객체(object)의 메소드(객체 내의 함수)가 일반 함수인 경우, this는 그 객체가 된다. 2. 객체의 메소드가 화살표 함수인 경우, this 는 lexical context (화살표 함수 밖 컨텍스트) 이다. - 2번 규칙은 사실, 화살표 함수가 객체에서 쓰이든, 객체의 함수에서 쓰이든, 함수의 함수에서 쓰이든, 언제든지 적용될 수 있는 규칙입니다. 어느 경우든, lexical context의 this가 화살표 함수의 this가 됩니다 3. 1번도 2번도 아닌 경우의 this는, window (stric..

엘리스 SW엔지니어 트랙 2기 DAY_14 자바스크립트의 객체 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용 프로퍼티 프로퍼티 키(이름)와 프로퍼티 값으로 구성 메소드 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 즉, 메소드는 객체에 제한되어 있는 함수를 의미 생성자(constructor) 함수 new 키워드와 함께 객체를 생성하고 초기화하는 함수 인스턴스(instance) 생성자 함수를 통해 생성된 객체 이번주 해야할 일 - map, filter , reduce, closer, this,실행컨텍스트 ..

엘리스 SW엔지니어 트랙 2기 DAY_13 📝 목차 오늘의 잡담 Rest Operator (나머지 매개변수) 인상깊었던 문제 이고잉님의 수업이 나날이 어려워지면서, 주말에 시간잡고 차근차근 따라해보기로 마음먹었다. 온라인강의의 장점은 수업이 녹화됐기에 녹화수업을 다시 꺼내볼 수 있는점 아닐까 코치님 시간에 같이 푼 문제 중 개념 정리가 필요한 것 일부만 정리해보려 한다. 사실 코치님 틱택토 설명 열심히 해주시는데 잘 못따라가는중 ㅎ;; 어떤 분들은 틱택토를 제대로 이해해서 더더 바꿔나가는 모습보니 부러울 따름~~ Rest Operator(나머지 매개변수) Rest Operator(나머지 매개변수)는 함수의 나머지 인자를 가리키며 여러 개의 매개변수를 하나의 배열로 묶어서 전달받을 수 있습니다. 제일 이해..

엘리스 SW엔지니어 트랙 2기 DAY_11 📝 목차 오늘의 잡담 템플릿 리터럴 map 화살표 forEach() reduce concat 🎤 오늘의 잡담 지난주 addEventListener와 같이 많이 사용되는 친구들 (getElementById, querySelector) 등을 어느정도 이해하고 넘어왔다고 생각했는데, 오늘 또 보니 어떻게 쓰는지 여전히 헷갈리고 ~ scope 나오고 화살표 함수 나오고 this 나오고 뭐 나오고 나오고 .. 그래도 그나마 지난주까지는 이고잉님 수업을 따라갔다 생각했는데 이번엔 이고잉님 수업조차도 살짝 버겁다. 물론 코치님 수업은 한귀로 들어오고 한귀로 나감 (죄송ㅜㅜ) ✍️ 템플릿 리터럴(template literal) 템플릿 리터럴(template literal)은 ..

엘리스 SW엔지니어 트랙 2기 DAY_10 오늘은 7시간 강의 듣기가 아닌, 그동안 배운 HTML, CSS, JAVASCRIPT를 활용하여 자기소개서를 제출하는 날이었다. 와 어떻게하면 기깔나게 만들지 ?! 하면서 고민하는데 역시 고민하고 원하는만큼 안나옴 ㅋ 자바스크립트 열심히 활용하려 하는데 하~도 안먹혀서 그거로만 2시간 보내다가 이러다 결국 못내겠다 싶어 그냥 html, css 정도만 소박하게 끄적하고 제출했다. css도 너무 어려운드읏 ㅠㅠ 글만 썼다고 봐도 무방 ^^;; 잘 배워서 더 잘할거야

엘리스 SW엔지니어 트랙 2기 DAY_9 📝 목차 getElementById, getElementsByClassName ... VS querySelector(All) 사실 두개가 무슨 차이로 굳이 나눠쓰는 지 이해 못했다. querySelector 쓰면 Id, class 다 선택 가능한거 아녀? 그럼 querytSelector 쓰지 왜 getElementById 이런거랑 혼용해서 쓰지? 누가 알려주실분 ! 궁금해서 찾아보니 이런 블로그 글도 발견 https://bobbohee.github.io/2021-02-12/getelementbyid-versus-queryselector#:~:text=getElementById%EB%8A%94%20id%20%EC%86%8D%EC%84%B1%EC%97%90,%EC%8..