본문 바로가기
728x90
반응형

전체 글81

[프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (2) (feat. getBoundingClientRect()) 본 포스팅은 전편 [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1)에 이어서 작성한 글입니다! 전편: 2021.08.25 - [Learn to Code] - [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들 seo-tory.tistory.com 지난번 편에선 Drag & Drop API를 사용해서 ⬅️요쪽에서 ➡️요쪽으로 (??) 옮기는 코드를 어떻게 작성하면 되는지 그 단계를 살펴보았다. 이번엔.. 2021. 8. 26.
[프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들을 업데이트하고 있다. Hoxy 프로젝트가 뭐였는지 궁금하시다면... ☺️ >>> 2021.07.21 - [Learn to Code] - [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagak.. 2021. 8. 25.
웹 성능 개선을 위한 브라우저 작동 원리 이해 웹 성능 개선에 관해 공부를 하다가, 성능 개선 방법을 떠올리기 위해선 우선적으로 브라우저의 작동 원리에 대한 이해가 선행되어야 한다는 것을 깨닫게 되었다. 그러다 마주치게 된 것이 MDN의 "Populating the page: how browsers work"인데, 내용이 너무 좋아서 모든 페이지의 내용을 워드바이워드 읽어가며 공부했다. 본 포스팅은 이 글을 메인 레퍼런스로 공부하며 기록한 내용을 각색한 것이며, 글을 읽고 브라우저 작동 순서로부터 얻을 수 있는 성능 개선에 관한 나름의 인사이트를 정리한 글이다. 대기시간 && 싱글 스레드 브라우저 대기시간(latency)와 싱글 스레드(Single-threaded) 브라우저는 웹 성능을 이해하는데 있어서 가장 중요한 두 가지 요소이다. 클라이언트에서.. 2021. 8. 24.
[JS] 즉시실행함수(IIFE)란? 자바스크립트에서 함수는 가장 중요한 핵심 개념이다. 이러한 함수에도 여러 형태가 있는데, 이번에 다시 "초심으로 돌아가 개념들을 살펴보자!!"는 마음가짐으로 찾아보다가 즉시 실행 함수라는 것을 처음으로 알게 되었다. 역시 보면 볼수록 모르는게 계속 툭툭 튀어나오니 공부할 맛이 나는 것 같다. 각설하고, 이렇게 요상하게 생긴 아이를 처음 보았기 때문에 호기심이 생겼다. 아래는 즉시 실행 함수에 대해 찾아본 내용을 정리한 것이다. 그래서, 도대체 즉시 실행 함수는 뭘까?! Immediately (즉시) Invoked (실행되는) Function Expression (함수 표현) 말 그대로, 즉시 실행 함수는 정의됨과 동시에 즉시 호출되는 함수를 뜻한다. 영어로 IIFE라고 표기하며, 발음은 "iffy"로 불.. 2021. 8. 19.
[JS] event loop이란? 자바스크립트의 큰 특징 중 하나는, 바로 싱글 스레드(single-threaded) 방식으로 동작한다는 것이다. 그런데 실제로 브라우저가 동작하는 방식을 보면, 마치 여러 작업이 동시에 진행되는 것 같은 느낌을 받을 때가 있다. 싱글 스래드이기 때문에 한번에 하나의 작업이 진행되어야 할 것 같은데, 어떻게 여러개가 동시에 진행될 수 있을까? 이렇듯 자바스크립트가 마치 동시에 여러가지 일을 하는 것처럼 보이게 해주는데엔, 브라우저 및 런타임 환경에 내장되어 있는 기능 중 하나인 이벤트 루프(event loop)가 큰 기여를 한다. 이벤트 루프(Event loop)란 브라우저/런타임 환경(e.g. Node.js)에 내장되어 있는 기능 중 하나로, (1) 콜 스택(call stack)에 현재 실행 중인 실행 .. 2021. 8. 18.
Intersection Observer API: 스크롤링에 따라 엘리먼트가 짠!하고 나타나게 해주는 애니메이션을 만들고 싶을 때 채용 과제를 만들면서 틈틈이 파이널 프로젝트 개선 작업을 진행하고 있다. 사각사각의 랜딩 페이지를 수정하면서 커스텀 훅을 하나 만들었는데, 이 훅이 하는 일이 바로 마치 스크롤링을 할 때마다 무언가(?!)에 맞추어 페이지 요소들이 짠!하고 나타나는 것처럼 보이는 애니메이션을 추가하는 것이다. 백문이 불여일견! 애니메이션 추가 Before와 After를 살펴보자. 단순한 parallax만 적용되어 있다. Parallax는 그대로, 거기에 스크롤링에 따른 슬라이드인 애니메이션을 더했다 완전 동일한 디자인이지만, 화면에 표시되는 엘리먼트들에 스크롤링에 따른 slide-in 애니메이션을 추가했더니 조금 더 역동적인 모습이 연출되는 것 같다. 물론 메인 랜딩 디자인은 수정할 예정이지만, 그럼에도 불구하고 나의 커.. 2021. 8. 18.
[JS] Javascript (ES6+) 자바스크립트 vs. ECMAScript ECMAScript란 정보 통신 표준화 연구 기관인 Ecma International이 정의하는 표준화된 스크립트 프로그래밍 언어를 뜻한다. Ecma International은 정보 기술의 발전과 보급을 위해 표준화를 지향하는 국제기구로, 그러한 표준화의 대상엔 스크립트 프로그래밍 언어의 데이터 종류에서부터 네이티브 API 함수, 예약어, 에러 핸들링 등 문법적인 요소들이 모두 포함되어 있다. 이렇듯 Ecma International이 제공하는 규격에 맞춰진 언어들을 ECMAScript 언어라고 부르며, 자바스크립트 또한 그러한 언어들 중 하나이다. 즉, EcmaScript는 언어 명세(language specification)인 반면 자바스크립트는 그 명세를 따른.. 2021. 8. 10.
[TS] 타입스크립트 설치부터 데이터 타입 명시까지 🌱 타입스크립트 노트 깃헙 노트: src - index.ts 파이널 프로젝트를 개발하면서, 유달리 에러가 여러 번 발생했던 경우가 있었다. 바로 서버에서 가져온 유저 데이터를 기반으로 To-do list를 렌더링해야할 때 자꾸 우리 애가 not a function 이라던가 cannot get 0 of undefined라던가 에러가 뜨는 것이다. 분명히 코드 상으로 보았을 때 우리 애는 not a function일리가 없고 undefined 일리가 없는데 도대체 왜 이러나 싶었는데... 두둥 문제의 원인은 서버에서 받는 데이터의 데이터 타입과 클라이언트 쪽에서 작성한 데이터의 데이터 타입이 서로 달라서, 내가 찾는 프로퍼티가 없다거나 인덱스가 없다거나 하던 일이 계속 발생했던 것이다. 파이널 프로젝트 이전.. 2021. 7. 30.
코드스테이츠 수료 완료! 추가 공부 및 파이널 프로젝트 보완 계획 어느덧 코드스테이츠의 소프트웨어 엔지니어링 과정을 모두 끝내고 수료를 해버렸다. 아직 시작한지 얼마 되지도 않은 것 같은데 벌써 5개월이 흘렀다니...!!! (이러니 내가 안늙어) 이번주 금요일 (그저께) 수료식을 마치고 앞으로에 대해 여러가지 계획을 세웠다. 주니어 개발자로써 이제 막 커리어를 시작하려다보니, 듬성듬성 더 채울 수 있을 것 같은 부분들이 스스로 느껴졌기 때문이다. 애초에 코드스테이츠의 프로그램을 시작하게 된 것도 독학으로 시작한 개발 공부의 틈새에 군데군데 존재할 수 밖에 없는 틈들을 매꾸고 그 외 +@까지 얻기 위해 시작한 것이었고, 그렇기에 나에게 있어 틈 찾기(?)와 매꾸기(?)는 너무 자연스러운 일이다. 여러가지 계획이 있는데, 그 중 가장 중요한 두가지는 CS 기초 지식 쌓기와.. 2021. 7. 25.
728x90
반응형

티스토리툴바