전체 글 (63) 썸네일형 리스트형 지속적인 공부의 필요성 feat. 구직을 하며 느낀점 다니고 있던 회사의 경영 악화와 이에 따른 거취 결정 과정에서 고민 했던 글을 적었다. 경영악화로 인한 희망 퇴직이 발표된 이후에 열두 곳의 회사에 지원을 했다. 결과는 6번의 서류 탈락 2번의 코딩 테스트 불합격 2번의 코딩 테스트 합격 후 기술 면접 탈락 1번의 면접 거부 (개인적인 이유로 내가 거절했다.) 1 곳의 최종 합격 느낀점 비록 3년차의 길지 않은 경력이지만 년차에 대비해서 굉장히 많은 일을 해왔다고 자부했는데, 이를 이력서에 잘 녹여내기는 쉽지 않다. 이력서를 꾸준히 업데이트하는 것 이 필요하다는 생각을 했다 회사에서 매우 중요한 프로젝트였고, 훌륭한 업적이라 자부했던 것들이 외부에서 바라보면 그저 수많은 프로젝트 중 하나 이다 묵묵히 열심히 일 한다고 해서 아무도 알아주지 않는다. 꾸준.. 회사가 망했다? 약 한 달 전, 회사로부터 전 직원을 대상으로 한 희망퇴직 메일을 받게 되었다. 이 회사에 다닌 지는 1년 하고도 2개월 쯤 되었는데, 회사가 규모에 비해서 돈을 벌지 못하는 것은 알고 있었는데 이렇게 빠른 시점에 망 퇴직을 시작할 줄은 몰랐다. 나름 든든한 모회사를 너무 믿고 있었는지도 모르겠다. 다음은 그동안의 상황과 내가 해온 고민들이다. 희망 퇴직의 규모는 미정이고 기한은 1주일이라고 했다. 희망 퇴직을 하게 되면 퇴직 위로금으로 1달치 월급과 몇 일이 지난 후 인사팀 Q/A 시간에 들은 내용은 다음과 같다. 퇴직 규모에 대해서 검토한 옵션은 3가지이다. 30%, 50%, 70% 어떤 옵션으로 진행될지는 아직도 결정되지 않았다. 모든 돈이 필요한 모든 복지제도는 사라진다. (식대, 야근시 저녁 값.. 리액트 따라만들기 3. 성능 향상 및 fibers 이 글은 이 아티클을 따라 실습을 진행하며 작성한 글입니다. 이 전편의 내용은 링크를 통해 확인 해주세요! 전편에서는 리액트의 렌더 함수를 직접 구현하여 리액트를 사용하지 않고, 컴포넌트를 렌더링 하는 것 까지 구현을 했습니다. 전편에서 만든 yuact는 렌더링 재귀적으로 진행 하고 있는데, 커다란 돔을 한번에 렌더링 하게 될 경우 메인스레드를 너무 오래 차지하기 때문에, 이를 조금 수정해야 합니다. 따라서, 작업을 작은 단위로 나누고 각 작업이 끝난 후, 다른 할 일이 있다면 렌더링을 중단해야 합니다. 브라우저의 requestIdleCallback을 사용하면 브라우저가 유휴 상태 일때 콜백을 실행 할 수 있다. let nextUnitOfWork = null; function workLoop(deadli.. 웹 페이지 최적화를 위해 알아야 할 것들을 공부한 것. 참고: https://12bme.tistory.com/140 리액트 따라 만들기를 하다가 동시성의 원리가 궁금해져서 따로 알아본 것들에 대하여 의식의 흐름대로 정리합니다. 맨날 이런거 저런거 찾아보다가 정작 원래 하려고 했던 것들의 진행이 늦어집니다 ㅠ 참고한 블로그의 글은 개발을 시작하고 나서 읽은 기술과 관련된 글 중에 최고네요,, 정말 하나같이 몰랐던 내용들 ( 아무도 알려주지 않았던)이 가득합니다.. 여러번 읽어도 좋을 것 같다. 브라우저의 렌더링 과정 돔 요소와 스타일에 기반을 둔 레이아웃 계산 계산 요소의 화면 표현 (페인팅) 먼저 html 테그들을 파싱해서 돔트리를 구성함 css를 한데 모아 cssom 이라는 트리 구조의 스타일 구조체를 생성함 이 둘을 한데 모아 레이아웃을 계산 => 렌더 .. 리액트 따라만들기 2편. createElement 함수 구현하기 전편: https://kiwitrip.tistory.com/entry/리액트-따라-만들기-1편 github: https://github.com/leeyh-kor/make_react TODO: react의 create element 함수를 구현한다. createTextElement 함수를 구현한다. 두 함수를 오브젝트로 묶어서 사용 가능하게 구현한다. 오직 show만 가능한 render 함수 구현 (업데이트 및 삭제는 나중에 구현) createElement함수 createElement 함수는 element 트리를 반환한다. element 의 자식 요소들이 text(string or number)일 경우 textElement를 반환하고, 아닐 경우 오브젝트를 그대로 반환한다. function createEl.. 리액트 따라 만들기 1편. 이 글은 https://pomb.us/build-your-own-react/ 를 참고하여 리액트를 구현하는 과정을 담은 글입니다. 깃헙 주소: https://github.com/leeyh-kor/make_react 이 프로젝트를 시작한 계기 리액트를 더 잘 다루는 방법을 고민하던 중에 우아한 테크 코스를 진행했던 지인이 우테코에서는 "java로 스프링 프레임워크를 만드는 과제를 진행한다"고 했던 것 이 기억이 났다. 곰곰이 생각 해 보니, 직접 spring 을 만들어 보면 spring의 구조와 철학을 자연스레 익히면서 더 깊이있게 이해하라는 취지의 과제인 것 같다. 나는 react를 더 깊이 이해하기 위해서 같은 방법을 사용하고자 한다. todo: create element 없이 element 정의하기 .. SSG! Static Site Generator 한번 생성되면 바뀌지 않는 페이지(정적 html)들을 미리 빌드 단에서 생성 해두고 사용하는 서버 사이드 렌더링의 한 방식이다. next js팀에서 권장하는 방식이기도 하다. 장점 빌드 단에서 미리 만들어 두기 때문에 굉장히 빠르다. (기본적인 ssr은 요청이 들어오면 페이지를 만듬) + ssr의 장점을 모두 가져감 단점 컨텐츠가 동적으로 바뀌는 페이지에서는 사용이 어렵다. 동적 페이지 (url에 따라서 동적으로 바뀌는)에는 적용이 어렵다. ssr! 작동 클라이언트의 페이지 접속 요청 (request) 서버에서 리소스 확인 후 서버측 스크립트 실행, html 컨텐츠 준비 (프론트 서버 -> 백엔드 서버로 필요한 데이터 요청 작업 및 페인팅) 브라우저는 서버에서 완성된 html( 인터렉티브 하지는 않지만, 컨텐츠는 다 보이는 상태 )을 다운로드 한다. 브라우저는 javascript를 다운로드 하고 실행한다. (이 때 react 같은 웹 프레임워크( 리액트는 라이브러리) 들이 실행되면서 페이지가 interactive하게 바뀐다. 사용자가 페이지를 이동할 경우 위 동작 반복! 장점 csr보다 클라이언트의 네트워크 환경에 영향을 덜 받음. 서버에서 완성된 페이지를 내려주기 때문에, 네트워크 요청 횟수가 적기 때문에! FP(First Painting) 및 F.. 이전 1 2 3 4 ··· 8 다음
