SUIN

저번 주에 백신 접종으로 몸살을 심하게 앓고 오늘부터 다시 작업을 시작했다 오늘부터 하나투어 클론코딩을 시작하게 되었는데 항해 때는 3주 안에 모든 구현과 배포를 해야 했었는데 이번에는 코드를 조금씩 이해하며 작성해보려고 한다. 실전 프로젝트때는 react-router v5 버전을 사용하다가 이번엔 업그레이드된 v6를 사용하는데 생각보다 많은 내용이 업데이트된 걸 알 수 있었다. 1. 작아진 번들 사이즈 - 이전 버전 대비 약 70% 정도의 크기가 줄어든 것, 버전만 업데이트 하더라도 번들 크기에 대한 최적화가 가능하다는 이점이 존재 2.switch >> routes (네이밍 변경 ) 3. exact 옵션 삭제 4. componen >> element (네이밍 변경 ) 5. path="/Web/:id" ..

스켈레톤이란 웹페이지에서 로드 시간이 짧아 보이게 하는 몇 가지 방법 중 하나가 스켈레톤이다 데이터가 로드되기 전에 컨텐츠의 자리비움을 표시하여 사용자가 기다리는 시간을 덜 지루하게 하는 ui이다 장점 - 실제 테스트 결과 블랭크 페이지 < 스피너 < 스켈레톤 순서대로 더 빠르다고 느끼게 된다. 단점 - 스켈레톤을 화면마다 표시해야하기때문에 시간이나 비용이 많이 든다. 실생활에서 볼수있는 스켈레톤 예시 스켈레톤 규칙 스켈레톤은 콘텐츠의 로드를 방해하면 안된다! 실제 콘텐츠는 데이터를 가용할 수 있는 시점이 되면 즉시 스켈레톤을 대체해야함 디자인 할 때 애니메이션을 사용하는 것이 좋다 애니메이션은 wave, pulse 중 wave 를 사용하는 것이 로딩 시간을 더 짧게 느끼게끔 한다. 느리고 안정적인 애니..

드디어 항해 마지막 수료식! 팀원들과 모여서 지금까지 서로 고생했다며 3 시간 넘게 수다타임.. 사실 TIL 적는 지금도 수다 중이다.. ㅎㅎ 너무 감사하게도 운영부문과 상생부문에서 상을 받게 되었다. 1주 차 때 프로젝트를 함께 했던 팀원들에게 "우리 한번 해봅시다! 포기하지 말자! "라고 했던 말들이 실제로 100일 동안 모두가 함께했다 힘든 일도 있었지만 마치 자기 최면 걸듯 "수인아 할 수 있어!"라는 최면을 다른 팀원분들에게도 걸어준 효과가 아닌가... 항해 대표님께서 가다가 포기하면 절대 못 간다. 늘 우리는 부족하니까 열심히 해야 해라는 게 꾸준히 하다 보면 결국 성장하게 된다. 여러분들이 코딩 실력이 완벽하게 올라갔다기보다는 앞으로 계속 성장을 해나갔으면 좋겠다 "제일 중요한 건 내가 나를..

내일 드디어 항해 99 수료를 한다. 오늘내일은 함께 실전 프로젝트를 함께했던 팀원들과 모의면접을 진행하는데 다들 면접 일정과 겹쳐서 다른 조 분들과 함께 면접을 진행했다 1인당 30분의 시간을 주고 여러 팀원들이 질문을 하고 답변하는 형식이었다 이력서를 바탕으로한 질문은 대부분 대답했지만 CS질문에 대해서 답변을 잘하지 못한 것 같다 GitHub - whl5105/tech-interview-for-developer: 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖. Contribute to whl5105/tech-interview-for-developer development by creating an account on GitHub. gi..

TypeScript란? ms에서 개발한 언어 안전하고 예측 가능한 코드 구현에 초점을 맞춘 JS의 상위 집합(Superset) 언어 TypeScript의 가장 큰 특징은 기존 자바스크립트에 type System을 적용한 것 자바스크립트의 타입 시스템을 적용했다는 것은 변수, 파라미터, 함수의 반환 값에 타입을 지정할 수 있도록 한 것을 이야기하며 이를 통해서 좀 더 안전하고 예측 가능한 자바스크립트 프로그래밍을 할 수 있도록 하는 것이다 TypeScript로 작성한 코드는 타입 스크립트 컴파일러(tsc)를 통해 자바스크립트 코드로 변환되고 이후 실행 (Transpiling 트랜스 파일링) TypeScript는 javascript 환경에서 실행될 수 없다. 그 이유는 javascript가 실행되는 브라우저..

항해 기간 동안 다양한 프로젝트를 경험하면서 React를 사용해왔지만 왜 리액트를 사용해야 하는지에 대해 기본기가 부족하다고 생각돼서 오늘을 리액트 기초에 대해서 공부를 했다 React element 랜더링 자세히 알아보기 모든 것은 trade-off 리액트가 랜더링을 최적화하지만 알고리즘이 비효율적이거나 최적화되지 않았다면 오히려 더 안 좋을 수 있다. https://ko.reactjs.org/docs/rendering-elements.html 엘리먼트 렌더링 – Re.. suinchoi.tistory.com [React] React DOM 다루기 (JSX 없이 element 그려보기) VanillaJS로 element 생성 React로 element 생성 두 element를 console로 확인해보..

html의 여러 태그들을 react로 어떻게 표현할 수 있을까 h1 h3 h5 react에서 여러 가지 children 속성을 넣어줄 수 있었다 그럼 children에 직접 객체를 주입해보면 어떨까 root로 태그를 넣어준 것과 동일하게 보이지만 코드 구조가 다르다 React에서는 하나의 태그에 children으로 여러 element를 만들어주기 때문에 하나의 요소가 감싸질 수밖에 없다 그래서 React.Fragment를 이용해서 부모로써 감싸주는 역할만 해주고 실제 html을 작성할 때는 그려지지 않는다. React.Fragment는 빈태그 로 도 표현할 수 있다. creactElement를 JSX로 변경해보자 const elementReact = ( ); //-----------------------..

jsx 없이 element를 직접 만들어 보았다 [React] React DOM 다루기 (JSX 없이 element 그려보기) VanillaJS로 element 생성 React로 element 생성 두 element를 console로 확인해보자 React 새로운 객체를 만들어냈고 그 안에 props에 children 이 들어가 있는 걸 확인할 수 있다 * React에서는 props로 넘기.. suinchoi.tistory.com JSX 문법을 이용해서 간단하게 코드를 변경해보자 JSX란? const element = Hello, world!; - 문자도 HTML도 아닌 JavaScript 확장 문법이다 * 전체적인 코드는 js처럼 보이지만 HTML 태그도 보이는 것을 확인할 수 있다. * JSX를 사용하..