공부27 2021.07.01 2021.07.01 오늘은 스코프와 클로저에 대해 배웠다. 스코프는 이미 알고 있어서 다시 복습하는 느낌으로 공부를 했는데, 클로저는 처음 들어보는 개념이었다. 이해는 했지만 사용해보라고 한다면 못할 거 같다. 블로그에 내용을 좀 정리해 두었으니 생각날 때마다 찾아봐야 할 거 같다. 클로저에 대한 더 깊은 내용은 아직까진 과한거 같아 이해만 하는 것으로 만족한다. 현재 Instaclone의 진행 상황은 검색 기능과 업로드 기능을 구현하였다. Apollo Graphql을 사용하여 업로드를 하는데 뭔가 자꾸 에러가 나서 한참을 헤멨다. 결국엔 고쳤지만, 또 다시 찾아볼 수 있게 내용을 정리해야 할 거 같다. 검색 인스타그램처럼 검색어를 입력하면 실시간으로 서버와 통신해 유저 이름을 검색하여 보여준다. 링크를.. 2021. 7. 2. 클로저 함수 클로저 함수 함수를 리턴하는 함수로써, 외부 함수와 내부 함수로 구분할 때 내부 함수를 클로저 함수라 합니다. 클로저는 리턴하는 함수에 의해 Scope가 구분되며, 클로저의 핵심은 Scope를 이용해서 접근 범위를 닫아 캡슐화 하는데 있습니다. 선언하는 방법 화살표 함수 const add = a => b =>{ return a+b; } 일반적인 함수 const add = function(a){ //외부 함수 return function(b){ return a+b; } //내부 함수 } 두 함수는 똑같은 역할을 하는 클로저 함수입니다. 외부 함수에서는 내부 함수의 변수 b에 접근할 수 없지만, 내부 함수에서는 외부 함수의 변수 a에 접근할 수 있습니다. 클로저 함수를 사용하는 이유 일반적인 함수는 함수 실.. 2021. 7. 1. 웹 화면 설계하기 순서 와이어프레임(Wireframe) HTML로 구조 잡기 ID 및 Class 목적에 맞게 사용하기 목업(Mock-Up) 와이어프레임(Wireframe) 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임(Wireframe) 이라고 합니다. 선이나 도형으로 인터페이스를 시각화한 것으로 아주 단순하게 구조를 잡을 때 사용합니다. 와이어프레임의 가장 큰 목적은 화면의 영역을 구분하기 위함으로써, 각 영역에서 그 용도에 맞는 Tag를 사용할 수 있도록 함께 작성하는 것이 좋습니다. HTML로 구조 잡기 와이어프레임이 뼈대를 그리는 단계였다면, 이번 단계는 실제로 뼈대를 만드는 단계라 할 수 있습니다. 앞서 작성한 와이어프레임을 참고하여 큰 부분에서 작은 부분까지 차근차근 tag를 작성해 나갑.. 2021. 6. 30. 2021.06.29 2021.06.29 어제와 마찬가지로 오늘 하루도 페어와 함께 코플릿 객체 문제를 풀었다. 아직까진 크게 막히는 부분 없이 잘 풀렸다. 하지만 문제를 푸는데 시간이 점점 걸리는게 느껴진다. 문제를 풀면서 몰랐던 걸 두가지 배웠다. 첫번째는 Object.entries이다. 전에는 이 메소드를 몰라 Object.keys를 이용하여 key, value에 접근했었는데 새로운 방법을 알게됬다. 두번째는 반복문에서 사용할 수 있는 continue이다. 반복문 안에서 조건을 확인할 때 사용할 수 있으며, 조건에 따라 진행중인 반복을 건너뛰고 다음번으로 넘어가 반복문을 실행할 수 있다. break와 살짝 유사한데, break는 해당하는 반복을 멈추지만, continue는 이어서 진행한다는 차이점이 있다. 개인 학습 시.. 2021. 6. 29. 객체(Object) 객체(Object) 객체는 데이터와 함수의 집합입니다. 이런 객체가 왜 필요하냐면, 하나의 공통된 묶음으로 여러 데이터를 저장하기 위함입니다. 비교 일반적인 변수로 선언할 경우의 예시입니다. const personName = "Park"; const personAge = 27; const personAddr = "Incheon"; 다음은 배열에서의 예시입니다. const person = ["Park",27,"Incheon"]; const person2 = ["Hyun",22,"Incheon"]; 이제 객체에서의 예시를 보겠습니다. 객체는 key:value의 형태로 선언합니다. const person = { name:"Park", age:27, addr:"Incheon", }; 배열이 더 쓰기 좋은게 아닌.. 2021. 6. 29. 배열(Array) 배열(Array) 변수의 종류중 하나로, 배열에는 다양한 값을 저장할 수 있다. 배열의 특징 const animals = ["rabbit","turtle","giraffe"]; [] 안에 값을 넣어 선언을 할 수 있으며, console.log(animals[0]); animals[0] [] 안에 인덱스를 넣어 해당 부분에 접근할 수 있다. // rabbit 배열은 참조 값을 저장하기 때문에 다음과 같이 얕은 복사로 할당할 경우에 animals2의 값을 바꾸면 animals의 값도 바뀌는 문제가 생길 수 있다. const animals2 = animals; animals2[0] = "cat"; console.log(animals); // ["cat", "turtle", "giraffe"] console.l.. 2021. 6. 28. 2021.06.28 2021.06.28 오늘은 하루종일 pair와 함께 배열 코플릿 문제를 푸는 날이었다. JavaScript를 배우긴 했지만, 알고리즘 문제를 따로 풀어보진 않았어서 문제를 해결해 나가는 법을 어느정도 배웠다. 아직 배열까지 진도를 나간 상황이기도 하고, 또 혼자 해결 하는게 아니고 같이 문제를 풀어 나가니 아직까진 난도가 그렇게 높지 않은거 같다. 코플릿 문제를 다 해결하고도 시간이 많이 남았지만, 과정을 진행하다보면 점점 어려워 지지 않을까 생각한다. 남는 시간엔 InstaClone을 마저 만들기 시작했다. 물론 그저 따라하는 거긴 하지만 그래도 전체적인 그림이 그려지는 거 같아 도움이 많이 된다. 오늘 구현한 것은 코멘트를 수정할 때 해당 위치에서 수정할 수 있도록 만들었다. 내일은 이어서 프로필 페.. 2021. 6. 28. Node.js Node.js node.js는 JavaScript 런타임으로, node.js를 이용하여 JavaScript가 브라우저가 아닌곳에서 실행될 수 있게 되었습니다. node.js의 등장 이후, JavaScript를 이용해서 웹 페이지 뿐만 아니라 서버와 같은 다른 프로그램을 만들 수 있게 되었습니다. 설치 링크 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org NPM(Node Package Manager) node.js의 패키지를 관리할 수 있는 프로그램입니다. npm을 사용하여 다양한 모듈을 설치하고, 사용할 수 있습니다.node.js를 설치하면 자동으로.. 2021. 6. 28. 2021.06.24 2021.06.24 오늘은 버전 관리 시스템인 Git에 대해 배웠다. 제대로 배운적이 없고, 주로 혼자 개발 하다보니 활용할 줄은 모르고 기계처럼 그저 git init, add, commit, push만 반복해 repository에 올리기만 했던 나에겐 굉장히 이로운 과정이었다. 다양한 명령어들도 알게 됬고, Git의 영역, 상태를 이해했으며, Github를 이용한 전체적인 workflow가 머릿속으로 그려지는 거 같다. 남는 시간에는 인스타그램 로그인 페이지 클론코딩하는 시간을 가졌다. 2021. 6. 24. Linux 기본 명령어 Linux 기본 명령어 pwd: 현재 위치를 확인 mkdir: 새로운 폴더를 생성 ls: 폴더나 파일의 목록을 출력 nautilus (Ubuntu), open (macOS): 현재 폴더를 파일 탐색기로 연다 cd: 폴더에 진입 touch: 새로운 파일을 생성 cat: 파일의 내용을 터미널에 출력 rm: 폴더나 파일을 삭제 rm -rf : 옵션 r은 폴더를 지울 때 사용, 옵션 f는 질문을 받지 않고 지울 때 사용 mv: 폴더나 파일의 위치를 이동하거나, 이름을 변경 cp: 폴더나 파일을 복사 do: 관리자 권한을 이해할 수 있다. ls -l : 폴더나 파일의 포맷을 전부 표현, 하나의 파일 또는 하나의 폴더는 한 줄에 출력 drwxr-xr-x 에서 d는 폴더, -은 파일, ls -a : 숨어있는 폴더나 .. 2021. 6. 23. 이전 1 2 3 다음
