김재욱의 이모저모

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

문제 우리나라는 가족 혹은 친척들 사이의 관계를 촌수라는 단위로 표현하는 독특한 문화를 가지고 있다. 이러한 촌수는 다음과 같은 방식으로 계산된다. 기본적으로 부모와 자식 사이를 1촌으로 정의하고 이로부터 사람들 간의 촌수를 계산한다. 예를 들면 나와 아버지, 아버지와 할아버지는 각각 1촌으로 나와 할아버지는 2촌이 되고, 아버지 형제들과 할아버지는 1촌, 나와 아버지 형제들과는 3촌이 된다. 여러 사람들에 대한 부모 자식들 간의 관계가 주어졌을 때, 주어진 두 사람의 촌수를 계산하는 프로그램을 작성하시오. 입력 사람들은 1, 2, 3, …, n (1 ≤ n ≤ 100)의 연속된 번호로 각각 표시된다. 입력 파일의 첫째 줄에는 전체 사람의 수 n이 주어지고, 둘째 줄에는 촌수를 계산해야 하는 서로 다른 ..

웹 페이지를 만들기 위해 작년, 재작년의 페이지들을 보면서 내가 가장 관심이 갔던 부분은 움직이는 그림들이었다. 저런 애니메이션들은 내가 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..

문제 N x M 크기 벌집은 육각형이 가로 N칸이 한 줄로 이어져 있고, 이 줄이 모두 M 줄 있는 형태이다. 예를 들어, 아래 그림은 4 x 3 크기 벌집이다. 벌집의 각 칸마다 (x, y) 형태로 좌표값이 주어지는데, 이는 위에서 x번째 줄, 왼쪽으로부터 y번째 칸에 있다는 뜻이다. 가장 왼쪽 위 칸은 (1, 1)이고, 가장 오른쪽 아래의 칸은 (M, N)이다. 각 칸마다 꿀이 들어있고, 벌이 해당하는 칸을 방문하면 이 꿀을 먹을 수 있다. 처음 벌은 (1, 1)에 있다. 매번 벌은 자신이 있는 육각형의 바로 오른쪽에 인접한 칸, 또는 대각선으로 오른쪽 아래에 인접한 칸으로 이동할 수 있다. 예를 들면 (2, 1)에 있는 벌은 (2, 2) 또는 (3, 2)로 이동할 수 있다. 벌이 (M, N)에 도착..

우리의 프로젝트의 처음 목표는 웹 서비스를 만드는 것이었다. 하지만 프로젝트를 진행하면서 처음의 설정 방향과 서비스의 방향이 달라져가고, 우리의 서비스가 컴퓨터보다는 모바일에서 사용하기 더 적합하다고 판단했다. 웹도 개발하고 앱도 개발하는 방법이 있다고 하여 웹을 먼저 개발한 후 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..

이번에는 JavaScript의 고차함수에 대하여 작성해보려고 한다. JavaScript에서 "고차 함수"는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. 이러한 기능은 함수형 프로그래밍 스타일을 지원하며, JavaScript에서 함수를 값으로 다룰 수 있는 유연성을 제공합니다. 나는 함수를 인자로 받는 방식의 고차함수를 활용해 보았는데 결과가 훌륭했다! 활용하기 전 이 코드가 나의 원래 코드였다. 5개의 아이콘을 직접 입력하였고 새로운 아이콘을 추가하고 싶다면 직접 추가하면 되었다. map을 이용한 고차함수를 활용하고 난 후 export type IconItem = { name: TName; width: string | number; height: string | number; viewBo..

프런트앤드 코딩을 처음 진행하면서 알게 된 하나의 사실은 내가 글자 혹은 데이터를 작성해서 화면에 띄우는 것은 굉장히 쉽지만 서버에서 관리하는 데이터를 받아오는 것은 귀찮다는 사실이었다. 하지만 우리는 슬프게도 많은 데이터는 서버에서 관리해야 하고 이 데이터를 화면에 띄우거나 활용해야 할 때면 이를 서버에서 받아와야 한다. server에서 데이터를 받아오는 방법은 많을 것이지만 내가 유일하게 알고 있고, 우리가 활용한 방법은 useQuery를 활용하는 것이였다. 우리가 만든 서버에서 api를 호출해 오는 코드를 전부 소개하는 것도 좋지만 오늘은 useQuery를 사용하는 코드를 집중적으로 봐보도록 하자. useQuery의 사용법! api를 호출하여 얻은 데이터를 활용하는 곳에서 사용하는 코드이다. exp..

useState란? 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다. const [state, setState] = useState(초기값); useState 함수의 기본 꼴이다. state라는 변수를 선언하고 그 값은 useState 괄호 안의 값을 초기값으로 초기화 된다. 그리고 setState함수를 통해서 해당 값을 바꾸고, setState함수를 통해 state가 바뀌게 된다면 해당 컴포넌트가 다시 랜더링 된다. useState를 왜 사용하는가?! 이 아이콘의 배경색은 지금의 색깔이 defalut 값이지만 클릭을 하게 된다면 배경색이 변하게 될 것이다. 저 아이콘의 코드는 아래와 같다. //CircleIconChip.tsx 아이콘의 전반적인 기능을 관리하는 코드이다 import..