본문 바로가기

분류 전체보기364

[React] JSX Attributes 사용하기 JSX Attributes class를 --> className 으로 사용하기 html 태그에서 css로 효과 주고자 할 때 class를 사용해서 class ="header" 를 썼다. 하지만 jsx는 자바스크립트 문법이므로 className을 써줘야 한다. 캐멀 케이스를 사용한다. classname(x) className(o) html에서 type을 JS -> JSX로 설정으로 바꿔주기 JSX 내용을 이렇게 작성한 경우 className으로 바꿔도 Unexpected token이라는 에러는 뜬다 이 말은 지금 자바스크리트 파일에서 이런 기호를 쓸 일이 없는데 html 태그가 왜 있냐는 것이다. 이 에러를 없애주기 위해 index.html에서 여전히 text 파일이지만, js가 아닌 jsx로 바.. 2022. 2. 14.
[React] { }사용법 | JS expressions in JSX & ES6 Template Literals JSX 문법 형태 앞 포스트에서 말했 듯 자바스크립트 안에 html 문법이 들어갈 수 있도록 하는 것이 JSX 파일이고 React 모듈을 불러와 자바스크립트 안에 있는 html 문법을 찾아내 자바스크립트 문법으로 바꾸는 일을 한다. 또 자바스크립트 안에 있는 html 안에 있는 자바스크립트 문법을 읽는 역할도 한다. JS > html > JS 이 들어가 있는 형태. 예를 들면 다음과 같다. HTML 문법 안에 JS 문법 들어가는 예 1. Hello World 를 프린트 해보자. 2. 변수로 바꿔 { } 사용하기 여기서 Hello Jack으로 말하고 싶다면 변수명을 중괄호로 묶으면 된다. html 문법 안에 자바스크립트 문법이 들어가 있는 상황이다. 3. { } 안 직접 계산도 가능 4. 인풋을 받아서 브.. 2022. 2. 13.
[React] JSX | Babel | codeSandbox 사용법 React를 사용할 때는 JSX 문법을 사용한다. JSX 문법 React에서 사용하는 언어이다. 지금까지는 HTML, CSS, JS를 각자 파일에서 따로 코딩하였지만 JSX는 모두 모아 코딩할 수 있다. 자바스크립트는 웹사이트에 기능을 추가하는 scripting 언어이다. codesandbox 사이트 브라우저에 바로 확인하면서 볼 수 있게 codesandbox을 사용해서 코드를 작성해보자. 간단하게 리액트를 시작할 수 있다. https://codesandbox.io/s/introduction-to-jsx-forked-sdjb1?file=/src/index.js 1. 메뉴바에서 Fork를 눌러 깃허브와 연결한다. 또는 프로젝트 새로 만들어 html 내용을 위 처럼 채운다. git forking: 깃허브에.. 2022. 2. 12.
[React] 리액트 탄생 배경 | 웹앱 | 리액트 컨셉 4가지 리액트는 2013년에 처음 생겼다. 그 전엔 html, css, js로 UI를 만들었다. 그리곤 이 언어들이 서버와 연결이 되었다. 하지만 Fire Fox, IE, Chrome, Safari 많은 브라우저들이 있는데 각 브라우저마다 다른 자바스크립트 코드를 짰어야 했다. 그래서 제이쿼리가 나오게 된다. 쉽게 document object model을 이용해 이 모든 브라우저를 사용할 수 있게 되었다. dom은 화면 오른쪽 클릭해서 inspect--> Elements를 보면 나오는 html 태그들이 dom이다. 자바스크립트는 이 element를 업데이트나 삭제하는 등 modify 할 수 있게 되었다. jQuery -> Backbone.js 라이브러리들이 점점 커지면서 자바스크립트 파일을 정리할 수 있는 백본.. 2022. 2. 11.
프리랜서 잡 | 해외 사이트 1. 포트폴리오 만들기 2. 날 신뢰해 주는 클라이언트 리스트 만들기 3. 실제 프로젝트로 실제 사람들과 협업하기 4. 처음부터 돈 잘 받으려하지 말고 포트폴리오 만든다고 생각하고 돈 못받아도 시작하기 5. 사이트 Fiverr Upwork Guru Freelancer oDesk 2022. 2. 11.
[Authentication] Level 5 Passport.js 이용해 Cookies, Sessions 설치 | serialize, deserialize 란? Passport를 이용해서 쿠키와 세션 심는 법에 대해 알아보자. 1. npm으로 다운받기 npm install passport passport-local passport-local-mongoose express-session passport https://www.npmjs.com/package/passport passport-local https://www.npmjs.com/package/passport-local passport-local-mongoose https://www.npmjs.com/package/passport-local-mongoose express-session (express-sessions 아님) https://www.npmjs.com/package/express-session 기.. 2022. 2. 3.
[Authentication] Cookies and Sessions | Passport.js cookies 아마존에서 사고 싶은 물건을 카트에 넣고 체크 아웃을 안한 채, 구글로 화면 전환을 했을 경우 크롬 settings에 들어가서 All cookies and site data에 들어가면 아마존 쿠키가 생겨난 걸 볼 수 있다. csm-hit에 들어가면 제품 아이디를 저장하고 있다 브라우저를 모두 끄고, 다시 아마존으로 가도 내 카트에는 물건이 그대로 있다. 하지만 쿠키를 지우고 다시 아마존에 방문하면 카트에 있는 물건은 기억하지 못하고 지워진다. 아마존이 아닌 페이스북으로 가더라도 내가 검색한 제품들이 광고로 뜬다. 내 브라우저에서 아마존 서버에 get request를 보내면 아마존 서버는 내 브라우저가 아마존 웹사이트를 랜더할 수 있도록 html,css,js 파일을 보냄으로 response를.. 2022. 2. 3.
패키지 에러 발생시 깃에서 확인하는 법 예를 들어 bcrypt 패키지를 다운 받는 중 에러가 났다면 npm bcrypt 해당 페이지에 들어가면 코드가 호스트된 github 주소가 있다. 해당 깃허브로 이동하면 Issues 버튼이 있다. issues 페이지에 들어가면 bcrypt에 관련된 이슈들에 관해 대화를 할 수 있는 공간이다. 이 곳에서 이미 있는 같은 이슈를 찾거나 새로 올려 문제를 해결해 본다. 2022. 2. 2.
Node.js 이전 버젼으로 옮길려면 | NVM 새 최신 버젼을 다운 받았지만 버그가 많아 이 전 버젼으로 다시 돌아가고 싶다면 NVM을 사용한다. https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod.. 2022. 2. 2.
leetcode로 알고리즘 풀이 처음 시도 leetcode로 알고리즘 문제를 풀어야 한다기에 처음으로 문제 풀기를 시도해 보았다. 가장 기초 1번 문제를 들어갔다. 그냥 두 수를 간단하게 더하는 건가 싶었는데 아닌 것같다. 영어로 문제 자체를 바로 이해할 수가 없었다. 찬찬히 살펴보니 더 복잡한 문제이다. indices의 단어 뜻을 모르겠고, 가장 쉽다는 문제인데 일단 빨리 문제 파악부터 되지 않는다. 취업까지는 아직 먼 길이라는 생각이 들었다. 앞으로도 공부해야할 것이 많구나. 알고리즘은 일단 덮고 자바스크립트 기초부터 다시 찬찬히 봐야할 것같다. 그리고 나중에 다시 와야겠다.... 2022. 1. 29.
HTML URL Encoding Reference - 띄어쓰기 있으면? HTML URL Encoding Reference https://www.w3schools.com/tags/ref_urlencode.ASP jack Bauer 찾기 localhost:3000/articles/jack%20Bauer 2022. 1. 26.
REST API까지 끝. 프론트 엔드로 진로 결정 유데미로 안젤라유님의 풀스택 강의를 듣고 있다. 이제 어느 덧 RESTful API까지 다 들어서 이제 Web design, Authentication security, React 이렇게 3개의 강의를 남겨 놓고 있다. 강의도 거의 끝나가기에 이 다음에 뭘 하지? 어느 분야를 더 파야할까 라는 고민을 했다. 그래서 결정한 것은 프론트엔드쪽을 파는 것이었다. 첫 번째 이유는 내가 앞으로 개인적으로 IOS 앱을 만들어보고 싶은데 이게 프론트엔드를 하면 도움이 된다고 들었다. 두 번째 이유는 지금 현 상황에 프론트 엔드 쪽이 취업에 더 가까이 있는 것 같아서다. 누군가에게는 당연해 보일 수 있겠지만 난 이제야 깨닫게 되었다. 지금하고 있는 풀스택 코드도 프론트 엔드가 기본적으로 알아야하는 사항이고 백엔드 부분.. 2022. 1. 25.
[REST API 만들기 1] 데이터 베이스 만들기 | ROBO3T 위키피디아 스타일의 API를 만들어보자. 몽고디비 데이터 베이스를 사용할 것이고 ROBO 3T를 많이 사용한다. ROBO 3T는 shell이 있는 MongoDB GUI 이다. ROBO 3T를 다운로드 한다. https://robomongo.org/ 프로그램이 시작되면 팝업창에 있는 create를 누른다. 디폴트 값이 설정 되어 있는데 그냥 save 누른다 혹시 에러 메세지가 뜨면 mongoDB 서버가 돌아가고 있지 않아서다. 터미널에 가서 mongod 를 실행한다. 그러면 화면에 해당 주소에 있는 데이터베이스가 나온다. 주소가 로컬 호스트로 되어 있어 내 컴퓨터에있는 데이터 베이스가 나온다. 새로운 데이터 베이스를 만들어보자. New Connection -> Create Database를 누른다. 이름.. 2022. 1. 20.
Node.js부터 데이터베이스까지 복습 끝. 이제 REST API 시작했지만.. 벡엔드 처음으로 돌아가 Node.js부터 express, API, Mysql, MongoDB, Mongoose.. 등을 다시 복습했다. TO DO LIST 앱과 블로그를 만들어 보는 과정이기도 했는데 다시 보니 처음보다는 훨씬 이해가 갔다. 하지만 디테일에서 완벽히 이해가 가고 능숙하게 쓸 수 있는 건 아니다. 다시 시간이 지나고 나서 보면 기억이 가물가물 해질 수 있을 것같다. 어쨌든 이제는 REST API에 들어간다. 왜 이 것을 써야하는 지 정확히 이해 가지는 않는다. 그래서 생활코딩님의 REST API 강의를 찾았는데 이 강의를 보려면 HTTP 강의를 먼저 보고 오라고 한다. 그래서 이제 HTTP 강의 듣기를 시작하려고 한다. 이 REST API가 끝나고 보안, 웹디자인 강의를 보고 나면 드텨 R.. 2022. 1. 18.
HTTP란? HTTPS | cache | cookie | web storage | proxy 기본 개념 Web의 4가지 요소 웹이 세상에 처음 나왔을 때 크게 4가지 요소로 이루어져 있었다. 1 HTML - 웹 페이지 만듬 2 URL, URI - 원하는 웹페이지에 방문할 수 있도록 하는 주소 체계 3. Web Browser, Web Server - 웹페이지를 주고 받는 소프트웨어 4. HTTP - Web Browser와 Web Server가 통신 할 때 통신 규칙 웹이 아무리 복잡해도 이 기본 구조를 가지고 있다. HTTP 알아보기 Hyper Text Transter Protocol 처음엔 매우 단순했으나 지금은 HTML 파일 뿐 아니라, 이미지, 오디오, 동영상등 다양한 멀티 미디어 파일을 전송해야하기에 성능, 보안, 안정성을 업그레이드 시켜와야 했고, 지금은 인터넷에서 가장 중요한 통신 규칙이 되어 이.. 2022. 1. 18.
SQL INNER JOIN products 테이블이 있다. customers 테이블이 있다. 주문 내역을 담은 orders 테이블을 하나 더 만들어 보자. orders 테이블 안에 데이터를 집어 넣었다. 테이블 첫 번째 줄을 보면 여기서 customer_id 에서 1이라서 Jaeksuk Yoo 고객이 product_id 가 2 이므로 pencil을 구매한 것을 알 수 있다. 이렇게 customer_id 와 product_id가 foreign key 이다. 여기서 고객 이름과 제품명을 번호로 받아보는 것보다 출력할 때는 실제 이름과 제품명이 나오도록 해보자. 이 때 필요한 것이 JOIN이다. JOIN은 2개 이상의 테이블을 합쳐서 보여주는 것이다. https://www.w3schools.com/sql/sql_join.asp INNE.. 2022. 1. 8.
MYSQL 제약조건 알아보기 | NOT NULL | UNIQUE 등 이메일을 입력하는 자리에 숫자를 입력하거나 이름 입력란에 백 글자를 입력하는 사람들이 있을 수 있다. 이런 경우를 대비해 입력시 제약을 걸어둬서 더 정확하고 확실한 데이터를 입력받을 수 있다. 데이터 타입을 제한하고 테이블 전체에 제약을 걸어 둘 수 있고, 각 column에 걸 수도 있다. 자주 사용되는 MYSQL Constraints NOT NULL 빈 칸으로 두면 안된다, 꼭 입력하라는 뜻이다. 보통 table 만들 때 "id", "first name", "last name" column 등을 빈 칸으로 두면 안되니 NOT NULL로 설정한다. not null vs null: mysql 기본은 null로 되어있다. null은 데이터를 입력하지 않은 것은 빈 칸을 의미한다. 고객에게 전화번호를 입력하라.. 2022. 1. 7.
mysql CRUD MySQL 구조 데이터베이스 서버 > 데이터베이스(스키마) > Tables(표) mysql을 다운 받은 것은 데이터베이스 서버를 다운받은 것이다. MySQL 자체 보안 체계 권한 mysql에 여러 사람 등록 할 수 있다. John은 여러 스키마 모두에 읽고, 쓰고, 지울 수 있다 Sam은 테이블 하나만 제어 가능하다. mysql -uroot -p root은 관리자이기에 모든 권한이 열려있다. 별도의 이름을 만들어서 사용하다가 특별한 일이 있을 때만 root로 들어가는 것을 권장한다. MySQL 특징 1. 대소문자 구분 안함 mysql은 대소문자를 구분하지 않는다. select / SELECT 로 쓰든 상관이 없다. 2. 세미콜론 마지막에 세미콜론을 붙여주는 것은 서버에 SQL명령문 한 줄 이상을 실행시킬.. 2022. 1. 6.
맥에서 mysql 다운받는 법(Monterey OS) 1. homebrew를 다운 받는다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. homebrew repository를 업데이트 한다. brew update 3. brew를 이용해서 mysql을 다운받는다. brew install mysql brew services start mysql 4. 비밀번호를 설정해준다. mysql_secure_installation 5. mysql을 시작한다. mysql -u root -p 비밀번호를 입력하라고 나오는데 비밀번호를 입력한다. mysql로 터미널 내용이 바뀌면 성공 6. mysql을 끝낸다. \q quit 둘 중에 아무거나 입력한다.. 2022. 1. 5.
[CSS] sign-up 페이지에서 z-index 활용 부트스트랩에서 아래와 같은 Sign-up 페이지를 가져왔는데 코드를 그대로 복사를 한 거 같은데 이상하게 버그가 발생했다. 문제점은 입력하려고 빈칸을 클릭하면 파란색 테두리의 아랫 부분이 씹혀 있는 것을 볼 수 있다. First Name 클릭시 Last Name 클릭시에도 하지만 마지막 이메일 입력은 모든 테두리 다 잘 보인다. css에는 아래와 같은 코드가 이미 있는데 z-index가 적용이 안되고 있는 것은 아닐까 하는 생각이 들었다. 그래서 html에서 input에 각각 div를 씌워 class="form-floating"을 적어주고 css에서는 이 div에 position:relative;를 주어 각 div에 z-index가 적용되도록 했다. 다행히 문제가 해결되었다. 이제는 클릭시 해당 div가.. 2021. 12. 15.
To Do List 앱을 몽고디비와 헤로쿠에 올리는 것까지 해보았다. Nodo.js 로 To Do List 앱을 만들고서 내 컴퓨터 안에 서버와 데이터 베이스를 두었던 것을 이제는 외부로 빼서 서버는 헤로쿠, 데이터 베이스는 몽고디비로 옮기는 방법을 배웠다. 하라는 대로 했기에 앱이 헤로쿠에서 작동이 되긴 했지만 나 혼자 해보라고 한다면 아직은 뭔가 뭔지 복잡하고 아직 공부가 되지 않은 상태이다. 이 다음 강의는 이 전에 만든 블로그를 이제 헤로쿠와 몽고디비에 올려보는 것인데 내 실력으로는 아직 할 줄 모를거기 때문에 이 전 강의를 다시 보기로 했다. 백엔드 시작부터 다시 찬찬히 봐야할 것같다. 다시 공부하려니 이 걸 언제 또 보나 하는 생각이 든다. 강의를 다시 보며 막상 내가 해볼 때 얻는게 많아서 하긴 해야한다. 실력 빨리 느는 법을 보면 각 언어에서 나오는 문서로 .. 2021. 12. 3.

티스토리툴바