코딩기록

웹퍼블리셔 강의 기초부터 - https://wtss.tistory.com/168#실습 - https://blog.naver.com/rebehayan/221351418973  *텍스트한줄효과 2가지 방법- 1.overflow: hidden; width: 50px; height: 10px;2.overflow: hidden; text-overflow: ellipsis; white-space: nowrap; *이미지를 표현하는 방법 2가지1. html- img 태그로 표현(의미가 있을 때) / alt 태그 - 대체 문자 표현2. css - background 속성(의미가 없을 때) - 대체 문자 x3. 이미지를 background 속성 - 웹 표준 준수하기 위해서.     가상으로 대체 문자를 만듬(IR 효과)..

오늘까지 생활코딩 HTML, CSS는 마무리하고간단히 ATOM Editor, 크롬개발자도구 강의를 보고 갈 생각이다.그 후에는 웹퍼블 강의 하나 듣고 리액트 강의, 자바스크립트 강의로 들어갈 계획이다. 1) Korean Language Pack for Visual Studio Code- 한국어버전으로 VS code를 사용할 수 있도록 해주는 플러그인 2) Prettier - Code formatter- HTML, 자바스크립트, 타입스크립트, CSS 등 다양한 언어 형식을 잡아줌- 코드를 보기 좋게 정해진 코딩 컨벤션대로 정렬해주는 도구 3) Atom KeymapAtom에서 자주 사용하는 바로 가기 키를 사용할 수 있음.  4) Settings Sync- github에 VS Code Setting을 올리고..

*훅의 이름은 use~ 로 시작한다.  HTML*모바일 지원  CSS생활코딩 css수업: https://opentutorials.org/course/2418/13340*css참고 사이트: codepen.io*아톰에디터- https://github.blog/2022-06-08-sunsetting-atom/사용법- 생활코딩: https://opentutorials.org/module/1579 *grid-화면에 나란히 위치시킨다. 150px 고정 display: grid;grid-template-columns: 150px 1fr; *반응형- 스크린의 최소폭이 800이되면 div디스플레이가 사라진다@media(min-width:800px) {  div{     display:none;   }}*반응형 순서 캐스..

생활코딩 - React class vs. function style coding 시작  *다음 들을 강의1. HTML의 모든것, HTML 기초 2. WEB2-CSS, CSS기본부터 활용까지3. 생활코딩 - JavaScript Immutability, WEB2 - JavaScript 4. 개발자도구  개발자도구Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구Resources :  현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다. Audits : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구Sources: JS 디..

개인메모장 1. JSX 2. Rendering Elements 3. Components and Props*** 4. State*** and Lifecycle 5. Hooks 6. Handling Events 7. Conditional Rendering 8. List and Keys 9. Forms 10. Lifting State Up 11. Composition vs Inheritance 12. Context 13. Styling 14. Mini Project 15. Appendix A. 리액트 버전18  8월 스케줄5번째 주  html/css 피드백 강의 & 프로젝트 마무리 하기mission04 (240829~30)mission05  (240830~31) 코딩 테스트 5차(240829)모던자바스크립트 ..

console.log("------- 1 -----------"); const score = [ { win:1 }, { lose:0 } ]; const winScore = score[0].win +1; const loseScore = score[1].lose +1; console.log(score) console.log(winScore) console.log(loseScore) console.log("------ 2 ------------"); const win = {score}; const winScore2 = win.score[0].win +1; const loseScore2 = win.score[1].lose +1; console.log(win) console.log("winScore2:", win..

1. 객체안에 객체 넣는 방법은 생각보다 쉽다. user.point = point; user- 객체 point- 키 = point - 값 2. socketIo에서 같은방 안에 사람들에게만 쳇을 보낼때는 //game방 채팅 socket.on("chat", (chat) => { const data = {name:socket.nickname, chat}; gameRoom.to(thisgameNum).emit("chat", data); }); gameRoom -> 내가 네임스페이스를 설정하면서 정한 변수명을 적어야한다. 네임스페이스/game 을 따로 정하지 않았다면 connect이벤트의 인자인 socket을 적어 socket.to(thisgameNum).emit("chat", data); 코드를 만든다. con..

업뎃, 240710  1. HTML, JS코드 브라우저 실행 -  Live server  2. VSCode에서 JS실행  3. JS 문법체크  4.  임포트를 자동으로 5. 세미콜론 자동 입력shift + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 커서를 코드 끝으로 이동시킨다.alt + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 다음줄로 점프한다.ctrl + alt + enter - 해당 줄 끝에 세미콜론을 자동으로 추가해주고, 커서를 가만히 유지한다.  6. 태그 짝궁끼리 한번에 수정할 수 있게  7. 아이콘을 이쁘게~ 이렇게 하면 기분이 좋크든요👍  8.  브라켓을 더 눈에 띄게 컬러풀하게  9. 태그 짝궁끼리 같은색으로 더 눈에 띄게   10. rgb나 16진..

문제 설명 각 달을 month라는 인자로 받아 그 달이 몇일까지 있는 반환하는 함수 solution함수를 완성하세요. (2월은 28일까지 있다고 가정하세요.) switch, case는 조건에 따라 프록그램의 흐름을 분기해서 특정 코드가 실행되도록 합니다. break구문을 만나면 switch-case의 마지막 중괄호 밖으로 빠져나오게 됩니다. 아래의 코드는 choice의 값에 따라 출력되는 값이 달라지는 코드입니다. 예제를 참고하여 문제를 해결해 보세요. switch( choice ){ case 1: console.log("1번 메뉴를 선택하셨습니다."); break; case 2: console.log("2번 메뉴를 선택하셨습니다."); break; case 3: console.log("3번 메뉴를 선택..

for문을 break, continue로 제어하는 방법 break 반복문을 종료 for (var i=0; i 조건식 > 출력 순으로 동작) for ( var i = 0; i 바로 조건식을 종료한다. 들고있던 값이 출력X continue > continue를 만난 그 순간에만 종료되고 들고있던 값을 가..

debugger를 통해 코드 동작을 눈으로 확인할 수 있다. 샐활코딩에 자세히 설명이 되어있다. 영상 5:24분 이중 for문에서 i 의 코드진행 흐름부터 설명 ①>②>④>⑤>⑦>⑥>⑤>⑦>⑥>⑤(에서 조건식이 false면 그 j인덱스 값을 들고) >③>②>④>⑤>⑦>⑥>⑤(에서 조건식이 fasle면 그 j인덱스 값을 들고) >③>②(에서 조건식이 false면 i인덱스 값을 들고 for문을 빠져나간다. // 초기화구문; 조건식; 업데이트구문; for( ①var i = 0; ② i < 10; ③ i++){ for( ④var j = 0; ⑤ j < 10; ⑥ j++){ //반복실행될코드 ⑦document.write('coding everybody' +i+j+' '); } } // 초기화구문; 조건식; 업데이..

필수 프로그램 설치 1. Chome 2. Visual Studio Code 3. Node.js