본문 바로가기

728x90

👩‍💻 개발 공부/2025 한경x토스 부캠(Fullstack)

(9)

[한경xToss] 4주차 요약 : JS 중급 * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다.템플릿 리터럴(Template literals) - es6부터제 이름은 ${name}입니다. 배열(Array)연속된 공간에 동일한 타입의 데이터를 순차적으로 나열한 자료구조Array 객체new : 객체 생성 시 사용하는 예약어객체(Object) : 코드로 정의(클래스, 함수)된 메모리에 적재 후 활성화된 상태. 인스턴스instanceof : 객체가 특정 클래스에 속하는지 아닌지를 확인js 배열은 리스트 기능을 포함 값 타입 변수 vs 참조타입 변수값 타입은 메모리 공간에 실제값을 가짐참조 타입은 메모리 공간에 값의 주소를 가짐함수(Function)용도1. 코드 중복 제거 - 재사용성2. 코드 이름 - 가독성3. 기능적 분리/결합 - 모듈화..

[한경xToss] 🍌추가공부) Javascript 화살표 함수 장점 / arrow function 사용 이유 ES6 문법 이후부터 화살표 함수가 등장했다 궁금한 것 :왜 JS에서 화살표 함수 사용을 권장하는걸까? 왜 ? WHY/ ?? 1. 함수형 변수 const apple = 1000; // 변수const add = (a, b) => a + b; // 화살표 함수console.log(add(2, 3)); // 5 사용이 직관적이다.변수와 동일하게 선언 후, 변수 이름을 호출하면 함수를 실행시킬 수 있다! 2. 간단한 양식 짧은 수식일 경우 괄호가 필요없다 let func = x => x * 2 ; 3. this를 사용하지 않는다. 🌟🌟🌟‼️ 일반 함수 내에서는 this를 사용할 수 있으나, 화살표 함수에는 해당 문법이 적용되지 않음.근데 이게 장점이 된다.화살표 함수 내에서 this를 사용할 경우, 상위에..

[한경xToss] 🥝추가공부) Number, parseInt 특징과 차이점, JS 나눗셈, Math.floor, 명시적 진법 지정 코테 준비를 c++로 했다보니 js 타입이 익숙하지 않ㄷㅏ.. 씨플플이랑 너무 다르다 ㅠㅠ연산 전 변수 전처리하기….!!! 🙏🙏 궁금한 것 :let score = prompt().split(’ ’);let avg = 0;for(let i=0; i1. Number와 parseInt 차이 Number : 내부의 수를 숫자로 변환,문자열 전체를 숫자로 변환하므로 변환할 수 없는 경우 NaN을 리턴. parseInt : 문자열에서 정수를 추출.문자열에 숫자가 아닌 문자가 포함되어도, 앞쪽의 숫자 부분만 처리 console.log(parseInt("42")); // 42console.log(parseInt("42px")); // 42console.log(parseInt(" 42")); ..

[한경xToss] 3주차 요약 : CSS 중급 및 Javascript * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. 3주차 실습CSS 중급 이미지 잘라서 배경으로 쓰기 : background-position가상요소 선택자 before/after li 가로로 배치하기list-style: none;display:inline-block;padding: 10px; 변환효과 - transition 속성 속성 종류transition-delay : 지연시간duration : 변환시간property : 대상 속성timing-function : 보간 타입 (인터폴레이션, 시간의 간격을 채움)cubic-bezier()배지어 곡선 - 수학자 베지어가 제안한 두 점만으로 곡선을 정의하는 공식변형 속성 - transform 속성 CSS 초기화 코드: Eric Meyer’s ..

[한경xToss] 🍊추가공부) daisyUI dark mode / Tailwind CSS option / 데이지 UI 다크모드 자동 설정 궁금했던 것 :최근 UIUX 측면에서 다크모드가 필수이다모든 요소를 daisyui로 만든다면, 다크모드가 사용자 PC환경에 맞게 자동으로 적용되는걸까? 오늘 daisyUI를 배웠다.몇년동안 FE개발을 하면서, CSS를 하나하나 깎아 만들었는데이런 component 프레임워크가 있다니 신세계를 접한 느낌이다 👀 DaisyUI란?Tailwind CSS를 확장하는 UI 컴포넌트 라이브러리미리 설계된 UI 요소를 제공하여 빠르고 쉽게 스타일링된 컴포넌트를 사용할 수 있음https://daisyui.com/docs/cdn/ Use daisyUI from CDN — Tailwind CSS Components ( version 4 update is here )How to use daisyUI from a CDN?d..

[한경xToss] 🍓추가공부) Tailwind CSS Media Queries / 테일윈드 반응형 스타일 처리 / 미디어쿼리 접두어 궁금했던 것 :Tailwind 미디어쿼리에서 화면 너비가 sm보다 작은 상황은 어떻게 처리되나?Tailwind의 장점, 단점은 무엇인가?수업시간에 Tailwind를 처음으로 배웠다 (FE개발자 맞나요..?) 우선 Tailwind란,유틸리티 클래스 기반의 CSS 프레임워크이다.미리 정의된 클래스를 사용해 HTML에서 직접 스타일을 적용할 수 있고,기존 CSS 작성 없이 빠르게 레이아웃과 디자인을 구현할 수 있다. 미디어 쿼리에서는 위 코드와 같이, 반응형 접두어를 사용한다. • sm: 640px 이상 • md: 768px 이상 • lg: 1024px 이상 • xl: 1280px 이상 • 2xl: 1536px 이상 여기서 내 생각 원래 웹페이지 CSS를 처음에 PC 기준으로 만들고, PC/tablet/..

[한경xToss] 🍇추가공부) CSS 반응 반복 설정 / fade over 위치 / SCSS 궁금했던 것 :영화/예매/극장 각 버튼의 순서를 n이라고 할때,hover 시 나타나는 아래쪽 hidden menu 리스트를margin-right: calc(50%-n); 이런 식으로 계산해서 각 버튼마다 위치를 다르게 하고 싶었다. 아직 수업에서 순수 html, css만 사용중이라nth-child(귀찮음)이나 JS 이외에도 방법이 있는지 궁금해졌다! chatGPT한테 우선 물어봄 -> 강사님께도 여쭈어봄 방법 1: nth-child와 calc() 조합CSS의 nth-child()를 활용하여 특정 순서에 따라 다른 스타일을 적용할 수 있다..hidden_menu:nth-child(1) .menulist { margin-right: calc(50% - 10px); /* 첫 번째 hidden_menu *..

[한경xToss] 1-2주차 요약 : 컴퓨터 교육 / HTML / CSS * 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다. 매일 노션에 학습 내용을 정리하고 있는데, 블로그에도 요약해서 정리하면 좋을 것 같아 업로드한다회고..가 아닌 리얼 요약 강사님이 항상 설명하실 때 최대한 구체적으로 알려주셔서모르던 내용이나 애매하게 알고 있는 것들을 확실하게 깨닫고 넘어갈 수 있어서 좋았다.전공 과목에서 모두 배웠던 내용이지만, 이렇게 복습하면서 새로운 내용이나 꿀팁도 알게 됨!! chap1. 운영체제(OS)chap2. 컴퓨터 구조2진수 소수점‼️을 8 / 16진수로 변환 : 소수점 기준으로 3 / 4개씩 자르고 앞뒤에 0을 채우고 변환chap3. 정보통신chap4. 네트워크생성형 AI (LLM)chatGPT : 실시간 검색클로드 : 10개월 전 데이터까지 유효제미나..

이전 1 2 다음

728x90

티스토리툴바