⛳카이스트 몰입캠프 후기
4학년 1학기 끝내고 6월 29일부터 7월 28일까지 진행하는 카이스트 몰입캠프에 참여했다. 1주차 과제가 "탭 구조를 활용한 안드로이드 앱 제작" 이다. 작년에 "모바일프로그래밍실습" 수업에서 안드로이드 앱을 개발한 적이 있어서 그때의 기억을 떠올리며 개발했다. 반면, 팀메이트는 안드로이드 앱 개발과 Git을 제대로 사용하는 것이 처음이었다. 그래서 모르는 것이 있으면 나에게 질문을 해서 같이 해결하기도 했다. 하나의 Activity와 3개의 Fragment를 이용해 탭 구조를 구현했고, 이 과정에서 Activity와 Fragment의 차이점, 각각의 Life Cycle에 대해 배웠다. 사용자의 실제 연락처, 갤러리, 캘린더 앱에 있는 정보들을 가져오기 위해 Activity Result Launcher를 이용히야 권한 요청 로직을 구현했다. 이 외에도 Mutable Live Data, Shared Preference을 사용했다.
projectJuly 31, 2023
🏹Content Model
HTML5 이전에는 태그들을 인라인 요소와 블록 요소로 구분했다.하지만, HTML5에서는 명확한 정보구조, 설계 및 구성을 위해 카테고리를 정의하여 비슷한 성격끼리 태그를 그룹화했는데 이를 콘텐츠 모델이라고 한다. 어떤 요소에 어떤 콘텐츠가 포함되어야 하는 가와 어떤 요소가 어떤 요소를 포함할 수 있는지 정의하는 것이라 할 수 있다. 콘텐츠 모델에는 총 7개의 카테고리가 있다. 각각의 요소들은 하나 또는 여러 개의 카테고리에 속한다. Metadata Content, Flow Content. Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content
htmlJanuary 23, 2023
👑Semantic Tag
Semantic은 '의미의', '의미론적인'라는 뜻을 가진다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다. div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용이 있는지 전혀 유추할 수 없지만, form, table, article 등 시맨틱 태그들은 어떤 내용이 있는지 명확하게 정의한다. 검색엔진은 태그를 기반으로 페이지 내 콘텐츠들을 이해하고 수집한다. 검색엔진이 사이트의 콘텐츠를 쉽게 이해할 수 있도록 제목은 h1 ~ h6 태그를 사용하여 나타내는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다. 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다. W3C에 따르면 '시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다'고 한다. (시맨틱 태그는 개발자 모두에게 명확한 의미를 전달한다.)
htmlJanuary 23, 2023
👋React 18 주요 변경점
React 공식문서를 참고하여 작성했습니다. (서버 사이드 관련 내용은 생략) Automatic Batching: 여러 상태 업데이트가 발생했을 때 하나로 통합해서 한 번의 리렌더링이 발생하도록 한다. 이 기능이 없을 때는 React 이벤트 핸들러에서 발생한 상태 업데이트들만 통합되었다. 이제는 promise 메서드, setTimeout, native 이벤트 핸들러 등에서 발생한 상태 업데이트도 통합되어 리렌더링이 한 번만 발생한다. Automatic Batching 기능을 사용하고 싶지 않다면? react-dom의 flushSync()을 사용하여 Automatic Batching 기능을 끌 수 있다.
reactJanuary 15, 2023
🌠Webpack 사용해보기
Webpack이란? 오픈 소스 모듈 번들러이다. Webpack에서의 모듈은 웹 애플리케이션을 구성하는 모든 자원을 말한다. 웹 애플리케이션을 제작하는데 사용되는 파일 하나하나가 모두 모듈이다. HTML, CSS, Javascript, Images, Font 등 모듈 번들링은 웹 애플리케이션을 구성하는 자원(모듈)들을 하나 이상의 번들로 병합하는 동작을 말한다. Webpack이 필요한 이유 모듈 번들러를 사용하기 전에는 기능별로 자바스크립트 파일을 <script>로 포함했다. 하지만, 너무 많은 script를 로드할 시 웹사이트의 로딩 속도가 길어지고, 사용자 경험이 나빠진다. 또한, 다른 js 파일에서 같은 이름의 전역변수를 사용한다면 의도치 않는 동작이 발생할 수 있다. 위 두 문제를 해결하기 위해서 모든 프로젝트 코드가 포함된 큰 자바스크립트 파일을 사용하는 것은 가독성과 유지보수에 있어서 비효율적이다. Webpack을 사용한다면 안전한 모듈 번들링 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
jsDecember 30, 2022
🚦데코레이터
클래스, 속성, 메서드, 접근제어자, 매개변수 등에 사용할 수 있는 특별한 함수이다. 데코레이터 함수를 사용할 때는 데코레이터 함수 이름 앞에 @를 붙인다. 클래스, 속성, 메서드, 접근제어자, 매개변수에 따라 데코레이터 함수가 전달받는 인자가 다르다. 데코레이터를 사용하기 위해 tsconfig.json 파일의 compilerOptions에서 target을 es6으로 설정하고, experimentalDecorators을 true로 설정한다. 클래스 데코레이터 클래스 선언을 관찰하거나 속성 및 메서드를 추가 및 수정할 때 사용할 수 있다. 클래스가 유일한 인자로 전달된다. 클래스 재정의 클래스 데코레이터 함수에서 새로운 클래스를 반환하여 속성 및 메서드를 추가 및 수정할 수 있다. 클래스 데코레이터 함수에서 재정의한 속성 및 메서드가 원래 클래스의 속성 및 메서드보다 우선된다.
tsDecember 28, 2022
🖤Next.js Compiler
Next.js 공식 문서에 따르면, Next.js 13 컴파일러는 SWC를 사용한다. 최신 버전의 자바스크립트/타입스크립트 코드들을 모든 브라우저에서 지원하는 유효한 코드로 변환한다. 최신 자바스크립트를 읽지 못하는 브라우저에서도 코드가 동일하게 동작한다. SWC는 코드를 최소화해주는 기능도 있다. 이 기능을 사용하기 위해서 version 12.3.0에서는 next.config.js에서 설정이 필요하고, version 13에서는 기본 기능이다. Next.js 12 버전이 나오기 전에는, SWC 대신 babel를 사용했다. babel도 최신 버전의 자바스크립트/타입스크립트 코드를 모든 브라우저에서 지원하는 유효한 코드로 변환한다. 하지만, 속도 측면에서 느리다는 평가를 받는다. Next.js 12 버전에서는 Rust 프로그래밍 언어로 작성된 SWC로 대체했고, 전보다 빠른 리프레시와 빌드 속도를 경험할 수 있게 되었다. 컴파일 속도가 더 빠른 이유 중 하나가 Rust 프로그래밍 언어이다.
nextDecember 23, 2022
🔍구글 검색엔진 최적화 가이드 정리
색인: 페이지를 저장하는 곳. 각 페이지의 색인 항목은 해당 페이지의 URL를 명시한다. 크롤링: 신규 또는 업데이트된 웹페이지를 찾는 프로세스 크롤러: 웹에서 페이지를 크롤링한 다음 색인을 생성하는 자동 소프트웨어 Googlebot: 구글 크롤러 이름 SEO: 검색엔진 최적화, 즉 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스 robots.txt: 크롤러가 사이트에서 액세스할 수 있는 URL을 알려주는 파일, 검색결과에 표시되어도 유용하지 않을 수 있는 페이지인 경우 해당 페이지가 크롤링되지 않는 것이 좋을 수 있다. 크롤링하고 싶지 않은 페이지를 알리기 위해 해당 파일이 사용된다.
webDecember 22, 2022
💬자주 쓰는 Git 명령어
1. 새로운 git repository 생성 및 초기화 git init 2. 원격 저장소 확인 및 추가 git remote -v git remote add name repo-url 보통 origin으로 추가 3. 브랜치 생성 로컬 브랜치 생성 git checkout -b branch-name 리모트 브랜치 생성 git push origin branch-name 4. 브랜치 삭제 로컬 브랜치 삭제 git branch -D branch-name 리모트 브랜치 삭제 git push origin --delete branch-name
gitOctober 20, 2022
🌺NextJS + React Query (with SSR)
React Query는 서버 사이드에서 prefetch한 데이터를 pre-rendering 시 사용하기 위한 2가지 방법을 지원한다. getStaticProps나 getServerSideProps 함수와 useQuery 옵션 중 initalData를 함께 이용하는 방법이다. 이 방법에 대한 문제점이 존재한다. useQuery를 가장 하위에 있는 컴포넌트에서 사용한다면 해당 컴포넌트까지 initalData를 전달해야 한다. 같은 동작의 useQuery가 여러 컴포넌트에서 사용된다면, 모든 컴포넌트에 initialData를 전달해야 한다. 👀 getStaticProps나 getServerSideProps를 이용하여 서버 사이드에서 prefetch한 데이터가 전역적으로 캐싱되지 않고 페이지 단위에서 props로 전달되는 데이터이기 때문에 발생하는 문제점이다. Hydration을 이용하여 위 문제점을 해결할 수 있다.
nextSeptember 18, 2022