Web Dev
-
블록 스코프와 지역스코프Web Dev/1. JS 문법 관련 2021. 3. 28. 16:37
function test() { for (var i = 0; i console.log(v), 100); })(); for (let i = 0; i < 10; i++) { // let 키워드는 블록스코프 단위로 돌아가기때문에 block스코프에 포함 console.log("i", i); } } } test(); 스코프는 식별자가 유효한 범위를 말한다 - var키워드는 함수가 실행되면서 생성된 실행컨텍스트의 지역스코프에 등록되고, - let, const는 블록 스코프를 단위로 동작해서 블록 내에 있을때는 블록스코프에 등록이된다. 아니면 L..
-
성공과 실패를 결정하는 1%의 네트워크 원리 2장: 프로토콜 스택, LAN 어댑터Web Dev/7. 네트워크 2021. 3. 23. 13:35
프로토콜 스택이 진짜 뭔가 전송하는곳 전체적인 흐름 브라우저에서 뭐좀해달라고 요청 -> 클라이언트의 소켓이 만들어짐 서버측에도 소켓이 있음 클라이언트 소켓이랑 서버 소켓이랑 어떻게 접속을 함: 누가 누구랑 연결되어있는지! 데이터를 송수신한다. 서버에서 다끝나면 연결을 끊는다(소켓 말소) 네트워크 제어용 소프트웨어(프로토콜 스택) / 네트워크용 하드웨어(LAN 어댑터) 프로토콜 스택은 운영체제에 내장된 소프트웨어이다. 얘가 네트워크 관련 처리를 한다. 실제 하드웨어는 LAN어댑터이다. 애플리케이션중에 네트워크 애플리케이션(웹브라우저)같은 애들은 소켓 라이브러리를 통해서 프로토콜 스택에 뭔가를 부탁함으로써 실제 네트워크 관련 처리를 한다. 소켓은 통신 제어용 제어 정보를 저장하는 곳이다. 접속이란? 접속을 ..
-
성공과 실패를 결정하는 1%의 네트워크 원리 1장: 웹브라우저Web Dev/7. 네트워크 2021. 3. 23. 13:35
브라우저란 실로 어마어마한 놈이었다. 웹브라우저는 모든 메시지가 처음 시작하는 곳인데, 평화로워보이지만 웹브라우저는 메시지를 만들어내는 곳이다. URL 입력: 브라우저는 여러 프로토콜을 지원한다. 우리가 흔히 보는건 http, https뿐이지만 file, mailto도 지원하고 있다 이중 http는 엑세스 대상이 웹서버인 것이다 이를 해독해서 어디에 엑세스를 하는지 판별. 이때 URI를 이용하는데, 식별자라고 이해하면 된다 이 URI와 method를 통해 웹서버에 요청을 보낸다 요청을 보낼때 HTTP 리퀘스트 메시지를 만든다 이것의 첫번째 행을 리퀘스트 라인이라고 하는데, 메소드로 시작하고, 얘를 통해 대강 무슨 리퀘스트인지 파악이 가능하다 메시지 헤더: 여기에는 날짜, 클라이언트측이 취급하는 데이터 종..
-
Form - 오랜시간 함께했지만, 아직 낯선 아이(Markdown editor만들기) + ReactWeb Dev/5. Projects 2021. 3. 23. 11:39
공부 목표 form은 항상 쓰면서 뭔가 잘모르겠어서 이번기회에 이 mdn 문서를 읽고 알게 된 내용을 간단하게 정리해보고자한다. Form을 알아보자 html폼은 사용자와 웹사이트/app이 상호작용할때 중요한 기술중의 하나이다. - form과 action, method: 필수이다(데이터를 전송하기 위해선) 이때 전송하는 동작은 button으로 설정하는데(input도 되긴하는것 같은데 button방식을 사용해야한다) submit, reset, button이 있다. 전송을 위해선 submit type 버튼을 만들어야한다. - name: 데이터의 이름을 지정하는 것. form에는 많은 폼 위젯이 있지만 이 위젯에는 name속성을 지정해줘야, 데이터의 이름이 지정된다. - change event: [참고한 글] ..
-
Grid를 사용해봤다. CSS는 어려운 아이이다.Web Dev/6. Graphics 2021. 3. 19. 22:48
내가 하고자했던 것은 아래와 같이 여러줄로 알아서 넘치면서도 첫번째부터 알아서 컨텐츠가 차고, 그다음에 간격은 알아서 적당히 구해주는 것을 구현하고 싶었다(반응형 크기 구하고 하는게, 구현은 할 수 있어도 내가 계획을 잡는게 너무 어려워서...ㅠㅠ 마크업 개발자 및 디자이너분들이 정말 대단하다고 생각하는 부분) 예전에는 그냥 flex로 막했었는데, 이번에는 그렇게 했더니 한개씩 컨텐츠가 넘칠때 이상하게 보였다. 마지막 줄의 컨텐츠가 자기혼자 가운데에 정렬되거나 하는식이었다. 그래서 찾다보니 Grid라는게 있다는 것을 알게 되었고, 아직 잘 이해한 것은 아니지만 내가 원하는 바는 구현할 수 있었다. const CardLayoutWrapper = styled.div` display: grid; grid-te..
-
Spread vs RestWeb Dev/1. JS 문법 관련 2021. 3. 16. 15:00
spread는 [a, b, c]처럼 묶여있던 값을 꺼내서 a, b, c 이런식으로 펼치는 것 Rest는 a, b, c이런 값을 하나로 [a, b, c] 이런식으로 묶는 것 learnjs.vlpt.us/useful/07-spread-and-rest.html 07. spread 와 rest 문법 · GitBook 07. spread 와 rest 이번에는 ES6 에서 도입된 spread 와 rest 문법에 대해서 알아보겠습니다. 서로 완전히 다른 문법인데요, 은근히 좀 비슷합니다. spread 일단 spread 문법부터 알아봅시다. spread 라는 단어 learnjs.vlpt.us https://velog.io/@chlwlsdn0828/Js-Spread-%EC%97%B0%EC%82%B0%EC%9E%90-Re..
-
Next.js Incremental Static Regeneration 알게 된것! Revalidate = timeoutWeb Dev/3. React 관련 2021. 3. 15. 23:38
// next.js의 예제 코드 function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } // This function gets called at build time on server-side. // It may be called again, on a serverless function, if // revalidation is enabled and a new request comes in export async function getStaticProps() { const res = await fetch('https://.../posts') const posts = await res.json() return { props..