[101] 웹 개발의 기본 중 기본! 웹 표준을 제대로 배워보자
·
학습 & 성장 (Learning & Growth)/개발 공부 (Development Study)
💡 이 게시글은 제가 웹 개발을 처음 시작했을 당시 노션에 정리해 두었던 내용을 바탕으로 작성되었습니다.🌱 입문자 관점에서 보기 쉽게 작성한 기초 수준(101)의 글이니, 넓은 마음으로 이해해 주시면 감사하겠습니다! 😊안녕하세요! 오늘은 웹 표준(Web Standards) 에 대해 깊이 있는 내용을 다뤄보려 합니다.제가 주니어 개발자로 첫 면접을 봤을 때, 면접관이 이렇게 질문한 적이 있습니다."웹 표준이 무엇인가요?"그때 저는 웹 표준이 "모든 브라우저에서 잘 보이게 하는 기술" 정도라고만 알고 있었습니다. 하지만 면접관은 "좀 더 구체적으로 설명해볼까요?" 라고 추가 질문을 했고, 저는 명확한 답을 하지 못했습니다.이후로 웹 표준을 깊이 공부하면서, 웹 개발에서 왜 웹 표준이 중요한지, 어떤 요..
[30 Days of JavaScript: Day 1]"Hello World" 함수 만들기
·
학습 & 성장 (Learning & Growth)/개발자 성장 (Developer Growth)
이번 챌린지에서는 고차 함수(higher-order functions)의 개념을 소개하는 간단한 자바스크립트 함수를 작성하게 됩니다. 목표는 다른 함수를 반환하는 함수를 작성하는 것이며, 이 함수는 인자로 어떤 값이 주어지더라도 항상 "Hello World" 문자열을 반환해야 합니다.소개"Hello World" 은 새로운 프로그래밍 언어를 배우는 모든 사람들에게 있어 고전적인 출발점입니다. 이는 기본적인 코드를 작성하고 컴파일 및 실행하여 개발 환경이 제대로 설정되었는지 확인하는 간단한 방법으로 사용됩니다. 이번 챌린지에서는 이 "Hello World" 메시지를 생성하는 함수를 만들어 자바스크립트 함수에 대한 이해를 강화합니다.문제 설명createHelloWorld라는 이름의 함수를 작성해야 합니다. 이..
[React] 🛑 React에서 key={index} 사용의 위험성: 쉽게 이해하는 key 값과 React Reconciliation
·
개발 분야 (Development Area)/프론트엔드 (Frontend)
React로 웹 애플리케이션을 만들다 보면, 여러 개의 데이터를 화면에 표시해야 하는 경우가 많습니다. 예를 들어, 할 일 목록을 보여주거나 상품 목록을 나열하는 경우가 그렇죠. 이때 React 개발자들은 map 함수를 사용하여 데이터를 하나씩 꺼내 화면에 보여주는 방식을 자주 사용합니다.이때 중요한 것이 바로 key prop입니다. React는 화면을 효율적으로 업데이트하기 위해 key prop을 사용하는데, key={index}처럼 배열의 인덱스를 key 값으로 사용하면 예상치 못한 문제가 발생할 수 있습니다.이 글에서는 React의 reconciliation 알고리즘과 key 값의 역할을 바탕으로, 왜 key={index}가 문제인지, 그리고 안전하게 리스트를 렌더링하는 방법은 무엇인지 자세히 알아..
JavaScript reduce 메서드 활용하기
·
개발 분야 (Development Area)/프론트엔드 (Frontend)
JavaScript 개발을 하다 보면 배열 데이터를 다루는 경우가 빈번하게 발생합니다. 이때, 배열의 요소들을 순회하며 특정 작업을 수행하고, 최종적으로 하나의 결과값을 도출해야 하는 경우가 많습니다. JavaScript는 이러한 작업을 효율적으로 처리하기 위해 reduce() 메서드를 제공합니다. reduce() 메서드는 배열을 순회하며 누적 값을 계산하고, 최종적으로 하나의 결과값을 반환하는 강력한(?) 도구입니다. 단순한 합계 계산부터 복잡한 데이터 변환까지 다양한 상황에서 유용하게 활용될 수 있습니다.1. 🧰 reduce 메서드 기본 syntax 및 기본 동작 원리reduce() 메서드는 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고, 이전 결과와 현재 요소를 기반으로 누적 값을 계산합니다..
vanillinav
'JavaScript' 태그의 글 목록