JudithHopps JudithHopps

회사에서 점핏 프론트엔드 강의가 있다고 해서 신청했다. 책도 받고 물, 칫솔 세트, 노트 등 여러 선물도 받았다 강연 신청자가 2000명이 넘었다고 한다.. 무려 10분의 1??? section 1. 센스있게 일하는 FE 개발자 되기 FE 개발자의 소프트 스킬과 하드 스킬 Speaker: 김태곤 능력 = Hard Skills + Soft Skills. 프로그래밍에 필요한 기술을 하드스킬, 개발 외적으로 필요한 기술을 소프트스킬 기술을 사용해서 문제를 해결하지만, 완전한 해결은 없다. 리팩토링을 해야한다. 테스트가 용이할 것 테스트 가능 영역을 늘려라. 테스트가 어렵다면 기능을 작게 쪼개서 테스트를 할 것 가독성 변수, 함수명 길어도 괜찮다. 명확하게 쓰자. 회사, 팀원간의 협의가 있다면 한국어도 좋다. ..

리액트 네이티브를 사용하기 위해 안드로이드 스튜디오 설치할 때 이런 에러가 뜰 수 있다. 최근에 adopt8-hospot의 명칭이 바뀌었다고 한다. 아주 최근에 일어나서 구글링이 되지 않았다... ​ java/adopt8-hotspot를 java/termurin8-jdk로 변경하면 설치할 수 있다. scoop install java/temurin8-jdk

리액트 네이티브를 사용하기 위해 안드로이드 스튜디오 설치할 때 이런 에러가 뜰 수 있다. extras를 설치하면 에러를 해결 할 수 있다. 아래 문장을 입력하면 해결된다. scoop bucket add extras scoop install android-studio android-sdk

리액트 네이티브란? 리액트 프레임워크는 2013년에 페이스북에서 발표한 오픈 소스 JS 프레임워크이다. 가상 DOM과 JSX를 사용하여 웹 프론트 개발할 때 사용한다. 리액트 네이티브 소개 리액트 네이티브 프레임워크는 2015년에 페이스북에서 발표한 모바일 앱 프레임워크이다. 안드로이드와 ios 모두 동작하고 네이티브 파트와 JS 파트로 구성된다. 개발자는 JS 코드만 작성하면 크로스플랫폼 app 을 개발 할 수 있다. 따라서 JS 또는 TS만 알고 있는 웹 개발자도 크로스플랫폼 모바일 앱 제작이 가능하다. 리액트 네이티브 개발 환경 기본적으로 Node.js 개발 환경과 같다. 윈도우의 경우) Scoop 설치 - 윈도우 오른쪽 버튼을 클릭하면 [powershell(관리자)] 를 볼 수 있다. - [pow..

레이아웃 헤더에서 컴포넌트별 이미지 차이 주기 페이지에서 레이아웃 구성요소 사용시 `처럼 사용하여 {home ? () : 뷰 ? () : () } ③을 사용해서 코드 간편화 componenet/Layout.js {home ? ( {name} ) : (vue ? ( 뷰진스 ) : angular ? ( 앵진스 ) :( h진스 ) ) }

next.js Css Next.js에서 지원 하는 스타일 지정 방법 CSS 모듈 styled-jsx 사스 styled-components는 지원하지 않는다. 레이아웃 구성 요소 먼저 모든 페이지에서 공유할 레이아웃 구성 요소를 만들어 보겠습니다 . component 폴더와 Layout.js 파일을 생성합니다. export default function Layout({ children }) { return {children}; } 그런 다음 를 열고 구성 요소 pages/posts/first-post.js에 대한 가져오기를 추가 Layout하고 가장 바깥쪽 구성 요소로 만듭니다. import Head from 'next/head'; import Link from 'next/link'; import Layo..

메타데이터 HTML title 태그 와 같은 페이지의 메타데이터를 수정하는 방법은 아래와 같다. import Head from 'next/head' import Link from 'next/link'; export default function First () { return ( Hello go Home ) } 그럼 아래 처럼 탭의 제목이 바뀐다. Script 타사 스크립트 로드를 단순화한다. import Script from 'next/script'; export default function FirstPost() { return ( console.log(`script loaded correctly, window.FB has been populated`) } /> First Post ← Back to ..

next.js 이미지 Next.js는 이미지와 같은 정적 자산을 최상위 public디렉토리 아래에 제공할 수 있습니다 . 최적화되지 않은 이미지 일반 HTML을 사용하면 다음과 같이 프로필 사진을 추가합니다. 그러나 이는 다음을 수동으로 처리해야 함을 의미합니다. 다양한 화면 크기에서 이미지가 반응하는지 확인 타사 도구 또는 라이브러리로 이미지 최적화 뷰포트에 들어갈 때만 이미지를 로드합니다. Next.js는 Image이를 처리하기 위해 즉시 사용 가능한 구성 요소를 제공합니다. Next.js는 기본적으로 이미지 최적화도 지원합니다. 이를 통해 브라우저에서 지원하는 경우 WebP 와 같은 최신 형식으로 이미지 크기 조정, 최적화 및 제공이 가능합니다 . 이렇게 하면 뷰포트가 더 작은 장치에 큰 이미지가 ..