김재욱의 이모저모

https://nextjs.org/docs/pages/api-reference/components/link Components: | Next.js is a React component that extends the HTML element to provide prefetching and client-side navigation between routes. It is the primary way to navigate between routes in Next.js. Good to know: tag attributes such as className or target="_blank" can be added nextjs.org Next/Link의 사용법 import Link from "next/Link"; .....

컴포넌트 주도 개발이란? 나는 첫 웹 프로그래밍부터 react를 활용하여 typescript로 웹 프로그래밍을 하기 시작했고 같이 작업하는 팀원의 조언으로 자연스럽게 **컴포넌트 주도 개발**을 하고 있었다. 컴포넌트 주도 개발은 CDD ( component driven development )라고 불리고 react를 대부분이 사용하는 요즘 다들 컴포넌트 주도 개발을 하고 있다고 생각된다. 컴포넌트 주도 개발은 말 그대로 컴포넌트를 중심으로 UI를 개발하는 것을 말한다. 특정 기능을 하는 요소를 컴포넌트로 만들고, 여러 개의 컴포넌트를 조립하여 페이지를 만드는 형식의 개발을 말한다. 그래 컴포넌트 주도 개발이 뭔지는 알겠다. 근데 컴포넌트 주도 개발이 있으면 다른 개발도 있을거 아니냐?!? 하시는 분들을..

오랜만에 프로젝트 수정할 것이 생겨서 Vscode를 들어갔는데 살면서 처음 보는 화면이 나를 반기고 있었다. 줄 바꿈 되어있는 모든 부분에 빨간 줄 표시가 되어있었고, error 설명은 "Expected linebreaks to be 'LF' but found 'CRLF'." 이였다. CRLF Windows 시스템에서 주로 사용된다. 줄 바꿈을 나타내는 데에는 Carriage Return (CR, '\r')와 Line Feed (LF, '\n') 두 개의 문자가 사용된다. 예시: Hello\r\nWorld\r\n LF Unix 및 Linux 시스템에서 주로 사용된다. 줄 바꿈을 나타내는 데에는 Line Feed (LF, '\n') 문자 하나만 사용된다 예시: Hello\nWorld\n 사실 줄바꿈 방식에..

대회 홍보용 웹 페이지를 만들던 중 페이지를 이쁘게 디자인하기 위해서 아이콘을 사용하고 싶었다. 그래서 내가 처음 사용했던 방법은 react-icons를 사용하는 것이었다. react-icons에 많은 icon이 존재하지만 맘에 드는 아이콘이 없어서 고민하다가 이모 지라는 것을 알게 되었다! 우리가 핸드폰에서 많이 사용하는 자그마한 이모티콘들을 이모지라고 부르는데 😄 이러한 친구들을 그냥 복사 붙여 넣기 하거나 html에 이모지 특수문자 코드를 입력하면 된다. https://snskeyboard.com/emoji/ 이 사이트에서 이모지를 찾아서 사용했습니다. 나는 vscode에서 코딩 언어로 typescript를 사용했는데 그냥 이모지 맘에 드는 걸 클릭해서 복사를 하고, vscode에 붙여 넣기를 하면..

대회 홍보용 웹 페이지를 만들다가 css적용에 어려웠던 점이 있어서 이것을 글로 남겨볼까 한다. 내가 구현하고 싶었던 것은 단순한 우측 정렬이었다. 이 사진 속의 엘리먼트들 중 제목이 아닌 메뉴들을 우측으로 보내고 싶었다. 위 엘리먼트들의 간단한 코드이다 제 3회 한국항공대학교 프로그래밍 경진대회 대회 규칙 대회 정보 유의 사항 Float 처음으로 생각난 방법은 간단하게 float를 사용하는 것이었다. float: right; 하지만 float를 사용하면 위 사진처럼 헤더의 밑 padding 부분이 깨진다. 웹 개발 경험이 많이 없어 이런 문제가 생길 줄은 몰랐는데, float를 사용하면 부모 컴포넌트 height 등 레이아웃에 문제가 생긴다고 한다. Flexbox 요즘은 위와 같은 이유로 float의 ..

우리의 프로젝트를 진행하면서 자주 사용할 UI들은 컴포넌트를 만들어서 여러 페이지에서 사용하려고 했다. 하지만 아래의 이미지의 컴포넌트를 하나의 컴포넌트로 관리하자는 말이 있어서, 이를 어떻게 설계해야 할지 고민해야 했다. 위 컴포넌트는 ListItem이라는 컴포넌트였고, 이 컴포넌트에는 Icon, Title, Description이라는 값이 들어갈 수 있다. Title은 반드시 들어가야 하는 값은 Title 값이고, Description과 Icon 값은 존재할 수도 존재하지 않을 수도 있다. 처음에는 Icon과 Description의 유무에 따라 해당 컴포넌트의 Wrapper를 따로 작성하였다. 이렇게 코드를 작성하니 Wrapper를 총 3개 작성해야 했고, 앞으로 다른 경우의 수가 생긴다면 최대 8개..

웹 페이지를 만들기 위해 작년, 재작년의 페이지들을 보면서 내가 가장 관심이 갔던 부분은 움직이는 그림들이었다. 저런 애니메이션들은 내가 svg, png 파일들을 주입하는 것처럼 그냥 mp4나 gif 파일을 찾아서 주입하면 되는 건가?라는 의문이 들었고 git 주소를 받아서 뜯어본 결과 Lottie를 이용하여 애니메이션을 주입하신 거였다! https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps. Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Creat..

WebView로 웹을 띄워서 앱을 만드는 과정은 너무나도 간편했고 좋았다. 하지만 이후 해결해야 할 문제가 있었는데, 이전까지는 웹에서 마이크 사용 권한 요청을 하면 웹에서 처리를 해줬는데 WebView로 띄워지지만 앱에서는 웹이 아닌 앱이므로 권한요청이 실행되지 않는다. 그래서 원하는 동작이 있을 때마다 프런트와 Flutter가 Bridge를 통해서 통신을 추가로 해야 한다. 이전에 Flutter에서 WebView를 띄우는 과정은 그냥 있는 web을 Flutter가 받아와서 띄우는 느낌이라 프런트에서 별다른 통신을 할 필요가 없었지만, 권한 요청과 같은 작업은 다음과 같은 순서로 이루어진다. 프론트 -> Flutter (요청 메시지) Flutter 요청 메시지에 따른 작업 수행 따라서 프런트에도 Flu..

우리의 프로젝트의 처음 목표는 웹 서비스를 만드는 것이었다. 하지만 프로젝트를 진행하면서 처음의 설정 방향과 서비스의 방향이 달라져가고, 우리의 서비스가 컴퓨터보다는 모바일에서 사용하기 더 적합하다고 판단했다. 웹도 개발하고 앱도 개발하는 방법이 있다고 하여 웹을 먼저 개발한 후 Flutter를 사용하여 이 웹을 앱으로 만들었다. 우리가 선택한 방법은 우리의 웹을 WebView로 띄운 후 Flutter로 앱의 껍데기만 만들어 앱을 만드는 것이었다. https://developer.android.com/guide/webapps/webview?hl=ko WebView에서 웹 앱 빌드 | Android 개발자 | Android Developers WebView에서 웹 앱 빌드 컬렉션을 사용해 정리하기 내 환경..

웹 페이지를 꾸미다 보면 시각적인 효과를 위해 아이콘을 주입하고 싶을 때가 있다. 그냥 구글에 돌아다니는 사진을 가져다가 써도 될 수도 있지만 그런 아이콘들은 png파일이라면 배경색이 남아있기 때문에 뒤의 배경이 남은 모양으로 주입되어 아이콘을 넣지 않은 거보다 못생겨진다. 그래서 svg파일로 된 아이콘을 찾아야 하는데 내 마음에 드는 아이콘이 svg 파일로 된 것을 찾기가 쉽지않다. react에서는 이런 개발자들을 위해서 react-icons를 제공하고 있다. https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, w..