전체 글 검색 결과
267 개의 검색 결과가 있습니다.
# 공부 자료들/기타

[기타] Angular, React, Vue는 어떻게 등장하게 되었을까?

SPA 환경 구성을 위해서 뷰와 리액트를 사용하면서, 이러한 웹 개발용 프레임워크나 라이브러리가 어떻게 등장하게 되었는지에 대해 이해할 필요가 있다고 생각했습니다. 그래서!! 이번 포스팅에서는 기존 HTML과 CSS를 화면에 뿌려주는 방식에서 어떻게 Angular(AngularJS), React, Vue가 등장하게 되었는지에 대해 알아보도록 하겠습니다. 목차 0. Ajax와 jquery 갑자기 뜬금없이 무슨 Ajax냐? 라고 할 수 있는데!! Angular의 등장을 이해하기 위해서는 먼저 Ajax에 대한 이해가 필요합니다. Ajax는 SPA의 시초격인 정보 교환 기법입니다. Ajax시대 이전에는 웹브라우저는 특정 사이트를 보여주기 위해서 매번 서버에 요청해야했고, 서버가 해당 HTML파일을 브라우저에게 ..

2022. 9. 12. 03:43
# 주저리주저리/가끔 하고 싶은 뻘소리

[뻘] 7주간의 공통 프로젝트, 핑퐁클래스 회고

핑퐁클래스 웹 애플리케이션 개발을 마치고, aws 서버를 반환하기 전에 어떤 일을 했는지, 뭐가 잘됐는지, 뭐가 아쉬웠는지에 대해서 회고해보고 싶어서 이렇게 글을 작성하게 되었습니다. 목차 0. 팀 컬쳐 부스트캠프 그룹프로젝트기간에 경험했던 내용들을 좀 더 가다듬어서 적용해보고 싶었습니다. 그래서 Notion에 페이지를 만들어서 필요한 내용들을 적어두었습니다. 0.0. 팀 규칙 기본적인 팀 규칙 페이지를 만들고 코딩관련, 복지관련, 기타로 나누어서 각각에 맞는 항목들을 적용했고, 당시 상황과 맞지 않는 여러 요소들 (지각비라든지, PR -> MR이라든지..)은 수정해서 올렸습니다. 0.1. 갤러리 그리고 당시부터 시작해서 지금까지 거의 1년째 이어오고있는 갤러리를 이번 프로젝트에도 도입했는데, 직접 책임..

2022. 8. 29. 01:29
# 공부 자료들/기타

[Redux] 상태관리 라이브러리 Redux는 어떻게 등장하게 되었을까?

작년 하반기부터 본격적으로 프론트엔드에 대해 하나둘씩 공부하면서 가장 많이 질문받고, 또 어떻게 사용할 지에 대해 많이 고민한 부분이 바로 상태관리입니다. 그 중에서도 제가 가장 많이 사용해온 상태관리 라이브러리가 바로 Redux인데요!! 그럼 Redux가 만능이냐? 그렇지는 않습니다. 하지만 저는 단지 Redux가 가장 데이터가 많이 축적되어있는 상태관리 라이브러리이고, 현업에서 가장 많이 쓰인다는 그 이유로 채택했었습니다. 그래서 그런지, 제가 면접에서 정말 많이 들었던 질문이 바로 왜 Redux를 사용했는가 였습니다. (면접관분들은 약점을 정확히 찌를 줄 아십니다..) 굳이 Redux가 아니어도, props로 전달할 수도 있고 Recoil이나 Zotai와 같은 다른 라이브러리들도 있는데 왜 하필 R..

2022. 8. 1. 02:09
# 공부 자료들/기타

[기타] NAVER DEVIEW 2018 웹 성능 최적화에 필요한 브라우저의 모든 것 영상 요약

이전에 렌더링 최적화 글을 작성하면서 브라우저가 어떻게 성능최적화를 하는 지에 대해서 자세하게 검색해본 적이 있습니다. [CSS] 브라우저의 Layer Model과 하드웨어 가속을 이용한 렌더링 최적화에 대해 알아보자! 이전 글에 이어서, 이번에는 Layer Model에 대한 복습과 함께 CRP 과정에서 발생할 수 있는 하드웨어(GPU) 가속에 대해 조금 더 자세하게, 그리고 이해하기 쉽게 뜯어보려고 합니다. 사실 지난 포스팅 ssocoit.tistory.com 이 때 제가 많은 도움을 받았던 영상이 바로 NAVER DEVIEW 2018의 웹 성능 최적화에 필요한 브라우저의 모든 것 인데요! 복습 차원에서 이 영상을 간단하게 요약해보려고 합니다. 해당 영상은 아래 링크에서 확인하실 수 있습니다. 웹 성능..

2022. 6. 22. 04:47
# 공부 자료들/SQL

[SQL] MySQL Workbench의 Stored Procedure 사용해보기

정처기를 공부하던 때에도 항상 마주하기 싫어서 도망쳤던 프로시저를 과제에서 만나버렸습니다. 이번에는 피할 수 없기에 어쩔 수 없이 부딪혀야했는데, 친구에게 도움을 받게되어 그 내용을 까먹지 않기 위해 블로그에 기록해둘 용도로 이번 포스팅을 작성해봅니다! 틀린 내용이 있다면 가차없이 댓글을 달아주시면 바로 반영하도록 하겠습니다!! 목차 0. 프로시저가 뭐지? 프로시저는 일련의 쿼리를 한번에 실행하기 위한 요소입니다. 자주 사용되는 복잡한 작업들을 간단하게 실행하는 용도로 사용할 수 있습니다. 비슷한 요소로 사용자 정의 함수라는것도 존재하는데, 실행 후에 결과값을 반환한다는 차이점이 있습니다. 그 외에도 여러 차이점이 존재하는데, 다양한 제약사항이 있어서 실제로는 프로시저를 비교적 많이 사용한다고 합니다. ..

2022. 6. 16. 23:18
# 공부 자료들/React

[React] side-effect를 처리할 때는 useEffect를 쓰자

한창 진행중인 Vue 기반 프로젝트를 마무리하고, 방학기간이라 여유가 생겨서 정말 오랜만에 React 기반의 SsocoTimer를 열어보니 머리가 지끈지끈해졌습니다. 리액트 진짜 너무 어렵네요 ㅋㅋㅋㅠ issue에 쌓여있는 내용들을 하나씩 쳐내기 위해서 코드를 변경하고 있는데, useState가 원하는대로 동작하지 않는 현상이 발생했습니다. 사실 이전에 useState와 useEffect의 동작방식에 대해 하나씩 확인해보면서 "이건 이벤트 핸들러(이벤트 처리 함수)가 아닌 useEffect로 처리하면 된다"는 것을 경험적으로 깨달았기 때문에 문제 수정 자체는 크게 어렵지 않았지만, 리액트의 라이프사이클에 대해서 조금 더 정리하고 넘어가야 할 필요성을 느끼기도 했고, 비슷한 고민을 다시 하고 있는 나를 보..

2022. 6. 4. 23:43
# 공부 자료들/React

[React] 알고 쓰면 피가 되고 살이 되는 React.memo, 그리고 Key와의 관계?

3월 이맘때쯤, 반복되는 요소들을 출력할 때 React.memo를 사용하면 보다 효율적으로 렌더링할 수 있다는 이야기를 듣고 여러 가지로 테스트를 해본 적이 있습니다. 단순히 React.memo를 사용하는 것 자체를 이해하는 것은 크게 어렵지 않았습니다. 하지만 Key값이 들어가니 갑자기 헷갈리기 시작했습니다. 같은 위치가 아니라서 밀려 내려가면, 새롭게 렌더링 되는게 아닌가? 라는 생각이 들었습니다. (결론부터 말하자면 React.memo와 Key는 쓰임새가 조금 다릅니다!) 그래서 직접 테스트를 하면서 익힌 내용을 간단하게 글로 정리해보려고 합니다. (많은 자료들을 통해 최대한 검증하려고 노력하였으나, 그럼에도 틀린 부분이 있다면 언제든지 가차없이 댓글을 남겨주시면 빠르게 수정하도록 하겠습니다!!) ..

2022. 4. 23. 21:03
# 공부 자료들/HTML CSS

[CSS] 브라우저의 Layer Model과 하드웨어 가속을 이용한 렌더링 최적화에 대해 알아보자!

이전 글에 이어서, 이번에는 Layer Model에 대한 복습과 함께 CRP 과정에서 발생할 수 있는 하드웨어(GPU) 가속에 대해 조금 더 자세하게, 그리고 이해하기 쉽게 뜯어보려고 합니다. 사실 지난 포스팅에서 어렵고 복잡하게 설명하지 않았나 생각이 들더라구요... 이번엔 최대한 쉽게 설명하려고 노력해보도록 하겠습니다!! 이번 포스팅도 제가 사용하는 크로미움 기반의 크롬 브라우저를 기준으로 두고 설명합니다!! (다른 브라우저의 경우 제가 사용한 예시가 다르게 작동할 수 있습니다!) (많은 자료들을 통해 최대한 검증하려고 노력하였으나, 그럼에도 틀린 부분이 있다면 언제든지 가차없이 댓글을 남겨주시면 감사드리겠습니다!) 목차 0. Layer Model 복습 이전 포스팅에서 브라우저 렌더링, 혹은 CRP(..

2022. 4. 17. 06:21
# 공부 자료들/HTML CSS

[CSS] Blink엔진에서 transform 속성은 Reflow와 Repaint가 발생하지 않는다

Reflow와 Repaint에 대해서 너무 겉핥기로만 알고있는게 아닐까.. 고민하게 만들어준 문제입니다. 단순히 어떤 동작이 발생하는지만 파악하고 넘어가는 것보다는 사용하는 CSS 속성에 따라 어떻게 렌더링 과정이 달라지는지, 또는 어떻게 하면 CSS 속성을 바꿔서 렌더링 최적화를 할 수 있을 지에 대해서 알아보는 것도 좋지 않을까요? 그런 의미에서 오늘은 CSS의 transform속성을 이용한 최적화에 대해서 알아보려고 합니다. (많은 자료들을 통해 최대한 검증하려고 노력하였으나, 그럼에도 틀린 부분이 있다면 언제든지 가차없이 댓글을 남겨주시면 감사드리겠습니다!) 목차 0. 렌더링 엔진 각각의 브라우저는 렌더링에 사용되는 렌더링 엔진을 가지고 있습니다. 이 렌더링 엔진은 표준이 따로 없기 때문에 브라우..

2022. 4. 6. 05:23
# 공부 자료들/React

[React] craco로 CRA 5 + TypeScript 환경에서 babel 설정 만지기

한창 쏘코타이머를 열심히 개발하던 중, 하나의 피드백이 들어왔습니다. 이 Pragma라는 녀석이 매 tsx마다 포함되어있는데, 이걸 babel로 없애버리면 어떠겠냐는 의견이었습니다. 물론 그러면 더 좋죠. 귀찮음도 줄어들고 그만큼 확장성도 늘어날테니까요. 하지만.. 이걸 고민하지 않은 것이 아니었지만... 의식적으로 피하고 있었습니다. 왜냐면 저는 CRA환경에서 개발을 하고 있었기 때문에 babel 설정을 건들기 위해서는 eject를 해야만 했죠. eject를 하게 된다면 CRA를 쓰는 의미가 없어진다고 생각한 저는 다른 방법을 찾기 시작합니다. 그것이 바로 craco였죠. 목차 0. emotion emotion는 CSS-in-JS의 대표적인 라이브러리로, JavaScript 안에서 스타일을 작성할 수 ..

2022. 3. 23. 05:00