반응형

발표 스터디 8

내가 파이썬으로 코딩테스트를 보는 이유

내가 파이썬으로 코딩테스트를 보는 이유는 매우 간단하다. 코드를 적게 써도 되기 때문. 문자열과 리스트 등을 직관적으로 다룰 수 있기 때문이다. 문제 5개를 보면서 예를 들어보려고 한다. 문제는 프로그래머스에서 가져옴 문제 1. 정수를 담은 이차원 리스트, mylist 가 solution 함수의 파라미터로 주어집니다. mylist에 들은 각 원소의 길이를 담은 리스트를 리턴하도록 solution 함수를 작성해주세요. 엄청 쉬운 문제다. 아마 보통은 어떤 언어로 풀든 for문을 돌면서 중첩된 리스트의 길이를 구해서 새로운 빈 리스트에 한 개씩 값을 넣는 형태로 코딩을 할 것이다. (아래처럼) def solution(mylist): answer = [] for m in mylist: answer.append..

발표 스터디 2022.05.04

이벤트 – 버블링과 캡처링

Click! 이러한 html 요소들이 있다고 해보자. 보라색 부분을 클릭하면? 노란색 부분을 클릭하면? 버튼을 클릭하면? 어떻게 될까? 보라색 부분을 클릭하면 당연히 hello! 라고 알림창이 뜬다. 노란색 부분을 클릭하면 hi!가 뜨고, 이어서 hello! 가 뜬다. 분명 노란색 div에는 alert('hi!')밖에 없는데 왜 그 부모의 이벤트까지 실행되는걸까? 그게 바로 버블링이다. 이벤트가 발생한 요소부터 루트 요소에 갈 때까지 차례대로 이벤트가 실행된다. 버블링이 있기 때문에 이벤트를 발생시킨 최초의 요소와 이벤트리스너가 있는 원래 요소가 다를 때가 생긴다. 그래서 이벤트의 타겟을 가져올 때 구분해야 하는 점이 있는데.... currentTarget과 target 이다. .addEventListe..

발표 스터디 2022.04.19

리액트의 Virtual DOM 은 도대체 뭐가 좋다는걸까?

리액트의 가장 큰 특징 중 하나는 가상 DOM을 사용한다는 것이다. ReactDOM이 "실제 브라우저에 그려진 DOM"과 가상DOM을 비교하여 동기화 한다. 실제 DOM을 직접 다시 그리면 안좋은걸까? DOM을 조작하는 것이 비효율적인 걸까? 여러 문서들을 본 결과, DOM을 직접 조작하는 것 자체가 비효율적인 건 아니다. 다만 DOM을 한번 수정하게 되면 지난 번에 공부한 것 처럼 ( https://life-of-erin.tistory.com/48?category=1035457 ) 브라우저에서 화면이 그려지는 원리 브라우저를 구성하고 있는 요소 렌더링 엔진의 동작 원리 파싱 - HTML 파싱 HTML 파서의 특징 1. 오류에 너그럽다. HTML Tag가 정확하게 쓰여있지 않더라도 브라우저가 자체적으로 ..

발표 스터디 2022.04.19

자바스크립트 Promise란

Promise란? 비동기 작업의 최종 성곡 혹은 최종 실패를 나타내는 객체 왜 사용하는가? 비동기 메소드를 동기 메소드처럼 처리할 수 있기 때문 예를 들어 피자를 만드는 프로그램을 개발한다고 가정해보자. /** * 피자만들기 시작! * 3초 후에 피자 도우를 깔고, * 3초 후에 소스를 바르고, * 4초 후에 토핑을 올리고, * 2초 후에 치즈를 올리고, * 4초 후에 오븐에 넣고 * 1분 후에 꺼낸다. */ 이런 프로그램을 만드는데에는 두 가지 방법이 있을 것이다. 1. 콜백을 사용 2. 프로미스를 사용 콜백을 사용했을 때 setTimeout(() =>{ console.log("도우를 깔았습니다.") setTimeout(() => { console.log("소스를 발랐습니다.") setTimeout((..

발표 스터디 2022.04.19

JavaScript의 비동기

우선 비동기를 설명하기 전 콜백함수를 먼저 알아야 한다. 콜백함수(Callback)란? * 다른 함수의 인자로 사용되는 함수 * 이벤트에 의해 호출되는 함수 콜백함수의 예 // 다른 함수( setTimeout() )의 인자로 사용되고 있음 setTimeout(() => { console.log("Hello world!") }, 500) function printHello() { console.log("Hello world!") } setTimeout(printHello, 500) //이벤트에 의해 호출되고 있음 CLICK! let objBtn = document.getElementById("my-btn") objBtn.addEventListener("click", () => { console.log("H..

발표 스터디 2022.04.18

자바스크립트의 함수

자바스크립트 함수는 객체이다. 자바스크립트에서는 함수도 객체이기 때문에 다른 객체처럼 변수에 할당할 수 있고, 함수에 매개변수로 넘길 수도 있다. 따라서 함수도 호이스팅(Hoisting)의 대상이다. 함수를 나타내는 방법 - 함수 선언문 vs 함수표현식 1. 함수 선언문 보통 다른 언어에서 쓰는 것 처럼 쓰는 방식. 함수 선언문이 호이스팅의 대상이다. ('선언'이기 때문이라고 생각하면 이해가 쉽다.) function sayHello() { console.log("Hello world!"); } 2. 함수 표현식 변수에 (익명)함수를 할당하는 방식 함수표현식의 장점으로는 콜백으로 사용할 수 있다는 점과 클로져로 사용할 수 있다는 점이 있다. const sayHello = () => { console.log..

발표 스터디 2022.04.04

브라우저에서 화면이 그려지는 원리

브라우저를 구성하고 있는 요소 렌더링 엔진의 동작 원리 파싱 - HTML 파싱 HTML 파서의 특징 1. 오류에 너그럽다. HTML Tag가 정확하게 쓰여있지 않더라도 브라우저가 자체적으로 수정하여 에러를 제거한다. 2. 파싱 과정이 중단될 수 있다. 외부 태그 (, 등) 를 만나면 파싱을 중단하고 외부 소스를 모두 다운로드하고 해석한 후 다시 시작한다. 3. 파싱이 재 시작된다. 파싱이 중단되면 처음부터 다시 파싱 과정을 거친다. 따라서 파싱을 반복적으로 재시작할 경우 파싱 시간이 오래걸릴 수 있다. 파싱 - CSS 파싱 렌더트리 구축 랜더트리란 DOM 트리와 CSS DOM트리를 조합하여 화면에 어떤 요소들이 나타나야하고, 숨겨져야 하는지를 반영한 트리다. 레이아웃 레이아웃은 노드들의 크기, 위치, 레..

발표 스터디 2022.04.04

발표 실력 향상을 위한 스터디

💬 스터디 소개 📍 인원 : 야리니 , 깽 , 연 , 광 , 로 📍 방식 : 2개 조로 나누어 매주 온라인으로 모여 10분내외로 발표한다. 각자는 2주에 한 번 발표하는 것. 📍 목표 발표 스킬 향상 면접 스킬 향상 알긴 아는데 설명하긴 어려웠던 것 설명해보는 기회를 가짐 💬 스터디 기록 📍 2022.03.08 (1회차) 깽 : DNS 개요 야리니 : 이벤트루프와 Promise 📍 2022.03.15 (2회차) 연 : 웹이란? 광 : 2022년 UX트렌드 📍 2022.03.22 (3회차) 깽 : 쿠키, 세션, JWT 야리니 : 버블링과 캡쳐링 📍 2022.03.29 (4회차) 연 : 웹서버와 WAS의 차이점 광 : Information Architecture 📍 2022.04.04 (5회차) - 로 합류..

발표 스터디 2022.04.04
반응형