xu의 성장일지

부트캠프에서 React를 배우면서, 간단한 동물 소개 페이지를 만드는 법을 배웠습니다.구현한 기능은1. 메인 페이지에서 동물 목록 화면에 표시하기2. 동물 상세 정보 페이지 만들기3. 동물 이름으로 검색할 수 있는 기능 만들기4. 검색 결과 페이지 만들기이렇게입니다.import { useState } from "react";import "./App.css";import { Route, Routes, useNavigate } from "react-router-dom";import Detail from "./page/Detail";import Search from "./page/Search";import Main from "./page/Main";function App() { const [inputValu..

자바스크립트 강의를 마무리 하면서, 계산기를 만들어 보았습니다.기능 구현뿐만 아니라 보기 좋은 코드에 대한 고민을 가지고 코드를 작성했으며, 실제로 리팩토링도 여러 번 진행하였기에 기록하기 위해 블로그를 작성합니다. 0 C ± % / 7 8 ..

SOLID 원칙이 뭔데?SOLID 원칙이란 소프트웨어 설계에서 유지보수성과 확장성을 높이기 위한 다섯 가지 객체 지향 설계 원칙이다.말 그대로, 좋은 코드를 만들기 위한 원칙! 이 원칙들은 잘 구조화된 소프트웨어를 작성하는 데 중점을 두며, 코드의 가독성, 유연성, 테스트 가능성 등을 향상시키는 데 기여한다! 객체 지향 설계 원칙...?자바스크립트는 완전한 객체 지향 언어가 아닌데? 그렇다.JavaScript는 전통적인 객체 지향 언어인 Java, C++과는 다르게 프로토타입 기반 객체 지향 언어이다. 그럼 프로토타입 기반 OOP와 클래스 기반 OOP는 뭐가 다를까?특징클래스 기반 OOP프로토타입 기반 OOP객체 생성 방식클래스를 정의하고, 클래스를 통해 객체 생성기존 객체를 복사하거나, object.c..

현재 JavaScript의 기초 부분을 학습 중이다.document.createElement() 메소드를 활용하여 몬스터 잡기 게임을 만들어 보았다. 우선 HTML 코드는 이렇게 작성해 보았다. container 의 style은 추후에 작성하겠지만 monster의 움직임을 구현하기 위해 작성하였다.const container = document.getElementById("container");// 몬스터 모양 만들기const monster = document.createElement("div");monster.textContent = "*_*";monster.style.width = "50px";monster.style.height = "50px";monster.style.backgroun..

JavaScript란?JavaScript는 웹 개발을 중심으로 사용되는 스크립트 언어이다.주로 웹 페이지의 동적 콘텐츠를 구현하는 데 사용된다.웹 브라우저에서 기본적으로 실행되며, 사용자가 웹 페이지와 상호작용할 수 있는 기능을 추가하는 데 중요한 역할을 한다.JavaScript는 ECMAScript(ECMA-262 표준) 기반으로 발전해 왔으며, 현재는 웹뿐만 아니라 다양한 환경에서 사용될 수 있는 범용 프로그래밍 언어로 발전했다.   JavaScript의 주요 특징1. 인터프리터 언어: 컴파일 과정을 거치지 않고 바로 실행! 덕분에 빠른 개발과 테스트가 가능2. 동적 타이핑: 변수 선언 시 타입 명시가 필요하지 않다! 유연성을 제공하지만 그만큼 오류를 발생시키기도 함. 변수 사용은 최소화하자.3. 프..

자바스크립트에서 var, let, const는 변수 선언을 위해 사용된다.그렇다면 이 셋의 차이점은 무엇일까?크게 스코프(Scope), 호이스팅(Hoisting), 중복 선언 이렇게 3가지 차이가 있다.하나씩 뭔지 알아보자. 스코프- 어떤 변수가 선언된 공간 또는 환경- 어떤 변수의 스코프는 해당 변수가 접근될 수 있는 범위1. 글로벌 스코프- 함수나 블록 바깥에서 선언된 변수- 어디에서든지 접근 가능2. 함수 스코프 (= 지역 스코프)- 함수 안쪽에서만 접근이 가능한 변수- 블록 스코프를 무시3. 블록 스코프 (ES6)- 블록({}) 안에서만 접근 가능 (함수 포함)- let, const에만 적용 호이스팅 자바스크립트 스코프 안에서 변수를 최상단에서 선언하는 것.- var, let, const 변수는 ..

시맨틱 태그의미를 부여한 태그( 태그에 의미를 부여했다!)예시로는 , 등이 있다. 이름만 봐도 상단과 하단이라는 것을 알 수 있다!이러한 시맨틱 태그의 등장으로 태그만 보고서 의미를 이해할 수 있게 되었다. 시맨틱 태그를 사용해야 하는 이유 태그를 사용해도 똑같이 만들 수 있는데, 굳이 시맨틱 태그를 왜 사용해야 할까?1. HTML 문서의 가독성과 유지보수가 쉬워짐2. 웹 브라우저가 HTML만으로 상단, 하단, 본문 어느 영역인지 쉽게 확인이 가능함3. 검색 엔진이 검색을 수행할 때, HTML 내 태그를 분석할 수 있음 -> 검색 엔진 최적화(SEO)에 도움이 됨!! 검색 엔진 최적화(SEO)구글에 어떤 것을 검색을 하면이렇게 여러 페이지가 노출되는데, 대부분의 사람들은 상위 노출된 페이지를 먼저 열람..

과제를 수행 중, label 태그에 상하 여백을 넣으려는데 margin이 적용되지 않았다.머리 싸매다 질문 드리니 label 태그가 인라인 요소라서 상하 마진을 넣을 수 없다고 답변해 주셨다.HTML에서 요소는 두 가지 유형으로 분류된다.바로 인라인 요소(Inline Elements)와 블록 요소(Block Elements) 인라인 요소- 하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들- 인라인 요소는 컨텐츠의 폭과 높이에만 영향을 미치며, 전체 줄의 폭을 차지하지 않음.- 다른 인라인 요소나 텍스트가 함께 한 줄에 배치됨- 상하 마진(margin) 적용 불가 (좌우 마진, 패딩 및 상하 패딩은 가능)- 크기 조절(width, height) ..

길다면 길고, 짧다면 짧을 6개월이 끝이 났다. 나는 NHN Service에서 Test Engineer로 6개월 간 근무하였다! 우선 테스트 엔지니어가 하는 일은 다음과 같다.1. 테스트 계획 수립2. 테스트 케이스 작성3. 테스트 실행4. 결함 관리5. 자동화 테스트 스크립트 개발6. 테스트 결과 분석 및 보고7. 품질 개선 제안8. 도구 및 환경 설정나는 처음 입사했을 때, 아직 런칭되지 않은 모바일 게임의 QA를 맡게 되었다.규모가 작지 않은 회사이고, 나는 체험형 인턴이기 때문에 위의 업무 중 3, 4번을 주로 하였다.처음엔 "모바일 게임을 하면서 일을 한다고? 재밌겠다!" 이랬는데,,, 테스트를 업무로 하는 게임은 재미가 없어진다.질리도록 해야 하기 때문... ㅠㅠ테스트에도 여러가지 종류가 있는..

'오늘부터 개발자'라는 책을 읽어보았다!비전공자를 위한 개발자 취업 입문 개론부제가 아주... 나와 딱 맞는다!이 책의 목차는Part 1. 개발자가 되려는 이유를 확실히 정하자1장. 어떤 개발자가 될 것인가?2장. 개발자는 정말 유망한 직업일까?3장. 개발자에 대한 잘못된 오해4장. 개발자의 장점과 단점Part 2. 개발자는 어떤 일을 하나요?1장. 개발자와 개발 언어2장. 개발 전에 꼭 알아야 할 기초지식Part 3. 개발자가 되려면 어떻게 해야 하나요?1장. 개발자가 되기 위한 현실적인 계획 수립2장. 개발은 어디에서 배울 수 있나요?3장. 개발자로 빠르게 취직하는 노하우Part 4. 개발자로 일하고 있습니다1장. 어디에서 일할 것인가?2장. 회사를 고를 때 고려해야 할 요소들이렇게 되어 있다!개발자..