자바스크립트란?

  • 프로그래밍이란 - 프로그래머들이 "어떤 도구"를 이용해 코딩
  • 이 때 이용하는 도구가 바로 프로그래밍 언어. 인간이 쓰는 언어와 마찬가지로 프로그래밍 언어도 정해진 문법이 있다.
  • 이 문법에 따라 코딩을 하면 컴퓨터는 이를 해석해 우리가 원하는대로 데이터를 입력받아 처리하고 출력해줄 수 있다.
  • 프로그래밍 언어도 인간이 쓰는 언어처럼 매우 다양하고 계속 발전하고,
  • 언어 고유의 특성과 장단점이 있지만 좀 더 많이 쓰이는 언어들이 존재
  • 자바스크립트는 이러한 언어들 중에서 몇 손가락 안에 들만큼 많이 쓰이는 언어이고, 많은 프로그래머들로부터 사랑받고 있는 언어

Node.js 란 ? "Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser"

조금 더 쉬운 말로 얘기하자면 Node.js 는 우리가 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용번역기

 


var vs let vs const

  • 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.
  • 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.
  • 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
  • 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다.

그렇다면 let  const 의 차이점은 무엇일까?

  • 이 둘의 차이점은 immutable 여부이다.
  • let 은 변수에 재할당이 가능하다. 그렇지만, const는 변수 재선언, 변수 재할당 모두 불가능하다.
//var
var name = 'bathingape'
console.log(name) // bathingape

var name = 'javascript'
console.log(name) // javascript
    
    
//let
let name = 'bathingape'
console.log(name) // bathingape

let name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) //react


//const
const name = 'bathingape'
console.log(name) // bathingape

const name = 'javascript'
console.log(name) 
// Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'react'
console.log(name) 
//Uncaught TypeError: Assignment to constant variable.

 

클래스 vs 메소드

 

클래스는 여러 함수와 변수들을 한 번에 묶어서 관리하기 위해 사용한다. 이때 클래스에 포함되는 변수를 속성(attribute)이라고 부르며, 클래스에 포함되는 함수를 메소드(method)라고 한다.

  • 클래스 : 자바에서 모든 코드는 반드시 클래스 안에 존재해야 하며
                서로 관련된 코드들을 그룹으로 나누어 별도의 클래스 구성
                클래스들이 모여 하나의 Java 애플리케이션 구성
  • 매소드 : 클래스의 기능(동작)에 해당하는 구현 부분으로
                 해당 메소드 호출 시 메소드의 블럭( { } )에 해당하는 부분 실행
public class 클래스명 {
	public void 메소드명() {
		// 실행될 문장
	}
}

 

while vs for

  • for문을 사용하는 경우 → 반복횟수가 정해진 경우, 주로 배열과 함께 많이 사용
  • while문을 사용하는 경우 → 무한루프나 특정 조건에 만족할 때까지 반복해야 하는 경우, 주로 파일을 읽고 쓰기에 많이 사용
//for문
let sum=0;
for(let i=0; i<10; i++){
  sum +=i;
}
console.log(sum);

//while문
let sum=0;
i=1;
while(i<=10){
  sum +=i;
  i++
}
console.log(sum);

일반적으로는 반복 횟수를 아는 경우 for, 모르는 경우 while을 쓰라고 말하는데, 반복 횟수를 아는 경우는 무조건 for을 쓰는 게 좋은가?

반드시 그렇지는 않다. 

 

1) for문의 구조를 보면 시작 조건을 입력할 때 반드시 변수를 초기화시킨다. 즉 for 문 안에서 변수의 초기화가 이루어지는 것이다. 따라서 루프를 시작하기 전에 이미 변수가 초기화되어있다면 while을 쓰는 것이 더 직관적이다. 반복 횟수가 정해져있다고 하더라도, 굳이 다시 초기화를 하면서 for문을 사용할 필요는 없다. 

2) 또, 가독성 측면에서 while문이 더 나은 측면도 있다. for (int i=0; i<num; i++) 보다는 while (i<num) 이 더 간단하고 직관적이다. 변수 이름이나 코드의 길이가 길어질수록 더욱 그렇다. 한 줄에 내용을 집약해서 넣느냐, 여러 줄에 나눠 넣느냐의 차이이다.

3) 이 외에도 무한 루프를 구현하고 싶은 경우 while (true) 로 쉽게 작성 가능하므로 while을 쓴다. 

 

다만 파이썬에서는 for문 더 편한 경우가 많다. 프로그래밍을 할 때는 다양한 곳에서 변수를 끌어오고 복잡한 요소를 고려하게 되기 때문에, 언제 써야할 지 명확하게 구분하려고 하고 정답을 정해놓는 것 보다는 둘 다 어떻게 쓰는지를 잘 알고 있고, 두 구문 간에 자유롭게 변환할 수 있도록 연습하는 것이 더 중요하다고 생각한다.

 

 

증감연산자 (Increment and Decrement operators) 

 

++i (전위증가) : i의 값이 1 증가된 후 증가된 값을 리턴한다

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

vs

i++ (후위증가) : 먼저 해당 연산을 수행하고 나서, i 의 값을 1 증가시킴.

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1

 

 

null vs undefinedundefined

  • null은 텅텅 비어 있는 값을 의미
  • undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것
let name1 = null
console.log(name) // null을 출력

let name2
console.log(name2) // undefined를 출력

 

 

⑥ 일치연산자 (Equality operators) == vs ===

  • 자바스크립트에는 두 가지의 일치연산자가 있다.
  •  === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴
  • 반면 == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있다.
  • 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않고 있다. 
console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

 

[출처]

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

https://velog.io/@letthere/2.-%ED%81%B4%EB%9E%98%EC%8A%A4class-%EB%A9%94%EC%86%8C%EB%93%9Cmethod

https://chloe-ki.tistory.com/entry/java-for-while-loop

'Coding > Javascript' 카테고리의 다른 글

Javascript 특정 문자열 제거 함수  (0) 2022.11.11

플라스크 라우팅

- route() 함수 : 플라스크의 함수. 복잡한 URL를 쉽게 함수로 연결하는 방법을 제공

- 플라스크에서는 @app.route() 데코레이터(decorator) 함수를 통해서 라우팅을 실행한다.

- 라우팅 방법으로는 정적 라우팅 방법과 동적 라우팅 방법이 있다.

 

 

1. 정적 라우팅

- 정적 라우팅은 @app.route()함수에 직접적으로 라우팅할 주소를 지정한다. 

 

- 처음 메인페이지를 만들 때, 위의 그림과 같이 정적 라우팅으로 메인 페이지와 세부 페이지를 직접 연결하였다.

- 그러나 세부 페이지가 많아 진다고 하면, 모든 페이지를 코드로 만들어 정적 라우팅으로 지정하기에는 너무 불편하고, 같은 코드가 반복되어 보기 좋지 않다는 문제점이 있다. 

- 이 부분은 동적 라우팅 함수로 개선이 가능하다.

 

2. 동적 라우팅

- 정적 라우팅처럼 직접 URL을 지정하는 것이 아닌 상황에 따라 다른 URL 변화하는 동적 적용을 하는 방식.

- 동적 라우팅은 여러 URL을 한 함수에 적용할 수 있어서 변하는 주소에 따라서 그에 맞는 페이지를 로드해 준다.

- URL에 동적인 변수를 사용하려면 원하는 위치에 "<변수>" 형태로 추가한다.

- 해당 변수는 URL과 일치하는 뷰 함수의 인자로 사용할 수 있다.

 

윗 6개의 함수가 동적 라우팅 함수를 통해 1개의 함수로 커버가 되었다.

 

 


[출처]

https://littlezero48.tistory.com/72 (소영님 감사합니다 ♥)

https://m.blog.naver.com/dsz08082/221798793729

https://hiio.tistory.com/41

Github 란?  깃허브 GitHub는 분산 버전 컨트롤 소프트웨어. 깃Git을 기반으로 소스 코드를 호스팅 하고, 협업 지원 기능들을 지원하는 마이크로소프트Microsoft의 웹서비스이다. 가장 인기 있는 소스 코드 호스팅 서비스이자 소프트웨어 개발 플랫폼.

 

Github의 사용 용도는 다음과 같이 3가지로 분류할 수 있다.

- 내 소스코드를 저장하는 곳 

- 소스코드 공유

- 협업의 공간

 

③ Github을 이용하려면 다음 3가지 사전 준비가 필요하다.

1. Github 회원가입 + 암호 토큰 발행

2. Git download 및 기본세팅

3. Terminal 창 or GUI (ex-Source Tree)


 

1. 깃허브 회원가입 및 토큰 발행

 

① 깃허브 사이트주소  : https://github.com/ 에 접속하여 회원가입을 진행한다.

 

② 토큰 발행하기 : [Setting] → [Developer setting] → [Personal access tokens] 

 

※ 깃허브에 코드를 올리는 과정에서 username 과 password가 필요하다. 근데 이때 password는 가입할 때 입력한 것이 아니라, 토큰을 따로 발행하여 복붙해서 써야 한다. 토큰은 발행 받을 때 메모장이나 다른 곳이 미리 복붙해서 저장해 놓기 ! 

 

 

오른쪽 상단 본인 아이콘 - 세팅 클릭 !

 

왼쪽 하단 Developer setting 클릭
화살표를 클릭하고 원하는 토큰을 발행한다.

 

 

2. Git 설치하기

 

① git 설치 사이트 : https://git-scm.com/

 

  • 윗 사진의 명령어를 복사하여 터미널창에 붙여넣기 하고 엔터 ! 하면 다운로드가 시작된다.
  • 그다음 터미널 창에 $ brew install git 입력 후 엔터
  • 설치가 끝나면 $ git help 를 터미널창에 입력해주고 마무리 한다.

③ 다운로드 완료 확인 하기 : 터미널 창에 git --version 쳤을때 버젼 정보가 잘 나오면 설치완료 ! 

 

 

3. Git 기본 세팅 하기

터미널창을 켜고 다음 명령어를 입력해 준다.

① user name 설정하기

git config --global user.name "your_name"

② user email설정하기.

git config --global user.email "your_email"

사진 출처 : 유튜브 <코딩알려주는 누나>

③ 확인하기

git config --list

 

다음 명령어를 입력 후 유저네임과 유저이메일이 제대로 설정되었는지 확인하면 끝 !

 


출처 : https://www.youtube.com/watch?v=lelVripbt2M

 

Github에 처음 코드 업로드하기 

1. 초기화

git init

2. 추가할 파일 더하기

git add .

.(점) 은 모든 파일이라는 뜻, 선택적으로 올리고 싶으면 add뒤에 파일 이름 붙여주면 됨 (예. git add index.html)

 

3. 상태 확인 (선택사항)

git status

 

4. 히스토리 만들기

git commit -m "first commit"

-m 은 메세지의 준말로 뒤에 “” 안에 주고싶은 히스토리 이름을 주면 됨 (즉, 구지 first commit일 필요가 없다는 뜻^^)

 

5. Github repository랑 내 로컬 프로젝트랑 연결

git remote add origin (레파지토리 주소)

 

이 명령어는 github에서 복사해서 붙여와야함

 

6. 잘 연결됬는지 확인 (선택사항)

git remote -v

내가 연결한 주소값이 잘 뜨면 성공!

 

7. Github로 올리기

git push origin master

master 자리에는 branch이름이 들어가면 됨 branch이름이 main라하면 git push origin main 이라고 써야함

 

Github에 계속 업데이트 하는법 

1. 추가할 파일 더하기

git add .

2. 히스토리 만들기

git commit -m "first commit"

3. Github로 올리기

git push origin master

내 컴퓨터에 소스코드를 업데이트를 하고 싶으면 이 세개의 스텝만 계속 반복하면 됨.

 

Github로 팀프로젝트 하는법 

1. Github에서 소스코드 다운로드

git clone (레파지토리 주소)

주소는 깃허브에서 들고와야함

폴더이름은 선택사항이다 (즉 없어도됨) 폴더이름을 줄경우에는 그 폴더가 새로 생성이 되면서 그 안에 코드들이 다운로드가 되고, 폴더이름을 안줄경우엔 깃허브 프로젝트 이름으로 폴더가 자동으로 생기고 그안에 코드들이 다운로드된다.

 

 

2. Github에서 내 브렌치(branch)만들기

git checkout -b 브렌치이름

 

3. 내 브렌치에 소스코드 업데이트하기

git add . git commit -m "first commit" git push origin 브렌치이름

git add . 
git commit -m "first commit" 
git push origin 브렌치이름

 

4. 마스터 브렌치에 소스 가져오기(pull)

git pull origin master

pull을 하기전에는 기존에 소스코드들을 commit을 먼저 해놔야 한다

 

5. 브렌치끼리 이동하는 법

git checkout 브렌치이름

내 브렌치에서 마스터 브렌치로 이동을 하고 싶거나 다른 브렌치로 이동하고싶으면 해당 명령어를 쓰면 된다

 

 

 

 

 


[출처]

 

https://velog.io/@grinding_hannah/Git-Git-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%ED%84%B0%EB%AF%B8%EB%84%90-%EB%AA%85%EB%A0%B9%EC%96%B4-%EC%A0%95%EB%A6%AC

 

[Git] Git 사용법 및 터미널 명령어 정리

pwd Print working directory; 현재 작업 위치 알려줌. ls list files; 현재의 directory의 모든 파일들을 보여줌. cd .. 상위 디렉토리로 이동.cd ~ 사용자의 홈디렉토리(/Users/hannah)로 감.

velog.io

 

 

https://velog.io/@gpwls320/Git-%EC%9A%A9%EC%96%B4-%EB%AA%85%EB%A0%B9%EC%96%B4

 

# Git, GitHub 개념 정리

Git이란? 깃허브의 심장에서 작동되는 소프트웨어인 깃(Git: 재수없고 멍청한 놈, 자식!) 깃은 프로젝트의 어떤 부분도 겹쳐쓰지 않게 프로젝트의 변경을 관리하는 버전 분산 관리 시스템이다. Git

velog.io

 

https://tagilog.tistory.com/377

 

[GITHUB 사용법] 왕초보를 위한 깃허브사용법 (Git사용법)

코딩할 때 뺄래야 뺄 수 없는 서비스 중 하나가 GitHub (깃허브) 입니다. 현역 프로그래머에게는 너무나 친숙한 서비스지만, 코딩 초보자에게는 생소할 수도 있습니다. 그래서 이번에는 코딩 초

tagilog.tistory.com

드림코딩 깃허브 유튜브 강의 : https://www.youtube.com/watch?v=Z9dvM7qgN9s 

 

https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html

 

누구나 쉽게 이해할 수 있는 Git 입문~버전 관리를 완벽하게 이용해보자~ | Backlog

누구나 쉽게 알 수 있는 Git에 입문하신 것을 환영합니다. Git을 사용해 버전 관리를 할 수 있도록 함께 공부해봅시다!

backlog.com

 

지난번 회의 이후로 JWT토큰을 이요한 로그인과 회원가입 서버를 구현하는 것을 각자 공부하고 시도해보기로 했다.

그 후에 각자 어떤 페이지를 맡으면 좋을지 얘기를 나눠보기로 했다.

3일 정도의 시간을 가진 결과 소영님과 민승님이 로그인과 회원가입 서버 구현에 성공하셨다.

 

난 소영님과 민승님이 공유해주신 자료를 봐도 암호화 토큰을 이용한 코드가 잘 이해되지 않았다.

마지막 날 소영님이 팀원들을 위해 게더에서 코드 설명을 하나씩 차근차근해주셨다. (감사합니다 !!ㅜㅜ)

소영님의 노력에도 불구하고 나의 뇌는 그것이 무슨 말인지 이해하지 못했다. (좌절 ㅠㅠ)


일단 더 이상 지체할 수는 없기 때문에 각자 페이지를 맡아서 뼈대를 만들어 오기로 했다.

 

우리는 회의를 통해

  • 랜딩페이지 (현빈님)
  • 로그인 페이지 (소영님)
  • 회원가입 페이지 (민승님)
  • 메인 페이지 (나)
  • 세부 페이지 (미경님)

이렇게 맡아서 뼈대를 만들어 다음날 만나기로 했다.

 

이미 소영님과 민승님은 페이지를 구현하신 거나 다름없기 때문에 추후에 민승님께서 CSS를 좀 더 손봐주시기로 했다.

 

뼈대만 만들어 오긴 할 거지만 통일성을 위해 다음과 같은 기본 규칙을 정했다.

1. 디자인 논의 페이지 전체 색상 : 전체 - 흰색 바탕 느낌 / 버튼 검정색으로

2. 폰트 : Noto Sans Korean 로 통일 굵기로 차이성 두기 

3. 마진 & 패딩 : 천천히 정해 보는 걸로! (나중에 정하는 걸로)

4. 로고 -> 16조 (글씨 조금 특이한 거로 해서 로고처럼)

5. 사이트 이름 : 코딩 라이프 (코라 -> 콜라 -> 흰&빨&검)


내가 맡은 부분 :

 

1. html 

 

일단 기획서에 나와있는 양식과 비슷하게 메인 페이지 화면을 만들어 보았다.

웹 개발 종합반을 들었을 땐 이미 작성된 코드를 사용했기 때문에 모든 게 쉬웠는데, 막상 혼자 페이지를 만드려니

이 간단한 작업조차도 오랜 시간이 걸렸다. 

특히 아이콘 이미지마다 사이즈가 달라서 각각 다른 사이즈를 적용해 주어야 하는 부분이 조금 오래 걸렸다.

아직 투박하긴 하지만, 일단 뼈대는 아래와 같이 완성해 보았다.

 

 

1차 화면단 모습

 

 

 

2. 세부 페이지 이동

다음으로 내가 구현해야 할 부분은 아이콘을 클릭했을 때 그 기술과 관련된 세부 페이지로 이동하는 서버 작업을 해주는 것이었다.

생활코딩 유튜브를 통해 보았던 건데도 막상 하려니 코드가 기억이 나질 않았다. 팀원분들한테 도움을 요청했고, 이미 회원가입 페이지 구현을 마치신 민승님이 힌트를 주셨다. 사실 힌트라기보다 정답을 알려주셨다.

 

페이지 이동을 위해 사용해야 할 코드는 다음과 같다.

자세한 내용은 아래 링크 참조하기! 

 

1. onclick="location.href= 'link'

2. @app.route('/name')

def move_page(): return render_template('name.html')

 

 

 

백엔드 코드
프론트 코드

 

 

https://itun.tistory.com/491

 

[Javascript] 페이지 이동하기, 새창 띄우기 ( location.href, replace ... )

location.replace()와 location.href를 이용해서 페이지를 이동시킬 수 있다. 새 창으로 띄우고 싶을때는 window.open() 함수를 사용해야 한다. replace와 href의 차이는 href는 그대로 페이지 이동을 의미하지만,.

itun.tistory.com

 

 

3. 부트스트랩 그리드로 반응형 웹사이트 만들기

 

화면을 만든 후, Frontend & Backend박스가 화면 페이지가 줄어들면 박스 하나가 아래로 들어가게끔 반응형 웹사이트를 구현하고 싶었다. 아래 유튜브 동영상을 참고하여 부트스트랩 코드를 가져와 구현해 보았다.

 

class="row", class="col" 사용하기

 

https://www.youtube.com/watch?v=3Az_hKsL9L8 

 

 

그리하여 일단 2차적으로 끝내본 메인 페이지 화면!

 

화면 기록 2022-10-30 오전 12.37.38-1.mov
3.95MB

+ Recent posts