본문 바로가기
  • 성장일기

전체 글31

2021.07.17 2021.07.17 Section2에 대한 내용이 미리 공개가 되어서 예습을 조금 했다. 객체 지향 파트인데 관련된 용어나 개념 등에 대해 배웠다. 아직 클래스를 언제, 어떻게 쓸지 막막하지만 일단은 개념에 대해 살짝 이해하는 걸로 만족한다. 그동안 아무렇지 않게 사용했던 메소드(arr.push, map)들이 부모 클래스로 부터 상속받아 사용하는 것은 정말 몰랐던 사실이라 자바스크립트의 구조에 대해 조금은 더 알아가는 시간이었다. 너무 개념적인 설명이 가득한 파트라 금방 잊을 거 같아 다시 반복해서 찾아봐야 할 거 같다. 내일은 재귀함수와 자료구조에 대해 학습할 예정이다. 2021. 7. 17.
2021.07.15 2021.07.15 오늘 Section1 HA가 끝났다. 그동안 다양한 페어분들을 만나고 모르는 부분에 대해 배우고 알려주고, 도움이 될만한 사이트들을 공유하면서 나의 실력이 전보다 많이 상승한 것 같다. 벌써 Section1을 마쳤다는 생각에 후련하기도 하지만 금방 다가올 Section2에 대한 준비를 소홀히 하지 않고 예습을 해야겠다. 대충 찾아보니 알고리즘, Redux, Server 그리고 Network와 같은 것들을 배우는 거 같다. 이런 것들은 내가 비전공자라 관련 지식이 별로 없어 살짝 겁이 나지만 지금까지 해왔던 것처럼 반복해서 찾아보고 블로깅을 해 눈에 익숙해져야 겠다. 오늘부터 바로 Web 기초 지식과 Server에 대해 공부를 할 예정이다. instaclone은 거의 다 완성했지만, 공.. 2021. 7. 15.
HTTP와 HTTPS HTTP와 HTTPS HTTP HTTPS Status Code Request Method HTTP HyperText Transfer Protocol의 약자로 HTML이나 JSON과 같은 다양한 데이터를 HTTP를 통해 교환할 수 있습니다. HTTP의 구조는 요청(Request)과 응답(Response)으로 구성되어 있으며, client가 server에 Request를 보내면, server에서 client로 요청에 대한 Response를 보내는 방식입니다. 예를들면, client가 특정 url을 접속하면 해당하는 url에 맞는 HTML 문서, 이미지, 스크립트 등을 전송하여 client가 이를 전송받게 됩니다. HTTPS HyperText Transfer Protocol Secure의 약자로 보안에 취약한.. 2021. 7. 15.
2021.07.13 2021.07.13 React twittler state & props 스프린트를 끝냈다. 사실 어제 다 완성을 하긴 했는데, 하다보니 여러 궁금증이 생겨서 이것저것 시도해보고 오늘 마무리를 지었다. 기본 과제뿐만 아니라 Advanced Challenge까지 해결했으며, 모든 test 케이스도 빠짐없이 통과했다. 기초를 다시 다질 수 있어서 좋았던 것 같다. 내일은 이틀에 걸친 Section1 HA가 시작된다. React는 어느정도 익숙하지만, 기본 개념이 조금 부족하다 생각되어 그부분을 집중학습을 해야할 것 같다. 완성된 모습 2021. 7. 13.
2021.07.12 2021.07.12 그동안 프론트엔드의 꽃이라 할 수 있는 React를 배웠다. React의 장점과 특징에 대해 리마인드하는 시간을 가졌으며, map을 사용할 때 key를 입력해야 하는 이유가 무엇인지 자세히는 알지 못했는데 확실히 알게 되었다. 간단히 설명하자면, React에서는 어떤 항목이 변할 때 변하는 부분만 리렌더링을 하는데 이때 map을 통해 여러 항목을 추가할 때 이를 식별하기 위한 고유한 key값이 필요하다. (리액트 key) [https://ko.reactjs.org/docs/lists-and-keys.html] 현재 3일째 React를 활용한 twittler 스프린트를 진행하면서 SPA의 장점과 단점, React훅을 활용한 State와 props에 대해서 자세히 배웠다. React를 사.. 2021. 7. 12.
Infinite Scroll 구현하기 Scroll event, IntersectionObserver와 같이 여러 방법이 있지만, IntersectionObserver를 간편히 사용할 수 있는 React Hook react-intersection-observer로 Infinite Scroll을 구현하는 방법을 소개하겠습니다. Infinite Scroll을 구현하긴 위해서 통신을 할 때 정해진 양만큼의 데이터를 받아와야 합니다. 예를들어, 처음 받은 데이터가 5개이고, 스크롤을 내렸을 때 5개의 데이터를 추가로 받아오는 방식입니다. 5 5+5 5+5+5 사용 방법을 알아보기 전에 먼저 IntersectionObserver이 무엇인지 간단하게 설명하자면, 대상이 화면에 보이면 callback 함수를 실행하여 원하는 동작을 수행할 수 있도록 타겟을.. 2021. 7. 9.
유용한 JS 고차함수 유용한 JavaScript 배열 메소드 중 고차 함수 forEach, map find, filter reduce sort some, every forEach, map forEach 배열 내의 모든 요소에 주어진 callback 함수를 각각에 대하여 실행합니다. arr.forEach(callback(currentvalue,index,array)) const arr = ['a','b','c']; arr.forEach((element,index)=> console.log(element,index)); // "a" 0 // "b" 1 // "c" 2 map 배열 내의 요소에 주어진 callback 함수를 각각에 대하여 실행한 결과를 모아 새로운 배열을 리턴합니다. fo.. 2021. 7. 7.
M1 맥에서 NVM을 통한 node 설치 시 오류 설치가 원활히 되지않고 알수없는 오류가 반복해서 나올 때, node 14이하 버전 설치 시 arch -x86_64 zsh nvm install version 을 순서대로 입력하면 됩니다. 2021. 7. 6.
2021.07.05 2021.07.05 오늘은 DOM에 대해서 배웠다. DOM에 대해서 어느정도는 알고 있었지만, Vanilla JavaScript로 뭔가를 만들어 본 적은 없어서 익숙하진 않았다. 간단하게 DOM을 조작하는 걸 하나하나 따라하는 게 매우 흥미로웠고, 전엔 몰랐던 Node와 Element의 차이도 알게 됬다. 오후 시간엔 회원가입 페이지에서 유효성 검사를 하는 Sprint를 간단히 진행을 하였고, 요구사항에 맞춰 과제도 잘 제출했다. Advanced Challenge를 통해 DOM의 더 깊은 내용을 알 수 있었는데, 지금까지 강의를 들으면서 한번도 듣지 못한 심화적인 내용 또한 알게 되었다. 오늘부터 매일 오전에 알고리즘 2문제씩 해결을 해야 하는데, 아직까진 할만한 거 같아서 option으로 주어진 문제를.. 2021. 7. 5.
DOM 조작 CRUD CREATE : createElement READ : querySelector, querySelectorAll UPDATE : textContent, id, classList, setAttribute DELETE : remove, removeChild append, prepend, appendChild CREATE 새로운 Element를 생성하는 방법으로, 아래 코드를 입력하면 새로운 div element를 만들게 됩니다. document.createElement('div') // element 생성 const newDiv = document.createElement('div') // element 생성후 변수에 할당 앞으로 이렇게 생성한 div element를 조작.. 2021. 7. 5.

티스토리툴바