티스토리

모양

검색하기

블로그 홈

모양

gwonran.tistory.com/m

긴모양 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

피그마 다시 배우기 001 피그마를 누군가에게 가르쳐줘야 하는 상황이 되었다. 나는 디자인을 전공했으니까 당연하다고 생각한 것들이 당연하게 느껴지지 않았고 내가 피그마를 제대로 활용하지 못하고 있구나!라고 생각하게 되어 작성하게 된 포스팅. 피그마란? 인터넷에서 사용이 가능한 UI 프로토타이핑 툴이다. 내가 피그마를 사용하게 된 이유는 스케치는 돈이 들기 때문, Xd는 한번 사용해봤지만 색감에서도 불편함, export를 하는데도 불편함을 다수 느껴서 2019년 경 사용을 해보았던 것 같다. 피그마를 사용해보며 느낀 장점은 개인이 사용할 경우 비용이 들지않는다는 것 과 팀원들과의 실시간 공유, 여러명이서 수정이 가능, 자동으로 웹에 저장이 된다는 점이다. 디자이너라면 다들 열심히 10초에 한번씩 누를 command + S 아시죠? .. 공감수 0 댓글수 0 2021. 2. 15.
필수 용어 사전 001 ] GNB 디자이너들이 모인 채팅방에서 GNB라는 걸 봤는데, 이게 대체 뭐냐... 해서 찾아본 GNB GNB (Global Navigtion Bar) COFFEE MENU STORE과 같이 사이트에서 지속적으로 보여지는 공통 네비게이션 웹 사이트 내의 현재위치와 이동한 경로를 모아 놓은 영역 웹 사이트에서 사용자가 얻는 경험과 가장 밀접하며, 내부에는 타이틀, 드롭다운 방식, 버튼, 검색바, 링크등이 포함이 된다. 사용자가 방문 할 다른 장소들을 한 눈에 보여준다. 사용자 인터페이스 아키텍처에서 가장 상위에 위치하고 있어 현재 위치와 관계 없이 응용 프로그램이나 웹사이트의 어느곳으로든 일관된 이동수단을 제공해 다른 모든 페이지에서 동일하게 나타난다. 또한 대부분의 사용자가 최상위 탐색 모음을 보고 상호작용도 문제.. 공감수 0 댓글수 0 2021. 2. 5.
개발이 아닌 디자인 포트폴리오 만들기 자의인지 타의인지 꾸준히 개발을 공부하다가 틈틈히 미루고 미루던 디자인 포트폴리오를 만들고 있다. 학생 때의 포트폴리오는 인디자인으로 작업을 했었지만, 이번엔 피그마로 포트폴리오 작업을 해보고 있다. 우선 다른 사람들이 어떤 식으로 만드는지 자료를 찾아보았고 내가 뭘 하지 않아야하는지 어떤 정보를 더 표현하고 첨부하는 것이 좋은지 감을 익혔다. 그 뒤에 나를 브랜딩할 수 있는 키워드를 객관화 하면서 잡고 ( 이 부분은 주변에서 얘기해주는 것들을 평소에 정리해와서 그런지 그리 어렵지 않았다. ) 나의 작업물 중 몇개의 프로젝트와 어떤 프로젝트가 들어갈 것인가 우선순위를 정해야했다 그런식으로 작업한 과정들! 업무도 하면서 작업하고 있기도 하고 급하게 만들면 분명 제대로 판단이 안 설 것이라고 느껴서 천천히 .. 공감수 0 댓글수 0 2021. 1. 28.
IOS dismiss 뷰 컨트롤러에서 모달로 표시한 뷰 컨트롤러를 닫을 때 사용하는 것. @IBAction func closeButtonTapped(_ sender: UIButton) { dismiss(animated: true completion: nil) } Apple Developer Documentation developer.apple.com iOS Lifecycle When Dismissing a Modal View With .pageSheet in iOS 13 Two key points in the behavior of the new modal view when it is dismissed medium.com Pushing, Popping, Presenting, & Dismissing ViewControllers .. 공감수 0 댓글수 0 2021. 1. 21.
Swift] privacy-sensitive data 해결하는 법 This app has usage desctiption. The app's Info.plist must contain an NSCameraUsageDescription key with a string value explaning to the user how the app uses this data. 이런 에러가 떴다. 바로 구글링에 착수했다. [iOS tip] Privacy-sensitive 에러 메시지 iCloudKit에 관한 예제를 작성한 후 실행하다가 다음과 같은 런타임 에러가 발생했다. This app has cra... blog.naver.com 해당 페이지를 찾았고 이대로 따라해봤지만 똑같은 에러가 발생했다. 위 블로그에서 설명했겠지만, 카메라를 써야하는 상황이라면 '접근허용 권한' 과 관련된.. 공감수 0 댓글수 0 2021. 1. 15.
Xcode에서의 리팩터링, 리네임 (Rename or refactor in Xcode) Swift 프로젝트를 만들면 기본으로 주어지는 ViewController를 보게 될 것이다. 만약 이 클래스의 이름을 변경하고 싶거나, 이미 다양한 곳에서 ViewController를 많이 사용해버렸다면 일일이 파일을 뒤적여가며 수정해야한다. 시간을 아낄 수 있는 방법을 찾아보자. 파일 이름을 변경할 때 프로젝트에 가장 안전한 방법은 Refactor을 사용해서 클래스 이름을 Refactor해주는 것이 좋다. 이 방법은 파일이나 클래스를 참조하는 모든 곳에 코드가 업데이트 된다. 지금은 이해가 되지 않겠지만 단계를 따라오면 쉽게 할 수 있다. Step.1 내가 원하는 클래스의 이름을 더블 클릭해준다. Step.2 클래스 이름을 선택했다면 (마우스 기준)오른쪽 클릭을 해준다. 탭이 나타나는데 Refactor.. 공감수 1 댓글수 0 2021. 1. 10.
swift 문자 숫자 전환하기 늘 검색해보고 뭐지?뭐지?! 하던 내 모습을 보고... 복기겸 포스팅을 작성한다. 내가 바꾸고자 하는 변수를 괄호()로 감싸준 다음 괄호 앞에 Int나 String을 붙여준다. 문자열로 변경 String(변수명) 숫자로 변경 Int(변수명) Q. Optional는 무엇인가요? - 문자열이 숫자로 변환이 안 되었을 때 nil값이 들어갈 수도 있기 때문이다. let abc = "123abc" let abcInt = Int(abc) print(type(of: abcInt)) //Optional 공감수 0 댓글수 0 2020. 12. 30.
firebase 사용자 재인증 (수정필요) firebase를 DB로 사용하고 있다면 로마에선 로마의 법을 따라야하듯. 비밀번호 변경을 할 때도, 회원탈퇴를 할 때 필요하다. 사용자 재인증은 사용자가 로그인을 해 앱에 진입한 후 오랜 시간이 흘렀다면 오류가 발생해 위와 같은 작업을 할 수 없으므로 firebase의 사용자 재인증을 해줘야한다. 로그인을 하고 앱을 오래 켜는 경우에는 보안에 민감한 작업을 할 때 경고를 주기에 구글이나 페북은 미리 협의해서 에러를 띄우도록 되어있는 것 같다. 아래는 firebase에서 기본적으로 제공하는 코드인데 (사실 어지간해서 firebase 코드 그대로 쓰면 문제없다.) 하지만 자꾸 AuthCredential를 불러오지 못해서 답답해 하던차 답을 찾았다. let user = Auth.auth().currentUs.. 공감수 0 댓글수 0 2020. 12. 28.
SDK와 API의 차이점은 무엇일까? 추가로 라이브러리와 프레임워크 API란? - Application Program, Interface api에 대해서 두가지 방향으로 얘기를 해보겠다. 첫번째는 정말 큰 범위에서의 api, 두번째는 써볼법한 api api는 어플리케이션(코드를 통해 돌아가는 프로그램 덩어리) 프로그래밍이다. 옛날에는 하나만 있어도 괜찮았지만 다른 프로그램을 불러야 하는 경우가 생기면서 방법을 고민하다 인터페이스라는 것을 만들게 된다. 인터페이스를 통해서 정보를 전달하고 (실제로는 굉장히 광범위 한데, 윈도우에서 파일을 더블 클릭하면 파일이 열리는 것도 이벤트가 발생해 운영체제를 통해 제공하는 api. 프로그램이 있고 인터페이스를 만들어둔다. 한개의 프로그램 안에 여래개의 인터페이스가 존재 할 수 있다. = 여러개를 둘 수 있다. 이렇게 누르면 이렇게 줘.. 공감수 4 댓글수 0 2020. 12. 21.
장 미쉘 바스키아 전시 관람 후 상황을 잊지 않아보려고 정리겸 작성, 언뜻 봐도 어두운 느낌이 강했고 개인적으로는 DDP보다 롯데뮤지엄 전시를 좋아한다. 영화도 티저는 잘 안보고 가고 전시, 영화 장르 불문하고 그냥 대뜸 가는 편. 전시에서 느꼈던 아쉬웠던 점은 너무 평면적인 느낌이 강했다. 오디오 가이드는 나랑 맞지않다. 이 전시를 통해 바스키아라는 사람을 처음 알게 되었고, 작품도 처음 봤는데 이 사람에 관한 영상을 보면서 자꾸 이런 생각이 들었다. ' 안타깝다. 마음이 아프다. 본인이 원하던 것을 이루었지만 정말 이룬게 맞을까? 옆에 정말 좋은 사람들이 있었다면 더 좋았을텐데 ' 와 같은 생각이 자꾸 내 마음으로 들어왔다. 마침 딱 영화관에서 상영하고 있지만.. 아쉽다 공감수 0 댓글수 0 2020. 12. 16.
data structures 내가 스택과 큐를 이해하고자 한 이유는 컴퓨터의 동작원리를 본 뒤에 다른 것을 보고 그것을 이해하려면 data structures를 배워야 할 것 같아서! 컴퓨터의 동작원리는 내용이 너무너무 많아서 조금 더 정리를 한 뒤에 포스팅을 하려고 한다. Stack(스택)과 Queue(큐)는 가장 기본적인 개념이다. 추가로 Heap(힙)에 대해서 알아보자! 👋 이 포스팅은 복습하려고 쓰는 것이기에 개념을 다지기엔 괜찮을지 몰라도, 더 깊은 내용을 알기에 적합하지 않는 포스팅 입니다! Stack 스택의 특징을 우선적으로 들어보자면 메모리 크기가 정해져있다 (정적이다.) 추가는 ⭕️, 메모리가 줄어들진 않는다. 입구와 출구가 나눠져있지 않다. 메모리 부족 할 수도 int, boolean, double '쌓는다'의 의.. 공감수 0 댓글수 0 2020. 7. 10.
laka project3 for in & concat & localStorage & toLocaleString & fetch 주소 & 수량과 합계 20.06.02 for in & concat for in 객체의 프로퍼티명을 열거하는 반복문 for문과 동일하지만 for문보다 간단하게 작성이 가능하다. const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] for(let i=0; arr.length>i; i++){ console.log(i) } for(let i in arr) { console.log(i) } //console.log의 결과값은 동일하다. javascript for in 문 Concat 기존의 배열에 내가 추가하고 싶은 값을 추가해서 리턴해주는 method const arr = [1, 2, 3, 4, 5] const newArr = arr.concat(['일', '이', '삼', '사', '오']) console.. 공감수 0 댓글수 0 2020. 6. 28.
laka project2 삼항연산자 & overflow-y & checkBox & warningM & password regex & callback in EventListener 20.05.28 스크롤 박스 & 삼항연자 BE에서는 하나의 기능을 하는게 앱이라고 한다. 스크롤 박스 overflow-y : y축에 대항하는 스크롤 바, 내부의 content가 박스를 넘지않으면, 스크롤바가 없고 박스를 넘으면, 스크롤 바가 생김. .productWish{ min-width: 360px; max-width: 360px; height: 110px; overflow-y: auto; 삼항연산자 display속성이 cup(조건식)인데 이것이 true(?)라면 'block'으로 false(:)라면 'none style={{ display: cup ? 'block' : 'none' }}> style={{this.state.hello ? {{display: 'block'}} : {{display: '.. 공감수 0 댓글수 0 2020. 6. 25.
laka project1 PR & git pull merge | state의 특성 비동기 & ... spread operator & Input name 20.05.25 React 초기세팅 PR & git pull merge table을 이용해서 Sign Up page를 만들어보았다. 라카는 어떻게 만들었는지 궁금해서 개발자 도구를 사용해서 코드를 보았는데 table tag를 사용해서 만들었어서 table tag 손에 익혀둬도 나쁘진 않을 듯해서 나도 써봤다. git branch git branch는 새로운 작업 마다 가지를 만들어주는 것이 좋다. git branch feature/branchName git master pull 과 merge MacBookPro:rocka-frontend $ git pull origin master remote: Enumerating objects: 33, done. remote: Counting objects: 100%.. 공감수 0 댓글수 0 2020. 6. 8.
Code Kata#2 첫번째 문제 : JS를 통해 로마자를 숫자로 바꾸는 법 function romanToNum(s) { const Roma = {"I":1, "V":5, "X":10, "L":50, "C":100, "D":500, "M":1000} let num = 0; //Number형을 담을 것 for (let i=0; i 공감수 0 댓글수 0 2020. 6. 4.
데이터 베이스 데이터 베이스는? 데이터를 저장하는 시스템, 왜 사용할까? 데이터를 저장하고 연산하고 보존하기 위해서 사용 ↔ 메모리 휘발성이다. 하지만, 메모리는 속도가 높다. 저장한 데이터베이스에 저장을 하고 메모리에서 가공처리 파일말고 데이터베이스를 쓰는 이유는 접근과 관리가 편하다. RDBMS, 노시컬 상호연관성 기본 개념. 모든 데이터들은 table로 구성된다. (column(행), row(실제 값 - 고유키가 존재한다.)) 관계형 데이터 베이스 = 엑셀같은 데이터 구조 One to One관계로 한명의 유저는 하나의 프로파일 아이디만 가질 수 있다. One to Many관계는 1대 다, 하나의 정보를 여러개의 데이터가 연결관계를 지을 수 있다. 해당 예시는 고객이 여러번의 주문을 할 수 있듯, 주문에 여러개가 .. 공감수 0 댓글수 0 2020. 6. 3.
React Basic React 쉽게 돔에 접근하고 쉽게 조작하기 위해서 만들어진 라이브러리로 오로지 view(보여지는 것들)만 담당한다. Vue와 앵귤러(MVC)는 보여지는 것 외에도 데이터 까지 관리를 한다. 생태계가 활성화 되어있다. 복잡한 규모의 애플리케이션을 조금 더 효율적으로 관리할 수 있는 JS라이브러리. CRA : Create React App //CRA 명령어 cd 내가 원하는 디렉토리로 이동해서 npx creat-react-app projectName //CRA설치 CRA를 설치하기 이전에 뭐가 설치해 있어야하지? node랑 npm(node pacage manager)이 왜 필요해? :: JSX는 브라우저에서 읽을 수 없기에 node기반 패키지를 통해 브라우저가 읽을 수 있는 JS파일로 변환. react-f.. 공감수 0 댓글수 0 2020. 6. 1.
react#5 API를 array.map을 사용한 table Bootstrap react-boostrap은 프론트엔드 스타일 시트 라이브러리이다. react.js에서 부트스트랩을 사용시 react-bootstrap을 사용한다. react-bootstrap이 react.js프로젝트에서 모든 부트 스트랩 기능을 제공한다. bootstrap install in terminal cd myProjectFile npm istall react-bootstrap index.js에 import bootstrap import "bootstrap/dist/css/bootstrap.css"; Tables Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugi.. 공감수 0 댓글수 0 2020. 5. 29.
리액트#4 input.value받아서 로그인 버튼 이벤트 위의 이미지는 제가 만든 페이지입니다. 무슨일이 발생했죠? id, pw input box안에 value값을 넣어주니 버튼 색상이 변했죠. 우리는 이 기술을 만들어보도록 합시다! (이 포스팅에는 html과 css부터 다루지 않고 기존의 제 코드를 가지고 react로 동작하는 모습을 알려드립니다.) class Login extends Component { //Login Component를 만들어준다. constructor() { //constructor을 사용하면 super(); //항상 super()를 부를 것 super()가 불리지 않으면 this가 초기화 되지 않는다. this.state = { object인 state를 id, pw, 버튼 색상을 변경해주기 위해서 세팅해준다. id: "", //처음에.. 공감수 1 댓글수 0 2020. 5. 27.
리액트#3 복습 #1과 경로 router react MVC(Model(무엇) View(보여줘) Controller(어떻게 -로직처리))에서 vue만 다룬다. CRA(node npm가 설치가 되어있어야 한다. node가 브라우저 환경에서만 쓸 수 있는 기타 환경에서 돌아가는 것, refresh를 안해도 된다. 기본세팅을 이루는 것이 Node기반이다. 노드패키지 매니저 CRA는 노드 모듈에 있다.) Component JSX : HTML문법을 JS파일에 작성할 수 있도록 하는 것. SASS state Event props react router class 내부에서 return()시 최상위 요소 하나를 만들어줘야할 때 대신에 를 사용해줘도 된다. 하지만 는 Component이름과 동일하게 className을 주는 것이 가장 좋은 방법이다. 컴포넌트 이.. 공감수 0 댓글수 0 2020. 5. 25.
HTTP HTTP(Hyper Transfer Protocol) 하이퍼 텍스트(HTML같은 파일)를 통신(문서 교환)을 하기 위한 규약으로 내가 한국말을 한다고 다른 나라언어를 사용하는 사람들이 알아듣지 않는다. 한국어를 전달하는 것은 목소리인데 목소리와 같은 매개체를 네트워크라고 합니다. HTTP규약에 맞춰진 텍스트를 주고 받는다. 다른 프로토콜도 존재한다. 그 외에는 FTP(파일을 전송하는 프로토콜) HTTP는 사람이 만든 것이니 원하면 만들 수 있습니다. 두 서버간끼리(프로토콜끼리) 통신을 하기 위해 필요한 것은? 송신자 수신자가 필요하고, 무엇을 보내고 싶은지(내용), 왜 보내는지 의도가 필요합니다. = 응답을 받을 때는 Packet(패킷)이라는 것에 실어서 보내게 된다. 패킷은 헤더와 바디로 이뤄져있는데,.. 공감수 0 댓글수 0 2020. 5. 20.
리액트#2 HTML로 만들었던 인스타그램을 리액트로! 위의 이미지는 HTML, CSS, JS를 사용해서 만들었던 인스타그램 클론, 리액트와 첫 인사를 해서 리액트로 코드를 옮기는 작업을 했다. 결코 순탄치 않은 작업이었지만 내가 뭐가 부족한지 어떤 부분을 더 알고싶은지 알게됐던 것 같다. 리액트로 만들어본 인스타 클론, 리액트에 두려움이 엄청 컸는데 간단하게 해보니 그래도 재밌게 한 것 같은 기분? 처음에 들어가기 전에 혼자 트리구조로 component를 어떻게 만들어야할지 고민을 하고 구체화 되고나서 들어갔다. 지금은 반복되는 걸 위주로 component를 만들기 보다는 내가 작성했던 HTML을 큰 단위로 나누는데 중점을 두었다. html 태그를 react에서 이미지 불러와서 사용하는 방법 import Img from "./img/route"; html코.. 공감수 0 댓글수 0 2020. 5. 19.
POST Man 로컬호스트 주소 같이 중요한 것들 모자이크 해주기 어플리케이션을 열고 Collections 카테고리에서 + New Collection을 만들어준다. 파일을 만들고 파일에서 오른쪽 클릭을 하면 Add Request를 클릭해준 뒤 폴더 안의 Request를 생성해준다. 내가 접속해야하는 서버주소를 입력 (서버주소/api) 값을 받아와야하니까 Get method를 사용해서 불러준다. 만약 로그인을 하기위해서 값을 넣고 POST를 하고자 한다면 상단 카테고리 Body에서 raw를 체크하고 Text를 JSON으로 변경해준다. 내가 원하는 데이터가 있는 페이지로 이동하기 (3세대 프론트와 백엔드가 다른 포지션에서 데이터를 다루고 있으니까 2세대는 터미널에서 함께 다룬다. 다른 페이지로 이동하기 위해서 쿼리스트링을 .. 공감수 0 댓글수 0 2020. 5. 18.
리액트#1 안녕 리액트 what is JSX JS에서 사용하는 것이지만, HTML처럼 생겼다. JS파일안에 있지만 JS는 아니다. 만드는 내용들은 전부 다 브라우저에서 보이는 내용이다. render() return을 하는 것으로 무엇을 return할까? JSX(화면에 보여지는 것)를 리턴한다. LifeCycle render의 생명주기다. 무엇이 먼저 불리고 뭐가 먼저 불리는지 순서라는 것이 있다. 조금 복잡한 순서로 불리면서 화면의 변화가 생기는 것이다. constructor / render / componentdidmount - render : 마운트나 나오기 전의 시점으로 JSX를 부르는 상황 말 그대로 결국에 마지막으로 매무새를 단장하고 화면에 보여주기 위한 준비를 하는 것이고 return을 하는게 화면에 보여지는 것들 .. 공감수 0 댓글수 0 2020. 5. 15.
자료 구조의 Array와 Tuple 자료구조 == 비단순 구조 none-primitive Data Structure 상황과 문맥에 맞게 데이터를 담을 수 있는 적절한 자료 구조로, 데이터에 편리하게 접근하고 조작하기 위한 데이터를 저장하거나 조직하는 것. 데이터에 맞는 적절한 자료 구조를 사용하는 것이 전체 개발 시스템에 큰 영향을 끼친다. Array Tuple set Dictionary stack&Queue Tree Array [] 가장 기초적이면서도 단순한 자료 구조로 가장 자주 사용된다. 특징 순차적으로 데이터를 저장하는 것 순서에 상관없이, 서로 연결된 데이터들을 순차적으로 저장시 사용 넣는 순서대로 저장이 된다. 생성된 리스트의 수정이 가능하다. 동일값 여러번 삽입 가능. 다중차원 배열(Multi-dimentional Array).. 공감수 0 댓글수 0 2020. 5. 13.
웹은 어떻게 작동할까? 네트워크 OSI 7계층 모델 OSI의 7계층 OSI계층은 OSI참조 모델이다. 예전의 네트워크 장치들은 각기 다른 형태를 가지고 있었는데, 이는 네트워크 장치들의 통신규격이 다르기에 환완성이 결여되었고 서로 통신할 수가 없었다. 그래서 제시된 OSI참조 모델을 참고해서, 통신장치를 동일하게 만들게 된다. = 각 부품별로의 모듈화 => 용이하며 유지관리가 좋다. OSI 7계층 모델은 네트워크에서 통신이 일어나는 과정을 데이터의 흐름을 파악하기 쉽게 단계별로 계층을 7단계로 나눈 것(독립적일 수 있는 모듈화)을 말하며 나누는 이유는 한개의 제품이 있다고 가정해보자 위의 이미지 경우에 부품들이 하나하나 층이 나눠져 하나의 제품으로 탄생된다. 만약 이 부품들 중 한군데에서 문제가 발생했다면? 제품을 다 뜯어내고 하나하나 다시 만들어야하지만.. 공감수 0 댓글수 0 2020. 5. 12.
Scope scope란? 어떤 변수들에 접근 할 수 있는지 범위를 정의하는 것으로 변수가 영향을 미치는 범위를 말하며 global scope, local scope가 존재한다. Global Scope 변수가 함수 바깥이나 중괄호 바깥에 선언되었다면 전역스코프이다. global scope를 전역스코프라고 한다. 변수 선언시 모든 곳에서 사용이 가능하지만 변수 이름이 충돌하는 경우가 발생하는 것에 유의해야한다. 전역변수는 만들지 않을수록 좋다. 그럼 어떤 변수를 써야하는걸까? Local Scope local scope는 지역스코프로 제한된 공간 {} 중괄호 내에서만 사용이 가능한 변수이다. 제한된 공간은 두가지로 나눌 수 있는데 함수 스코프와 블록 스코프가 존재한다. 함수 스코프와 블록 스코프는 동일한 느낌을 받는데(.. 공감수 0 댓글수 0 2020. 5. 11.
웹이 작동하는 방법 내가 다룰 내용은 호스팅, ip주소, url, 도메인이란 무엇이고 웹이 어떻게 작동하는지 설명하고자 한다. 웹의 작동 방법 : 자세하게 들어가기 전에 이해를 돕기위해 (내가 더 잘 이해하기 위해) 간략하게 써보도록 노력하자면, 만약 이 글을 보고 있는 당신이 chrome 브라우저를 사용하고 있다. 이 브라우저에서 tistory라는 페이지에 접속하기 위해서 당신은 브라우저 상단의 검색창에 https://www.tistory.com/ 이라는 주소를 입력할 것(http통신)이다. 브라우저에서 이 주소를 tistory서버로 요청을 하고 서버에서 tistory에 대한 파일들을 응답 받게 되면서 콘텐츠들이 브라우저에 뿌려지게된다. 그럼 여기서 궁금증?! 서버의 파일들을 어떻게 받아오는 것일까? 여기서 호스팅(Hos.. 공감수 0 댓글수 0 2020. 5. 9.
20.04.27 - 05.01 :: 2주 동안 공부했던 것들이나 부족한 점을 정리하는 포스팅 논리연산자 논리연산자에는 &&(그리고) ||(또는)이 존재하는데 추가로 !(아닌)이라는 뜻을 가진 연산자가 존재한다. !는 참이면 false로 거짓이면 true로 바꿔준다. array arrayJoin 배열의 모든 요소들을 연결해주는 역할을 해서 하나의 문자열로 만들어준다. const arr = ['my', 'phone', 'is', 'where', '?'] console.log(arr.join('')) //'my phone is where ?' display flex flex-direction : 컨테이너 내의 아이템을 배치시 사용 할 주축과 방향을 지정한다. flex-flow : 기본 축과 교차 축을 함께 정의 가능하다. 요소가 유연한 항목의 경우에만 flex-flow속성이 적용된다. (flex-di.. 공감수 0 댓글수 0 2020. 5. 5.
array methods array methods array-method 참고사이트 array-method map과 forEach array.map() : return value가 있고 함수의 결과값들로 구성된 새로운 배열 array.forEach() : return value가 undefined 인자 : 첫번째 인자는 배열 원소의 값, 두번째 인자는 인덱스, 세번째는 배열 그 자체 기본적으로 forEach와 map은 첫번째 전달인자로 함수를 받는다. 배열의 각 항목에 대한 콜백함수의 시간을 실행한다. 둘의 명확한 차이라고 하면 return이 있는가 없는가이다. array.map() : 매서드의 return값은 수정된 값으로 다시 생성된 배열, 변환된 배열을 반환하고 원래 배열은 변경하지 않는다. const originalArr.. 공감수 0 댓글수 0 2020. 5. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.