멋쟁이사자처럼 프론트엔드스쿨💻

안녕하세여 멋쟁이사자처럼 프론트엔드스쿨 5기 훈련생 윤말랑입니두😊 올해는 4학년이 되는 해였지만 처음으로 휴학하고 프론트엔드스쿨 지원했는데 합격해서 너무 좋았다ㅎㅎ 4개월동안 학교 다닐때보다 더 열심히 살아야지..!🔥첫날이었던 오늘은 하루가 후딱 지나갔다OT 듣고(

📌 URL, IP, PORT 네이버 홈페이지를 접속할 때 발생하는 과정을 살펴보면 다음과 같다. www.naver.com(URL) > DNS[도메인 네임 서버] > 223.130.195.200(IP) > Server > 웹 브라우저에 표시 PC에 접속하기 위해서는

HTML/CSS 첫 수업 시작! HTML과 CSS는 개인적으로 좋아하기도 하고 어느정도 많이 알고 있어서 복습하는 느낌으로 들었다 새롭게 알게 된 내용도 있고 살짝 가물가물한 내용도 있어서 그런 내용 위주로 정리해보려고 한다ㅎㅎ 📌 스니펫 재사용 가능한 소스 코드

HTML/CSS 두 번째 시간:) 유지보수와 관련된 개념을 알게될 때가 재밌는거 같다ㅎㅎ 똑똑하게 코드 짜는 연습 많이 해야겠다!! 🎨 텍스트 꾸미기 text-shadow offset-x | offset-y | blur-radius | color text-alig

오늘의 꿀팁 💡 관련 도서들 책상에 많이 두기! 보기도 하기..ㅎㅎ 나의 능력과 부지런함을 어필할 수 있다 오늘은 실습을 많이 진행해서 시간이 후딱 갔다!! 오늘도 새로운 css를 많이 알게 되었다😊 파도파도 끝이 없는 css..ㅎ 정복해주겠어..!!! 🎨

오늘의 꿀팁 💡 출근 첫날 일 안 줘도 회사 컨벤션 있는지 물어보고 있으면 공부하고 VS Code에 세팅하기!! 📝 시멘틱 마크업 SEO(검색엔진 최적화) 장애가 있는 사용자에게 페이지를 탐색할 때 하나의 푯말 역할 태그의 가독성 및 유지보수 용이 but 구

오늘의 꿀팁 💡 30분 일찍 출근해서 10분이라도 공부하기! 지각도 안하고, 부지런한 모습으로 이미지가 좋아짐 :) 💡 주간 업무 작성 등 항상 작업/성과 정리해 두기! 연봉 협상은 성과가 있어야 성공하기 때문!! 🎨 flex 부모 요소를 flex-conta

🎨 CSS 변수, 함수 -- 전역 CSS 변수를 선언할 수 있다(:root 선택자 사용) 하이픈 2개 -- 다음 속성 이름을 적어주고 콜론 : 뒤에 속성값을 적는다 var() CSS 변수값으로 지정할 수 있다 함수에 전달하는 첫번째 인자는 가져올 사용자 지정 속성

오늘은 특강 DAY였다🤩 금요일이라 그런지 일어나는데 쫌 피곤했는데😴 특강이라 마음 편하게 시작했지만 더 집중한 하루를 보냈다ㅋㅋㅋ🤯 오늘의 꿀팁 💡 이력서에서 '입사 후 포부'는 어떻게 작성할까? "내 역량(기술, 경험)을 근거로 회사의 어떤 부분에 기여

📌 스프린트 회고_1 좋은 개발자로서 어떤 역량들을 길러야 할까? 내가 잘 기르고 있는건가? ✔ 더 자주, 더 빠른, 더 꾸준한 ‘피드백’ 필요 멋사 수료 후 기업/회사에서 개발자로서 활동하는게 목표 회사가 개발자에게 요구하는 역량들을 중심으로 고민을 시작하고

오늘의 꿀팁 💡 신입 때 가장 중요한 것은 시간 내에 해내는 것! 💡 면접 때 질문 타임에 회사에 관심을 가진다면 생각해볼 수 있는 질문 말하기 ex) 회사 비즈니스 모델 문제점 어떻게 해결하고 있는지? 💡 포폴에 애니메이션 효과 사용해서 섬세한 개발자로 어

💻 diary 실습 https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/diary 다이어리 웹 사이트를 만들었다! 실습하면서 공부한 것들 적용해보는게 진짜 공부가 많이 되는 것 같다👍

📝 img 속성 반응형 이미지를 위한 srcset srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다. srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게

📌 현직자 특강 by. 네이버 스마트스튜디오 책임리더 우상훈님 Frontend 개발자는 웹 기술을 사용해서 웹 브라우저를 포함한 다양한 환경(웹브라우저, 헤드리스 브라우저, 웹뷰, 네이티브 바이너리)에서 사용하는 ex)키오스크, 노션 웹 사이트나 웹 어플리케이션을

오늘의 꿀팁 💡 더미 이미지 실제 사용할 이미지를 넣기 전에 매우 간단하게 이미지 영역을 잡아줄 수 있다 <img src="http://placehold.it/100x100" alt=""> 💡 텍스트 되도록 복붙하기 & 맞춤법 검사 돌리기(오타 확인) 📌

💻 vending machine 실습 https://github.com/yoonmallang22/vending-machine inline 요소 안에는 inline 요소만 들어갈 수 있다 <a> 제외 https://validator.w3.org/#validate_by

오늘의 꿀팁 💡 인맥 중요하다.. 🎨 커스텀 input 시각장애인들은 탭으로 이동하기 때문에 포커싱되게 하는 것이 중요한데, 접근성을 위해 사용하는 경우 포커싱 이벤트가 일어나면 마우스 이벤트로도 작동하는 :focus는 시각적인 불편함과 체크를 해제했음에도 포커

코딩 컨벤션 💡 온보딩 과정에서 회사 컨벤션 숙지하고 코드를 짜야 한다 💡 유지보수에 아주 용이한 컨벤션 <!-- header --> <!-- //header --> 💡 TODO : 깃헙으로 협업할 때 사용하면 편리하다 (VSCODE TODO 하이라이트 익스텐

📌 스프린트 회고_2 JD(Job Description) 분석 토스, 우아한 형제들, 카카오 JD 키워드&분석 HTML, CSS, JS : 기본적인 능력. 능숙한 활용 능력이 필요하다. SPA프레임워크 : 모든 회사가 자바스크립트 프레임워크 및 라이브러리를 사용하

🪄 JavaScript 온라인학습으로 첫 자바스크립트(+ 제이쿼리) 공부 시작! 실습하면서 기본적인 개념들을 정리할 수 있었다👍🏻 💻 로또 번호 추첨기 Math.random() 0 이상 ~ 1 미만 실수(float) parseInt() 소수점은 버리고 정

오늘의 꿀팁 > 💡 이력서 색상을 브랜드 컬러에 맞춰주면 좋다 > 💡 풀페이지 캡처 방법 크롬 개발자 도구 -> 메뉴 -> Run Command -> Capture full size screenshot 💨 Tailwind CSS https://github.c

🪄 JavaScript BOM 콘솔창 꾸미기 console.log("%chello world", "color:red;font-size:32px"); console.log( "%chello world %chello", "color:red;font-size:3

💡 Done is better than perfect 📌 선배 특강 by. 2기 김지수 님 커뮤니티에서 공부하는 최대의 이점을 적극 활용해야 한다! 배움을 혼자만의 것으로 끝내는게 아닌 나누고 함께 자라는 문화를 만들어야 한다 프론트의 미덕은 지식을 공유하는데서

🪄 JavaScript Number 숫자형 메소드 parseInt() let n1 = 31; let n2 = 1001; console.log(parseInt(n1, 2)); // NaN // 2진법으로 바꾸는 것이 아니라 console.log(parseInt(n

🪄 JavaScript 객체타입 특징 객체는 프로퍼티와 메서드를 가지며, 이 둘은 각각 객체의 상태와 동작을 나타낸다. 값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장된다. 때문에 객체 값을 다른 변수에 할당 할때는 값 자체가 복사되어 저장되는 것이 아닌

🎨 CSS Sprite 기법 여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법 장점: 하나의 이미지만 받기 때문에 이미지 로드 속도가 향상된다 단점: 유지보수가 어렵다 (기존에 사용하던 이미지는 각각의 position 값이 정해져있기

🪄 조건문 switch문 switch문은 사용하지 않는 추세(파이썬은 switch문이 없음) 다른 언어에서 switch문을 어떻게 사용할까? -> 객체 사용, default 처리는 nullish 연산자나 단락회로평가 사용 const 요일 = 10; const 요일객

📌 스프린트 회고_3 포트폴리오 프로젝트 소프트웨어의 본질은 문제해결 프로젝트를 할 때 문제 해결이라는 목적이 있어야 잘하고 있는지 측정하기 쉬움 '기술을 썼다'를 넘어서기 위해 내가 지금 이 기술을 사용해서 사용자에게 어떤 가치를 전달하고 있는지 인지하기 ex)

오늘의 꿀팁 💡 레퍼런스 체크: 전 회사에 전화해보는 과정 -> 깽판 치고 나오면 안된다! 💡 처음 자기소개할 때 자격요건에 있는 내용 포함해서 말하기 🪄 DOM DOM 제어 JavaScript 문자열을 사용해 element, text 노드를 생성하거나 추

🪄 함수 object처럼 사용된다 function 함수(a, b) { return a + b; } console.dir(함수); // length: 파라미터의 개수 함수["location"] = "jeju"; console.dir(함수); // 변경 O 함

🪄 Set 객체자료형 객체 안의 값은 중복을 허용하지 않는다 -> 집합 개념 let s = new Set('abcdeeeeeeeee'); s.size; // Set에 값 추가하기 s.add('f'); // Set 순환하기 for (let variable of s

🪄 Date let d = new Date(); d.getDate(); // 1부터 시작. 날짜 출력 d.getMonth(); // 0부터 시작. +1을 해야함 d.getDay(); // 0부터 시작. 0은 일요일 d.getHours(); d.getMinutes

🪄 Date 실습 해당 달이 무슨 요일에 시작하는지 알아내는 방법 const time = new Date(newYear, newMonth - 1, 1).getDay(); 해당 달이 몇 일이나 있는지 알아내는 방법 // const timeLength = 32 - n

🪄 객체지향 프로그래밍 프로그램을 작성할 때 객체들을 만들어 서로 상호작용하도록 하는 방법 객체 지향의 객체: 표현하고자 하는 사물을 추상적으로 표현한 것 추상화란 필요한 최소한의 정보로 대상을 표현하는 것 생성자(constructor) 객체를 만들 때 new 연산

🪄 class class 상속 extends 키워드 사용 상속을 받는 클래스는 ‘서브 클래스’(subclass) 혹은 ‘파생 클래스’(derived class) 라고 부른다. 부모 클래스의 프로퍼티를 상속받기 위해 super 함수를 사용한다. 이때 super는 부

🪄 최적화 반응 시간 * 크롬 개발자도구 Network 탭 https://developer.chrome.com/docs/devtools/network/ https://googlechrome.github.io/devtools-samples/jank/ DOM 접근과

🪄 Ajax Promise "약속" // 커피를 주문하는 프로미스 객체를 생성한다 // 생성자에는 약속을 지키기 위한 resolve 함수와, 약속을 지키지 못했을 때를 대비한 reject 함수(executor 함수)를 인자로 전달한다 const orderCoffee

오늘의 꿀팁 💡 프로젝트할 때 OPEN API 활용하기 ex. 카카오맵 📌 웹의 역사 최초의 컴퓨터: 군사적 목적을 위해 사용되었다. 애니악 - 탄도 계산 클로서스 - 암호 해독, 군사기밀 때문에 나중에 알려졌다. 인터넷의 탄생 최초의 2진수 프로그램 내장 컴

💻 vending machine 실습 JavaScript modules 자바스크립트를 모듈처럼 기능들로 분리해서 편하게 합칠 수 있도록 만들어주는 문법 node.js, Webpack, Babel 등을 사용하여 모듈 사용 최신 브라우저가 기본적으로 모듈 기능을 지원하

📌 스프린트 회고_4 소프트스킬의 중요성 주니어 개발자 1년차가 되면서부터 역량을 크게 가르는 중요한 지점 : 요구사항 분석 역량 기획자랑 친하게 지낸다 소통할 때 이모지로라도 꼭 남기고 연결하는 소통의 과정이 굉장히 많다 TDD(테스트 주도 개발) 몰입을 도와

오늘의 꿀팁 💡 기능 별로 함수를 분리해서 만들어서 사용하는게(함수 하나 당 기능 하나) 코드 이해와 유지보수에 좋다. ⚛️ React 메타(구 Facebook)에서 관리하고 있는 오픈소스 프로젝트 UI 컴포넌트를 만들고 만들어진 컴포넌트를 통해 사용자와 인터

🧩 Node.js 크롬의 자바스크립트 엔진인 V8 엔진을 사용하여 작성된 자바스크립트 코드를 컴파일하고 실행할 수 있는 환경(런타임)을 제공 🔍 자바스크립트 엔진 자바스크립트 코드를 해석하는 프로그램 브라우저라는 프로그램 위에서 자바스크립트 코드가 작동하는데 브

⚛️ Fragment JSX 컴포넌트는 최상위 부모요소를 가져야 하기 때문에 여러 개의 엘리먼트들을 감싸주기 위해서 보통 <div> 태그로 다른 태그들을 감싸주었다. 하지만 이렇게 코드를 작성하면 의미 없는 <div> 태그를 자주 사용하게 되고 이는 시멘틱한 마크업을

⚛️ React 이벤트 React의 이벤트는 카멜케이스를 사용한다. JSX를 사용하여 함수로 이벤트 핸들러를 전달한다. 상태 관리 + 이벤트 reconciliation(재조정)을 통해 바뀐 부분만 빠르게 렌더링 해주기 위해 useState를 사용한다.

⚛️ 컴포넌트 리스트 key 값을 넣어주지 않았기 때문에 에러가 발생한 것이다. 컴포넌트 안에서 리스트를 렌더링할 때는 꼭 key 값을 넣어줘야 한다. key 값은 일반적으로 데이터의 ID 값을 넣어준다. 💡 key 값의 데이터 타입은 상관 없다. 배열 안에서 유일

⚛️ 스타일 적용하기 💡 스타일을 적용하는 방식은 크게 CSS, CSS-in-CSS(Sass 등), CSS-in-JS(styled-components 등)으로 나뉜다. module.css index.js에 index.css를 import하게 되면 전역으로 CSS가

⚛️ useEffect useEffect는 state를 지정하여 해당 state가 변경되었음을 감지하면 함수를 실행(효과)시켜준다. useEffect(() => { // state가 변경되어 렌더링될 때 실행하는 부분 return() => { // 다시

⚛️ useEffect와 useMemo의 차이 useEffect 상태가 변화되었을 때를 감지하여 렌더링 후에 실행된다. 상태를 이용한 관리에 사용한다. 💡 데이터 요청시 요청하는 주소[상태]가 달라질 수 있기 때문에 useEffect가 적합하다. useMemo 상태

⚛️ 클래스 컴포넌트 - 라이프 사이클 컴포넌트는 세 가지 단계의 생애 주기를 가지고 있다. 마운트 : 컴포넌트가 맨 처음 화면에 그려지는 때 장착할 때 사람이 말을 탈 때 카메라에 렌즈 장착할 때행위를 하려고 준비한 상태 처음 state와 props를 가지고 컴포넌

🧪 TDD(Test Driven Development) 테스트 주도 개발 즉, 테스트를 통한 기능의 구현 TDD의 단계 TDD 에서는 코딩을 할때 기능을 바로 개발하지 않고 테스트 코드를 먼저 작성한다. 이때 테스트 코드는 다음과 같은 단계의 반복을 거치게 된다.

📌 웹 접근성 카카오 디지털 접근성 책임자 김혜일 님 접근성 장애를 경험하는 사람이 독립적으로 타인과 동등한 활동에 참여할 수 있도록 하는 것 💡 환경과의 상호작용에서 장애가 일어난다, 장애는 경험하는 것 디지털에 접근성이 없다면