전체 글 (115) 썸네일형 리스트형 TIL - 14 - Keyword Canvas Canvas Drag로 특정 영역 선택하고, 저장하기 - Quiz 정리 Q1. 브라우저 렌더링 (작동) 원리에 대해 설명하세요. A1. 전달받은 리소스 스트림을 읽으면서 HTML Parser가 HTML을 읽어나가면서 DOM Tree를 만들고 CSS Parser가 CSS를 읽어나가면서 CSSOM Tree를 만듭니다. 그리고 그 두 개를 합쳐 화면에 그려질 것만 결정하는 Render Tree를 만들고, 컴포넌트를 정렬, 배치하는 Layout 과정을 거치며, 마지막으로 Paint 작업을 통해 CSS에 설정한 대로 그려지고 화면에 출력됩니다. Q2. 웹페이지가 사용자에게 보여지는 과정에 대해서 설명하세요. A2. 1. Prompt for unload : 현재 페이지에서 다른 페이지.. GitHub 배포 방법(요약) Repository가 있고 배포 직전까지 왔다고 가정하고 진행 - gh-pages 설치 npm i gh-pages - package.json 수정 homepage는 https://{사용자 계정 이름}.github.io/{저장소 이름}/ 으로 하면 된다. 저 위의 예시는 wpo-team-01는 Organizations 계정 이름이고 wanted-codestates-project-1-9가 저장소 이름이다. 본인의 이름으로 저장하면 된다. - package.json 저장 후 deploy npm run deploy - 아래 그림과 같이 Git Settings에 들어가 순서대로 실행 3번에서 Branch를 gh-pages( / root )로 바꾸고 Save - Actions에서 배포 진행 상황을 볼 수 있음 클로저(Closure) - 클로저 (Clousure) MDN에서의 정의 : "함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합" 모던 자바스크립트 Deep Dive에서의 정의 : "반환된 내부 함수가 자신이 선언됐을 때의 환경(렉시컬 환경)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수" 즉, 자신이 생성될 때의 렉시컬 환경을 기억하는 함수 내 나름대로의 정의 : 외부 변수를 품고 있는 함수, 함수는 원래 호출 후 실행 완료되면 CallStack에서 Pop되고, 선언된 변수 메모리는 GC에 의해 제거되어야 하지만 참조하고 있는 변수가 있어 제거되지 못한 상태라고 생각한다. function outerFunc() { var x = 10; var innerFun.. TIL - 13 - Keyword JavaScript / styled-components 기업 과제를 빠르게 끝마쳤다. styled-components를 이용하여 CSS 안에 삼항 연산자 처리를 하여 속성 값을 바꾸었다. 재사용성도 뛰어나고 좋지만, 자체적으로 class name을 부여해서 그런지 막상 해당 tag를 개발자 도구로 찾으려고 할 때, 명확하게 코드에서 어느 위치에 있는 tag인지 바로 찾기가 힘들었다. 컴포넌트가 세분화되어 복잡해서 그런 것일 수도 있지만, 알아서 naming이 된다는 것에 대한 단점도 알게 되는 시간이었다. Vanilla JS로 구현하는 것도 연습이 필요할 것 같다. TypeScript도 사용해봐야 되는데.. - 오늘 하루 느낀 점 6번째 팀 과제가 끝났다. 프리온보딩 코스를 진행하면서 .. TIL - 12 - Keyword JavaScript Algorithm / props / 상태 관리 오늘은 마이다스아이티 코딩 테스트가 있어서 JavaScript로 코딩 테스트 준비를 하였다. 오랜만에 알고리즘 문제를 푸니 수준이 많이 떨어졌다. 문제도 생각했던 것보다 굉장히 어려웠다.. 히스토그램 관련 문제와 사각형을 겹치지 않게 처리하는 문제였는데 엄청났다. 상태 관리에 있어 props vs redux store를 고민하다가 props drilling 하여 관리하기로 하였다. depth가 그렇게 깊지 않아서 괜찮은 것 같지만, 아직 둘 중에 어떤 식으로 처리해야 될지 판단이 잘 서지 않는다. - 오늘 하루 느낀 점 프리온보딩 일정을 소화하면서 코딩 테스트 준비, 면접 준비, 이력서 작성은 생각보다 정신이 없었고, 다.. 코딩 테스트 시험 전 날 정리하면 좋을 기능들 이 게시물은 제목 그대로 요약정리 글이며, 너무 길어질 것을 우려하여 간략한 설명만 있으므로 이해가 안 된다면 MDN 참고 ( 계속 추가 예정 ) - Array 관련 pop() : Array의 맨 마지막 요소를 제거하고 그 요소를 Return push() : Array의 맨 마지막에 요소를 추가 shift() : Array의 맨 앞쪽에 요소를 제거하고 그 요소를 Return unshift() : Array의 맨 앞쪽의 요소를 추가 join('') : Array를 String 형태로 (구분자를 사이에 삽입) splice(start index, 개수) or splice( 삽입 또는 삭제를 원하는 index, 삭제할 개수, 삽입할 내용 ) : start index를 기준으로 개수만큼 삭제 return으로는 삭.. TIL - 11 - Keyword HashRouter / Redux Store / Github 배포 오래간만에 react-router-dom을 사용하여 routing을 하였는데, BrowserRouter로 진행하니 배포 시 문제가 생겨 HashRouter를 이용하였다. BrowserRouter로 진행하려면 서버를 React App으로 연결해줘야 함. 그렇지 않으면 404 Error가 발생 Redux의 Store에 변화가 생기면 Re-Rendering이 되는데 변수를 slice 해버려서 상태 변화 감지를 못한 Case가 발생했다. GitHub 배포가 생각보다 오래 걸렸다. (GitHub 배포 방법이 궁금하다면 보러 가기) - 오늘 하루 느낀 점 5번째 과제가 끝났다. 생각지도 못한 곳에서 시간을 너무 허비한 바람에 아쉽긴.. TIL - 10 - Keyword IntersectionObserver / Infinite Scroll / Custom Hooks / CSS 일단 무한 스크롤 적용은 했지만, 많이 부족하다. 공부할 것이 많은 한 주가 될 것 같다. - Quiz 정리 Q1. CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요. A1. SCSS와 SASS는 CSS의 전처리기입니다. CSS보다 쉬우면서, 추가 기능이 있는 CSS의 확장판 같은 역할을 합니다. SCSS는 CSS 문법에 SASS 문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일됩니다. SCSS/SASS를 사용하면 SASS의 Nesting을 이용하여 코드 중복을 줄일 수 있고, 연관된 코드를 그룹화할 수 있습니다. $로 시작하는 변수를 지정하여 일괄적으로 값을 변경할.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음
