react14 Next 13에서 Markdown 다루기(next-mdx) 현재 쓰고 있는 블로그를 이전 하려고 준비 중이다. 사실 Next 13 써보면서 뭘 만들어 보면 좋을 것 같아서 생각 하다가 RSC 컨셉 자체가 블로그 같은 정적 페이지를 만드는데 적합하다고 생각했고(fs 도 컴포넌트 단에서 접근 가능하고..), 마침 블로그 갈아 엎고 싶었어서 블로그의 가장 핵심기능인 마크다운 다루는 방법을 정리해 보려고 한다! 쉬울 줄 알았는데 생각보다 어려운 점이 많았고 다행히 레퍼런스가 많아서 일단은 마크다운 다루는 건 어느정도 파악한 것 같다. 놀랍게도 개발 전에 나는 '이거 그냥 마크다운을 브라우저에서 렌더링 해주는 라이브러리 쓰면 끝 아니야?' 이렇게 쉽게 생각함 사실 틀린말은 아닌데 생각 보다 고민할 지점이 많음 블로그 구조를 잡으면서 내가 했던 고민들은 대충 요론게 있다... 2023. 8. 3. Tailwind CSS 알아보기 예전에 스타일링 방식에 관에서 글을 쓴적이 있는데 2022.09.02 - [react] - CSS-in-JS vs CSS-module vs Post CSS 차이 구분하기 CSS-in-JS vs CSS-module vs Post CSS 차이 구분하기 리액트 기반의 프론트엔드를 공부하다 보면 다양한 스타일링 방식을 알게됩니다. 프로젝트를 진행하며 다양한 방식의 스타일링을 사용해보려 했고 CSS-in-JS 방식과 CSS-Module 방식을 주로 사용하 hoime.tistory.com utility first 방식의 스타일링에 관심이 생겨서 공부해 보려고 한다. 최근 진행 했던 프로젝트들을 대부분 CSS-in-JS 방식을 사용했고 개인적으로 개발 경험이 굉장히 좋다고 생각한다. 특히 컴포넌트를 만들다 보면 pr.. 2023. 7. 21. [react, express , socket.io] 채팅방 구현해보기 지난번에 socket.io의 개념에 대해서 알아보았습니다. 2023.06.29 - [CS] - socket.io 딥다이브 - 개념 과 이해 socket.io 딥다이브 - 개념 과 이해 최근 이직을 위해 면접을 보러 다니는 중에 웹소켓에 관한 질문을 받은 적이 있다. socket.io를 이용해서 실시간 채팅 서비스를 만들었고 그 과정에서 웹소켓에 관한 공부를 진행한적이 있는데, 막 hoime.tistory.com 개념을 알고있으면 공식문서에 example이 워낙 잘 되어있어서 구현은 어렵지 않습니다. socket.io 는 채팅에 최적화된 라이브러리로 사용하는 사람들은 대부분 실시간 채팅방을 구현하기위해 사용할 것입니다. 나도 이전에 프로젝트 했을때 여러 채팅방 마다 소켓 연결을 관리해야해서 라이브러리에서 .. 2023. 7. 14. 즐거운 넘블 프로젝트 후기 넘블에서 진행한 커뮤니티 만들기 챌린지에 프론트엔드 개발자로 참여하였습니다! 프로젝트 회고록을 작성해 보려 합니다. ✔ 지원동기 모집 당시 면접, 코테 준비 때문에 굉장히 스트레스가 많았던 기억이 난다 ㅜ 서류 붙으면 코테 떨어지고, 코테 붙으면 면접 떨어지고,, 면접 한번 보러 서울 갔다 오면 몇 십만원 씩 깨지고,, 사실 프론트 엔드 개발이 하고 싶은건데 취업 준비 때문에 한동안 개발을 하지 못했음 그냥 아무 생각없이 개발 하고 싶다는 생각이 있었는데 마침 프로젝트 모집 중이여서.. 면접도 떨어졌겠다.. 진짜 개발하고 싶어서 지원함 ✔ 프로젝트 소개 우리가 진행한 프로젝트 "소분 소분"은 내 아이디어가 채택 되어서 진행함 ㅎㅎ 동네 위치를 기반으로 같이 장보고 식료품을 나눌 수 있는 서비스! 나는 요.. 2022. 12. 1. Recoil은 쉬운 라이브러리?(Recoil vs Redux) 상태관리(State Management)는 리액트에서 굉장히 중요한 개념입니다. 리액트는 데이터의 흐름이 단방향이기 때문에 프로젝트의 규모가 조금만 커져도 Props를 전달하기 위해선 하위 컴포넌트로 내려줘야하고, 불필요한 Props drilling이 발생하기 때문에 전역적으로 상태를 관리할 수 있는 라이브러리를 사용합니다. 그 중 가장 대표적인 Redux를 공부하고 최근에는 redux-toolkit을 이용해서 프로젝트를 진행하고 있습니다. Client State 와 Server State? 프로젝트를 진행하며 프론트엔드 내에서 상태관리가 필요한 데이터 들이 대부분 api요청을 통해 받아오는 데이터 이기 때문에 api 캐싱과 로딩, 업데이트 등 서버와 관련된 상태 관리 기능을 제공하는 라이브러리(reac.. 2022. 9. 5. CSS-in-JS vs CSS-module vs Post CSS 차이 구분하기 리액트 기반의 프론트엔드를 공부하다 보면 다양한 스타일링 방식을 알게됩니다. 프로젝트를 진행하며 다양한 방식의 스타일링을 사용해보려 했고 CSS-in-JS 방식과 CSS-Module 방식을 주로 사용하게 되었습니다. 최근 프로젝트를 진행하며 자주 사용되는 속성을 변수화 globalstyle에 변수화 하여 사용했습니다. 해당 프로젝트에서는 styled-components를 사용하였는데 저렇게 사용자 지정 속성을 사용해도 되지만 라이브러리에서 제공하는 ThemeProvider를 사용하는 것이 더 적합하다는 걸 뒤늦게 알게되었습니다. https://styled-components.com/docs/advanced styled-components: Advanced Usage Theming, refs, Securi.. 2022. 9. 2. 이전 1 2 3 다음
