멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 5
교육2025.04.08 23:26멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 5

오늘은 데이터 베이스를 전반적으로 배웠다.이때까지는 백엔드에서 단순히 데이터베이스에 있는 데이터들을 꺼내서 나에게 주면, 그걸 보여주기만 했기 때문에 데이터베이스에 대해서 깊은 이해와 관심은 가지고 있지 않았다. 단순한, 정말 단순한 쿼리문은 사용할 수 있지만 그 정도에서 그치면 안된다는 것을 깨달았기 때문에 오늘 수업도 시작부터 많은 호기심을 가진 채로 시작했다. 1.  시스템이란?시스템이란 뭘까?강사님께서는 수업을 하면서 종종 단어 자체에 대한 질문을 하신다. 나는 시스템이란 흐름 이라고 생각했다.하지만 강사님의 설명을 듣다 보니 단순히 '흐름' 이라고만 정의 내리기에는 모자란 것 같았다. 항상 이해하기 쉽게 예를 들어 설명을 해주시곤 하는데 이번에는 병원에 갔을 때를 예를 들어 설명해 주셨다. 병원..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4
교육2025.04.05 13:31멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4

오늘은 어쩌면 내가 이 과정을 신청하게 된 근본적인 이유 중 하나인 TypeScript 에 대해서 배워보는 시간을 가지려고 한다.솔직히 처음에는 그냥 귀찮기만 했다. 정말 하나부터 열까지 타입을 일일히 명시해줘야 했고, 오히려 가독성을 떨어뜨린다고 생각했다.하지만 많은 자유도를 부과하는만큼 많은 책임이 발생하고, 그에 따른 해답이 타입을 명시해주는 것이라고 했다.그렇지만 조금의 이점은 있다고 생각한 부분이 에러를 명확하게 짚어주는 것이었다. 만약 height 라는 항목을 heigth 라고 작성하면 JS에선 NaN이라고 나오는데 TS에서는 '너 혹시 그거 height 쓰려고 한거 아니야?' 라고 짚어준다. 이런 부분은 마음에 들었다. 하지만 그럼에도 불편함을 느끼지만, 나보다 더 많이 배운 사람들이 그게 ..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 3
교육2025.04.04 21:42멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 3

1. Node.js 란?Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있는 환경을 만들어준다. 원래 JavaScript는 웹 브라우저에서만 동작했지만, Node.js 덕분에 파일을 읽거나, 서버를 만들고, 네트워크 요청을 처리하는 등 다양한 백엔드적인 작업도 가능해졌다. Node.js는 Google Chrome의 V8 JavaScript 엔진을 기반으로 만들어졌고, 이 엔진이 자바스크립트를 빠르게 실행시켜준다.게다가 C++로 작성된 다양한 저수준 API들을 Node에서 사용할 수 있도록 Node 바인딩을 통해 연결해준다. Node는 단일 스레드(Single Thread) 로 동작하지만, 내부에 이벤트 루프(Event Loop) 라는 메커니즘이 있어,비동기 처리를 효율적으로 해낸다.이벤..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 2
교육2025.04.03 22:40멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 2

1. Vue.js2일차 수업에는 Vue.js를 이용해 MVC(Model, View, Controller) 패턴의 기본 구조를 경험하는 시간을 가졌다.기본적인 Vue 코드의 구조는 이렇게 된다. Vue.createApp({ data: { // 상태 데이터 }, methods: { // 기능 구현 }}).mount('#calc-app'); 실습으로 간단한 덧셈 계산기를 만들어 보았는데, 예제를 통해 HTML과 Vue.js를 결합하여 실습을 진행했다. 아래는 간단한 예제이다./* HTML 코드 */ 덧셈 계산기 계산기 입력폼 x: y: = 0 /* Vue의 MVC ..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 1
교육2025.04.02 23:00멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 1

첫날 프론트엔드 심화과정에 참여한 나는 사실 기대 반, 걱정 반이었다. 특히 Next.js 라는 녀석은 이름은 많이 들었지만 제대로 파고 들면서 학습해본 적이 없어서 더욱 그랬다.역시나 첫 수업부터 쉽지 않았지만, 정리를 해보면서 기록으로 남기려고 한다. 1. 왜 Next.js를 배워야 하는가?항상 어떤 프레임워크나 라이브러리를 고르기 전에 응당 해야하는 질문이었다고 생각한다.그렇지만 이전에 내가 React를 선택했을때에는 지인의 추천, 그리고 사용하다보니 편해서가 주된 이유였다.그래서 편했다는 이유 외에 굳이 왜 ? 라는 질문에는 현재도 대답하기 힘들다.그렇지만 이번 멋쟁이 사자처럼 프론트엔드 심화과정은 왜 Next.js를 배워야 하는지 부터 수업을 진행했고, 그에 대한 이유를 어느정도 이해하게 되었다..

멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 5
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 5
교육
2025.04.08 23:26
오늘은 데이터 베이스를 전반적으로 배웠다.이때까지는 백엔드에서 단순히 데이터베이스에 있는 데이터들을 꺼내서 나에게 주면, 그걸 보여주기만 했기 때문에 데이터베이스에 대해서 깊은 이해와 관심은 가지고 있지 않았다. 단순한, 정말 단순한 쿼리문은 사용할 수 있지만 그 정도에서 그치면 안된다는 것을 깨달았기 때문에 오늘 수업도 시작부터 많은 호기심을 가진 채로 시작했다. 1.  시스템이란?시스템이란 뭘까?강사님께서는 수업을 하면서 종종 단어 자체에 대한 질문을 하신다. 나는 시스템이란 흐름 이라고 생각했다.하지만 강사님의 설명을 듣다 보니 단순히 '흐름' 이라고만 정의 내리기에는 모자란 것 같았다. 항상 이해하기 쉽게 예를 들어 설명을 해주시곤 하는데 이번에는 병원에 갔을 때를 예를 들어 설명해 주셨다. 병원..
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 4
교육
2025.04.05 13:31
오늘은 어쩌면 내가 이 과정을 신청하게 된 근본적인 이유 중 하나인 TypeScript 에 대해서 배워보는 시간을 가지려고 한다.솔직히 처음에는 그냥 귀찮기만 했다. 정말 하나부터 열까지 타입을 일일히 명시해줘야 했고, 오히려 가독성을 떨어뜨린다고 생각했다.하지만 많은 자유도를 부과하는만큼 많은 책임이 발생하고, 그에 따른 해답이 타입을 명시해주는 것이라고 했다.그렇지만 조금의 이점은 있다고 생각한 부분이 에러를 명확하게 짚어주는 것이었다. 만약 height 라는 항목을 heigth 라고 작성하면 JS에선 NaN이라고 나오는데 TS에서는 '너 혹시 그거 height 쓰려고 한거 아니야?' 라고 짚어준다. 이런 부분은 마음에 들었다. 하지만 그럼에도 불편함을 느끼지만, 나보다 더 많이 배운 사람들이 그게 ..
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 3
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 3
교육
2025.04.04 21:42
1. Node.js 란?Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있는 환경을 만들어준다. 원래 JavaScript는 웹 브라우저에서만 동작했지만, Node.js 덕분에 파일을 읽거나, 서버를 만들고, 네트워크 요청을 처리하는 등 다양한 백엔드적인 작업도 가능해졌다. Node.js는 Google Chrome의 V8 JavaScript 엔진을 기반으로 만들어졌고, 이 엔진이 자바스크립트를 빠르게 실행시켜준다.게다가 C++로 작성된 다양한 저수준 API들을 Node에서 사용할 수 있도록 Node 바인딩을 통해 연결해준다. Node는 단일 스레드(Single Thread) 로 동작하지만, 내부에 이벤트 루프(Event Loop) 라는 메커니즘이 있어,비동기 처리를 효율적으로 해낸다.이벤..
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 2
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 2
교육
2025.04.03 22:40
1. Vue.js2일차 수업에는 Vue.js를 이용해 MVC(Model, View, Controller) 패턴의 기본 구조를 경험하는 시간을 가졌다.기본적인 Vue 코드의 구조는 이렇게 된다. Vue.createApp({ data: { // 상태 데이터 }, methods: { // 기능 구현 }}).mount('#calc-app'); 실습으로 간단한 덧셈 계산기를 만들어 보았는데, 예제를 통해 HTML과 Vue.js를 결합하여 실습을 진행했다. 아래는 간단한 예제이다./* HTML 코드 */ 덧셈 계산기 계산기 입력폼 x: y: = 0 /* Vue의 MVC ..
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 1
멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 1
교육
2025.04.02 23:00
첫날 프론트엔드 심화과정에 참여한 나는 사실 기대 반, 걱정 반이었다. 특히 Next.js 라는 녀석은 이름은 많이 들었지만 제대로 파고 들면서 학습해본 적이 없어서 더욱 그랬다.역시나 첫 수업부터 쉽지 않았지만, 정리를 해보면서 기록으로 남기려고 한다. 1. 왜 Next.js를 배워야 하는가?항상 어떤 프레임워크나 라이브러리를 고르기 전에 응당 해야하는 질문이었다고 생각한다.그렇지만 이전에 내가 React를 선택했을때에는 지인의 추천, 그리고 사용하다보니 편해서가 주된 이유였다.그래서 편했다는 이유 외에 굳이 왜 ? 라는 질문에는 현재도 대답하기 힘들다.그렇지만 이번 멋쟁이 사자처럼 프론트엔드 심화과정은 왜 Next.js를 배워야 하는지 부터 수업을 진행했고, 그에 대한 이유를 어느정도 이해하게 되었다..
JavaScript Math 객체 정리
JavaScript Math 객체 정리
코딩 테스트 연습
2025.03.31 21:27
이번에 알고리즘 문제를 풀다가, 올림 같은 수학 연산을 하고 싶을 때 어떻게 해야할지 고민을 하다가, 도저히 해결을 못해서 검색을 통해 알게 된 Math 객체를 정리해보려고 한다. 1. Math 객체란?Math 객체는 JavaScript에서 기본 제공하는 수학 연산을 수행하는 내장 객체입니다. 숫자의 절댓값, 올림/내림, 랜덤 값 생성 등 다양한 기능을 제공합니다. 2. 자주 사용하는 Math 메서드 정리메서드설명Math.abs(x)절댓값 반환Math.ceil(x)올림 (소수점 올림)Math.floor(x)내림 (소수점 버림)Math.round(x)반올림Math.max(a, b, c, ....)최댓값 반환Math.min(a, b, c, ....)최솟값 반환Math.pow(x, y)거듭제곱(x^y) // ..
코딩 테스트 연습 전 준비사항 - 크롬 확장 프로그램(백준 허브)
코딩 테스트 연습 전 준비사항 - 크롬 확장 프로그램(백준 허브)
코딩 테스트 연습
2025.03.31 17:12
회고록에 작성했듯이, 오늘부터 매일 백준이나 프로그래머스 문제를 풀고 깃허브에 올리려고 한다.하지만 한 문제를 풀때마다 새로 작성해서 커밋을 하게 된다면 굉장히 귀찮을 수 있는데, 이럴때 사용하기 좋은 크롬 확장 프로그램이 있어서 소개하려고 한다. 1. 크롬 웹 스토어에서 크롬 확장 프로그램 설치하기크롬 웹 스토어에서 '백준 허브'를 검색하고 설치까지 완료한다. 2. 깃허브 연동하기  확장프로그램을 눌러, 핀으로 고정시킨 뒤 아이콘을 누르면 깃허브와 연동할 수 있다 !Authenticate 버튼을 눌러 깃허브와 연동한다.  여기서 본인에게 맞는 옵션을 선택하면 되는데, 나는 이미 진행중이던 레포지토리가 있어서 레포지토리 이름을 입력한 후 연결했다. 3. 문제 풀고 자동 커밋 확인하기나는 프로그래머스를 활..
대학교 졸업, 그리고 1년 후까지 돌아보며
대학교 졸업, 그리고 1년 후까지 돌아보며
회고록
2025.03.28 09:55
1. 프롤로그많은 사람들이 하는 회고록, 하지만 단순히 유행처럼 따라가는 것이 아니라, 꼭 해야만 할 것 같고 또 하고 싶어서 시작해보려 한다.누가 이 글을 보게 될지는 모르겠다. 하지만 나는 이곳에서 하고 싶은 말을 마음껏 쏟아내고, 앞으로의 다짐을 새기며, 스스로의 시간을 조금 더 의미 있게 만들고 싶다. 무엇보다도, 내가 어떤 사람인지 좀 더 깊이 들여다볼 수 있는 매개체가 되었으면 좋겠다. 그리고 이 회고록이 내게 원동력이 되어 앞으로 한 걸음 더 나아가는 계기가 되길 바란다.이 블로그에 남길 이야기들이 면접관님들, 지인들, 혹은 우연히 들른 누군가에게 마냥 좋은 인상을 남기지는 않을 수도 있다. 하지만 그만큼 솔직하게 나 자신을 돌아보고, 더 강하게 채찍질하며 앞으로 나아가고 싶다. 2. 대학 ..
웹 포트폴리오 프로젝트 - 완료
웹 포트폴리오 프로젝트 - 완료
프로젝트 개발일지
2025.02.20 18:40
웹 포트폴리오 제작 후기MZ 사전 프로젝트를 마친 이후로, 웹 포트폴리오를 제작하게 되었습니다.개발을 진행하면서 Next.js와 TypeScript의 필요성을 느껴 학습과 개발을 병행했고, 완벽하다고 할 수는 없지만 나름 성공적으로 마무리했다고 생각합니다.👉 웹 포트폴리오 링크:My Website My Website© 2025 MyWebsite. All Rights Reserved.port-next-webportfolio-front-m61t9knhb5c1f236.sel4.cloudtype.app이곳에서 제 웹 포트폴리오를 만나보실 수 있습니다 ! 그리고 프로젝트 마치고 난 뒤 이제 후기를 작성해 볼게요. 1. TypeScript & Next.js & Tailwind CSS이번 프로젝트를 통해 TypeS..
var, let, const의 차이점
var, let, const의 차이점
모던 자바스크립트 정리를 하다가 var, let, const의 차이점을 한번 정리하고 가면 좋을 것 같아서 따로 빼서 글을 써보려고 해요. 우선은, 블록 스코프(Block Scope)와 함수 스코프(Function Scope), 그리고 호이스팅에 대해서 개념을 알면 var, let, const의 차이점에 대해서 이해하는데 훨씬 도움이 될 것 같아요. 블록스코프와 함수 스코프변수에는 접근할 수 있는 범위(스코프)가 정해져 있어요. 1. 블록 스코프(Block Scope){ } 중괄호로 감싸진 범위를 벗어나면 변수에 접근할 수 없어요.let과 const는 블록 스코프를 따라요.하지만 const는 선언과 동시에 값을 할당해야하며, 이후 값 변경이 불가능해요.if (true) { let a = 10; ..
모던 자바 스크립트 Deep Dive - 3장, 4장
모던 자바 스크립트 Deep Dive - 3장, 4장
3장의 내용은 JavaScript를 사용하기 위해 어떻게 해야하는지에 대한 내용이라, 4장인 변수에 대해서 한번 정리해 볼게요.변수란?변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위한 이름이에요. 쉽게 말해, 값이 저장된 위치를 가리키는 상징적인 이름이에요. 변수를 사용하면 개발자가 직접 메모리 주소를 다룰 필요 없이 안전하게 값을 저장하고 참조할 수 있어요.var result = 10 + 20; 위 코드에서 result가 변수 이름이에요. 변수에 값을 저장하는 것을 할당, 변수를 통해 값을 불러오는 것을 참조라고 해요. 식별자변수 이름을 식별자라고도 해요. 식별자는 메모리에 저장된 값을 구별하는 고유한 이름이에요. 단순히 변수뿐만 아니라 함수, 클래스 등의 이름도..
모던 자바스크립트 Deep Dive - 2장
모던 자바스크립트 Deep Dive - 2장
자바스크립트란 무엇인가?오늘은 자바스크립트가 무엇인지에 대한 내용인 2장을 정리해보도록 할게요.2-1) 자바스크립트의 탄생1995년, 넷스케이프 커뮤니케이션즈는 웹 브라우저에서 동작하는 경량 프로그래밍 언어가 필요해 자바스크립트를 개발했어요. 브렌던 아이크가 만든 이 언어는 1996년 넷스케이프 내비게이터에 탑재되었고, 처음에는 "모카"로 불리다 "라이브스크립트"와 "자바스크립트"로 이름이 바뀌었어요. 그러나 자바스크립트의 성공은 순탄치 않았고, 이후 마이크로소프트가 만든 JScript가 등장하며 경쟁이 치열해졌어요.2-2) 자바스크립트의 표준화마이크로소프트의 JScript와 넷스케이프의 자바스크립트는 호환성 문제를 일으켰고, 이는 크로스 브라우징 문제를 낳았어요. 이를 해결하기 위해 1996년 ECMA..
모던 자바스크립트 Deep Dive - 1장
모던 자바스크립트 Deep Dive - 1장
미루고 미뤄왔던 모던스크립트 Deep Dive 정리를 해보도록 하겠습니다.이번에 면접을 몇 군데 보면서 CS 지식 혹은 제가 다루고 있는 언어의 개념들이 정말 중요하다고 느꼈어요.구현에만 초점을 맞추고 학습한 것 같아서, 조금은 개념적인 부분을 공부하기 위해 미뤄뒀던 공부를 해보려고 합니다.1-1) 프로그래밍이란?프로그래밍은 컴퓨터에게 실행을 요구하는 커뮤니케이션이라고 할 수 있습니다.만약에 우리가 어떠한 문제를 해결하고 싶다면, 먼저 요구사항을 명확히 정의해서 전달해 주는 것이 좋겠죠? 프로그래밍 = 문제 해결을 코드로 표현하는 과정 컴퓨터는 사람처럼 직관적으로 이해하지 못하기 때문에, 논리적으로 문제를 분해하고, 패턴을 추출하고, 평가가 가능한 형태로 변환해주어야 합니다. 이를 컴퓨팅 사고라고 합니다..
포켓몬 사전 - 리팩토링 후 최종결산
포켓몬 사전 - 리팩토링 후 최종결산
프로젝트 리뷰
2025.02.05 16:48
1. 배포된 URL이번에는 githubio를 사용해서 배포를 진행했습니다.https://harang-dev.github.io/Poke-Dict.io/ Poke-Dict harang-dev.github.io클라우드 타입과 다르게 따로 건들지 않아도 24시간 동작합니다 ㅎㅎ2. 어려웠던 점 & 아쉬웠던 점이전에는 useInfiniteQuery를 사용해서 무한스크롤만 구현했었습니다.이번에는 포켓몬의 상세한 정보까지도 알기 쉽게 하고 싶었는데, 처음에 제가 요청한 엔드포인트에서는 한글로 반환을 해주지 않았습니다.그래서 구글링 및 여러 가지 엔드포인트를 건드리다 보니 어떤 조건의 맞는 값을 반환하는 코드를 작성할 수 있었습니다.const koreanNameObj = (await axios.get(`${API}/p..
MZ Dictionary - 최종 결산
MZ Dictionary - 최종 결산
프로젝트 개발일지
2025.01.28 15:30
1. 진행상황진작 프로젝트는 마무리가 되었고, cloudtype을 사용해 배포까지 완료했습니다.https://web-mz-dict-front-m61t9knhb5c1f236.sel4.cloudtype.app/ MZ 사전 web-mz-dict-front-m61t9knhb5c1f236.sel4.cloudtype.app 무료 버전을 사용해서, 오전 5시가 되면 서버가 자동으로 다운되기 때문에, 혹여나 접속이 되지 않는다면 시간이 조금 지난 이후에 사용해 주시면 감사하겠습니다.(수동으로 매번 켜줘야 합니다... ㅠㅠ) 2.  개발 예정인 항목들우선 현재는 취업준비로 바쁜 나머지.. 개발을 마무리 한 상태이지만, 추가적으로 구현하고 싶은 것들이 남아있습니다.MZ 단어에 대한 정형화된 데이터가 없어서 현재도 있는 데..
첫 면접 후기
취업관련
2025.01.18 17:19
원래 제가 MZ 사전을 개발하면서 꾸준히 블로그 글을 포스팅 하려고 했는데, 그러지 못했습니다 ㅠㅠ댓글 기능 구현 중에 오류가 생겼는데, 서버와의 통신 중에 에러가 생겼습니다.그런데 백엔드 담당하는 개발자분이 현재 시간이 없으셔서 수정이 어렵고, 저도 취업을 목표로 하고 있기 때문에,최대한 마무리 짓고 면접 준비를 하는데에 바빠서 글을 올리지 못했네요... 죄송합니다.정리해서 차후에 포스팅 할게요 ! 1.  첫 면접 후기프론트엔드 개발자가 되어야 겠다고 생각한 뒤로 첫 면접을 보고 왔습니다 !...12월 말부터 서류를 넣기 시작했는데 이번에 처음 연락이 와서 면접을 보고 왔어요 !아마도 아직까지 연락이 없어서 결과는 불합격 인것같긴 하지만...ㅎㅎㅎ 그래도 적어두고 다음에 보면 도움이 될 것 같아서 적으..
MZ Dictionary - 2일차
MZ Dictionary - 2일차
프로젝트 개발일지
2025.01.05 17:48
1. 진행상황주말까지 마무리 하려고 했던 Figma 작업을 어느정도 끝냈습니다.조금의 페이지들이 남아 있긴 하지만 우선적으로 개발할 페이지들을 먼저 작업해봤습니다.메인 페이지 입니다.1. 우측상단의 LOGIN 을 클릭하여 로그인 페이지로 이동할 수 있습니다.2. WORD BOOK을 누르게 되면, 모든 단어 목록이 나오게 됩니다.3. 시작하기 버튼 위로 마우스를 올리면 좌우로 늘어나면서 검색창으로 바뀝니다.  각각 로그인과 회원가입 페이지 입니다. 내 단어장 페이지 입니다. 로그인 후 북마크된 단어들을 한눈에 볼 수 있습니다. Word Book 페이지 입니다. MZ 사전에 존재하는 모든 단어들을 확인할 수 있습니다.단어 상세 페이지 입니다. 검색한 단어의 상세 정보를 확인할 수 있고, 단어에 대한 댓글들로..
MZ Dictionary - 1일차
MZ Dictionary - 1일차
프로젝트 개발일지
2025.01.04 16:16
1. 프로젝트소개MZ 사전은 MZ 세대(Millennial & Generation Z)가 사용하는 독특한 언어와 표현을 수집하고 설명하며 세대 간 소통을 돕기 위한 프로젝트 입니다. 디지털 환경에서 주로 사용되는 약어, 유행어, 비속어 등을 정리하고 정의와 실제 사용 사례를 제공합니다.2. 기술 스택 및 환경사용할 기술 :ReactFigmaNotion개발 환경 :VSCode3. 프로젝트 기능 설명핵심 기능 :용어 검색사용 예시 제공단어장4. Structural Design5. 일정
프로젝트 리뷰) 간단한 무한스크롤 만들기-실습편
프로젝트 리뷰) 간단한 무한스크롤 만들기-실습편
프로젝트 리뷰
2024.11.26 17:41
1. 프로젝트 소개프로젝트 소개: 포켓몬 목록을 불러와 화면에 무한 스크롤로 표시하는 애플리케이션입니다. React와 React Query, Ant Design, Styled-components를 사용해 데이터를 비동기적으로 가져오고, 화면을 스크롤할 때마다 포켓몬 목록을 추가로 로드합니다.목표: Poke API에서 데이터를 가져와 무한 스크롤 기능을 구현하고, React Query를 통해 효율적인 데이터 fetching을 학습합니다.2. 기술 스택 및 환경사용한 기술:React: UI 구성 및 상태 관리React Query: API 요청과 상태 관리Styled-components: 스타일링Ant Design: UI 구성 요소useInView: 화면에 들어온 요소만 렌더링하여 성능 최적화개발 환경:VSC..
미니 프로젝트) 간단한 무한 스크롤 구현하기
미니 프로젝트) 간단한 무한 스크롤 구현하기
프로젝트 리뷰
2024.11.26 17:34
※ youtube의 코딩알려주는 누나 영상을 참고하였습니다 ! ※ 1. 프로젝트 소개간단하게 무한스크롤(Infinity-Scroll) 구현을 해보았습니다. 유튜브의 코딩알려주는누나의 영상을 참고하여 만들어 보았습니다.영화 데이터를 기반으로 한 무한 스크롤 영화 리스트를 구현한 프로젝트입니다. React와 React Query를 활용하여 데이터를 불러오고, 사용자가 스크롤할 때마다 새로운 페이지를 불러오는 기능을 구현했습니다. 특히, useInfiniteQuery를 사용하여 페이지네이션을 처리하고, react-intersection-observer로 화면에 영화 목록이 보일 때마다 데이터를 추가로 불러오도록 했습니다.2. 기술 스택 및 환경사용한 기술: React, styled-components, Rea..
image