kwonjin's

🧑🏻‍💻 첫 팀 프로젝트를 마치고 – 회고록 이 글은 제가 처음으로 팀 프로젝트를 마치고,그 안에서 느낀 부족함과 배운 점들을 정리한 기록입니다.언젠가 이 글을 다시 보며 “이때의 고민이 내 발판이었구나”라고 웃을 수 있으면 좋겠습니다. 😊📚 목차🤔 팀원과의 마찰은 없었을까?📌 프로젝트에서 가장 크게 배운 점😢 프로젝트를 하며 아쉬웠던 점📝 마무리하며🤔 팀원과의 마찰 혹은 위기는 없었을까?팀원과의 마찰은 없었지만, 조금 스트레스를 받은 적이 있었다. 컴포넌트를 설계할 때, 유연성과 재사용성 사이의 트레이드오프에 대한 개념이 없었던 시점이었고, 초반에는 일단 "재사용성 좋게 만들면 되지 않나? 기능이 추가되면 그때 수정하면 되지 않을까?" 라는 생각으로 접근했었다. 그 결과, 내가 작성한..

DOM 조작의 첫 걸음오늘은 JavaScript로 DOM(Document Object Model)을 조작하는 방법을 학습했다. HTML요소를 선택하고, 그 요소의 스타일을 변경하거나 이벤트를 추가하는 등, 웹 페이지를 동적으로 바꿀 수 있는 기초를 배웠다. 특히, getElementById와 querySelector라는 두 가지 주요 방법을 사용해 DOM 요소를 선택할 수 있는데, 두 방법 모두 HTML 요소를 JS로 다루는 데 꼭 필요한 방식이라는 생각이 들었다.getElementById// HTML 요소: Helloconst element = document.getElementById("myElement");// 요소에 접근하여 내용 변경element.textContent = "안녕하세요!";//특정..

CSS 기본 개념1. CSS란? - CSS 는 Cascading Style Sheets의 약자로, HTML요소의 스타일을 지정하는 데 사용되는 언어이다. CSS를 사용하면 웹 페이지의 색상, 글꼴, 레이아웃, 애니메이션 등을 쉽게 제어할 수 있다. 또한 반응형 레이아웃을 구현할 수 있다. 2. CSS 작성 방식Inline Style: HTML 요소 내부의 Style 속성에 CSS를 작성하는 방식, 특정 요소에만 스타일을 빠르게 적용 가능하지만 유지보수가 어렵고 코드 중복이 발생한다.Internal Style: 태그를 사용하여 HTML 파일의 내부에 CSS를 작성하는 방식, 한 HTML 문서에서 여러 요소의 스타일을 관리할 수 있지만 여러 페이지에서 동일한 스타일 적용이 어렵다.External Style..

HTML5HTML(HyperText Markup Language)은 웹 페이지를 구조화하고 콘텐츠를 표시하는 데 사용되는 마크업 언어이다. 웹 페이지의 뼈대를 만드는 역할을 하는 것이다. 예를 들어, 텍스트를 제목, 단락, 목록 등으로 나누거나, 이미지, 링크, 표 같은 요소들을 포함할 수 있도록 해주는 언어이다. 주요 특징으로는 다음과 같다.마크업 언어 - HTML은 프로그래밍 언어가 아닌 마크업 언어이다. 즉, 태그(tag)를 사용해 문서의 구조를 정의하고 콘텐츠를 설명.웹 표준 - HTML은 W3C(World Wide Web Consortium)에서 관리하는 표준이다. 현재 가장 최신 버전은 HTML5이다.구조와 콘텐츠를 정의 - HTML은 웹 페이지의 구조를 정의한다. 예를 들어, 헤더, 본문, ..

지난 10.24일, 경기도 수원에서 회사 대표님과 교수님이 외주 작업에 대해 회의하는 자리에 참관하며 프로젝트의 전체적인 흐름을 볼 기회가 있었다. 서비스의 구체적인 내용은 아직 공개되지 않은 초기 단계라 언급할 수 없지만, 단순한 웹 기능을 넘어 AI와 머신러닝 기술이 웹 서비스에 접목되는 과정을 직접 확인할 수 있었다. 이 과정을 지켜보며 내 마음 속에서는 두 가지 확신이 생겼다. 하나는 웹 개발자로서의 꿈이 더욱 분명해졌다는 점이고, 다른 하나는 AI와 웹 기술을 융합하여 더 넓은 가능성을 만들어보고 싶다고.. 나는 인공지능빅데이터학과에 재학 중인데 AI를 전공하면서 웹 개발자를 꿈꿔도 되는걸까? 라는 의구심이 늘 마음 한편에 있었다. 하지만 내가 정말 좋아하는 일이 무엇인지 깊이 고민해본 끝에 프..

1. void 타입TS에서 void 타입은 함수가 값을 반환하지 않을 때 사용된다. 보통 함수의 반환 타입을 명시할 때 사용되며, JS에서의 undefined와 유사한 역할을 한다. function logMessage(message: string): void { console.log(message); // 함수에 return (반환)이 없다}이 함수는 호출 시 message를 콘솔에 출력하지만, 반환되는 값은 없으므로 void 타입이 적합하다. 또한 위의 함수에서 타입을 void로 명시했지만, TS가 반환 값이 없을 때 void 타입으로 추론하기 때문에 명시하지 않아도 된다. 2. undefuned 타입TS에서 undefined 타입은 JS에서와 같이 값이 정의되지 않았거나 아직 할당되지 않은 상태를 나..

1. any 타입any타입은 TS에서 모든 타입의 값을 허용하는 타입이다. 즉, any를 사용하면 그 변수에 어떤 값이든 저장할 수 있다.타입 체크를 하지 않기 때문에 JS처럼 유연한 코드가 작성될 수 있지만, TS의 주요 장점인  타입 안정성을 희생한다.let anything: any;anything = 'Hello'; // 문자열 할당anything = 42; // 숫자 할당anything = true; // 불리언 할당anything = [1, 2, 3]; // 배열 할당anything = { name: 'Lois' }; // 객체 할당any타입의 변수에는 어떤 값이든 할당할 수 있다. any는 타입 체크를 하지 않기 때문에 TS의 타입 안정성을 무시한다.any를 사용할 때는 ..

TypeScript는 JavaScript에 타입을 추가한 언어이다. 기본적으로 JavaScript의 모든 기능을 포함하면서, 컴파일 시 코드의 오류를 미리 잡을 수 있도록 도와준다.  1. 타입TS 핵심 기능 중 하나는 변수가 가질 수 있는 값의 타입을 명시적으로 지정할 수 있다는 것이다. 자바스크립트에서는 변수가 어떤 타입의 값을 가질지 명확히 정해져 있지 않지만, 타입스크립트에서는 타입을 정의함으로써 코드의 안정성과 예측 가능성을 높일 수 있다.// stringlet name: string = 'Lois';// numberlet age: number = 25;// booleanlet isStudent: boolean = true;// arraylet numbers: number[] = [1, 2, 3..

연결 리스트연결 리스트는 연속된 메모리 공간에 저장하지 않고, 각 데이터가 다음 데이터의 위치를 가리키는 방식으로 구성된 선형 자료 구조다. 각 데이터 단위를 노드라고 하며, 노드는 데이터를 저장하고 다음 노드를 가리키는 참조(주소)를 포함한다.배열은 인덱스를 사용해 원소에 쉽게 접근할 수 있지만, 원소를 추가하거나 삭제하려면 연속된 메모리 공간을 확보하고 원소들을 이동시켜야 하므로 시간이 걸리는 반면, 자료의 양이 정해져 있지 않거나 추가 및 삭제가 빈번할 때는 연결 리스트가 더 적합하다. 연결 리스트 앞에는 Head가 있는데 Head는 연결 리스트의 첫 번째 노드를 가리키며, 연결 리스트에 접근하기 위한 시작점 역할을 한다.단일 연결 리스트의 구조- 각 노드는 값과 다음 노드의 주소(참조)를 저장한다..

컴포넌트리액트에 전체적으로 필요한 한 가지 핵심 개념을 선택한다면 그것은 컴포넌트를 사용하는 것이다. 컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 전반적인 UI를 구축할 수 있다. 리액트 애플리케이션은 결국 컴포넌트를 결합하여 만들어지는 것이다. 컴포넌트는 HTML과 경우에 따라 CSS, 관련된 자바스크립트 로직 등을 감싼다고 볼 수 있다. 이 언어와 코드 조각들이 합쳐져 UI의 한 부분을 규정하고 조종한다. 즉 개발자가 복잡한 UI를 관리하기 쉽도록 작게 분리하여 UI의 다른 위치에도 사용할 수 있게 해준다. 컴포넌트의 장점컴포넌트가 없다면 방대하고 복잡한 HTML 파일이 빠르게 축적되어 작업을 처리하기 어려워질 수 있다. 더불어 코드 변경을 애플리케이션의 다른 부분에서 실행해야 할 수 있어 오류..