분류 전체보기 (118) 썸네일형 리스트형 TIL - 17 - Keyword Calendar / Date 어제 못했던 Calendar 기능들 (다중 선택 및 선택한 총 일수 계산)을 마무리 지었다. Rendering 때문에 잔상이 남는 게 자꾸 거슬렸고, 해결하기 위해서 useEffect를 최대한 안 쓰도록 코드도 고치고 컴포넌트로 빼서도 적용해봤지만, 아직 실력이 부족하여 결국 조금밖에 개선을 못 시켰다. Git Private Repo는 GitPage로 배포 시 유료라는 것을 알았다. - 오늘 하루 느낀 점 드디어 팀 과제가 전부 끝났다. 다음 주부터는 개인 과제 시작이라 기대가 된다. 실력을 더 쌓아서 좋은 사람들이 많은 회사에서 일했으면 하는 바람이다. TIL - 16 - Keyword Calendar / Date 기업 과제 중 Calendar 기능을 만드는데 생각보다 많이 어려웠다. 일반 Calendar 기능은 구현했지만, 클릭을 했을 때의 CSS 처리가 좀 까다롭다. 현재는 클릭한 날짜를 계산하여 일수 계산, 다음 월로 넘어가기 등 전반적인 기능은 끝났다. Date를 오랜만에 써서 그런지 뭔가 새로웠다. 월을 1월부터 12월까지를 0~11까지로 요일은 일요일부터 토요일까지 0~6으로 표현하기 때문에 display 할 때 유의해야 한다. - 오늘 하루 느낀 점 처음에 만만하게 봤다다 지금 시간까지도 다 끝내지 못하여 자고 이어서 하기로 했다. 이제 남은 건 거의 CSS처리뿐이라 금방할 것 같긴 하지만 생각보다 까다로워서 변수가 있을 것 같다. 라이브러리를 안쓰고 만드.. TIL - 15 - Keyword GitHub 배포/ Canvas 이미지를 CRA의 public 폴더에 저장을 했는데, 배포 시 이미지를 불러올 수 없는 상황이 발생하였다. src로 불러오는 것은 불러왔으나, url로 불러오는 과정에서는 문제가 생겨 이미지를 불러오지 못했고 아래의 그림처럼 url을 수정한 뒤에서야 이미지를 불러올 수 있었다. Git 배포 주소를 앞에다가 써주자. Canvas의 개체를 컨트롤하고 싶었는데 이게 흰 도화지에 그림을 그려 넣는 것이라 다시 지우고 새로 그리지 않는 이상은 개체로 선택할 수 없다 하여 좀 고생했다. 개체를 선택하지 못하는 대신 좌표 값이나 색을 이용하여 선택한 것처럼 이용할 수 있다고 하지만 구분자가 좌표뿐이었고, 겹치는 요소가 있을 가능성도 높아 결국 시간 내로 구현하지 못했.. 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가 그렇게 깊지 않아서 괜찮은 것 같지만, 아직 둘 중에 어떤 식으로 처리해야 될지 판단이 잘 서지 않는다. - 오늘 하루 느낀 점 프리온보딩 일정을 소화하면서 코딩 테스트 준비, 면접 준비, 이력서 작성은 생각보다 정신이 없었고, 다.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음
