본문 바로가기

분류 전체보기212

108. Virtual DOM, 가상 돔 이란? TIL 23.01.06 DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것 DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. Web Document에 있는 각 UI요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. 문제점 DOM은 새로운 요청이나 변경사항이 있을 때마다 매번 리렌더링을 한다. 매번 새롭게 구성하기 때문에, 렌더할 양이 많으면 속도가 느려지는 문제점이 있다. 이 문제점을 해결하기 위해서 가상돔(Virtual DOM)이 나왔다. Virtual DO.. 2023. 1. 6.
107. HTTP, HTTPS 이해 TIL 23.01.04 HTTP HTTP(Hyper Text Transfer Protocol) - Hyper Text를 전송하기 위해 만든 프로토콜 - HTTP는 클라이언트(브라우저) ↔ 서버 사이의 요청/응답 프로토콜이다. - 웹상에서 통신할 때 사용 HTTP 약점 1. 암호화하지 않은 통신이기 때문에 도청가능 2. 통신 상대를 확인하지 않기 때문에 위장가능 3. 완전성을 증명할 수 없기 때문에 변조 가능 - Client와 Server가 보낸 정보를 중간에서 바꿀 위험이 있음 HTTPS HTTPS는 SSL(Secure Socket Layer)을 이용한 HTTP 통신 방식 (HTTPS: HTTPover Secure Socket Layer) HTTP에 SSL의 껍질을 씌운 것 - HTTPS는 HTTP와 별개인 새로운 프로토콜이 .. 2023. 1. 5.
106. React 공부 트러블슈팅 TIL 23.01.03 오류 해결 Uncaught TypeError: this.setstate is not a function 리액트로 todolist 만들던 중 버튼 만드는 함수에서 아래와 같은 오류가 발생했다. Uncaught TypeError: this.setstate is not a function 오류가 발생한 코드는 아래와 같다. handleIncrement = () => { this.setstate({ count: this.state.count + 1}); } 구글링을 검색도 해봤는데 코드는 이상이 없었다. 문제 되는 부분은 카멜표기법을 사용하지 않은 것이다. 리액트를 배우면서 알게 된 것은 리액트에선 카멜표기법을 사용한다는 것이다. 내가 익숙하지 않아서 setState라고 적어야 할 것을 setstate라고 적어.. 2023. 1. 4.
105. 반응형 미디어쿼리 TIL 23.01.02 반응형 미디어쿼리 미디어 쿼리 - width, height, color .. 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절 - 컨텐츠를 별도로 변경하지 않아도 웹 페이지 접속하고 있는 기기에 알맞은 형태로 스타일을 조절 사용방법 @media 매체유형 and (표현식) { css 스타일 코드 ... } 매체 유형: all : 모든 매체유형 screen : 컴퓨터나 태블릿, 스마트폰... speech : 스크린 리더 print : 프린터 기기 최종프로젝트에서 미디어쿼리를 사용해서 반응형을 구현했었다. 그 당시에는 배우지 않아서 아래 코드처럼 구현했었다. @media (min-width: 760px) { .root { width: 500px; height: 88vh; margin-bot.. 2023. 1. 2.
104. TIL 2022.12.30 TIL 📌 오늘 한 일 이력서 작성 오늘은 캠프수료하고 다음날이다. 평소 같았으면 9시에 일어났겠지만 오늘은 늦잠 자고 빈둥거리다가 2시부터 이력서를 작성했다. 게더에 사람들이 있을까 하고 들가 봤는데 꽤 많은 사람들이 있었다. 다들 이력서 작성하는 거 같기도... 이력서를 작성하기전에 캠프에서 제공해준 이력서 가이드라인, 우수 이력서, 이력서 템플릿등 제공해준 자료를 토대로 일단 작성을 했다. 이력서를 잘 작성했는지는 모르겠다. 오늘은 한 50% 정도 작성을 했다. 작성하면서 지금까지 했던 프로젝트를 다시 한번 보면서 내가 어떻건 담당했고 내가 어떤 코드를 작성했는지 다시 한번 보게 되었다. 보면서 이 코드는 왜 이렇게 작성했는지도 생각해 볼 수 있는 기회였다. 난 모든 프로젝트에서 웹사이트 템플릿을 .. 2022. 12. 30.
103. 내일배움캠프 - 83일 마지막 TIL (마지막 KPT) TIL 📌 오늘 한 일 최종프로젝트 발표회 내일 배움 캠프 수료식 오늘은 최종프로젝트 발표회이자 내배캠 수료식이 있는 날이다. 발표는 2시부터 시작했는데 중간점검때와 다르지 않게 진행되었다. 다른 점은 협력사에서 오셔서 피드백해주신부분? 우리 팀 발표가 처음으로 시작했고 우리 팀이 끝나고는 편안하게 다른 팀 발표를 들었다. 우리 팀 피드백에서는 테스트코드를 잘 사용해줬다라고 들었다. 난 이번에 테스트코드를 작성하지 않았는데 조금이라도 해볼걸이라는 생각이 들긴 했다. 다른 조 발표가 끝나고 바로 채용발제를 했다. 다른 매니저분들이 오셔서 발제해주시고 그거 듣고 나니깐 6시쯤 됐는데 그때부터 바로 수료식이 진행됐다. 게더타운에서 진행됐는데 상장받을 사람들 받고 튜터님들 말씀, 매니저님들 말씀 듣고 끝이었다... 2022. 12. 29.
102. 내일배움캠프 - 82일차 TIL TIL 📌 오늘 한 일 최종프로젝트 발표 준비 오늘은 아침부터 내일 발표준비를 한 거 같다. 나가 맡은 부분은 ppt 부분이라 ppt 만들고 수정했다. Promise와 Callback 차이 Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'이다. Callback이란? 다른 함수가 실행을 끝낸 뒤 실행되는 함수 차이점 콜백함수는 비동기 로직의 결과값을 처리하기 위해 콜백 안에서만 처리를 해야 하고, 콜백 밖에서는 비동기에서 온 값을 알 수 없다. 프로미스를 사용하면 비동기에서 온 값이 프로미스 객체에 저장되기 때문에 코드작성이 용이해짐 Promise 클래스는 비동기 처리만을 위.. 2022. 12. 28.
101. 내일배움캠프 - 81일차 TIL TIL 📌 오늘 한 일 최종프로젝트 ppt 오늘은 최종 프로젝트 발표에 앞서 ppt 제작에 들어갔다. 팀원분이랑 같이했는데 발표시간이 8분으로 주어져서 ppt를 제작하는데 어려움이 있었다. 그리고 필수로 넣어야 하는 항목도 있어서 고민을 많이 했다. 오늘 어느정도 틀은 만들어졌고 내일 팀원분들과 회의를 통해서 수정하면 끝날 것 같다. Black으로 파이썬 코드 스타일 통일하기 Black이란? 파이썬 커뮤니티에서 가장 널리 쓰이고 있는 코드 포맷터. 일관성 있는 코드를 작성하게 해 준다. 설치 pip install black 사용방법 black {파일 또는 폴더 이름} 해보기! 사용하기 전 사용한 후 2022. 12. 27.
728x90

티스토리툴바