티스토리

FE Dev

검색하기

블로그 홈

FE Dev

sodait.tistory.com/m

TIL

구독자: 1

방명록 방문하기

주요 글 목록

<리액트를 다루는 기술> 9장. 컴포넌트 스타일링 1. CSS : 스타일링하는 가장 기본적인 방법 - CSS를 작성할 때 중요한 점은 CSS클래스를 중복되지 않게 만드는 것 - 이를 방지하는 방식 중 하나는 이름을 지을 때 특별한 규칙을 사용하여 짓는 것이고, 다른 하나는 CSS Selector를 활용하는 것 - CSS Selector를 사용하면 CSS클래스가 특정 클래스 내부에 있는 경우에만 스타일 적용할 수 있음 /* App안에 들어있는 클래스 스타일 적용할 때 (태그 자체에 스타일 적용할 때는 .을 생략) */ .App .logo{ height: 20px; } 2. Sass (Syntactically Awesome Style Sheets) 문법적으로 매우 멋진 스타일시트 - CSS 전처리기(pre-processor)중 하나로 확장된 CSS문법을 사.. 공감수 0 댓글수 0 2021. 8. 23.
<리액트를 다루는 기술> 7장.라이프사이클 메서드 컴포넌트의 라이프사이클(수명 주기) · 모든 리액트 컴포넌트에는 라이프사이클이 존재 · 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 · 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행된다. (서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용) ex) 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있음 => 이때 컴포넌트의 라이프 사이클 메서드 사용 클래스형 컴포넌트에서만 사용할 수 있음 (함수형은X → Hooks기능을 사용하여 비슷한 작업 처리) - Will: 어떤 작업을 작동하기 전 실행되는 .. 공감수 0 댓글수 0 2021. 8. 23.
[JavaScript] 태그 선택하기, 유사 배열 HTML id로 태그 선택 // id에 해당하는 태그 하나 출력 document.getElementById('id'); ※ getElementById를 통해서 존재하지 않는 id 값으로 태그를 선택하면, null값이 리턴된다. - 원리: 메소드의 파라미터로 접근하고자 하는 태그의 id 값을 문자열로 전달해 주면 해당되는 태그가 선택 - 사용: 자바스크립트로 딱 하나만의 요소를 선택할 때, html 태그에 id 속성을 부여하고 getElementById 메소드 활용 - 장점: id 속성을 활용하면 필요한 태그를 명확하게 선택할 수 있다는 장점이 있음 - 단점: 여러 요소들을 동시에 선택해야 하는 경우 활용하기 어려움 HTML class로 태그 선택 // class에 해당하는 태그 모음(HTMLCollect.. 공감수 0 댓글수 0 2021. 7. 6.
리덕스란 무엇인가 Redux (리덕스) 상태를 관리하기 위한 오픈 소스 자바스크립트 라이브러리 => 코드의 복잡성을 낮춰주고, 어떤 결과를 가져올지 예측가능하게 만들어준다. 특징 Single Source of Truth 단 하나의 진실의 원천 - 하나의 상태(=객체) 모든 데이터를 넣는다. - 한 곳에 데이터를 집중적으로 관리하면 여러 곳에 흩어져있는 것보다 데이터를 더 관리하기 쉬워짐 - 단 하나의 state를 유지하는 걸 통해서 애플리케이션의 복잡성을 낮춘다. 어떻게 동작하는가? 1) store : 정보가 저장되는 곳(은행같은 역할) ex) 글에 대한 정보, 글 목록에 대한 정보 2) state : store 안에 state라는 실제 정보가 저장된다. 단, 직접 접속 불가(누군가를 통해서만 접속 가능) 3) reduc.. 공감수 0 댓글수 0 2021. 6. 22.
<코어자바스크립트> 01.데이터타입 데이터 타입 종류 기본형 (원시형, primitive type) - 기본형은 값이 담긴 주솟값을 바로 복제한다. (모두 불변성) - 숫자(number), 문자열(String), boolean, null, undefined가 있으며, ES6에서 Symbol이 추가되었다. 참조형 (reference type) - 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 - 객체(object)가 있고 객체의 하위 분류에는 배열(Array), 함수(Function), 날짜(Date), 정규식(RegExp) 등과 ES6에서 추가된 Map, WeakMap, Set, WeakSet 등이 속한다. 메모리와 데이터 - 비트(bit): 0 또는 1 두 가지 값만 표현할 수 있는 하나의 메모리 조각 (1byte.. 공감수 0 댓글수 0 2021. 6. 16.
Git 파헤치기 🔨 Git 코드 버전 관리 프로그램(툴), 버전을 편리하게 관리할 수 있도록 도와주는 도구 Git의 목적 1) 버전 관리 2) 동시 협업 3) 백업 버전 관리? 파일의 변화를 시간에 따라서 기록했다가 나중에 특정 시점에 버전을 다시 꺼내올 수 있는 시스템 버전 관리의 장점 1) 지난 과정 확인 가능 2) 언제든 이전 버전의 코드로 돌아갈 수 있음 3) 개발자끼리 협업할 수 있음 수정 시, 파일을 새로 만들면 관리가 힘들기 때문 💻GitHub Git으로 관리하는 프로젝트를 올려둘 수 있는 사이트 - 외부 컴퓨터를 따로 마련하지 않아도 작업한 내용(백업본)을 내 컴퓨터가 아닌 다른 곳에 저장 가능 - 외부에 컴퓨터를 대신 만들어주는 서비스 (원격 저장소를 대신 제공해주는 서비스) => 다른 사람과 협업 가능.. 공감수 0 댓글수 0 2021. 6. 13.
[JavaScript] 객체와 프로퍼티 '자바스크립트의 거의 모든 것이 다 객체다!' ✨객체(Object) : 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙이는 것 - 여러가지 값을 한 번에 저장하고 싶을 때 사용 - key와 value를 콜론(:)으로 구분하는 프로퍼티들의 집합 - 중괄호{ } 안에 쉼표로 구분해서 저장해서 사용 - key-value로 이루어진 한 쌍을 객체의 속성(Property)이라고 함 - 프로퍼티 네임(key)은 문자열 타입을 가지고 있음 (따옴표' '로 감싸주지 않고 생략해도 JS가 암묵적으로 문자열로 형 변환) - 프로퍼티 value 값은 모든 자료형을 사용할 수 있음! (문자열, 숫자, 불린, null, 객체) - 이 값의 자료형은 object(객체)이며, 객체 안에 객체를 넣을 수도 있음 ❗Property N.. 공감수 0 댓글수 0 2021. 6. 7.
[JavaScript] 변수 스코프(지역, 전역) & 상수 변수의 유효범위 scope: 범위, 영역 => 변수에는 유효한 범위가 있어서 그 범위를 벗어나게 되면 오류가 발생 - 자바스크립트에서는 중괄호{ }로 감싼 코드를 블록문(Block Statement)이라고 함 - 블록문을 기준으로 변수 나뉨 ☝ 지역 변수, 로컬 변수(Local Variable) (블록문 안에 선언된 변수들) 블록문 내에서만 유효한 범위를 가지고 있다. // 함수 선언 function myFunction() { let x = 3; // 지역 변수, 로컬 변수 console.log(x); // 3 } myFunction(); // 함수 호출 console.log(x); // 오류 발생 ✌ 전역 변수, 글로벌 변수(Global Variable) (블록문 밖에서 선언한 변수) 블록문 안에서도 .. 공감수 0 댓글수 0 2021. 6. 5.
[JavaScript] 추상화(복합 할당 연산자, return, console, 옵셔널 파라미터) 코드를 더 간결하게 작성할 수 있는 방법 ✨추상화(Abstraction) 복잡한 것들을 목적에 맞게 단순화하는 것 추상: 여러가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용 구체적인 정보들은 숨기고, 꼭 필요한 핵심만 뽑아내서 표현하는 방식 (원활한 소통을 위한 표현 방식들 중 하나) 👩‍💻프로그래밍에서 추상화 프로그래밍을 통해 어떤 프로그램을 만든다는 것은 1) 코드를 작성하는 자신과의 소통이 될 수도 있고, 2) 작성한 코드를 실행하는 컴퓨터와의 소통이 될 수도 있고, 3) 함께 코드를 작성하는 동료와의 소통이 될 수도 있고, 4) 내가 만든 프로그램을 사용하는 사용자와의 소통이 될 수도 있음 => 프로그래밍을 할 때 추상화를 통한 코드를 작성하면 더 좋은 소통&표현이 될.. 공감수 0 댓글수 0 2021. 6. 4.
[JavaScript] 자료형(형 변환, 연산자, 템플릿 문자열, null과 undefined) 데이터를 어떤 형태로 저장하고 활용하는지 이해하기 숫자형 자바스크립트 숫자형은 소수와 정수를 따로 구분하지 않기 때문에 1과 1.0 모두 number // 거듭제곱 console.log(2 ** 3); // 2의 3제곱 2*2*2 출력 // 나머지 console.log(7 % 3); // 7을 3으로 나눈 나머지 (몫이 2고, 나머지 1 출력) 템플릿 문자열 문자열 안에 ' " 둘다 사용할 경우 -> 역슬래시 사용 (문자열 안에 기호라고 이해함) (but, 역슬래시를 사용하면 문자열 안의 내용을 읽기가 불편해짐, 가독성↓) => 양 끝을 백틱(``)으로 감싸주기(ES6 이후) 불린형 console.log(!true); // false console.log(!false); // true // 중복해서 쓰는.. 공감수 0 댓글수 0 2021. 6. 4.
f7프레임워크 동적라우팅 - 상품리스트에서 상세페이지 이동 기존처럼 routes.js에 :id추가 index.js에서 하나 만들어줌 상품디테일 페이지에서 import 해 주기 import {f7route} from "framework7-react"; api에서 만들어준 getItemDetail import 해 주기 import { getItemDetail } from "../common/api"; f7route를 받아서 const ItemDetail = (f7route) => { const [items, setItems] = useState([]); useEffect(() => { async function itemList() { const resultItems = await getItemDetail(f7route.id); setItems(resultItems... 공감수 0 댓글수 0 2021. 4. 30.
상품 리스트 페이지에 각 아이템 가져오기 index.js에 만들어져있는 getItems export const getItems = (params) => API.get("/items", params); 해당 상품 리스트 페이지에서 import해서 가져다 쓰기 import { getItems } from "../common/api"; async await 사용 const WholeCake = () => { const [items, setItems] = useState([]); useEffect(() => { async function itemList() { const resultItems = await getItems(); setItems(resultItems.data); } itemList(); }, []); map으로 뿌려서 아이템 뿌려주기(앞.. 공감수 0 댓글수 0 2021. 4. 30.
[Error] VScode - WSL Ubuntu 연결 실패 에러 (Failed to connect to the remote extension host server.) Window10에 설치한 WSL2로 Ubuntu 앱에 연결된 vscode를 열어 작업하려고 하는데, 갑자기 vscode에서 이런 에러가 뜨면서 폴더에 있는 파일들이 뜨지 않고 localhost 서버도 계속 로딩되면서 연결되지 않았다. Failed to connect to the remote extension host server (Error: webSocket close with status code 1006). 원격 확장 호스트 서버에 연결하지 못했습니다(오류: WebSocket close with status code 1006). 해결 windows PowerShell을 열어 wsl --shutdown 명령을 통해 wsl 재부팅으로 해결! 참고 stackoverflow.com/questions/641.. 공감수 1 댓글수 0 2021. 4. 29.
비동기처리: callback 함수 & Promise 1. 동기와 비동기 1) Synchronous(동기적, 자바스크립트는 동기적 언어) : 호이스팅 된 이후부터 코드가 작성한 순서대로 동기적으로 실행되는 것 - 호이스팅? var변수, function함수같은 선언들이 제일 위로 올라가는 것 2) Asynchronous(비동기적): 언제 코드가 실행될지 예측할 수 없는 것 비동기적 실행 방법 ex) setTimeout(): 브라우저에서 제공되는 웹 API로 지정한 시간이 지나면 전달한 콜백 함수 호출 => 1, 3, 2 출력 ('2'는 1초 뒤 콘솔 출력) 2. 콜백 함수 callback - 지금 당장 실행하지는 않고 나중에 불러달라, 함수를 실행해달라는 함수 - () => 으로 일일이 함수를 선언하지 않고, 간단하게 전달할 수 있음 콜백 2가지 경우 1) .. 공감수 5 댓글수 0 2021. 4. 27.
[Error] 레일즈 서버 A server is already running 오류 / redis 서버 오류 해결 rails s 레일즈 서버 시작 로컬 서버 실행하고 있다가 껐다 켰을 경우, 다시 rails s로 서버 작동시키려고 하면 A server is already running. Check .../tmp/pids/server.pid. Exiting 서버가 이미 실행 중입니다. .../tmp/pids/server.pid.를 확인하십시오. 종료 오류 메세지가 나올 때가 있음 터미널 재시작 하면 될 수도 있고~ 안될 경우 아래 메세지로 프로세스 종료 후, kill -9 $(lsof -i tcp:3000 -t) rails s 재시작 localhost:3000 서버 실행~ redis 서버 오류 redis-cli ping 핑퐁 확인 ps -ef |grep redis 1346 사용 중인 포트를 확인 후 kill -9로 해.. 공감수 0 댓글수 0 2021. 4. 24.
[Ruby On Rails] JWT (& JWT로 로그인) JWT이란? json형태로 만들어진 웹 토큰을 좀 더 쉽게 만들 수 있도록 도와주는 라이브러리 registrations_controller에서 JWT세션을 이용해서 토큰 정보를 저장해서 그 정보를 이용해서 api를 사용한다까지 알고 있으면 됨 (쓰는 방법만 정확하게 알면 됨) 사용 => jwt_session을 이용해서 토큰 정보를 저장하고 그 정보를 이용해 api 사용 Gemfile/ gem 'jwt_sessions' 라이브러리 사용 githup jwt_sessions document 참고 github.com/tuwukee/jwt_sessions tuwukee/jwt_sessions XSS/CSRF safe JWT auth designed for SPA. Contribute to tuwukee/jwt_s.. 공감수 0 댓글수 0 2021. 4. 24.
[Ruby On Rails] M:N Relation & Like(찜) model 만들기 M:N Relation => 그 대상을 어떻게 바라보는지가 중요 Like(좋아요, 찜) 테이블 : 어떤 사용자가 어떤 상품을 좋아요 했는지에 대한 정보를 가지고 있는 테이블 User - Like - Item 관계 - User: 사용자의 찜 목록에는 어떤 아이템들이 있는지 - Item: 이 아이템을 좋아요한 사용자는 어떤 사용자들이 있는지 => 서로 많이 갖고 있는 경우(has many) => M:N (사용처가 명확) -> user와 Item에 외래 키 가지고 있음 가운데 Join테이블(Like)을 두고 양쪽에 외래 키를 받아와서 1:N이 연쇄된 형태를 통해서 N:N을 표현 예외 Order, Option, LineItem도 어떻게 보면 M:N구조라고 볼 수 있으나, 그렇게 쓰지 않음 이런식으로 1:N 관계.. 공감수 0 댓글수 0 2021. 4. 24.
[Ruby On Rails] 레일즈 서버 시작 & 초기 세팅 & model 만들기 ※ 윈도우는 무조건 관리자 권한으로 열기! (Ubuntu) 초기 세팅 sudo apt-get install postgresql postgresql-contrib postgresql 설치 bundle install 필요한 gem 파일 설치 sudo service postgresql start/restart postgresql 서버 실행 레일즈 시작하기 rails에서 명령어 칠 때는 rails를 앞에 붙여서 시작! rails s (server) 레일즈 서버 시작 (=> rails는 기본적으로 서버를 열면 Puma라는 웹서버를 이용함) 서버를 켠 상태에서는 현재 터미널을 사용할 수 없음 -> 새 터미널 띄워서 사용 데이터베이스 생성 rails db: create db:migrate db:seed db: cre.. 공감수 0 댓글수 0 2021. 4. 24.
[TIL] 로컬 파일 깃 레포지토리 연동하기 #개인 기록용 github - New repository 만들기 내 레포지토리에서 주소 복사 vscode 터미널 git remote add origin https://github.com/SongDye1/cakeshop.git git commit 하려했으나 나의 경우, config 설정하라고 새창 뜸 githup setting - profile에서 Public email 등 설정 후, config email, name 설정 다시 commit 하기 git push origin master 후, vscode에서 위의 token 입력하라는 창이 떠서 token 복붙 후 레포지토리 연동 완료~ 공감수 0 댓글수 0 2021. 4. 24.
[Ruby On Rails] Restful API와 Serializer Rails - Restful API 관계 - 기본적으로 RESTful 하게 API를 만들어줄 수 있도록 설계된 잘 짜여진 프레임워크라고 할 수 있음 - 주소 규칙 등을 만들 때에도 RESTful을 쉽게 정의할 수 있음 (컨벤션을 이용해서 쉽게 사용할 수 있음) Restful API - RESTful: 어떤 경로와 메소드만으로 어떤 행위를 하는 것인지 개발자로 하여금 이해할 수 있게 해주는 규칙 - RESTful API: 그런 규칙을 통해서 만들어진 API 마이크로소프트 API 디자인 지침 문서 참고 docs.microsoft.com/ko-kr/azure/architecture/best-practices/api-design API 디자인 지침 - Best practices for cloud applicat.. 공감수 1 댓글수 2 2021. 4. 19.
[DataBase] 관계형 데이터 모델링이란? #Model : 어떤 목적을 가지고 진짜를 모방한 것 - 좋은 모델이란? 목적에 부합하는 모방 #데이터 모델링 : 현실의 복잡성을 컴퓨터에 담을 수 있는 방법 - 거대하고 복잡한 현실을 정보로 만들어서 표에 담는 것은 매우 어려운 일 -> 이를 해결하기 위해 나타남 - 정보를 데이터베이스 표에 담는 것 -> 인간의 능력으로는 상상할 수 없는 거대한 양의 데이터를 엄청난 속도로 다룰 수 있게 됨 [데이터 모델링 순서] 업무 파악 -> 개념적 데이터 모델링 -> 논리적 데이터 모델링 -> 물리적 데이터 모델링 1. 업무 파악 1) 업무 파악: 의뢰한 사람이 어떤 것을 원하는지 찾아내는 것 2) 기획 2. 개념적 데이터 모델링❗⭐ - 업무 파악이 끝났으면, 이제 최종적으로 데이터베이스에 옮기기 위한 첫 단계 .. 공감수 0 댓글수 2 2021. 4. 16.
[Ruby On Rails] ORM ORM (Object-relational mapping) 객체 관계 매핑 => 데이터베이스와 Rails가 상호작용할 수 있게 도와주는 것 (통역 역할) ex) Ruby On Rails -> 루비 언어 사용 postgresql (RDMS 데이터베이스) -> SQL 언어 사용 ORM은 루비 문법으로 되어있기 때문에 사용자 친화적! -> 친화적인 문법을 통해 우리가 데이터베이스를 조작할 수 있다는 장점! ORM 기본 설정 루비 문법 irb 켜서 루비 실행 exit 루비 실행 끝 models / option.rb ⭐belongs_to => Option이라는 모델이 item에 속해 있다는 것을 알려줌 : item => Ruby에만 있는 심볼(Symbol) 데이터 타입 ❓Symbol 사용 이유 겉보기에는 Strin.. 공감수 0 댓글수 0 2021. 4. 14.
[Ruby On Rails] Migration 마이그레이션 Migration : 데이터베이스 테이블을 간단하게 생성하고 수정할 수 있도록 설계된 루비 "클래스" Rails는 테이블 생성 또는 수정에 마이그레이션(Migration)이라는 기능을 사용 Migration 파일들은 생성될 시점의 타임스탬프 값을 가짐 Migration 클래스당 하나의 파일로 db/migrate에 저장됨 migrate 어떤식으로 실행되는지? 1) rails db:migrate를 하면 스키마에 있는 타임스탬프를 읽어 옴 2) 그 타임스탬프 이후에 타임스탬프에 찍혀 있는 migration 파일들만 읽어서 migrate 함 3) Migration 파일이 migrate 되고 난 후에는 타임스탬프가 이미 적용되었기 때문에 이후 migrate 해도 스키마에 적용되지 않음 (Migration 파일이 .. 공감수 0 댓글수 0 2021. 4. 14.
[Ruby On Rails] 쇼핑몰 데이터베이스 모델링 간단한 쇼핑몰 데이터베이스 모델링! => 쇼핑몰을 의뢰한 사람이 어떤 컨셉으로 이 쇼핑몰을 만들고자 하는지 의도 파악이 가장 중요(소통 중요) 상품(item) - ID(Primary Key): 상품명이 겹치더라도 고유한 값을 넣어 서로 다른 상품이란 것을 알 수 있게 함 - 상품명 - 상품가격 - 재고 - 판매자: 판매자의 정보 효율적으로 넣는 방법-> 사용자의 id를 넣어 겹치지않게 함 ID 상품명 상품가격 재고 판매자(user_id) 1 강아지 사료 5000 10 1 2 고양이 사료 4000 20 2 3 강아지 사료 5000 10 3 사용자(user) - ID - 사용자명 - 전화번호 ID 사용자명 전화번호 1 김땡땡 010-1111-2222 2 박땡땡 3 이땡땡 4 한땡땡 주문정보(order) - .. 공감수 0 댓글수 0 2021. 4. 14.
[DataBase] 데이터베이스 개념 DB(DataBase) : 일정한 체계 속에 저장된 데이터의 집합 엑셀이나 메모장에 어떤 정보를 입력하고 저장하는 것과 비슷하나, 필요한 정보를 저장하거나 검색할 때 조금 더 효율적인 구조로 만든 것 -> 데이터를 효율적으로 저장하는 공간 Table : 표 형태로 저장된 데이터의 집합 엑셀 - 시트 데이터베이스 - 테이블(표) 데이터는 데이터베이스 안에서 테이블이라는 단위로 저장, 하나의 데이터베이스에는 여러 개의 테이블 존재 가능 -> 관련있는 정보들을 하나의 테이블에 저장하고, 여러 테이블을 두면 많은 데이터를 체계적으로 저장할 수 있음 row와 coulmn - row(행): 레코드(Record)라고도 하며, 하나의 개체를 표현 -> 하나의 row가 하나의 데이터 집합을 의미(글 하나에 대한 정보) .. 공감수 0 댓글수 2 2021. 4. 13.
[Ruby On Rails] 루비 온 레일즈란? [Ruby On Rails] - 루비 프로그램 언어에서 동작하는 웹 어플리케이션 프레임워크, 간략히 레일즈라고 부름 - 데이터베이스를 이용한 웹 애플리케이션을 개발할 때 반복되는 코드를 대폭 줄여 개발 기간을 단축하는 것으로 인기 (문법 간결) - 모든 개발자가 개발을 시작 할때 필요한 초기 준비나 가정들을 쉽게 만들수 있는 도구 제공, 웹 어플리케이션 프로그래밍을 더 쉽게 만들수 있도록 설계 철학 1) DRY (Don't Repeat Yourself) 같은 코드를 반복하지 말자 2) CoC (Convention over Configuration) : 설정보다 규칙이 중요하다 - 웹 서비스 만드는 방법을 최선의 방법 하나로 제안 -> 이러한 정해준 방법을 Rails Way라고 함 - Rails는 Rail.. 공감수 0 댓글수 0 2021. 4. 12.
What React? _리액트 # What React? : 유저 인터페이스를 만들 수 있는 라이브러리 (A lobrary for creating user interfaces) -> 사용자에게 UI를 보여주고, 이벤트를 처리하는 일들을 할 수 있음 - 사용자에게 보여지는 UI를 만들고, 그 위에서 사용자가 클릭을 하거나 다양한 이벤트가 발생을 하게 되면, 그 이벤트에 맞게 반응하도록 만들어진 라이브러리 - 페이스북에서 만든 자바스크립트 라이브러리 중 하나 (2013년도에 등장 ex) 페이스북, 에어비앤비, 우버, 넷플릭스, 인스타그램 등에서 사용 React 장점 - 단순하며, 배우는 시간이 앵귤러에 비해 상대적으로 짧음 - 버전이 업데이트 되어도 이전 버전과 호환이 잘 되도록 안정성있게 업데이트 됨 (= 앵귤러와 달리 Breaking .. 공감수 0 댓글수 2 2021. 4. 11.
사전준비 | 레일즈 프로젝트 작업 위한 세팅 프론트엔드(리액트)와 백엔드(루비 온 레일즈) 모두 다루는 풀스택으로 진행 될 예정 맥북이였으면 좀 더 쉬웠겠지만~ 윈도우 사용자로서 루비온레일즈 세팅하기~ 1) 루비 2.6.5버전 설치 rubyinstaller.org/downloads/archives/ -> 2.6.5버전은 Archives에 있어서 여기서 다운받을 수 있음.. junstar92.tistory.com/5 (..처음에 이 글을 보고 윈도우에서 바로 설치하려 했으나, 몇 시간동안 끝 부분에서 계속 같은 오류로 막힘) 레일즈 개발 대다수가 유닉스 환경에서 이루어지므로, 윈도우 대신 Linux 가상 머신에 레일즈 설치하고 사용하는 것을 권장! -> 다시 WSL로 옮겨 Ubuntu 18.04 LTS 설치 후 재설치 해보기 WSL 설치 1. 설정 .. 공감수 0 댓글수 2 2021. 4. 11.
[1차 프로젝트] 마켓홀리 팀 프로젝트 후기 1. 프로젝트 소개 - 온라인 식재료 판매 커머스 마켓컬리 웹 사이트를 모티브로한 팀 프로젝트(Market Holy) - 2021.03.15 ~ 2021.03.26 (2주) - 프론트 4명 + 백엔드 2명 ⚒ 기술 스택 Front-end - HTML, JavaScript(ES6+), React, SCSS ⚙ 협업 툴 - Slack, Trello, Git & Github 👉 팀 배정을 받아 2주동안 마켓컬리 클론 프로젝트를 하게 되었다! 팀 배정 전 웹 사이트 투표할 때, 주로 깔끔한 UI 구조를 가진 사이트들에 투표하였는데, 마켓컬리 웹 사이트도 깔끔한 편이라 만족했다. 1-1 프로젝트 시작 전 팀원들과 이 사이트에서는 어떤 페이지가 필수적으로 구현되어야 하는지, 서비스 특징을 파악하여 필수 구현 페이지.. 공감수 1 댓글수 4 2021. 3. 28.
[TIL] git 커밋 후, conflict 오류났을 때 팀 프로젝트 git commit 한 후, conflict 오류났을 때 git pull origin master 해서 어느 부분 오류났는지 확인 가능 (안 되어있으면) npm install 이후 npm start 해서 다시 확인~ 공감수 2 댓글수 2 2021. 3. 24.

문의안내

티스토리
로그인
고객센터

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