Daily Log

* iOS 개인 프로젝트 시작 전 기본 개념 복귀 차원으로 내용을 정리합니다. UISlider 스토리보드에 있는 UISlider의 Value를 UILabel을 이용해 수치 보여주는 법 예상 우선 IBAction으로 끌어와서 UISlider의 이벤트가 일어날 때마다 UILabel.text에 슬라이더의 value를 대입 시키면 되지않을까? 답 슬라이더 IBAction으로 선언, Event타입, Type은 UISlider로하여 더 정확한 데이터 타입으로 받아올 수 있게 한다. Any는 어떤 데이터타입이든 다 됨 sender는 해당 메소드를 호출하는 caller를 말함. 어떤 버튼 혹은 슬라이더가 불렀는지 func caller를 확인할 수 있음. 아래의 경우 UI슬라이더 이벤트발생시, 그 UISlider자체를 ..

* iOS 개인 프로젝트 시작 전 기본 개념 복귀 차원으로 내용을 정리합니다. 프로젝트 생성, bundle identifier 등, 프로젝트 수정은 어디서 할 수 있는지 ImageView 추가, Asset으로 불러와서 추가하기, 1x, 2x, 3x의 의미 UI요소들 X, Y 배치, 사이즈 조절 AppIcon 사이즈 별로 프로젝트에 적용하기 Structure개념 Town을 예시로 설명 Swift 파일로 Structure파일 생성 -> structure의 명과 파일명은 같도록 그리고 이 structure를 다른 ViewController에서 불러와서 initialize해서 사용하면 됨 타겟에 포함 시켜야함(파일 생성할 때나, 인스펙터에서) 보통 내가만든 건 타겟만 포함시키면 되고, 외부 라이브러리는 impo..

타입스크립트 - 타입스크립트 자바스크립트 차이 - dynamically typed(JS, 파이썬) => 런타임에서 타입 결정 - Statically typed(TS) => 컴파일에서 타입 결정 컴파일러 - 바벨 이용해서 TS -> JS로 변환가능 1. Statically Typed - 엄격한 타입이 장정 - 반대로 동적타입은 사용자가 내 어플리케이션을 사용하면서 버그가 빵빵 터질 수 있음 2. OOP가 가능 - 유지보수성이 높음 - 생산성 높음 - class, interface, generics, types가능 타입스크립트 공부방법 - 어떤 타입을 정확하게 이해하는 것이 중요 셋업 - 타입스크립트는 컴파일로 툴이 함께 제공됨! - VSC에서 커맨드 쉼표 => strict null 체크 - node.js ..

node.js / express 등 백엔드 기능을 React 포트폴리오인 Devtube 프로젝트에 추가하여 풀스택 개발을 경험치를 쌓으려고 한다. 서버를 직접 개발해보고, GET과 POST를 실행해서 값을 받아오고 데이터를 업데이트하는 기능을 추가할 예정이다. 또한, 회원가입과 로그인, 소셜 로그인 그리고 기본적인 비디오 CRUD 기능, 프로필 업뎃도 추가 개발 예정이다. Plan Set Up - Node.js - NPM(uderstanding dependencies) - Babel - Nodemon Express - First Server - GET Request / Response - Middleware / External Middleware / Controller Routers - Make Rout..

최근 깃허브에 방문하면 메인 소개글을 README로 쌈박하게 해놓으신 분들을 많이 보았다. 처음 들어오면 소개글에 눈이 먼저 가게 되어 그 사람에 대해 읽는 것 부터 시작하게 되어 말그대로 자신에 대해 간략하게 알리기 좋다. 커스터마이즈로 꾸밀 수 있으니 자기가 원하는 내용으로 구성하고 마크업으로 디자인 할 수 있다. 1. 새로운 Repository 생성 - 깃허브의 오너 이름과 같도록 생성한다. - Public으로 설정한다. - Add a README(최초생성시 해야함. Initialize it with a README to get started) 2.꾸며보자! 생성하자마자 프로필을 만들어준다. 이제 마음껏 꾸며주기만 하면 된다! 수정을 누르면 아래처럼 예시도 친절하게 주석처리해서 만들어 준다. ###..

시도한 해결 방법 1. public 폴더 하위에 _redirects파일 생성하여 아래 내용 입력 * /index.html 200 SPA로 개발했을 경우 경로를 못찾아서 설정해줘야 함 2. Build Command 설정 netlify Site Setting 페이지에서 Build & Deploy 카테고리로 이동하여 명령어를 아래와 같이 설정해준다. CI= npm run build yarn build 의 경우 작동이 안됐고, 그냥 npm run build만 했을 경우도 작동이 안할 수 있다고 한다. **netlify 자체 사이트에서 git을 연동해서 git repository를 가져와서 하는 경우 위의 방법으로 해결이 됐다. 그러나.... .env파일에 있는 api key를 읽어오지 못하는 문제가 생겼음(gi..

진행하는 프로젝트의 버튼을 공통컴포넌트로 사용하고 싶어 개발해보았다. 1. 우선 button 의 html 속성을 알아야한다. 속성을 확인한 후에 사용할 것만 외부에서 props로 주입해서 사용할 수 있게 만들어준다. disabled => 해당 버튼이 비활성화됨을 명시 class => css 스타일 onclick => 이벤트 함수 그 밖, 으로 감싸며 입력한 내용을 label로 정의할 예정 2. React로 Component로 변환 props로 받아오는 요소는 label => span 태그로 버튼 내부의 글을 나타냄 styleClass => 적용될 className disabled => true, false로 활성화 비활성화 조절 onClick => onClick이 일어날 시의 이벤트에 대응 import ..

fetch web APIs - 간단하게 네트워크 통신 가능함 - 긴 UI를 query params을 섞어서 해야했고, josn으로 변환처리를 해줘야 함 - 자바스크립트 내장라이브러리로 import하지않고 사용가능 - 지원하지 않는 브라우저가 있다. - return 값은 Promise 객체이다. Axios 라이브러리 - fetch 대용으로 사용할 수 있음 - json으로 변환해도 되지 않게 함 -> 라이브러리 자체에서 변환 해줌 - 브라우저 버전에 따라 XMLHttpRequest를 보내거나, fetch를 보내거나 해줌 - catch에 걸리면 .then을 실행하지 않고, console 창에 해당 에러 로그를 보여준다. - request aborting 요청취소가 가능하다! - 응답시간 초과를 설정하는 방법이..

Styled Components VS CSS Modules CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교 지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유)에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 , 개발 생산 blueshw.github.io * next.js 로 프로젝트 뼈대 구성 -> next.js 9.3 버전부터 CSS Module을 기본으로 채택하고있다. BEM 규칙 예제로 이해하는 BEM. HTML, CSS(flex/grid), UI/UX, Accessibility naradesign.github.io 클래스..

Collection of React Hooks ready to install with NPM Hooks Library useTitle useInput . . 등등 위 hooks를 시도해볼 것임 npm 라이브러리에서 다운 받을 수 있는 Hooks들이 많다. npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of..