전체 글

브라우저 렌더링 과정?결론부터 말하자면, 상황에 따라 더 효율적이고 최적화된 웹 페이지를 작성하기 위해 브라우저 렌더링 과정을 이해하는 것이 중요합니다. 렌더링 과정을 알면 페이지 로딩 속도, UX, 성능 최적화 측면에서 큰 차이를 만들 수 있습니다.웹 브라우저는 HTML + CSS + JavaScript로 구성된 코드를 읽고 렌더링합니다. 따라서, 우리는 브라우저가 어떤 순서로 어떻게 파일을 해석하고 나타내는지를 이해해야 합니다. 브라우저 렌더링 과정렌더링 과정을 알아보기전 파싱, 렌더링, DOM이 무엇인지 이해해야 합니다. 파싱(Parsing) 파싱은 프로그래밍 언어 문법에 맞게 작성된 텍스트 파일을 기계가 이해할 수 있는 구조로 변환하는 과정입니다. 웹 페이지는 HTML, CSS, JavaScrip..

문제점github를 통해 진행하던 프로젝트를 다른 환경에서 작업을 실행하려니 에러가 발생하고 실행이 되지 않았다.문제 파악에러 메세지를 확인해보면더보기Description Resource Path Location Type The supplied phased action failed with an exception. Could not resolve all dependencies for configuration ':compileClasspath'. Failed to calculate the value of task ':compileJava' property 'javaCompiler'. Cannot find a Java installation on your machine matching this tasks r..

Recoil? 상태관리?React로 개발을 진행하다 보면 부모 -> 자식으로 state를 전달해야 하는 경우가 생긴다.컴포넌트 트리가 깊지 않다면 props를 통해 전달하면 쉽다. 하지만 그렇지 않은 경우가 대부분이다.A->B->C->D->E와 같은 컴포넌트 트리구조가 있고, A에서 E로 state를 전달해야 한다면 우리는 B, C, D 모두에 props로 전달하는 과정을 거쳐야 한다.  또한, 여러 컴포넌트가 동일한 state를 필요로 하고, 그 컴포넌트들이 서로 다른 계층에 있다면, props로 전달하기가 매우 번거로워진다. 상태를 필요로 하는 컴포넌트가 서로 연관되지 않은 곳에 위치한다면, 상태 공유는 어렵고 복잡해진다.React에는 Redux, Recoil, Zustand... 등 많은 상태관리 ..

문제 접근문제는 중앙부터 시작해서 나선형으로 배열을 순회하면서 작성하는 것저는 왼쪽 위(0, 0) 지점에서 시작하는게 편해서 숫자를 거꾸로 돌렸습니다.이런 숫자 배열을 만들어야한다고 하면빨간 지점 즉, (-1, 0) 에서 시작한다고 가정합니다.아래 방향으로 3번오른쪽 방향으로 2번윗 방향으로 2번왼쪽 방향으로 1번다시 아래방향으로 1번이러한 과정을 거쳐서 좌표가 이동하게 됩니다.여기서 패턴을 찾아보면 첫 1회를 제외하고 같은 이동 횟수는 2번씩 나타납니다.한번 이동할땐 좌표는 y 혹은 x가 1씩 증가 감소 하게 됩니다.// 초기 좌표를 (-1, 0) 이라고 가정하면 (col, row)for(int i = 0; i이러한 반복문을 사용하게 됩니다.이제 고려해야 할것은이동 횟수 | 좌표에 더해지는 수 | fo..

Github 코드 이슈 남기기코드 리뷰를 위해 코드에 이슈를 달아봅시다.먼저 리뷰할 팀원의 레포지토리로 들어갑니다.해당 주차의 폴더로 들어가서 스윽 코드를 읽고,뭔가 다르게 푼거같은데 모르겠다 혹은 애매하다 하는 단락이 있다면해당 단락의 줄번호를 클릭하여 메뉴를 열어줍니다.Reference in new issue를 클릭해 줍니다.title 부분에 하고 싶은 말을 적어줍니다.이후 Submit new issue를 눌러 issue를 달아줍니다.부가적으로 할 말이 있다면 코멘트로 남겨주면 됩니다.   Github 코드 이슈 확인하기이후 해당 팀원이 레포지토리로 들어오면왼쪽 위 issue 탭에 1이라는 숫자가 나타나게 됩니다.클릭해 줍니다.자신의 코드에 달린 모든 issue가 목록으로 보입니다.클릭합니다.해당 이..

백준허브는 알고리즘 문제를 제출하면 자동으로 깃 레포지토리로 커밋되는 익스텐션입니다.백준허브 설치, 설정크롬 확장프로그램 스토어로 가서 백준허브를 검색하고 추가해 줍니다.추가했다면 오른쪽 위의 퍼즐모양을 눌러주고백준 허브를 클릭하시면Github와 연동하는 창이 나옵니다.Authenricate 눌러주면 (해당 PC로 깃허브 자동로그인을 해뒀으면 바로 화면이 나오지만 아니라면 로그인해야 합니다.새 탭으로 창이 뜹니다.Github의 개인 Repo에 알고리즘 문제 저장 Repo가 따로 있다면Link an Existing Repository를 선택하고 해당 Repo의 이름을 입력하면 되지만없다면 Create a new Private Repository를 선택하고 생성할 Repo 이름을 입력하면 됩니다.자신의 Gi..