전체 글 (487) 썸네일형 리스트형 [2023 신입부원 기초 스터디] 최종은 #7주차 - Js 보충 문자열 메소드 toUpperCase() : 문자열을 대문자로 바꾸기 toLowerCase() : 문자열을 소문자로 바꾸기 trim() : 문자열 앞,뒤의 공백 제거 trimStart() : 문자열 앞쪽의 공백 제거 trimEnd() : 문자열 뒤의 공백 제거 repeat() : 문자열 반복 padStart() : 지정한 문자열을 앞에 n개 추가 (Ex: str.padStart(10,'_') padEnd() : 지정한 문자열을 뒤에 n개 추가 (Ex: str.padEnd(10,'_') *이때 둘 다 원본 문자열은 변하지 않음* indexOf() : 해당 문자열에서 Key값이 시작되는 값을 출력 includes() : 해당 문자열 안에 Key값이 존재하는지 확인 ( true or false ) startsW.. [2023 신입부원 기초 스터디] 박승환 #6주차 - 이게 파이썬이야, js야? @@일단 죄송합니다! 좀 늦게 블로그를 올리는 것 같습니다! 조금의 변명을 한다면 축제..... 미리미리 안한 제 잘못이겠지요 ㅎㅎ 그래서 더욱 열심히 들어서 블로그도 열심히 작성했습니다!!@@ if문 if (조건) { 실행할 문장; } const a = 10; const b = 20; if (a b) { console.log('a가 더 작다!'); } else if (b == c) { console.log('b랑 c가 같습니다!'); } else if (b != c) { console.log('b랑 c가 다르다!'); } else if (a == c) { console.log('a랑 c가 같습니다!'); } else { console.log('거짓입니다!'); } else if는 if와 else 사이에.. [2023 신입부원 기초 스터디] 박민규 #6주차 - JavaScript 조건문 JS에서의 if문 if (조건) { 실행될 코드; } 예시) const a = 10; const b = 20; if (a a가 더 작아요 출력. if (a < b) console.log('a가 더 작아요') 이렇게 한 줄로 if문 작성 가능 또, else if 를 파이썬 처럼 계속 사용할 수도 있다. Switch문 switch (변수 혹은 값) { case 값1: 실행될 코드; break; default: 아무것도 해당되지 않을 때 실행될 코드; } 의 형태로 변수나 값의 경우에 따라 각각 다른 코드를 실행시킬 수 있다. 하나의 case를 작성할 때마다 break를 꼭 붙.. [2023 신입부원 기초 스터디] 이총명 6주차 - JS 1 . 조건문 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. if (조건문) {실행코드} 실행 코드가 한줄일 경우 중괄호를 없애도 괜찮다. 2. 반복문 파이썬이랑 유사하고 continue , break도 있다 for (시작값; 반복조건; 증감값){실행코드} for (const 변수 of 리스트) {실행코드} while (조건){실행코드} 3. 함수 함수(function)는 특정 목적을 가지고 만들어진 독립적인 블록으로, 필요한 시점에 호출하여 해당 작업을 반복적으로 수행할 수 있는 도구이다 [2023 신입부원 기초 스터디] 도승준 6주차 - JS 2회차 이번주는 조건문, 반복문, 함수에 대해 배웠어용. 우리가 원래 알고 있던 프로그래밍 언어들과 크게 다르지 않으니, 간단하게 짚고 넘어가겠습니당. 조건문 : 조건이 참 / 거짓인지에 따라 다른 코드로 분기하기 위한 코드 if( A > 0){ console.log(A) // A가 0보다 크면, 조건이 참이면 실행되는 코드 } console.log(B) 위 와같은 코드에서 조건이 참이라면 A와 B의 값이 모두 콘솔에 출력되고, 조건이 거짓이라면 B의 값만 출력되게 된다. if( A > 0){ console.log(A) // A가 0보다 크면, 조건이 참이면 실행되는 코드 } else{ console.log(B) } 마찬가지로 조건이 참이면, A가 출력되고, 거짓이면 B가 출력되는 코드이다. 기타 여느 언어들과.. [2023 신입부원 기초 스터디] 조상혁 6주차 - JS기초문법 공부 조건문 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. if (조건문) {실행코드} 실행 코드가 한줄일 경우 중괄호를 없애도 괜찮다. // 조건문 if const a = 10; const b = 20; if (a b) { console.log('a가 더 .. [2023 신입부원 기초 스터디] 최종은 #6주차 - Js 조건문,반복문,함수 등등,.,., 조건문(if, else, switch) if문: 조건이 참이면 코드를 실행 형식: if(조건) 실행 코드; else문: 바로 앞에 실행했던 if문이 참이 아닐 때 사용 가능 형식: else 실행코드; switch 조건문: 조건에 따라 분기를 설정하여 실행 - default: 조건이 어떤 분기에도 맞지 않을 때 실행 형식: switch(조건) { case 분기1: 실행코드; break; case 분기2: 실행코드; break; case 분기3: 실행코드; break; default: 실행코드; break; } 반복문(for,while) for문 -break: 반복문을 완전히 종료함 -continue: 현재 반복만 종료함 형식: for(i=시작값;i console.log(a+b); [2023 신입부원 기초 스터디] 박민규 #5주차 - JavaScript JavaScript에서의 주석 // 주석을 달 수 있다. 변수와 상수 변수의 선언 코드 let 변수명; or let 변수명 = 할당값; 변수명 = 할당값; 상수의 선언 코드 const 상수명 = 할당값; 변수는 계속 할당값을 바꿀 수 있고, 상수는 바꿀 수 없다. 원시 데이터 타입 const msg = "문자열" + 변수 + "문자열" + 변수 + "문자열" const msg = `문자열 ${변수} 문자열 ${변수} + 문자열` 위 두 코드의 출력값이 같다. console.log(typeof 변수); 를 통해 변수의 타입을 알 수 있음 변수에 조건식을 입력하면 ex) 10 < 20 그 타입은 boolean이다. null : 아무 값이 없음을 나타냄. undefined : 값이 아직 지정되지 않음을 나타냄.. [2023 신입부원 기초 스터디] 김승혁 6주차 JS 조건문(if, switch) if const a = 10; const b = 20; if(a a가 작다 (출력값), 거짓이면 출력 x const a = 10; const b = 20; const c = 20; if(a < b){ console.log('a가 작다') } else if (b===c){ console.log('b=c') } else{ console.log('거짓!') } switch 동일한 조건이 주어지고 그 값에 따라 명령 달라짐 const number = 10; switch(number){ case 1: console.log(number); break; case 2; console.log(number); break; default; c.. [2023 백엔드 스터디] 조다운 #6 주차 - 10.5 장~10.8 장 웹 API 서버 만들기 10.5 SNS API 서버 만들기 GET /post/my router : 내가 올린 포스트를 가져옴 GET /posts/hastag/:title router : 해시태그 검색 결과를 가져옴 const request = async (req, api) => { try { if (!req.session.jwt) { // 세션에 토큰이 없으면 const tokenResult = await axios.post(`${URL}/token`, { clientSecret: process.env.CLIENT_SECRET, }); req.session.jwt = tokenResult.data.token; // 세션에 토큰 저장 } return await axios.get(`${URL}${api}`, { headers: {.. [2023 신입부원 기초 스터디] 정찬우 6주차 - JS js에도 우리가 코딩할 때 사용하는 기본적인 if, switch, for, while문이 있다. 사용법도 c++과 동일하지만 한번 정리도 할겸 작성해봅니다~ If문 if 문에서 조건식을 거짓으로 취급하는 값은 크게 6가지가 있다. Switch 문 💡Switch 문을 사용할 때 주의해야 할 점은 break를 사용하지 않으면 끝까지 다 출력이 되니 break 문을 잊지 않고 써야 합니다. for 문 for(초기식; 조건식; 증감식){ 실행문; } for/in 문 과 for/of 차이점 while 문 while(조건절){ 실행문; } 함수 JS에서 함수를 선언하고 사용하는 방법은 세가지로 요약이 가능하다 선언적이고 명시적인 function 키워드 사용 함수를 객체 혹은 리터럴(함수식=함수 표현식)로 사용 객체.. [2023 신입부원 기초 스터디] 한승훈 5주차 - JS 안녕하세요, 한승훈입니다. 다들 좋은 하루 보내고 계신가요? 요즘 날이 많이 더워졌는데, 여러분 모두 더위 조심하세요! 토요일은 석가탄신일이였네요. 학교 안에 삼봉정사라고 절이 있는 거 아시나요? 성곡 옆인데 예쁘러다구요. 전 연등이 참 멋진 거 같습니다. 오늘부터는 JS스터디네요. 섹션 #0 JS 화이팅! 윙크 화이팅~ 섹션 #1 2강 함수 지정 let hi; hi='안녕하세요'; or let hi='안녕하세요'; 변수 지정 const 변수명 = '안녕하세요'; 변수는 함수와 달리 생성과 동시에 초기화를 해주어야 한다. 이름 생성시 유의사항 -변수나 상수 이름의 첫번째 글자는 영어,$,_만 가능하다. -첫 번째 말고는 숫자도 가능하다 -영어 대소문자는 구별 -let, const와 같이 예약어는 사용 불.. [2023 신입부원 기초 스터디] 김승혁 5주차 JS console.log -> print 같은 느낌?!! 변수 let : 변수 선언 시 사용, 선언 할 떄 초기화 필요x, 같은 변수에 두번 let사용 x console.log(변수) : 콘솔 창에 변수 출력해줌 -> 눈으로 직접 확인 가능 상수 한 번 정하면 변하지 않음 const : 상수 선언 시 사용, 선언 할 때 초기화 필요 변수나 상수의 이ㅡㄻ의 첫 번째 글자는 영어, $, _ 만 가능 우선 const 사용 후 변수가 필요할 때 let 쓰기 (항상 const 사용!!) 원시 데이터 어떤 값 딱 하나만 가르킴 not 객체, not 메서드인 데이터 number : 숫자 bigint : 개크거나 개작은숫자 or 숫자+n string : 문자열 boolean : true or false null : 값이 .. [2023 신입부원 심화 스터디] 김윤희 #5주차 - React.js 섹션 2. 컴포넌트 제작 1. 리액트가 없다면.. - 태그가 ,, 코드가 천만줄이라면 ? → 한눈에 코드가 안 들어와 ! - 코드상으로 simple! 하게 해주는 것 ! 2.컴포넌트 만들기 1, 2 class Subject extends Component { render() { return ( WEB ); } } class App extends Component { render() { return ( ); } } export default App; App이라는 클래스를 만들고, Component라는 클래스를 상속받자 ! render()라는 함수가 꼭 필요 ! 컴포넌트는 하나의 최상위 태그로 시작해야한다 ! 3.props → 컴포넌트의 속성을 표현 ! → {this.props.title(원하는 값의 이름)} {this.props... [2023 신입부원 심화 스터디] 조현상 #5주차 React.js 섹션2 컴포넌트 제작 HTML로 코딩을 했을 때 겪게 되는 문제점들은 1. 반복되는 코드들 2. 코드가 길어질수록 한 눈에 들어오지 않음 3. 코드를 감출 수 없음 과 같은 문제점들이 있다. 리액트는 HTML에서 생기는 문제점들을 보완하고자 만들어졌다. 리액트의 장점 1.코드의 간결화와 재사용성 WEB world wide web! 우리가 만약 이러한 코드를 html에서 만들었다고 했을 때 리액트는 import React, { Component } from 'react'; import './App.css'; class Subject extends Component { rendor(){ return( WEB world wide web! ); } } class App extends Component { render() { retu.. [2023 신입부원 심화 스터디] 정호용 #5주차 react - section 0 ~ 2 📌section 0 사용자 정의 태그 -> React에서는 Component라고 함. 1. 가독성이 좋다. 2. 재사용성이 높다. -> 한 번 정의해 두면 다른 곳에서 재사용할 수 있다. 3. 유지보수가 좋다. -> 실시간으로 변경된 내용이 업데이트 된다. 📌section 2 🎮1. 리액트가 없다면? public 디렉토리 -> npm run start 했을 때 파일을 찾는 디렉토리 semantic code 나 와 같이 기능은 없지만 의미를 파악하기 쉽게 구분한 코드 만약 html 코드가 1000만줄, 1억줄이라면 코드가 한눈에 안 들어온다. -> 혼란스러움 코드를 안보이게 감춰두고 심플하게 표현하고 싶다! -> 그걸 가능하게 해주는 것이 리액트 🎮2. 컴포넌트 만들기 1 import React, {Com.. [2023 신입부원 심화 스터디] 황현진 #5주차 - React.js 섹션 2. 컴포넌트 제작 리액트가 없다면 🤔💭 만약 코드가 65만 줄, 65억 줄이 된다면 코드를 한 눈에 알아볼 수 없다..😢 → 헉❗ 이 코드를 한 태그로 만들 수 있었으면 좋겠다.. ⇒ 이게 바로 리액트 💻 ex) 컴포넌트 만들기 → 어지러웠던 코드를 정리정돈해주는 것이라고 생각하면 쉽다🧹 주의할 점: 컴포넌트를 만들 때, 항상 최상위 태그로 묶여있어야 한다. ex) 시맨틱 태그 사용하기 참고할 점: 이 코드는 js 코드가 아니다 → 그러므로 콘솔창에 복붙해서 실행해도 실행되지 않는다. import React, { Component } from "react"; import "./App.css"; class Subject extends Component { {/* 컴포넌트를 만드는 기본 틀 */} render() { retu.. [2023 신입부원 심화 스터디] 이정욱 #5주차 React.js ~ 섹션2 컴포넌트 제작 컴포넌트 만들기 컴포넌트란 리엑트에서 화면에 UI 요소 중 가장 작은 단위를 Compoenent라고 한다. 컴포넌트는 class component와 function component 두가지 방식이 있다. 우리가 진행할 방식은 class component 방식이다. class component 의 특징 class 키워드를 사용 Component 클래스를 상속받아 사용한다. render() 메소드를 꼭 사용해야한다. // import logo from './logo.svg'; import { Component } from "react"; import "./App.css"; class Subject extends Component { render() { return ( WEB world wide web! );.. [2023 신입부원 심화 스터디] 박지민 #5주차 React.js 섹션 2 컴포넌트 제작 1. 컴포넌트 만들기 React의 핵심 기능 - 긴 코드들을 사용자 정의 태그를 사용하여 간결하게 만듦 - pure.index WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. - App.js header, nav, article 태그 부분 사용자 태그로 바꿔줌 import React, {Component} from 'React'; import './App.css'; // html에서 태그 부분을 subject라는 이름으로 바꾸고 싶음 class Subject extends Component { // 클래스 이름은 대문자로 시작 // 자바 스크립트에서 클래스 안에 있는 함수는 function 안붙여도 됨 rend.. [2023 신입부원 심화 스터디] 신진욱 #5주차 - 어 리액트 왔어 0,1 섹션은 어떻게 공부할 지와 환경설정에 대한 내용이라 블로깅은 건너 뛰었습니당. 1. 리액트의 중요성 - 유지보수 좋음 - 코드의 복잡성 제거 - 성능 향상 ... 2. 컴포넌트 생성 - React의 핵심 기능 - 긴 코드들을 사용자 정의 태그로 간결하게 만들기 위함 pure.html WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. App.js header, nav, article 태그 부분 사용자 태그로 바꿔주기 import React, {Component} from 'React'; import './App.css'; // html에서 태그 부분들을 subject라는 이름으로 바꾸고 싶다. // 클래스 .. [2023 신입부원 기초 스터디] 도승준 4주차 -JS는 사실 ... JavaScript의 약자이다 JMH 보고이써? 나 사실 HTML CSS보다 JS가 훨씬 적성에 맞는거가타...... 1.변수 변수 선언 let 변수명; 변수 초기화 변수명 = '값'; (숫자 자료형일경우 따옴표는 쓰지 않는다.) 변수 선언과 초기화 동시에 let 변수명 = '값'; 상수 선언과 초기화 동시에 const 상수명 = '값'; console.log() -> 콘솔에 괄호 안의 값을 출력해준다. 값을 바꿀때, let을 다시 쓰면 변수를 재할당해주는 것이므로 오류가 난다. 상수를 선언해주었을때는 수정이 불가능하고, 선언과 초기화가 동반 되어야 한다. 변수 선언 규칙 1. 변수나 상수이름의 첫번째 글자는 영어,$, _ 만 가능하다. (숫자 불가) 2. 첫 글자를 제외하고는 숫자도 사용 가능하다. 3. 소문자와 대문자는 구별하여 .. [2023 신입부원 기초 스터디] 박승환 #4주차- js야 안녕!!^^ @@드디어 HTML과 CSS를 배우고 Java Script를 배울 시간이 왔다...! 처음에는 파이썬과 비교하면서 자바스크립트를 배우려 했지만 다시 생각해봤더니 그냥 자바스크립트 그대로를 처음 프로그래밍 언어를 배우는 것 처럼 배워야겠다는 생각이 들었다. 새로운 프로그래밍 언어인 만큼 기초를 탄탄하게 잡아야겠다!!!!@@ 확장자 파일 --> 확장자파일명.js 변수 변수를 할당할 때는 let 변수명 = 값;으로 변수를 할당한다. let hi = '박승환'; hi = '안녕하세요'; 변수의 값을 변경하기 위해서는 그다음 줄에 변수명 = 값2;를 작성 하면 되는데 여기서 중요한 것은 또 다시 let 변수명 = 값2를 하면 에러가 뜬다는 것이다. html파일에 script 태그 를 이용하여 js파일을 연결하고 .. [2023 신입부원 기초 스터디] 이총명 5주차 - JS 입문 1 . JS란 JS는 Jeongmyeong is Sexy의 약자로 윙크 회장의 섹시함을 알리기 위해 만들어진 언어이다. (그럼 JMS 아님?) 2. JS 사용법 let 변수명; 이렇게 변수를 선언 할 수 있고 같은 변수명을 재선언 할 수 없다. (그냥 변수에 다른값을 넣는건 당연히 됨) const 상수명; 이렇게 상수를 선언 할 수 있고 이름 그대로 값을 바꿀 수 없다. console.log(내용); live server을 열고 개발자 도구를 연 뒤 콘솔창에서 로그를 볼 수 있다. 배열 const 이름 = [값] 이렇게 선언 할 수 있고 파이썬의 리스트와 유사한듯하다. 객체 const 이름 = {key : value} 이렇게 선언 할 수 있고 파이썬의 딕셔너리와 유사한듯하다. 3. 원시 데이터 타입 객체.. [2023 신입부원 기초 스터디] 조상혁 5주차 - JS가 뭐야? JavaScript란? 웹 브라우저에서 HTML 문서에 내장한 JavaScript 를 읽으면 즉시 해석되어, 소스코드가 실행된 결과를 눈으로 볼 수 있는 클라이언트 사이드( 프론트 엔드 ) 언어이다. 웹페이지에서 특정 부분을 클릭하거나 입력했을 때, '팝업 창 띄우기', '애니메이션 효과', '통신' 등의 다양한 기능들을 추가할 수 있다. html에 js 연결하는 방법 변수 let 변수명; 동일한 변수명으로를 재할당하면 오류가 생긴다. 상수 const 상수명; 상수는 선언후에 재할당이 불가하다 const 선언은 반드시 초기화를 해야한다 예시 const potato; #선언불가 올바른 예시 const potato = ''; console.log(변수명); 로그를 볼 수 있다 변수,상수 주의할 점 변수 상수.. [2023 신입부원 기초 스터디] 최종은 #5주차 JS 입문 1. 변수와 상수 변수: 변할 수 있는 값 let: 변수 작성 상수: 변할 수 없는 값(변수와 다르게 수정 불가능) const: 상수 선언 *변수 이름 규칙* 1.첫글자는 영어,$,_만 가능 2.첫글자 이외에는 숫자도 사용 가능 (Ex: _1234, &1234 등) 3.대소문자 구분 4.예약어 (Ex: let,const)사용 불가능 5.공백 불가능 기본적으로 const를 사용하고 값 변경이 필요하다면 let 사용 권장 var을 사용하지 않는 이유: var에서 개선된 const,let이 있기에 딱히 사용할 이유가 없음 2.원시 데이터 타입 number: 정수 bigint: -(2^53-1) ~ (2^53-1) 까지의 범위 표현 string: 문자열 문자열 따옴표: "" , '' 둘 다 사용 가능 백틱(ba.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 20 다음
