Bleeding edge

2022/07/29 오늘 공부한 내용 CS 1. SSR에 대해 설명 Sever Side Rendering의 약자로 서버에서 렌더링 준비를 마치는 것을 말합니다. 유저가 웹에 요청을 보내면, 서버는 즉시 렌더링이 가능한 HTML을 만들어서 클라이언트로 보낸다. 클라이언트에서 HTML를 받는 순간 렌더링 준비가 되어있기 때문에 즉시 랜더링이 된다. 단, 자바스크립트가 읽히기 전이라 사이트 조작은 불가능하다.(Time To Look과 Time To View가 다르다) 자바스크립트 다운이 시작된다. 클라이언트가 자바스크립트가 다 받아지기 전까지는 동작이 실행이 되지는 않지만, 동작을 저장한다. 자바스크립트가 다 받아지고 나서는, 그동안 저장된 동작을 실행하며 지금부터는 웹페이지 상호작용이 가능해진다 2. CSR..

오늘 공부한 내용 오늘 수업의 요약 : 위기의 협업. 오늘 수업시간에 프로젝트 예행연습을 하였다. 예행 연습중에 사람들끼리 코드에 충돌이 많이 생겼었다. 오늘은 수업시간에 예행연습을 하면서 공부한 git에 대한 CLI에 대해서 메모를 간략하게하면 프로젝트를 생성하고자 하는 페이지에서 Git bash를 이용하여 GIt bash를 실행을 하고, code . 를 사용하여 해당 폴더를 기준으로 Visual Studio를 실행한다. 이후 사용할 CLI같은 경우에는 두가지가 있다. 우선, 시작할 파일이 없는 경우와, 복사할 것이 있는 경우 두가지이다 시작할 파일이 없는경우 git init 복사할 파일이 있는 경우 git clone git-address git-address에는 복사할 깃주소의 링크를 입력하면 된다...

오늘 공부한 내용 $ @mixin + @content @include @use @forward @for @each @if interpolate $, @mixin, @include(같은 파일 내에서 변수 선언 및 프레임 읽고 쓰기) 어느 개념이든, 적절하게 묶일 수 있는 개념은 묶어서 공부를 해야하기에, 같이 사용해야하는 상호 관계 혹은 유사성에 대해서 이야기하면 다음과 같습니다 @mixin으로 프레임(frame)을 만들어두면, @include를 이용하여 사용할 습니다. @mixin mobile { @media (max-width:(768px - 1)) { @content; } } .className { @include mobile{ } } 처음 코드를 보는 사람은 768px라고 써두면 의미를 알 수 없기..

작성일, 참여하고 있는 스쿨 과정명 : 이 글은, 2002년 7월 27일 작성되었으며, 제로베이스 커넥to프론트엔드를 들으면서, 후기, 느낀점 등을 남긴 글입니다. 대략적인 본인 소개 및 현재 상태: 저는 스타트업에서 UI/UX 와 기획을 맡아서 일을 하다가 개발쪽에 관심을 가지게 되어, 스타트업을 그만두고, 커넥to프론트엔드 스쿨을 수강중인 취업 준비생입니다. 커넥to에 참여하게 된 계기와 현재까지 느낀점 : 1. 강의 커넥to 수업은 7월 11일 부터 시작하였으며, 현재는 HTML/CSS강의를 듣고 있습니다. 저 같은 경우 2년 이상 HTML이나 CSS를 터치해봤고, 다른사람이 만든 다른 사이트를 많이 봐서, 웹에 대해서 조금은 알고 있는 줄 알고 있었는데, 강의를 들으면서 웹에 대해서 겉만 알고 있..

보호되어 있는 글입니다.

https://school.programmers.co.kr/learn/courses/30/lessons/12914# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 피보나치 수열이라는 것을 알기까지 시간이 좀 걸렸다. 1부터 5까지의 케이스를 나타내보겠다. 1(1) 11(2) 2(2) 111(2+1) 12(1+2) 21(2+1) 1111(3+1) 112(2+2) 121(3+1) 211(3+1) 22(2+2) 11111(4+1) 1112(3+1) 1121(4+1) 1211(4+1) 2111(4+1) 122(3+2) 212(3+2) 221(4+1) 괄호를 쳐서..

★★★★★ 1. 브라우저 렌더링 원리 1-1.홈페이지가 사용자에게 보이는 순서에 대해 설명해 주세요 더보기 주소창에 입력된 주소를 통해 서버를 찾아간다. 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버) 서버에서 HTML 파일을 클라이언트로 보낸다. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식) 중간에 css를 로드한다. link 혹시 style 태그를 만나면 DOM 생성을 중지한다. CSS를 파싱하고 CSSOM을 생성한다. 이렇게 만들어진 DOM과CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다. 이후 JS엔진을 실행하고 JS코드를 파싱한다. 2. 호이스팅에 대해서..

img에 width와 height를 주면 속도가 빨라진다 일종의 will change가 될 수 잇다 [class*="tittle"] .appMain [class^="__summary"]{ }캐럿기호 등등 어떻게 다른지 체크할 것 .iframeWrapper { position: relative; padding-top: 56%; width: 100%; height: 0; } .iframeWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } padding은 width를 기준으로 계산된다 .iframeRatio-4-3{ padding-top:75% } .iframeRatio-16-9{ padding-top:56.25 }

https://school.programmers.co.kr/learn/courses/30/lessons/64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음에 봤을 때 이 문제가 레벨1이라니! 하고 놀랬었던 문제.. 지금 와서 보니 레벨 1 맞는거 같은게 엄청 크게 고민해야할 것보다는 구현 로직이 상당히 심플하다. 단지 2차원을 쓰는게 익숙하지 않아서 어렵다고 생각이 들었던거 같다. 문제 로직은 상당히 심플하다 board와 move 두가지가 주어진다. 1. board에 있는걸 move에 있는 순서대로 한개씩 0으로 만들어준다. 2. 0으로 만든 ..