지금까지 써 본 상태 관리 라이브러리는 Redux toolkit, mobX, Recoil이었다. 처음 썼던 상태관리가 Redux toolkit이었기 때문에 주로 사용해오다가 이직을 하면서 Recoil을 사용하게 되었다. 그런데 Recoil이 업데이트가 느리다는 글을 보게 된 후에 다른 상태 관리 라이브러리를 찾아보았다. Next도 15가 나왔고 React도 19가 임박한 시점에서 Recoil이 자주 업데이트가 안된다는 점이 맘에 안들었던 것 같다. 그러다 찾게 된 Zustand Zustand는 독일어로 라는 뜻이다. 아직 Redux가 많이 사용된다고 하는데 작은 기능을 사용하더라도 몇개의 파일과 코드들을 만들어야하는 boilerplate의 단점은 어쩔 수 없는 것 같다. Zustand 장점? 간단하고 직관적인 API를 제공한다. boilerplate가 거의 필요 없다. 사용 방법이 간단하다. 상태 변경 시 불필요한 컴포넌트 렌더링을 방지하는 최적화를 자동으로 처리한다. Zusta…

React-Native cli 환경 설정은 항상 한번에 된 적이 없다. 그래서 이번엔 Expo를 이용해서 환경 설정을 진행했다. 지금까지 Expo를 사용하지 않은 이유는 장단점이 극명하기 때문이었다. Expo CLI의 장단점을 가볍게 알아보자 장점 개발 환경 구축이 용이하다. Android Studio와 XCode 하다. 안드로이드 앱과 ios 앱을 하다. 개발 중 내 실제 디바이스로 개발 과정을 바로 확인할 수 있다. 단점 빌드 시간이 길다. Expo에서 제공해주는 모듈만 사용 가능하다. 개발시 (Native 모듈의 사용에 제한적) 프리티어로 1개월 기준 빌드만 가능하다. 그럼 React-Native CLI의 장단점은? 장점 Expo로 사용하지 못하는 에 접근이 가능하다. 빌드 시간이 단점 Android Studio와 XCode 하다. 초기 개발환경 구축과 앱 개발 시 상대적으로 시간 소요된다. Mac일 경우에만 ios 개발 및 배포가 가능하다. 그럼 Expo로 세팅을 해…

새로운 프로젝트 환경설정을 할 일이 있어서 yarn 패키지를 사용해서 진행하였다. 그런데 자주 보던 node_modules 폴더가 안보이는데? 찾아보자 yarn berry 를 사용하면 우리가 자주 봐왔던 node_modules 폴더가 설치되지 않는다. 그 대신 와 파일이 설치된다. Yarn Berry Yarn Berry는 Node.js를 위한 패키지 관리 시스템으로 Yarn의 최신 버전인 을 지칭하는 말이다. 기존의 Yarn 1.x 에서 큰 변화가 이루어진 버전으로, 여러 개선사항과 새로운 기능이 있다고 한다. 그 중 오늘 다룰 내용은 Plug’n’Play (PnP) Yarn Berry는 기존의 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, 에 의존성을 찾을 수 있는 정보가 기록된다. .pnp.cjs를 이용하면 디스크 I/O없이 어떤 패키지가 어떤 라이브러리에 의존하는지, 각 라이브러리는 어디에 위치하는지를 바로 알 수 있다. 장점 패키지의 모든 의…

이번 포스트는 카카오 컨퍼런스 강의 내용을 정리해서 담아보았다. 물론 다른 컨퍼런스 강의처럼 본인들이 개발한 내용이나 해결한 문제점들을 발표하는 자리이긴 하지만 내 목표인 카카오에서 진행하는 것이라 그런지 더 애정이 갔던 것 같다. 이번엔 내용 정리가 좀 힘들어서 들으면서 적은 그대로 담은 것 같다. 강의 내용 말고 다녀온 후기는 여기에 작성해 보았다. 일단 강의 내용 먼저 정리해보자 [ Kakao AI Native ] 정규돈 CTO - 카카오 카카오의 AI Native 전략 내부 크루들의 일상에도 자연스럽게 녹아드는 것이 목표 카카오 AI Native 성숙도 레벨 탐색 ~ 적용 단계 2년 정도 소요 AI 활용단계 모색 좋은 서비스를 만들려면 먼저 경험해봐야 한다. 교육 및 세미나(최신 ai 기술 학습), 테크톡(지식 공유), ai 해커톤(아이디러 서비스화) 진행 적용 ~ 혁신 단계 일하는 방식의 변화 AI Buddy (아지트, 지라, 위키를 통합하기 위해 만듬) ai 업…

이번엔 카카오 컨퍼런스를 다녀왔다. 주제는 지금까지의 카카오 서비스들에 AI가 접목된다는 이야기였던 것 같다. 경쟁률이 쎌 것 같았는데 의외로 참가자로 선정이 되었다. 회사에도 신청한 FE개발자분이 계셨는데 그 분은 안됐다는.. 나라도 즐기고 와야지 어쩌겠어ㅎ 이 글은 그저 다녀온 후기에 관한 포스트이고 강의 내용은 여기에 남겨놨다. if(KakaoAI) 이번 카카오 컨퍼런스는 진행되었다. 강의 주제는 거의 AI 내용이었고, FE 개발자인 나로써는 FE 강의가 몰려있는 에 신청했다. 컨퍼런스 전, 관련된 내용은 카카오톡의 챗봇에게 물어보면 친절히 답변을 해주었다. 역시 카카오 👍 앞서 얘기했듯이 이번 카카오 컨퍼런스 주제는 이름부터 if(kakaoAI) 인 만큼 만약 카카오와 AI가 합쳐진다면? 이라는 내용이었다. 판교역에서 셔틀버스를 타고 카카오AI센터로 향했다. 셔틀에서 받았던 카카오 굿즈 역시 카카오 👍 그 안에서 들어가면서 커…

저번 포스트에서 Organization 레포를 Vercel에 자동 배포하는 방법을 다뤘다. 발생 오류 main branch에 merge가 되면 자동으로 배포가 진행되는 플로우인데 정작 를 잡지 못하고 있었다. 그러기 위해선 main branch 에 PR을 올렸을 때 build 를 실행해 오류를 먼저 잡아내는 플로우가 추가로 필요했다. 플로우 Organization 레포를 Vercel에 자동 배포하는 플로우에서 PR 올렸을 때 build test를 진행하는 플로우가 추가되었다. 해보자 yml 파일 추가 main branch에 PR 올렸을 때 실행할 플로우가 담긴 yml 파일을 추가한다. 실행할 내용은 코드 내려받기 actions/checkout@v2 프로젝트 내에 사용 중인 yarn 버전 사용하기 corepack enable Install dependencies yarn install lint test yarn lint build test yarn build build-test…

Github Organization 레포를 Vercel에 배포를 하려면 이 필요하다. Organization 레포를 fork 해서 무료로 배포하는 방법을 기록하려고 한다. Todo Organization 레포 main branch에 를 하면 Vercel에 배포되게 작업 플로우 다른 branch에서 작업 후 main branch로 merge한다. main branch에 merge 완료. github action을 통해 fork한 개인 유저 레포로 코드 전체를 보낸다. 개인 유저 레포 main branch가 변경되면 vercel에서 자동 배포를 진행한다. 해보자 개인 계정에서 할 일 Organization 레포를 개인 레포로 fork 한다. Vercel에 로그인 후 fork한 레포(개인 레포)를 연동한다. 개인 유저의 secret 토큰을 발급한다. 로 시작하는 토큰은 다시 볼 수 없으니 어딘가에 잘 기록해야함. Organization 레포에서 할 일 Organization 레포 …

사용자가 로그인하거나 가입했을 때 사용자가 지정한 비밀번호가 그대로 DB에 저장이 되고 있었다. 이는 개발자 모드 네트워크 탭에서도 비밀번호를 확인할 수 있어 비밀번호 노출의 위험이 있다. Crypto JS를 이용해 salt를 생성하고 password + salt 조합으로 SHA-256 해시 알고리즘(단방향)을 통해 비밀번호를 암호화하여 DB에 저장하려고 한다. 아래는 내가 사용했던 방식을 기록해 놓았다. 해시(Hash) 란? 해시는 임의의 길이를 갖는 데이터를 고정된 길이의 데이터로 매핑하는 를 말한다. 암호화된 데이터는 복호화가 불가능하다. 입력값이 동일하면 암호화 데이터 또한 동일하다. 입력값과 상관없이 항상 일정한 길이의 암호화 데이터를 출력한다. 입력값이 다르지만 암호화 데이터가 같을 수도 있다. SHA 256 가장 많이 사용되는 해시 알고리즘은 다이제스트 크기가 256비트인 이다. 암호화된 데이터는 다이제스트(digest)라고 한다. Crypto JS JS 에서 해시…

정말 오랜만에 컨퍼런스를 다녀왔다. 2022년에는 운이 좋게도 INFCON 과 NHN 컨퍼런스에 당첨이 되어서 다녀왔는데 2023년에는 아무 행사도 참여하지 못했다. 2024년 올해 INFCON에 당첨되지 못했지만 Frontend 컨퍼런스인 FECONF에 운이 좋게 신청을 하게 되어서 참석하였다. 신청 당일인 오전 11시에 업무가 바빠서 신청하지 못했는데, 이미 매진이 되고 난 후에 오후까지 새로고침을 하면서 취소 표를 기다렸다. 운이 좋게도 취소표가 올라와 구매를 했던 기억이 있다. FECONF 2024 컨퍼런스가 열린 곳은 세종대학교 멀다.. 자차로 다녀오긴 했지만, 컨퍼런스를 선착순으로 예매할 때도 50,000원이라는 지출이 있는데 주차 요금은 별개로 받는다. 뭐 당연한거겠지만 세종대 광개토관에서 열린 컨퍼런스에 일찍 가지 못하면 걸어서 5 ~ 10분 정도에 있는 주차장에 주차를 해야한다. 이번 FECONF 2024는 발표 세션 A/B, 후원사 홀(굿즈를 받을 수 있…

다른 페이지에 있을 때도 알림이 오면 보여주는 기능을 만들려고 한다. 그러기 위해서는 실시간으로 데이터를 받아오는 로직이 필요하다. SSE(Server-Sent-Events) 라는 것을 알게 되었다. SSE (Server-Sent-Events) 란? 간단하게 서버의 데이터를 실시간, 지속적으로 Streaming 하는 기술이다. SSE 특징 서버에서 클라이언트로 실시간 이벤트를 전송하는 웹 기술로 서버에서 발생하는 업데이트나 알림 등을 으로 클라이언트에 전달할 수 있다. 단방향 통신이기 때문에 만 데이터를 전송할 수 있다. 클라이언트는 HTTP 프로토콜을 통해 SSE 연결을 설정하고, 서버는 HTTP 응답을 유지한 상태에서 데이터를 전송한다. 을 제공하기 때문에 연결이 끊어졌을 때 자동으로 다시 연결한다. WebSocket과의 차이점 가장 큰 차이점은 데이터 흐름에 있다. SSE는 서버 —> 클라이언트 ( 통신 방식) 일방적인 데이터 전송이 필요한 주가 업데이트, 실시간 알림에 적…

오늘 개발 블로그를 둘러보다가 프론트엔드 개발자이신 단민님의 최근 포스트를 마주하게 되었다. node.js로 cli 포트폴리오를 만들어서 npm에 배포하는 글이었다. 상당히 흥미로운 글이었다. 전부터 npm 라이브러리를 만들고 배포해서 유용하게 쓸 수 있는 개발자가 되고 싶은 생각이 있었는데 이번에 배포한 작디작은 CLI가 그 생각의 이 되길 바라며… 시작해보자. 단민님의 글 뿐만아니라 여기저기 블로그를 참고했다. 먼저 디렉토리 구조는 아래와 같다. package.json 새로 프로젝트를 생성한 후 명령어로 package.json 을 생성한다. (node가 설치되어 있다는 전제하에) 사용하는 라이브러리는 chalk (터미널 글씨 스타일 적용) commander (Node.js에서 CLI프로그램을 작성할 때 유용한 라이브러리) inquirer (터미널에서 사용자와 상호작용할 수 있는 질문(prompt) 시스템을 제공) init.js src 폴더 생성 후에 파일을 생성한다.…

Next 또는 React로 프론트엔드 개발을 하다 보면 항상 드는 생각이 있다. “내가 컴포넌트를 잘 분리한 건가..” 디자인 시스템을 공부하고 적극 활용해 본 경험은 없고 그냥 뭉뚱그려 생각하고 진행했던 것 같다. 디자인 시스템을 생각하고 개발을 진행하면 처음엔 불편할지라도 시간이 지나고 나면 만족할 만한 결과가 나오지 않을까 하는 생각이 들었다. 그 중 가장 흥미가 가는 Atomic Design 아토믹 디자인은 에서 영감을 얻은 디자인 시스템 방법론이다. 화학적 관점 이란 말이 흥미를 돋우었다. 먼저 Atom은 분해할 수 없는 단위인 원자를 의미한다. 가 모여서 를 만들고 가 모여서 를 만들고.. Atomic 디자인 역시 각 요소를 분해할 수 없는 단위까지 나누고, 이를 조합하여 컴포넌트를 만들고 나아가 페이지를 구성하는 방식을 의미한다. Atom(원자) Atom은 더 이상 분해할 수 없는 기본 컴포넌트로 input, label, button 과 같이 기본 Html태그…

React Router와 같은 라우팅 라이브러리를 사용하여 페이지를 이동할 때 React Router는 React 컴포넌트의 라이프사이클과 히스토리 API를 이용하여 스크롤 위치를 관리하고, 페이지 간 전환 시 스크롤 위치를 초기화하지 않도록하기 때문에 스크롤 위치가 유지된 채로 페이지가 이동된다. 이를 해결하기 위해 아래와 같이 컴포넌트를 생성해서 사용하였다. ScrollToTop Component useLocation을 이용하여 현재 페이지의 경로를 가져오고, useEffect를 이용하여 경로가 변경될 때마다 window.scrollTo(0,0)을 호출하여 스크롤을 페이지의 맨 위로 이동시킨다. 생성한 ScrollToTop 컴포넌트를 BrowserRouter의 내부에 포함시킨다. Router Component BrowserRouter는 라우트를 처리하고 URL과 연결된 컴포넌트를 렌더링하는 역할을 합니다. 따라서 ScrollToTop 컴포넌트를 BrowserRouter내에 …

Webview PostMessage 회사에서 앱을 개발할 때 React-Native webview로 React 프로젝트를 씌워서 앱 등록을 하였다. 그때 RN -> React 또는 React -> RN 으로 데이터를 전달해야하는 일이 생긴다. 그 당시 사용했던 방법을 기록해 놓으려고 한다. 🔍 React-Native Webview 옵션 세팅 React-Native webview 작업 시 속성에 react에서 보내는 데이터를 받을 때 사용할 함수를 적는다. 🔍 React-Native -> React 🔍 React -> React-Native Webview PostMessage 🔍 React-Native Webview 옵션 세팅 🔍 React-Native -> React 🔍 React -> React-Native

블로그에 글을 오랜만에 쓰게 되었다. 어떤 글로 다시 시작하면 좋을까 하다가 회고록이 생각이 났다. 일 년 동안 나는 무엇을 했으며 어떤 일이 있었고 기억에 남는 일과 보완해야 할 일이 무엇일까 기록을 하면 좋을 것 같았다. 먼저 2023년은 아홉수였으며 다사다난했던 한 해였다. 🏘️ 이직  1년 3개월 정도 퍼블리셔로 근무하다가 올해 5월에 이직을 하였다. 전 직장을 나올 때 아쉬웠던 점은 일했던 사람들이 참 좋았다. 지금도 연락하고 시간이 맞으면 만나서 술 한 잔 하고 모임도 갖는다. 그렇게 아쉬웠던 전 직장에서 나와 이직을 한 곳은 자체 개발팀이 막 만들어진 신입들이 모여있는 곳이었다. 우리 회사와 계약을 한 개발 회사(이하 D사)가 있었는데 해외에 오픈할 우리 회사 사업을 D사에서 개발하고 있었다. 우리는 D사 개발자들 밑에서 배우면서 일을 했다.  우리 회사 IT팀은 신입뿐인 반면에 D사는 경력 있는 개발자들이 많았다. D사에 상주하여 일을 하기도 하고, 우리 사무실로 돌아…

API 통신이 안된다.. 왜? 로컬에서는 잘 되는데 서버에서는 통신이 안되는 이유는 뭘까… 먼저 오류에 대해 알아보자 Access to XMLHttpRequest at ’https://cedarsojt.store:4000/signup/list/country/branch’ from origin ’https://cedarsojt.store’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 오류 내용을 해석해보면 XMLHttpRequest 요청이 CORS(Cross-Origin Resource Sharing) 정책에 의해 차단된 것을 나타냅니다. 이 에러는 요청된 리소스에 ‘Access-Control-Allow-Origin’ 헤더가 없기 때문에 발생합니다. 악명 높은 CORS 에러 메세지라고 한다. 웹 개발을 하다 보면 반드시 마주치는…

현재 진행 중인 개발동아리에서 앱을 만들기로 하였다. 근데 우리는 앱개발자가 없는걸..? 그래서 react-native 를 이용해 웹뷰를 만들어 모바일 웹에 씌우기로 하였다. 이를 하이브리드앱이라고 한다. react-native-webview 를 개발하는 과정에서 엄청난 오류와 시간이 걸렸기 때문에 다음에 작업할 때 이를 방지하기 위해 기록하려고 한다. 처음에 expo를 사용하여 작업을 했지만 알 수 없는 오류들을 해결하는데 시간이 더 걸릴 것 같아서 다 지우고 react-native-cli 로 환경 설정을 진행했다. 나는 mac을 사용하고 있기 때문에 기준으로 작업하였다. 1. Homebrew 설치 Homebrew 는 mac용 패키지 관리자이다. 아래 명령어로 설치하면 된다. 2. rbenv 설치 rbenv 는 Ruby 버전 관리자이다. mac에는 기본적으로 Ruby가 설치되어 있지만 버전이 안맞을 수 있기 때문에 버전 확인 후 설치해준다. 3. Node.js 설치 간단하니 넘…

업무 진행을 하다가 차트 내에 날짜를 입력하는 부분이 있었다. 입력하는 날짜 형식이 배열로 지정되어 있어서 오늘 날짜로 부터 며칠 전까지의 날짜를 구하고 그 사이 기간을 배열로 만드는 작업을 하였다. 오늘 날짜로부터 며칠 전 날짜 구하기 파라미터 값으로 며칠전의 날짜를 구할것인지 입력하게 되면 차트 옵션에 맞는 형식으로 날짜를 반환해주는 함수를 만들었다. 이를 이용해서 오늘 날짜로부터 의 반환된 날짜까지를 배열로 만드는 함수를 만들었다. 파라미터 값 사이의 날짜를 배열로 반환하기 차트는 원하는 형태로 잘 구현이 되었다. 여러 레퍼런스를 참고해서 작업을 했고, 차트 라이브러리는 ApexCharts.js 를 사용했는데 공식 문서에 레퍼런스도 잘 나와있고 js 프레임워크들에서도 쉽게 사용할 수 있어서 확장성이 넓다. (차트, 그래프 모양이 맘에 들기도 한다.) [Reference] https://apexcharts.com/ https://lts0606.tistory.com/230 오늘 …

모든 React Component에는 Lifecycle(수명 주기)이 존재합니다. Component의 수명은 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다. 라이프 사이클 메서드의 종류는 총 아홉 가지입니다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다. 라이프 사이클은 총 세가지, Mount, Update, Unmount 로 나눕니다. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것을 **마운트(Mount)**라고 합니다. 이때 호출하는 메서드는 다음과 같습니다. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 ren…

[NHN FORWARD 22] NHN의 다섯 번째 오프라인 컨퍼런스 일자 : 22.11.24 장소 : 그랜드 인터컨티넨탈 서울 파르나스 [NHN 키노트] - 오프닝 발표자 : NHN Cloud 박근한, 이진수, 김명신 Small Steps make a Big Difference NHN 회사 소개(게임, 결제, 커머스, 데이터, 클라우드) GameAnvil, GameTalk 소개 GameAnvil 게임 서버의 템플릿과 웹 운영 도구, 성능 테스트 툴 등을 제공 개발 경험이 적은 게임 개발자여도 게임 서버 개발과 서비스, 서비스 운영까지 한 번에 가능하게 해줌 GameTalk 간편하게 게임 내 채팅을 구현할 수 있는 솔루션 이란? 고객이 체감할 수 있는 고마운 기술을 만드는 것 국내외 데이터 센터 확장 예정 AI 기술 확대 동화책 읽어주기 일반 ai가 읽는 것이 아닌 감정이 들어갈 수 있도록 가상 아나운서 직접 무대에 서서 발표하지 않고 글을 입력만 해도 말하는 것 처럼 카툰 생성 기…

[ INFCON 2022 ] 인프런의 첫 번째 오프라인 콘퍼런스 일자 : 22.08.26 장소 : 강남구 삼성동 코엑스 그랜드볼룸 참여 기업 : MUSINSA, LINE, JETBRAINS, toss, yanolja, 우아한 형제들, 오늘의 집, 당근마켓, 교보문고 [인프랩 로드맵] - 오프닝 발표자 : 인프랩 CEO 이형주, 인프랩 CTO 이동욱, 인프랩 커뮤니티 리드 홍연의 인프런 커뮤니티 질문&답변 글쓰기 에디터 수정 예정(마크 다운 형식) 인프런 내 강의실 모바일 뷰 개선 사용자간 스터디 서비스 개선 랠릿(인프랩 채용 서비스)과 인프런 통합 [실리콘밸리로 떠나는 비전공자 개발자의 지난 4년 회고] 발표자 : Pixelic 한정수 학습 내용 개인 블로그, git 정리 개발자 커리어 세미나 참석(작은 세미나도 추천) 우아한테크 캠프 추천 넥스트 스텝 TTD & 클린 코드 강의 추천(Backend) 해야할 과제도 많고 신경 써야할 부분이 많지만 이수하게 되면 많은 도움이 된…

Swiper swiper는 slick과 같은 슬라이드 라이브러리이지만 jQuery가 아닌 를 사용하며 다양한 옵션을 지원해서 사용하기 편합니다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 측면에서도 뛰어납니다. 설치 방법 swiper를 사용하려면 여러가지 방법이 있습니다. 원하는 방식으로 사용하시면 됩니다. 으로 사용하는 방식 을 직접 다운받아 사용하는 방식 으로 설치하여 사용하는 방식   CDN 기본 사용법(구조) 사용법은 매우 간단합니다. 슬라이더를 사용하기위해 만들어 놓은 html문서 안에 swiper의 기본 구조에 맞는 class를 넣어주면 됩니다. 주의할 점은 swiper에서 정해 놓은 을 지정해줘야 합니다. ✔ swiper-container > swiper-wrapper > swiper-slide 구조로 되어 있습니다.   아래 작성된 태그를 보시면 < HTML > - 기본 구조   < JavaScript > swiper 사용시 으로 사용되는 들 입니다. 커스…

slick-slider slick-slider 는 반응형 웹을 지원하는 jQuery 슬라이더 라이브러리입니다. 기본 사용법과 반응형 작업방법을 설명 드리겠습니다. slick 다운로드 및 css,js 파일 로드 slick 메인 홈페이지 오른쪽 상단에 를 클릭한 후 다운로드를 진행하거나 그 아래의 CDN주소를 복사해서 태그안에 넣어서 사용하면 됩니다. 그리고 slick-slider는 jQuery 기반으로 만들어졌기 때문에 jQuery가 필요합니다. 기본 사용법 slick-slider의 기본 구성은 아래 코드 처럼 div형태로 구성되어 있는 html문서를 슬라이더 형태로 변경해줍니다.   < HTML >   < JavaScript > slick-slider 옵션 내의 안에 화면사이즈(breakpoint)를 지정해 놓으면 그 안에서는 으로 슬라이드가 변경됩니다. slick 자주 사용되는 함수 slider에 새로운 컨텐츠 추가하기 이미 slick이 적용된 상태에서 슬라이더를 동적으로 추…