Coding 수업정리
jsx, tsx에서 emmet 사용하기
맥 : cmd + , 윈도우 : ctrl + , 위 검색에서 include languages 검색하면 바로 나옴. 위 화면이 나오면 위와같이 javascript javascriptreact typescript typescriptreact 입력
Coding 수업정리
Coding 수업정리/항해99
항해99 15기 후기
2023년 9월 18일 월요일 항해 이전의 삶 2023년 2월, 카페를 정리하고 새로운 길을 찾아보기로 했다. 2023년 3월, 내가 할수 있는 선택지 중에, 개발자가 '가능한 옵션'이라는 것에 놀랐고, 더 늦기 전에 이쪽으로 해보자고 결심했다. 대학교 3학년때 컴퓨터공학과를 부전공이든 복수전공이든 수업을 한번 들어볼까 망설이다가 막연한 두려움때문에 미루다가 졸업을 해버렸었는데, 이젠 더이상 선택을 미루면 안된다고 생각했다. 우선은 시작이 중요하다고 생각하고, 무작정 가장 재미있어보이는 flutter 강의를 들으면서 간단한 앱을 만들어보았다. 2023년 4월, 뭔가 좀더 체계적인 학습이 필요하다고 생각하고, 비전공자 출신 개발자 지인들에게 어떤 방향으로 시작하는게 좋을지 오랜만에 만나서 여러가지 질문을 ..
Coding 수업정리/항해99
리엑트 주특기 1일차
경원님 블로그 보고 정리 잘 해주셔서 그걸로 공부하고, 모르는 부분을 여기에 남겨보기로 함. https://rosie0418.tistory.com/114 리액트 입문주차 1주차 - 1 1. React란? ⅰ. React란? A JavaScript library for building user interfaces 공식문서에서 소개내용 유저 인터페이스를 빌딩하기위한 자바스크립트 기반의 라이브러리 UI란 사용자에게 보여주기 위한 사용자가 rosie0418.tistory.com 중요한 부분 모음 단축속성 const name = "wonjang"; const age = 21; const testObj = { name, // age: age, 키와 value가 같은 모양이 있으면 ES6에서 이를 생략할수 있게해줌 ..
Coding 수업정리/프로그래머스 코딩테스트 입문
[프로그래머스]신규 아이디 추천. 정규식 문제
https://programmers.co.kr/learn/courses/30/lessons/72410 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 완전한 정규식 문제. 여기 나오는 정규식 사용법은 어느정도 다 익히고 있어야 할듯 함. 여기서 가장 시간을 많이 잡아먹은건 new_id를 할당을 안해줘서, 아무리 해도 변경 없이 나와버렸던 것. new_id = new_id.어쩌구 로 바뀐걸 기존꺼에 할당을 해줘야하는데 자꾸 깜박한다. 기본중의 기본. 아래는 나의 코드 function solution(new_id) { new_id = new_id .toLowe..
Coding 수업정리/프로그래머스 코딩테스트 입문
[프로그래머스] 실패율. array말고 object
https://school.programmers.co.kr/learn/courses/30/lessons/42889 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 딱 객체로 하면 좋은 문제인데, 객체를 다루는 방법을 계속 고민하다가 결국 배열로 풀기는 했다. 다만 시간복잡도가 엄청나게 증가해서 3000ms이상 걸리는 테스트케이스가 존재함. 아래는 내가 작성한 답안 function solution(N, stages) { let points = []; let stageSort = []; for(let i = 1; i a>=i).length; let clear ..
Coding 수업정리/프로그래머스 코딩테스트 입문
[JS][1차]다트게임 / 정규표현식으로 문자열 분리하기
알고리즘에서 문자열로 정보가 뒤섞여 들어오는 경우가 많은데, 이때 정규표현식으로 이 문자열을 사용하기 좋게 다듬는건 필수적이다. 이때, 구분자가 없이 들어오는 경우 split 이나 replace등을 사용할수가 없는데, 이때 사용하는것이 match매소드이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/match String.prototype.match() - JavaScript | MDN match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다. developer.mozilla.org 예를들어 https://school.programmers.co.kr/learn/courses/30/les..
Coding 수업정리/프로그래머스 코딩테스트 입문
[JS/python]두 개 뽑아서 더하기
https://school.programmers.co.kr/learn/courses/30/lessons/68644?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(numbers) { const set = new Set(); for (i in numbers){ for (s = 0; s a-b); } 인덱스..
Coding 수업정리/프로그래머스 코딩테스트 입문
[JS]스택/큐 같은숫자는싫어
https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 계속 시도했으나 시간복잡도에서 실패한 코드 function solution(arr) { const answer = []; for(i in arr){ if(i===0){ answer.push(arr[0]); }else if (answer[answer.length-1]!==arr[i]){ answer.push(arr[i]); } } return answer } 이게 for문을 돌면서 i가 0인지 계속..
Coding 수업정리/항해99
[react/jotai]항해99 출석체크 페이지 시간이 계속 느려지는 이유
이름 지우는게 너무 힘들었다. 항해99 과정에서 선의의 경쟁? 을 위해 출석체크를 하는 페이지가 있는데, 이 페이지의 시계는 5시간정도 뒤에 보면 1시간이상 느려져있다. 우리는 아마 항해99의 서버시간을 get요청으로 가져와서, 현재시간을 기반으로 setTimeout으로 타이머를 작동시키는 것으로 보인다. setTimeout은 세팅한 시간이 되면 브라우저가 큐로 던져주고, 이벤트루프가 콜스택이 비어있는걸 확인하게 되면 settimeout를 스택으로 던져주고, 내부의 콜백함수가 실행되게 된다. 즉, setTimeout에 세팅한 시간은 해당 시간이 되면 콜백함수를 실행해줘! 가 아니라, 해당 시간이 지나면 콜백함수를 실행해줘! 의 의미인 것이다. 이런 오차는 계속 쌓이기때문에, 아무리 콜스택이 비어있더라도 ..
Coding 수업정리/프로그래머스 코딩테스트 입문
[JS]크레인인형뽑기게임
https://school.programmers.co.kr/learn/courses/30/lessons/64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이 문제는 설명이 너무 길어서 링크를 참고해야 한다. 우선 작성을 해보았는데, 여기서는 사용자의 move가 이미 다 주어져서, 생각보다 어렵진 않다. board에 있는 2차원 함수에서 move의 x축에 있는 숫자를 하나씩뽑아서 바구니에 push하고, 바구니에 똑같은 인형 2개가 만나면 2개를 터트리고, 2개를 카운트 하면 된다. 아마 pop쓰라고 일부러 터트리는걸로 한듯.. 최종 답안은 그 터트린..
Coding 수업정리/프로그래머스 코딩테스트 입문
[JS]완주하지못한 선수
https://school.programmers.co.kr/learn/courses/30/lessons/42576 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(participant, completion) { for (name of completion){ let index = participant.indexOf(name); participant.splice(index, 1); } return participant.join(); } 이렇게 풀었으나 시간초과가 나왔다. 아무래도 array말고 object를 사용해서 해봐야겠는데..
Coding 수업정리/항해99
JS this console찍어보기
var fullname = 'Ciryl Gane' var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; }, getLastName: (function() { return this.fullname.split(' ')[1]; })() } console.log('Not', fighter.opponent.getFullname(), 'VS', ..
Coding 수업정리/프로그래머스 코딩테스트 입문
JS localeCompare()
https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음 내가 테스트한 답은 function solution(strings, n) { strings.sort((a, b) => { return a[n] - b[n]; }); return strings; } 이거였다. 제일 간과한 문제가 C언어와 다르게 자바스크립트에서는 문자열끼리 뺄 경우 ASCII코드로 자동 변환해서 빼주지 않고, NaN을 반환한다는것. 그래서 문자열의 ASCII코드를 가져오려면, ..
Coding 수업정리/항해99
자바스트립트 문법종합반 1주차 / 복습
역사 2005년 ajax 2008년 구글의 V8엔진. 2009년 node.js등장, 서버개발 2015년 ES6 출시 특징 객체지향 프로그래밍 지원. 동적 타이핑 함수형 프로그래밍 지원 ( 함수를 first-class object로 취급(일반 값처럼 변수할당, 반환 가능)함, 고차함수(함수를 인자로 받거나 반환하는 함수 지원) 비동기처리 클라이언트/서버 모두 사용 가능 -- 변수와 상수 변수 : var, let -> 메모리에 저장, 읽어들여 재사용. var는 재선언시 경고 안함. let사용. 상수 : const -> 선언 후 변경 불가. 변수 이름 : 저장된 값의 고유 이름 변수 값: 변수에 저장된 값 변수 할당 : 변수에 값을 저장하는 것 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알림 변수 참고 : ..
Coding 수업정리/코딩애플
React useEffect, Liftcycle hook, setTimeout
useEffect코드는 페이지가 로드된 다음 실행되는 코드임. 서버로부터 불러오는 작업이나, 기타 복잡하고 시간 오래걸리는 함수들은 여기에 넣어주면 사용자가 좀더 빠르다고 체감이 가능함. 사용방법은 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } 요렇게 사용하면 되고, 실제로 2초후 사라지는 안내문을 만들어보자. let YellowBox = styled.div` background : yellow; height : 100px; width: 100%; font-size:30px; ` functi..
Coding 수업정리/코딩애플
React styled-components
CSS대신에 아래처럼 JS파일 안에 css스타일링을 할 수 있고 심지어 props(약간 사용법 다름 유의)로 조건식등을 넣어서 스타일링도 가능함. 터미널에 아래 입력해서 설치해줌 npm install styled-components 근데 설치가 안될수 있음! (최근 버전이 npm과 충돌이 있는듯 함. 이 경우 아래 처럼 입력 yarn add styled-components 아래처럼 사용. 이렇게 컴포넌트에 넣어서 사용도 가능함. import styled from 'styled-components'; let YellowBtn = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white'..
Coding 수업정리/코딩애플
React 라우팅 (셋팅, 기본, navigate, nested routes)
기본셋팅 터미널에서 router설치 npm install react-router-dom@6 index.js import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); app.js import { Routes, Route, Link } from 'react-router-dom' 기본셋팅은 끝. 페이지 주소, 내부 내용 설정 app.js 아래와 같이 로 감싸준 형식 내부에서 로 지정해줌. 이게 위치한 곳에서 html을 생성하므로, navbar 바로 아래에 작성함. 상세페이지 같은건 map돌려서 생성도 가능함. // 이걸로 감싸줌 /..
Coding 수업정리/코딩애플
React export import
데이터가 너무 많거나 등등 파일을 분리하는 경우 불러오는 방법을 크게 두가지로 사용할 수 있음. 1. default export 대부분 이걸 사용하며, 모듈에서 한가지 주요한 것을 내보낼때 사용함. data.js 생생하고 아래와 같이 작성 let a = 10; let b = 20; let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000 }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000 }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000 }..
Coding 수업정리/코딩애플
React component, map, props 이용해서 상품 카드 쭉 넣어보기.
컴포넌트는 자주 사용하는 html을 하나의 로 만들어주는 react의 문법. 컴포넌트 용도 1. 반복적인 html 축약시 2. 큰 페이지들 3. 자주 변경되는 것들 (성능상) 우선 3스텝으로 만듬. 1. function만들기 function App()밖에서 만들기. 함수명은 대문자로 시작함. function Modal() { return ( title date content ) } 2. return() 안에 html 담기 3. 써서 사용하기. function App() { return ( 중략 {글제목[2]} 2월 17일 발행 ) } 주의사항 : 최종 태그는 1개가 되어야함.(fragment사용가능) 여러가지 형태 가능함. function Modal(){ return ( ) } let Modal = ()..
Coding 수업정리/코딩애플
React 배열, 객체 data를 가진 state 변경하기.
아래와 같은 state가 있다. let [title, setTitle] = useState(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']); 이걸 버튼을 누를때 값을 변경하려고 할때, { setTitle(title[0] = '다람쥐 코트 추천'); }} 이런 식으로 하면 이런식으로 변경이 된다. 왜냐하면 위에선 title[0]번째에 다람쥐코트추천을 할당한뒤, 그 값 자체를 title에 할당해버리기 때문에, 결국 index0 값이 전체를 덮어버린다. setTitle('다람쥐 코트 추천'); 이거랑 같은 효과가 나는것이다. 정확하게 하려면 { setTitle(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']); }} 이렇게 변경 할것 안할것 전부다 할당해주어야 ..
Coding 수업정리/항해99
[항해99]사전과정-웹개발미니프로젝트 8조
항해99 15기 사전과정 웹개발미니프로젝트 8조 Github 주소 : https://github.com/webmini-team8 webmini-team8 webmini-team8 has one repository available. Follow their code on GitHub. github.com 팀장 : Khusan 팀원 : 강신범 김태현 홍성민 프로젝트명 : 의류 쇼핑몰 프로젝트 목적 : 모바일 의류 쇼핑몰 제작 와이어프레임 로그인페이지, 메인페이지, 장바구니, 상품등록, 상세상품 총 5page로 구성 되있습니다 DB에 저장된 정보를 기반으로 상품을 보여주고, 변경하는것이 주요 서비스 입니다. 로그인은 우선 간단하게 구현합니다. 추후 회원가입 기능을 구현합니다. 메인페이지는 DB에서 상품 정보를..
Coding 수업정리/프로그래머스 코딩테스트 입문
[프로그래머스]대충 만든 자판 (레벨1, 49%)
https://school.programmers.co.kr/learn/courses/30/lessons/160586 나의 solution function solution(keymap, targets) { let result = []; //타겟1개중 for (targetsIndex in targets) { let targetCount = []; for (targetElement of targets[targetsIndex]) {//타겟 한개중 타겟한글자 let keymapCount = []; for (a of keymap) { //키맵 종류 하나씩 테스트 let index = a.search(targetElement); index === -1 ? keymapCount.push(index) : keymapCo..
Coding 수업정리/항해99
[띵동코딩]넷플릭스 클론
홈 TV프로그램 영화 내가 찜한 콘텐츠 오늘의 영화 토르: 러브 앤 썬더 오늘 한국의 Top 10 영화 오늘 한국의 추천 영화 갑시다 갑시다 어려웠던점 또 모르고 글씨를 지워서 한참 시간낭비 (삼항의 null부분) 유심히 보자.
Coding 수업정리/항해99
[띵동코딩]영화버킷리스트 버튼 구현
영화 버킷 리스트 다음 이 프로젝트의 가장 큰 수확은 오타를 찾다가 빡쳐서 선택영역 색상 변경하는걸 찾아본 것. 더이상 모르고 선택해서 지울 일은 없다.
Coding 수업정리/항해99
[VS Code]코드 선택 하이라이트 색상 변경
선택이 이런식으로 되니 보이지가 않아서 모르고 지워서 오류가 하루에 세네번씩 난다. 이젠 안되겠다 싶어 하이라이트 색상 변경 방법을 검색... 커서 색상 변경 핫핑크로. 탐색창에 >setting.json (user) 입력하고, 해당 프로젝트만 변경시 document setting, 이 컴퓨터의 모든 프로젝트에 적용시 user setting을 선택하면 된다. 이걸 열어서 아래 코드를 맨 아래 붙여주는데, 중괋호 안에 들어오게 한다(위 사진 노란 중괄호 밖에 하면 안됨) "workbench.colorCustomizations": { "editorCursor.foreground": "#f53eb8",//에디터 커서 색상 추가 "terminalCursor.foreground": "#f53eb8",//터미널 커서..
