본문 바로가기

분류 전체보기

(39)
멋쟁이 사자처럼 프론트엔드 스쿨 1주차 회고 1주차 소감 - 돌아온 생활 패턴 한 몇 달간 일정하지 않은 패턴으로 지냈는데 9 to 6 하다보니깐 1시 전에 골아 떨어지게 되었다. 다행인거.. 맞는데 왜 이렇게 슬픈지 ^_ㅠ 모르겠다. - 자기 주도 학습을 하지 않음 부캠 과정을 따라가다 보니 자연스럽게 내가 하던 공부를 놓게 되었다. 사실 아직 뭐가 맞는지 모르겠다... 나는 4개월의 과정이 단기가 아니라 나름 장기라고 생각해서... 너무 초반부터 무리하지 않으려고 한다. 근데 또 지금 해 놓으면 나중에 편해질 것 같기도 하고 잘 모르겠다. 그래도 꾸준히 러닝은 하고 있다! (러닝 추천!) 다른 사람들의 호흡을 따라가다가 혼자 지칠까봐 좀 걱정되는 마음에 무리는 안하려고 하는데.. 너무 널널한가 싶기도 하고 ^.. es6공부나 좀 할까.. 어려웠..
[css] width 속성의 초기값은 auto, 그 의미는? - initial value: 프로퍼티에 딸린 초깃값 - user agent stylesheet: 브라우저가 제공하는 기본 스타일 (예시)body 요소에 적용되어있는 margin 8px 1. width 속성의 값들이 갖는 의미 가장 중요한건 부모가 기준이라는 것이다. width의 초기값인 auto나 100% 둘 다 부모가 제공하는 컨텐츠만큼 가득차게 된다. 1) width : 100%의 경우 부모 요소가 제공하는 만큼 컨텐츠가 가득 차지만 밑에 스크롤이 생기고 잘리게 된다. 2) width : auto 의 경우 이 경우 스크롤도 생기지 않고 잘리지 않는다. 브라우저가 자동으로 계산해서 마진을 제외한 부분이 가득차게된다. 이렇게 initial(초기값)으로 쓰기도 한다. 이게 더 명시적인 방법임. 해당 개념..
멋쟁이 사자처럼 프론트엔드 스쿨 3기 개강 D-DAY 오늘은 멋쟁이 사자처럼 프론트엔드 스쿨 3기 개강일이었다.! 제주코딩베이스캠프의 이호준 강사님을 비롯해서 운영진 분들의 여러 말씀을 들었다. 기억나는 것들을 기록하자면, - 집중해서 나를 뾰족하게 만들어야 한다. - 아웃컴을 생생하게 그리고, 기술을 더해가세요 ( 순서대로 공부 하는 것의 함정) - 공부에서 학습으로 - 잘하기에서 자라기로 - 내가 어떻게 하면 더 잘 써먹을 수 있을까? - 여러 번 실패하고 , 주저없이 시도하는 사람이 되자 = (전공에 관계없이) 가파르게 성장하는 사람 - 싸이클을 여러 번 돌아보면서 익숙해지자 - 멘탈관리야말로 성장에서의 핵심. -> 흔들린다면, 성장하고 있구나 - 성공과 실패라는 이분법에서 실험과 개선이라는 마인드로 접근 1일차 소감 ● 수면 패턴이 엉망이었어서 피곤..
감정일기장 프로젝트 (1) 한입 크기로 잘라 먹는 리액트(React.js) 수강 TIL 오늘은 usestate와 useref을 많이 활용했다. 특히 usestate를 사용해서 사용자의 값을 핸들링 하는 법을 배웠다. import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState ] = useState({ author : "" , content: "", emotion: 1, }) //const [author, setAuthor] = useState(""); //const [content , setContent] = useS..
React '첫인상'과 JSX / state / Props 오늘 드디어 리액트를 맛봤다. 나는 자바스크립트 언어만 다룰 수 있으면 될 줄 알았는데.. 몇 가지 문법을 맛보고 머리가 어질해졌다. 금방 익숙해지겠지.. 리액트를 사용하는 이유 1. 컴포넌트 단위 개발 ( 1000개의 html 문서를 다 바꾼다고 상상해보라) 2. virtual DOM 가상의 돔을 만든다 (아직 와닿진 않음) 3. 명령형이 아니라 선언형이다 (목적을 먼저 말함) 유지보수 컴포넌트 단위로 개발을 할 수 있다는 점이 새로웠다. 확실히 유지보수하는데 좋을 것 같다는 생각이 들었다. JSX 자바스크립트 내에서 html을 쓰는 문법이다. image태드 같은 것도 닫는 태그가 반드시 필요하다. js파일 끼리 (컴포넌트 단위로) 내보내기가 반드시 필요하다 export default Counter; ..
단락회로 평가 && 와 || 같은 논리 연산자에서 뒤에 를 볼 필요도 없는 경우 앞의 것만 보고 판단하게 되는데 이를 단락 회로 평가라고 한다. true || false // 뒤를 볼 것도 없이 true이므로 뒤의 false는 무시됨 false && true // 뒤를 볼 것도 없이 false이므로 뒤의 true는 무시됨 const getName = (person) => { const name = person && person.name; //( 이미 false이므로 person.name은 무시됨) return name || "객체가 아닙니다" ; // 객체가 아닙니다 }; let person; const name = getName(person); console.log(name); const getName = (pers..
배열 내장함수 11가지 ( forEach map includes indexOf findIndex find filiter slice concat sort join ) 인프런에서 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 수강 중 오늘은 배열 내장 함수를 배워봤다. 잘 정리 된 느낌임 1. forEach const arr = [1,2,3,4]; arr.forEach((e) => console.log(e)); // 1 // 2 // 3 // 4 배열을 순회하는 함수. 배열의 모든 요소를 출력하는 함수. 콜백함수를 매개변수로 넣는다. 2. map const newQrr =arr.map((e)=>{ return e * 2; }); //[ 2, 4 ,6 ,8] 배열을 순회해서 리턴 값을 배열로 반환! 3. includes 주어진 배열에서 전달받은 인자와 일치하는 값이 있는지 확인 . 불 형식으로 알려줌. const arr = [1, 2,3,4]; l..