Web Dev
-
Interactive Website - Transforms, Transitions, Animations 메모Web Dev/6. Graphics 2021. 5. 23. 22:21
Transforms https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. developer.mozilla.org MDN 문서를 보면 transform을 통해서 translate, rotate, scale and skew를 할 수 있다. 그리고 3d를 기준으로도 할수 있다. Transitions Transit..
-
Next.js Link컴포넌트에 className 적용하기Web Dev/3. React 관련 2021. 5. 23. 00:36
Next.js에서는 Client-side navigation을 지원하기 위해서 Link 컴포넌트를 제공한다. 그런데 여기다가 className을 적용할때는 그냥 a태그를 내부에 넣고 적용해주면된다. // is merely a decorator (higher-order component). It only has a href attribute. {children} // 실제로 그려지는 것 {children} Link안에 a태그가 없으면 Link컴포넌트가 알아서 감싸주는것 같고, a 태그가 있으면 그걸 그대로 사용하는 것 같다.
-
첫번째 게임 prototype구성 - useReducer, useRef, transition/transform 사용Web Dev/5. Projects 2021. 5. 22. 23:26
요새 이런저런거 공부한다고 막상 개발을 못해서 좀 답답했는데, 토요일 10시에 일어났기 때문에 어쩐지 지금 딱 개발하기 딱 좋다. 1. 현재 메인 화면에서 client-side navigation되는 부분이 없어서 이부분을 해줄거다. 첫번째 게임에 대해서만. 2. Tap Tap 동작이 있고, react에서 css animation을 적용할 것. 밤에 만든것 Component 기본 구성 지금 현재 큰 흐름은 이런식이다. index페이지에서 puzzle 컴포넌트로 연결하고, puzzle 페이지는 useReducer를 통해서 상태를 관리한다. useReducer를 통한 상태 관리 // useReducer를 이용한 state 관리 const STATUS = { LOADING: 0, GAME_INTRO: 1, G..
-
Interactive Website - Getting StartedWeb Dev/6. Graphics 2021. 5. 22. 22:37
동기 - 우선, 개발자라 코드쪽에 관심이 더 많긴 하지만, 이제는 내가 만드는 서비스가 얼마나 쓰기 편한가를 고민하고 싶고, 좀 쓸만한 것들을 만들고 싶다. - 개발자로 일하면서 느낀건데, css랑 마크업쪽이 생각보다 내 강점인데 이부분을 좀더 살리고 싶은데, 지금처럼 구리게 화면을 만들어내면 잘짜던말던 아무의미가 없겠다는 깨달음도 왔다. - 원래 심리학이나 인지, 교육 쪽으로 공부를 좀더 하고 싶었는데, 그럴 상황은 안되서 고민을 하다보니 내가 할줄아는 개발이 생각해보면 인지, 교육 쪽으로 접목하기가 굉장히 좋을 것 같다는 생각도 들었다. 특히 UI/UX쪽으론 지식이 전무하다고 볼 수 있는데, 이런 지식을 잘 쌓다보면 내가 관심있던 분야도 꾸준히 공부를 할 수 있게 될거라는 생각도 들었다. 오히려 대학..
-
Object.assign() - 열거가능한 모든 프로퍼티 복사Web Dev/1. JS 문법 관련 2021. 5. 21. 21:49
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign Object.assign() - JavaScript | MDN The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object. developer.mozilla.org Immutable.js같은걸 항상 도입할 수 있는 것은 아니다. 그렇기때문에 그런걸 쓰지 않고도 Data를 copy해야할때가 있는데 열거가능한 모든 프로퍼티를 복사할때 Object..
-
두시간 알고리즘 - 시작하기Web Dev/2. JS 알고리즘 2021. 5. 21. 17:37
알고리즘 공부 목표 개인적으로 코딩테스트와 관련해서 연이 별로 좋지 못하다. 그래도 어떻게든 한번 해보려고 C++로 계속 공부도 해보고 했는데, 코테가 점점 어려워지는 중이라 사실 이제 공채 코테는 아무래도 좋을 것 같고, 경력 이직할때 도움되는 정도로 알고리즘을 공부하겠다고 목표를 바꾸었다. 이제는 JavaScript로 하는 중. 시간은 2시간씩 공부를 하려고 한다. 원래는 더 많이 공부했는데, 조금 시간 아까운것 같다. 내가 납득하는 공부량은 딱 두시간인 것 같다. 내가 아무리봐도 코테를 열심히 10시간씩 공부한다고 카카오 블라인드 코테를 통과할 그런 머리는 아닌 것 같다. 여튼, 될지 안될지 모르는 공채 코테 뚫어보겠다고 개발 접고 알고리즘이나 하루종일 풀면 시간 아까운것 같기도하다. 그래도 확실히..
-
[자바스크립트로하는 자료구조와 알고리즘] 11- 13장Web Dev/2. JS 알고리즘 2021. 5. 21. 14:50
// 10장 연습 문제 function sqrtIntNaive(number){ if(number === 0 || number === 1){ return number; } let index = 1, square = 1; while(square < number){ if(square === number){ return square; } index++; square = index*index; } return index; } sqrtIntNaive(9); function sqrtInt(number){ if(number === 0 || number === 1) return number; let start = 1, end = number, ans = 0; while(start = this.size) throw 'ha..
-
React관련 싹 훑기(3) - Redux 의 개념Web Dev/3. React 관련 2021. 5. 21. 00:58
이때까지 Redux도 쓰기도하고, context도 쓰기도 했고, 완전 전체로 다 state로 관리하면서 props drilling을 해가면서 실사용되는 프로젝트를 다 굴려봤다. 근데 아주 다 하나같이 속이 터질뻔한 경험을 했어서 이번에는 State쪽을 Deep Dive 해보려고 한다. Redux https://frontendmasters.com/courses/redux-mobx/introduction/ Learn Introduction – State Management with Redux & MobX Steve Kinney introduces the course on Redux & MobX by giving an overview of what the course will cover and argues f..