전체 글

Swiper? 🧐Swiper는 웹에서 슬라이드·캐러셀(Carousel) 기능을 구현할 때 많이 쓰이는 오픈소스 JavaScript 라이브러리입니다. 이미지를 옆으로 넘기거나 드래그 혹은 자동으로 롤링하는 것에 자주 쓰입니다. 또한 반응형도 좋고, 다양한 전환 효과를 주는 오픈소스입니다.React Code자세한 설명은 주석으로 두겠습니다. 버전은 아래와 같습니다."swiper": "^11.2.10", {repeatedProducts.map((product, index) => ( // 충분한 데이터를 줘야합니다. ))} .sample-slider .swiper-wrapper { transition-timing-f..

구름톤을 돌아보며... 6개월을 구름톤을 진행하고 수료한 뒤, 약 1년이 지나 돌아보며 적는 후기입니다. 구름톤 트레이닝을 돌아보면, 힘든 날도 많았고, 즐거운 날 그리고 뿌듯한 날도 많았던 것 같습니다. 강의를 듣고 이해가 안 가는 부분을 들으면서 공부할 때는 너무 힘들기도 했고, 조금씩 알아간다는 즐거움을 느끼기도 했으며 최종 프로젝트 발표 때, 인기상을 받았을 때는 홀가분하고 매우 뿌듯했습니다. 솔직히 그 당시에는 우리가 왜 우수상이 아니지? 싶었지만, 지금 와서 생각해 보면 우수상을 탄 팀이 저희보다는 확실히 현업에서 쓰일만한 UI/UX 적인 요소와 간단하고 직관적인 기능들을 제공했던 것 같습니다. 이점이 조금 아쉽게 남네요. 결과적으로 지금은 구름톤 덕분에 수료한지 2주 만에 중견기업 취업에 성..

Netlify 에 배포하게 된 이유우선, 원래는 vercel에 배포하고 있었는데, vercel.app 으로 끝나는 도메인이 오후시간대(8시즈음)부터 net::ERR_CERT_COMMON_NAME_INVALID 이라는 오루갸 발생하는데, 아래 사진과 같은 글이 있는 것을 보니(24년 5월) 이러한 오류가 있는게 좀 오래 되었나 보다 생각했었습니다. 그리고 아직도 못고친거 보면, 앞으로 얼마나 걸릴지 모르겠다 생각하여 옮기기로 했습니다.다른 배포 사이트보다 Netlify를 선택하게 된 이유는 도메인을 설정할 수 있기 때문에 선택하게 되었습니다.1. Netlify 시작하기아래 버튼을 클릭해서 가입해줍니다. 대부분 Github 아이디가 있으실 테니 Github 아이디로 하시면 됩니다. 이미 가입하고 배포까지 진..

1. 프로젝트 생성npx create-next-app@latest [project-name]√ Would you like to use TypeScript? ... No / Yes√ Would you like to use ESLint? ... No / Yes√ Would you like to use Tailwind CSS? ... No / Yes√ Would you like your code inside a `src/` directory? ... No / Yes√ Would you like to use App Router? (recommended) ... No / Yes√ Would you like to use Turbopack for `next dev`? ... No / Yes√ Would you lik..

React혹은 Next.js 에서 아래와 같은 Warning이 뜨는 경우가 있는데, 주로 반복문에서 key를 누락했을 때, 발생한다. List 안의 데이터를 map이나 다른 메서드를 이용해서 꺼낼 경우 객체를 구분할 수 없기 때문이다.See https://react.dev/link/warning-keys for more information.Each child in a list should have a unique "key" prop.    그런데, 반복문 안의 객체에 key를 분명히 적용시켰는데, 이런 오류가 뜨는 경우가 생겼다. 아래는 그 예시이다. 이 부분에서{menuList.map((menu, index) => ( {menu.children ? ( ..

🔗 문제 링크https://www.acmicpc.net/problem/20057💡 문제 풀이 및 해석문제의 핵심은 일정 비율로 모래가 흩날리는 것인데, 기존에 BFS 문제에서 next를 정해두고 상하좌우로 이동하는 것을 조금 늘렸다고 생각하면 된다. 해당 코드는 다음과 같다. 퍼지는 것은 9개인데, 왜 10개냐면 마지막은 문제에서 설명상 알파의 위치이다. 그리고 퍼지는 위치에 맞게 percent도 정해놨다.int next_x[][10] = { {0, -1, 1, -2, -1, 1, 2, -1, 1, 0}, {2, 1, 1, 0, 0, 0, 0, -1, -1, 1}, {0, -1, 1, -2, -1, 1, 2, -1, 1, 0}, {-2, -1, -1, 0, 0, 0, 0, 1, 1, -1}..

🔗 문제 링크https://www.acmicpc.net/problem/21610💡 문제 풀이 및 해석시뮬레이션 문제인 만큼 문제의 조건을 그대로 구현하면 된다.이 전에 비가 내린 것을 구분하는 것은 MAP 구조체를 만들어서 isRain으로 판별하였고, next_x,next_y의 99값은 문제의 조건대로 Index를 1부터 쓰기 위함이다. 정확한 방식은 아래와 같다.이동하기 전에, 맵에 isRain을 모두 false로 만들어준다. (처음엔 상관없지만, 한 바퀴 돈 뒤에는 기존에 비가 내렸던 곳의 마킹을 없애주기 위함이다.)방향 * 거리 만큼 이동시킨다.이동시킨 거리를 N으로 나눈 나머지를 구한다. (위치 특정을 위해) 이때, -로 이동하거나 만약 N의 위치에 있다면 0 이하이므로 0 이하이면 N을 더해..

🔗 문제 링크https://www.acmicpc.net/problem/20056💡 문제 풀이 및 해석시뮬레이션 문제인 만큼 문제의 최적화보다는 설명한 그대로 구현해야 한다. 주의할 점만 적어놓겠습니다.파이어볼이 조건에 맞게 이동한다.1-1. 조건대로 이동할 때, 파이어볼이 맵 밖으로 나가는 경우는 반대쪽에서 나오게 설정해야 한다.1-2. 파이어볼이 이동하기 전에 기존에 맵에 저장되어 있던 파이어볼의 정보는 초기화 시켜줘야 한다.이동한 파이어볼은 분열한다.2-1. 분열하면서 주의할 점은 모두 짝수 or 홀수 방향인 것을 정해줘야 한다는 점이다. (따로, 체크를 해야함)2-2. 한 번만 이동해도 분열은 시켜준 뒤에 질량을 측정해야 한다.이 과정을 K번 반복한다.⭐️ 정답 코드 및 설명#include #i..