목록프론트엔드 (11)

DevLog:-)

SEO와 Next.js: 검색엔진 최적화와 효율적인 웹 렌더링 방법

프로젝트 캠프 : Next.js 2기를 수강하며 배운 내용을 정리했습니다. 웹 개발에서 SEO(Search Engine Optimization)는 검색 결과에서 웹사이트 노출을 극대화하는 중요한 요소입니다. 특히 B2C 기업처럼 검색 트래픽이 중요한 비즈니스라면, 검색엔진이 잘 이해할 수 있는 구조로 웹사이트를 개발하는 것이 필수입니다.하지만 React와 같은 CSR(Client-Side Rendering) 프레임워크는 SEO에 불리할 수 있습니다. SEO 최적화의 핵심 원리와 Next.js를 활용해 이를 극복하는 방법을 정리했습니다.😊 CSR의 한계와 SEO 문제CSR 방식에서는 초기 HTML이 거의 비어 있습니다. React 사이트의 소스코드를 보면 태그만 포함된 것을 확인할 수 있습니다. 이는 ..
프론트엔드 2024. 8. 7. 01:51
프로젝트 캠프 : Next.js 2기 - 2주 회고

Learned리액트의 불변성과 상태 업데이트, 그리고 리듀서와 Context API1. 불변성이란 무엇인가?불변성(Immutable): 데이터의 원본을 변경하지 않고 새로운 데이터를 생성하여 업데이트하는 것.리액트는 불변성을 기반으로 상태 업데이트를 감지한다.기존 주소값이 변경되지 않으면 React는 상태가 업데이트되지 않았다고 파단한다.따라서 새로운 참조값(주소)을 전달해야 화면이 변경된다.2. 왜 불변성을 유지해야 하는가?React는 상태의 참조값(주소)이 변경되는지 확인하여 리렌더링을 트리거한다.같은 참조값(주소)을 유지하면 React는 상태가 변경되지 않았다고 판단하여 화면에 변화가 발생하지 않는다.이를 위해 객체나 배열 같은 참조형 데이터는 새로운 값을 생성하여 업데이트해야 한다.3. 불변성을 ..
프론트엔드 2024. 7. 29. 01:40
[MIL] 프론트엔드 데브코스 5기 한 달 회고 - 4회차

한 달 동안 소셜 네트워크 서비스 구현 프로젝트를 진행했다. 그 한 달간의 회고이다. 😅긴장되는 첫 프로젝트 웹 프론트엔드 개발 프로젝트는 처음이어서 긴장을 많이 했다. 프로젝트 기간 이전에 온라인 강의를 들으면서도 계속 프로젝트를 걱정했던 거 같다. 그러던 중에 팀에서 일찍이 팀프로젝트를 준비하는 것이 어떠냐는 의견이 나왔고 공식 일정보다 일찍 프로젝트를 시작하게 되었다. 걱정이 있었던 지라 일찍 시작하는 게 심적으로 부담도 적고 여유롭게 마칠 수 있을 것 같아 너무 좋았다. 본격적 팀프로젝트에 앞서 팀 역할로 서기를 맞게 되었다. 초반에는 팀원분들이 말씀하시는 중간에 끊기가 힘들어 놓치기도 했고 익숙하지 않은 개발 용어에 당황할 때도 있었다. 점점 시간이 지나면서 나름의 정리하는 방법도 생기고 팀원분..
프론트엔드/프론트엔드 데브코스 TIL 2024. 1. 23. 16:21
[MIL] 프론트엔드 데브코스 5기 한 달 회고 - 2회차

이번 단위기간에 공부한 것들 VanillaJS typescript vue 프로젝트 & 과제 회고 노션클로닝 프로젝트 VanillaJS를 이용해 첫 번째 프로젝트인 노션 클로닝 프로젝트를 진행했다. 상태관리부터 디렉토리 구성, 컴포넌트 간의 데이터의 흐름 파악 등 공부하고 고려할 부분이 너무 많아서 쉽지 않은 과정이었다. 코드 상의 사소한 실수로 삽질도 하면서 시간 투자를 많이 한 거 같다. 아직 부족한 부분이 많아서 손봐야 할 부분이 많지만 기본 요구사항을 하나하나 지켜서 결과물을 만들고 배포까지 하니 확실히 뿌듯하고 재밌었던 같다. 배포 link scss 활용 유튜브 클로닝 scss과제를 통해 유튜브 클로닝을 했다. 확실히 보이는 부분을 다듬는게 흥미로운 것 같다. scss에서 제공하는 기능은 css와..
프론트엔드/프론트엔드 데브코스 TIL 2023. 11. 22. 23:50
[MIL] 프론트엔드 데브코스 5기 한 달 회고 - 1

프로그래머스 데브코스에 합격하여 참여를 한지 어느덧 한 달이 지났다. 한 달이라는 시간이 정말 빠르게 지나간 것 같다.😅 cs부터 자료구조, 알고리즘, JavaScript , Vanilla JS까지 많은 것을 배울 수 있었던 한 달을 되돌아보며 회고록을 작성하려 한다. 👍좋았던 점 코어타임 코어타임은 일정 시간 동안 팀원들과 캠을 켜고 학습을 하는 시간을 말한다. 일정 시간으로 규정되어있다 보니 학습을 꾸준히 할 수 있었다. 그 시간을 정말 잘 활용했는가는 의문이긴 하다.(더 노력해야 할 부분...ㅎㅎ) 하루하루 주어진 강의의 내용을 소화하는 것도 어려울 때가 있었지만 팀원들과 함께 하는 코어시간이 있어 계속 나아갈 수 있었던 거 같다. 이 시간에 팀원들과 모던 자바스크립트 딥다이브 스터디도 하는데 혼자..
프론트엔드/프론트엔드 데브코스 TIL 2023. 10. 23. 12:51
자료구조 & 알고리즘(1) (시간 복잡도, 배열, 연결 리스트, 스택)

✔️자료구조와 알고리즘이 중요한 이유 자료구조와 알고리즘이란 무엇일까? 요리에 비유하면 이해하기 쉽다! 떡, 어묵, 소시지 같은 재료는 데이터 칼, 프라이팬 등의 도구는 자료구조 레시피는 알고리즘이 된다. 완성된 요리는 소프트웨어 요리를 먹는 손님은 소프트웨어 이용자이다~🍴 자료구조 메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 목표로 특정 구조를 이룬다. 상황에 맞는 자료구조 선택은 필수! ex) stack, queue, graph, tree 알고리즘 특정 문제를 효율적이고 빠르게 해결하는 것이 목표로 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것이다. ex) Binary Search, Shortest Path 이러한 자료구조와 알고리즘은 왜 중요할까? 실무에서 중요한 ..
프론트엔드 2023. 9. 22. 18:00
Networking-[프로그래머스 스쿨]자바스크립트와 웹 프론트엔드(4)

자바스크립트와 웹 프론트엔드 ## 자바스크립트와 웹 프론트엔드 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문 * [Hello, JavaScript!](https://programmers.co.kr/learn/courses/3)에서 배운 자바스크립트를 활용해서 웹 프론트엔드 기능을 다뤄 school.programmers.co.kr 4.Networking -AJAX - Request 보내기 AJAX 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 HTTP Request를 보내고 받아 JS에서 처리할 수 있음 사용자에게 더 나은 사용 경험 제공, 대부분의 웹사이트에서 사용되고 있는 기술 페이지 이동 없이 서버와 정보 교환 가능 1. AJAX를 위한 객체 생성 var req = new XM..
프론트엔드 2023. 7. 17. 00:36
Event + JS - [프로그래머스 스쿨]자바스크립트와 웹 프론트엔드(3)

자바스크립트와 웹 프론트엔드 ## 자바스크립트와 웹 프론트엔드 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문 * [Hello, JavaScript!](https://programmers.co.kr/learn/courses/3)에서 배운 자바스크립트를 활용해서 웹 프론트엔드 기능을 다뤄 school.programmers.co.kr 3.Event + JS -Callback function Callback Function 조건을 등록해 두고 그 조건을 만족한 경우, 나중에 호출되는 함수 -시간을 기반으로 콜백함수를 호출하는 명령 setTimeout( function, time ) time 시간이 지난 경우 function 함수를 콜백 하는 함수 time 은 millisecond (1/1000초)..
프론트엔드 2023. 7. 14. 22:31
DOM + JS - [프로그래머스 스쿨]자바스크립트와 웹 프론트엔드(2)

자바스크립트와 웹 프론트엔드 ## 자바스크립트와 웹 프론트엔드 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문 * [Hello, JavaScript!](https://programmers.co.kr/learn/courses/3)에서 배운 자바스크립트를 활용해서 웹 프론트엔드 기능을 다뤄 school.programmers.co.kr 2.DOM + JS -DOM 소개 및 탐색 DOM, Document Object Model 컴퓨터가 문서를 잘 처리할 수 있도록 문서의 구조를 약속한 것 Tree 형태를 따름 : 족보나 가계도와 비슷함 document object javascript에서 document로 접근 가능 children에는 문서의 최상위 엘리먼트인 html이 존재 Element API 자..
프론트엔드 2023. 7. 11. 18:22
Javascript와 web - [프로그래머스 스쿨] 자바스크립트와 웹 프론트엔드(1)

자바스크립트와 웹 프론트엔드 ## 자바스크립트와 웹 프론트엔드 관련 키워드: JavaScriptHTMLCSS웹프론트엔드입문 * [Hello, JavaScript!](https://programmers.co.kr/learn/courses/3)에서 배운 자바스크립트를 활용해서 웹 프론트엔드 기능을 다뤄 school.programmers.co.kr 1.Javascript와 web - Javascript, HTML, CSS HTML : 웹 페이지의 구조를 나타냄 CSS : 웹 페이지 안에 존재하는 요소들의 스타일을 나타냄 JS : JS로직을 통해 문서의 구조와 스타일에 변화를 줄 수 있음 브라우저에서는 Javascript에서 HTML, CSS에 접근할 수 있는 API를 제공함 -window object wind..
프론트엔드 2023. 7. 11. 17:23
이전 Prev 1 2 Next 다음