일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- 데이터베이스 공부
- 애플 디벨로퍼 아카데미
- Apple Developer Academy @ POSTECH
- 치지직
- swift문법
- 데이터베이스
- 애플 디벨로퍼 아카데미 후기
- 소프트웨어분석및설계
- ObservableObject
- 앱 비교 프로젝트
- react
- useReducer
- memoization
- Swift 기능
- 숭실대
- SWIFT
- 네이버 부스트캠프
- 네이버 치지직
- Swift 문법
- iOS 개발 오류
- OS
- Swift 디자인패턴
- ObservedObject
- 애플 디벨로퍼 아카데미 21주차 회고
- thread safe
- StateObject
- 동시성 프로그래밍
- 운영체제
- global soop
- 제앱소
- Today
- Total
목록전체 글 (285)
사과하는 제라스
1.1 왜 리액트인가? - Javascript만으로 큰 규모의 Application 만드는 시대임. -> Angular, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js 등 여러 프레임워크들은 MVC(Model-View-Controller) 아키텍쳐, MVVM(Model-View-View-Model) 아키텍쳐를 사용함. 하지만!!!! React는 오직 V(View)만 신경 쓰는 라이브러리임. 컴포넌트: 특정 부분이 어떻게 생길지 정하는 선언체. 렌더링: 사용자 화면에 뷰를 보여주는 것 초기 렌더링 VS 리렌더링 초기 렌더링을 하면 내부 컴포넌트들이 재귀적으로 렌더링하고 / 그 결과 가지게 된 정보들로 HTML..
이번 학기 SOPT 동아리를 했던 친구용 덕분에 SOPT에 관심을 더 갖게 되었고 Demo Day를 통해 여러 서비스들을 공개한다는 소식을 듣고는 바로 신청을 했다. 총 14팀이 여러 특색있는 서비스들을 웹 혹은 웹 앱 혹은 앱을 통해 제공하였다. 14팀에 대한 생각과 그 중 몇가지 의미있었던, 아이디어를 배우고 싶은 팀들은 그런 요소들까지 적어본다. 앱 서비스 1. '해라': 할까? 말까? 하는 당신을 위한 고민 해결사 1) 설명: 이 서비스를 보자마자 든 생각은 에타에서의 고민글들이다. 뭔가 성지글이 되기도 하고 다양한 고민들로 인해 많은 사람들이 결과도 기대하는 그런 기능이다. 마치 tvN '마녀사냥'의 '로멘트'와 같이 사연에 대해 댓글을 달거나 해결법을 제시하는? 그런 역할도 할 듯하다. 2) ..
Prettier를 통해서 보통 코드 스타일을 정리한다. 이때는 프로젝트의 최상위 디렉토리에 .prittierrc 파일을 추가해주고 그곳에 설정들을 입력해주면 된다. { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 보통 이런 식으로 간단하게 하나의 객체형태로 적어주면 된다. Prittier의 옵션들을 한번 ARABOZA!! Prittier 전체 옵션 { "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식 "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 "endOfLine": "auto", ..
성능을 최적화하는 수단은 여러가지가 존재한다. 1. React.memo를 사용한다. React.memo로 어떤 컴포넌트의 export 값을 감싸주면 해당 컴포넌트의 props가 바뀌지 않았다면, 리렌더링을 하지 않도록 설정함. -> 함수 컴포넌트의 리렌더링 성능을 최적화해 줌. 주로 리스트 관련 컴포넌트를 작성할 때는 리스트의 아이템, 리스트 이 두개의 컴포넌트를 React.memo를 통해 최적화해주어야 한다. 2. useState의 함수형 업데이트 useState의 함수들을 함수형으로 사용하면 된다. 예를 들면 다음과 같다. const [data, setData] = useState(''); function test() { setData(data => data = newData); //이런 식으로 se..
React Hook에서 useReducer를 사용하면 여러개의 input이 존재하더라도 간편하게 관리할 수가 있다!! 1) 커스텀 Hook을 사용하지 않은 Ver. //Info.js - NonCustomed Ver. import React, { useReducer } from "react"; function reducer(state, action) { return { ...state, [action.name]: action.value, }; } const Info = () => { // const [name, setName] = useState(""); // const [nickname, setNickname] = useState(""); const [state, dispatch] = useReducer..
이걸 쓰려면 React Snippet부터 Extension에서 깔자! 1. 클래스 컴포넌트 rcc // rcc import React, { Component } from 'react' export default class List extends Component { render() { return ( List ) } } 2. 함수형 컴포넌트 1) 일반 함수형 rfc : 컴포넌트 작성과 동시에 export // rfc import React from 'react' export default function List() { return ( List ) } rfce : export 코드 분리 // rfce import React from 'react' function List() { return ( List ..
아 이게 왜 생길까...!! 해결법: - MacOS에서의 해결임. 먼저 ~/.bash_profile 파일에 vim으로 들어가서 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm 를 추가 혹시 내가 zsh를 쓰고 있다면 ~/.zshrc에 들어가서 위에 코드를 아무데나 작성 그러고 source ./zshrc해주면 적용됨.
원래 Real DOM(Document Object Model)은 모든 화면을 새로 그려야 하기 때문에 느리다. 이런 단점을 보완하기 위해 React가 제안한 방식이 Virtual DOM이다! 이건 모든 걸 바꾸는게 아니라 현재 바꾸고자 하는 내용과 동일하게 현재의 상태를 동기화시키는 것으로 연산이 빠르고 모든 연산을 할 필요가 없다. 즉!!!! 바뀐 부분만 비교해서 그 부분만 렌더링하는 것이다! 왜 빨라지냐고?? Real DOM을 조작하는 것은 화면에 실제로 바로 그리기 때문에 느리지만... Virtual DOM을 조작하는 것은 실제로 화면에 그리는 것이 아니기 때문!! DOM을 조작하되 최소한으로 조작해서 작업을 처리하는 방식을 쓰면 개선이 되지...!! -> Virtual DOM 방식을 사용하면 DO..
Functional Viewpoint는 Design for Views의 ViewPoint들 중 가장 중요한 Viewpoint다. Functional Viewpoint : 타깃 시스템의 functional view에 대한 architecture decision을 만드는 것. -> View Model들의 Corner stone임 - Input Artifacts 1) SRS 2) System Context Model 3) Skeleton Architecture - Output Artifacts 1) Architecture with Functional Components allocated 2) Design Specification of Functional Components Functional Viewpoint..
다음 4가지 순서로 배울 것임. 1) SW Architecture 소개 2) Architecture Styles - 디자인 패턴 같은 거를 배움, Reusable Design임. 3) Architecture Viewpoints 4) Architecture Design for NFR - NFR이란? quality requirement(ex. security, reliability, efficiency 등) SW Architecture? : Architecture는 그냥 Structure(구조물)이다. SW Architecture는 요소(Component), 관계(Inter-component Relationship), 원칙(아키텍쳐가 어떤 컴포넌트와 그 관계들로 구성되어져 있는지)들을 지닌 시스템의 기본 개..