보일러 플레이트 코드란? 보일러 플레이트 코드가 무엇인가? 컴퓨터 프로그래밍에서 보일러플레이트 코드 ( boilerplate code)는 거의 또는 전혀 변형 없이 여러 군데에서 반복되는 코드 섹션을 뜻한다.쓰면 좋은 점.가장 좋은 건 "개발 속도를 빠르게 만드는" 속도에 있다.어차피 계속 재사용될 코드이기 때문이고, 변형도 거의 없이 쓰기 때문이다.(참고한 글)https://aws.amazon.com/ko/what-is/boilerplate-code/ 상용구 코드란? - 상용구 코드 설명 - AWS보일러플레이트 코드는 여러 가지 상황에서 거의 또는 전혀 변경하지 않고 재사용할 수 있는 컴퓨터 언어 텍스트입니다. 이 용어는 상황에 따라 변경을 최소화하면서 문서 템플릿이나 보일러플aws.amazon.comhttps://brunch.. 2025. 5. 8. 코드 스플리팅에 대해.. 코드 스플리팅에 대한 좋은 글이 있어서 나의 티스토리에 기록으로 남기면서 동시에 공유할 겸 이 글을 작성해 본다.코드 스플리팅이 무엇인가? 우리가 자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다. 그럼, 프로젝트의 규모가 커질수록 자바스크립트 파일 용량도 커지게 된다. 용량이 커지면, 인터넷이 느린 환경에서는 페이지 로딩속도도 느려질 것.코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통하여, 페이지의 로딩 속도를 개선할 수 있다.하는 방법> 관련 링크https://velog.io/@velopert/react-code-splitting 리액트 프로젝트 코드 스플리팅 정복하.. 2025. 5. 6. 마이크로 서비스 아키텍처이란? 마이크로서비스란?마이크로서비스란 독립적인 서비스들의 모음이 경량화 API를 통해 통신하는 애플리케이션 아키텍처의 한 유형을 말한다.가장 최근 온라인 구매 사이트에 방문했던 때를 떠올려 보자. 제품을 검색하기 위해 사이트에 있는 검색창을 사용했을 것입니다. 이러한 검색이 하나의 서비스가 된다. 또는 관련 제품 추천을 봤거나 장바구니에 상품을 추가함 > 이러한 것들 역시 서비스. 이러한 마이크로서비스들이 합쳐질 때 완벽하게 작동하는 하나의 애플리케이션이 성립된다.더욱 효율적인 애플리케이션 개발 방식마이크로서비스 아키텍처는 하나의 애플리케이션 내에 있는 각 핵심 기능이 독립적으로 존재할 수 있도록 소프트웨어를 구축하는 클라우드 네이티브 접근 방식이다.애플리케이션의 요소들이 이러한 방식으로 분리되면 개발 팀과 .. 2025. 4. 23. TIL이 무엇인가? TIL이란?TIL은 Today I Learn 의 약어이다.한국말로 직역하면 오늘 내가 배운 것! 이라는 뜻.일일커밋 이라고 부르기도 한다. 오늘 공부 한 내용을 매일매일 기록하는 방법이라고 쉽게 이해하면 될 것 같다. (일종의 일기장이라고 보면 된다.)왜 함?목적은 두 가지.1. 매일 공부하는 것을 기록하기 위함.2. 성실하게 공부하고 그것을 커밋해서 잔디를 채우기 위함.사실. 2번 전략이 핵심이다. 다만 이 전략이 너무 유명해져서 면접관들도 알고 있다.그러나 나쁘게 보는 전략은 아니다. 절대로 마이너스되는 요소가 아니라는 것!토스의 프론트 리더분도 한다!https://github.com/milooy/TIL GitHub - milooy/TIL: Today I LearnedToday I Learned. C.. 2025. 4. 16. 인디해킹이란? 인디해킹이라는 개념 혹은 (직업?) 같은 것이 있다.인디해킹이란?심플하게 말하면 1인 개발자을 말한다. 혼자서 1인 프로덕트를 완성시키는 것이다. 프로덕트 안에는 결제를 넣어서 수익화를 한다.이 인디해킹이라는 개념은 외국에서 유명하다. 아직까지는 국내에 유명한 개념은 아니지만, 결국 널리 퍼질 것이라고 생각한다.levelsiolevelsio라는 인디해킹에서 가장 유명한 개발자가 있다. (사진 참고)이 사람은 무려 자신만의 프로덕트를 여러 개 만들어서 월에 1억을 넘게 번다. 그것도 "혼자서" 말이다.이 분의 sns는 다음 링크를 참고하자.https://x.com/levelsio X의 @levelsio님(@levelsio)🇪🇺@euaccofficial ✈️https://t.co/UVJczDtp9x $4.. 2025. 4. 13. 포트원으로 결제 모듈 개발하는 것에 대하여.. 이번엔 포트원을 이용해서 결제 모듈을 세팅하는 연습을 해볼 것이다. 언어는 Next.js를 채택하였다. 이 언어를 채택한 이유는 프론트엔드 진영에서 가장 핫하고, 풀스택으로 개발을 진행할 수 있기에 선택하였다.이거 왜 하는거임?"인디해킹"이라는 것이 있다. 이건 추후에 글을 작성할 것이다.개인적으로, 개발자가 풀스택. 즉 화면을 다루는 프론트와, 서버와 데이터를 다루는 백엔드를 할 수 있다면? 그리고 그 기술에 "결제 모듈"을 붙일 수 있다면? 이론적으로 보나, 실질적으로 보나 "하나의 완전한 프로덕트"를 만들어 낼 수 있다.게다가. 이제는 Next.js나 Remix 같은 풀스택 프레임워크가 등장하였으니, "1인 개발"을 하는 난이도가 기하급수적으로 낮아졌다. 심지어 커서 AI, bolt AI 같은 a.. 2025. 4. 12. 안드로이드 스튜디오 xml 코드 (텍스트/버튼) 대충 정리 안드로이드 스튜디오의 xml의 기본적인 버튼과 폰트에 대한 코드를 얼추 여기에 정리하겠다.(복습용으로 대충 썼다)🎨 1. 버튼 (Button) 스타일링 android:layout_height="wrap_content" android:text="클릭하세요" android:textSize="18sp" android:textColor="#FFFFFF" android:background="@color/blue" android:padding="10dp" android:gravity="center" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf=".. 2025. 4. 4. [VSCode]한글이 깨져 보이는 파일 인코딩 변경하기 커서 콘솔에 한글이 깨지는 버그가 있어서 찾게 되었다. vs code도 똑같이 통하니 참고할 것https://dewble.tistory.com/entry/change-encoding-of-a-file-that-looks-broken-in-korean [VSCode]한글이 깨져 보이는 파일 인코딩 변경하기파일의 인코딩 문제로 인해 한글이나 특수 문자가 깨져 보일 때가 있습니다. 이런 문제를 해결하기 위해 VSCode를 사용하여 파일의 인코딩을 변경하는 방법을 소개하겠습니다. 1. 원본 파일을 VSCoddewble.tistory.com 2025. 3. 27. 커서 ai로 코딩하기. 바야흐로 대 "AI" 시대. 코딩에 특화된 AI도 정말 많이 나왔다. 그중에서 유명한 "커서"가 있다. 뭐 물론 커서 말고도 다른 AI들이 많다. 챗GPT나 클로드... 코파일럿 등등.. 그러나 이 글에서는 커서 AI에 대해서만 이야기하겠다.공식 홈페이지https://www.cursor.com/ Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com공식 홈페이지 링크는 다음과 같다. 참고하길 바란다.커서란 무엇인가?커서는 vs code 에디터에 삽입되어 "자동"으로 코드를 추천해주며, 에이전시 모드 등으로 실시간으로 내 코드와의 반영을.. 2025. 3. 27. SSR 과 CSR (서버 사이드 렌더링/클라이언트 사이드 렌더링) Next.js나 리액트를 배울 때, 서버 사이드 렌더링이랑 클라이언트 사이드 렌더링 이야기가 나온다. 간단하게 말하면 렌더링에서 차이가 나는 것인데,서버 사이드 렌더링은 "서버"에서 미리 렌더링을 하고 클라이언트로 보내주는 것이고, 클라이언트 사이드 렌더링은 "클라이언트"에서 렌더링을 담당하는 것이다.자세한 내용은 다음 글을 참고하자.https://velog.io/@jhyun_k/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-vs-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-SSR%EA%.. 2025. 3. 20. vscode에서 쓰이는 유용한 기능 소개 개인적으로는 alt 클릭이 유용했다. (생각보다 커서 반복해야 할 작업이 많이 생긴다!)(관련 영상) >https://youtu.be/mh-0twurNRE?si=DnqIxS2TVLRu1sZn 2025. 3. 13. 카카오톡에 챗봇 연결하기 카카오톡에 챗봇을 넣어서 cs를 자동화하거나 질문을 받아보는 법을 배워보자.(실제 카카오 문서)https://kakaobusiness.gitbook.io/main/tool/chatbot/tutorial/make_chatbot/tutorial_1 튜토리얼 1단계 | kakao business 비즈니스 가이드 kakaobusiness.gitbook.io(참고 영상)https://www.youtube.com/watch?v=8ctJMO9KyDI챗봇 시작하기https://business.kakao.com/info/chatbot/ 카카오비즈니스비즈니스, 톡처럼 쉬워지다.business.kakao.com 2025. 3. 7. 토스에서 즐겨쓰는 yarn 시작하기 전에, 공식 사이트는 다음 링크를 참고하자.https://yarnpkg.com/ Home page | YarnYarn, the modern JavaScript package manageryarnpkg.comYarn 이란?Yarn은 Javascript 패키지 매니저이다. 프로젝트 패키지 의존성을 관리하는 툴이며, 다른 개발자들과 패키지를 공유할 수 있도록 도와준다. (*third-party 모듈을 패키지라고 부른다.)Yarn은 npm과 마찬가지로 패키지의 저장소를 제공하며, 시스템에서 의존 패키지를 설치, 업데이트할 수 있도록 도와준다. package.json 파일을 통해 해당 프로젝트가 의존하고 있는 모든 패키지를 구분하고, package.json에 있는 dependencies 필드를 기반으로 .. 2025. 2. 28. README.md 미리 보는 방법 일단 밑 영상에서 알게 되었다.https://youtu.be/-KOtsS20TsY?si=ytfRUdL0KEulnDu5리드미 쓸 때 미리보고 싶으면 마켓 플레이스에 Markdown Preview 깔면 된다. 사진 참고하자.단축키는 ctrl + k + v가 될 거다. (윈도우 기준) 맥북이면 cmd + k + v일거다. 아마 단축키를 바꿀 수는 있는데, 그냥 그대로 쓰자. (아님 말고) 2025. 1. 24. 파파고 음성을 mp3로 바꾸기 TTS는 쓰고 싶고... 근데 무료에다 얼추 쓸만한 것이 없을까... 싶었는데. 사실 찾자면 엄청나게 많다.(해외에는 일레븐렙스가 유명하고, 국내에는 타입캐스트가 유명하다. 브류도 있기는 한데... 타입캐스트가 브류보다는 훨씬 좋다. 비싸서 그렇지)찾다보니, "파파고"에 있는 여성 목소리 TTS가 눈에 들어왔다.보면 내가 번역하고자 하는 한국말도 들을 수가 있다. 당연히 영어도 들을 수 있다. (일본어도 되고, 중국어도 된다. 다른 언어도 물론 가능하다.)이 부분에 착안, 파파고를 쓰는 것은 무료이며, 사용 시간에 제한이 없다. 즉 "무제한"이라는 점.그러면 TTS화 하려면 어떻게 해야 할까? 이 부분에 대한 정답은 밑의 티스토리 글을 참고하자.https://22ww.tistory.com/290 텍스트로.. 2025. 1. 8. 브라우저의 작동 원리 렌더링이나 DOM, 브라우저의 기본 구조 등등에 관한 내용이다. (전반적인 브라우저 작동 원리)https://youtu.be/Mqh13dNI8jc?si=C6H9qRgs5lTPhhDvhttps://yozm.wishket.com/magazine/detail/1338/ 프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정 | 요즘IT프론트엔드 개발자에게 있어 브라우저는 거의 모든 것과도 같습니다. 하지만 그렇다고 해서 프론트엔드 개발자가 브라우저의 모든 원리에 대해 잘 알고 있는 것은 아니지만, 복잡한 웹 어플리yozm.wishket.com 2024. 12. 27. Netlify Page Not Found 오류 해결 리액트 프로젝트를 진행하고, 백엔드를 연결하는 것까지는 오케이. 문제는 이걸 Netlify에 올렸는데, Page Not Found가 떠버린다. 이걸 해결하는 방법을 작성하고자 한다.방법은 쉽다.public 폴더에 redirects 추가public 폴더에 _redirects 라는 이름의 파일을 만들고 아래와 같은 내용을 작성해 주면 된다.public/_redirects/* /index.html 200즉, 리액트의 public에 _redirects 를 세팅하는 것이 정론이다.https://doooodle932.tistory.com/160 [Netlify] 페이지 새로고침 시 Page Not Found 오류 해결netlify로 올려놓았던 프로젝트에서 페이지 새로고침 시 Page Not Found가 뜨는 오.. 2024. 12. 6. FE - BE , UI/UX Designer 협업 프론트엔드 개발자와 백엔드 개발자의 협업. UX/UI 디자이너와 프톤트엔드 개발자의 협업 등.. 전체적으로 하나의 프로덕트 (혹은 프로젝트)를 완성해나가는 과정에서 협업은 필수이다. 이때 도움이 될 만한 글을 여기에 남겨본다.https://devocean.sk.com/blog/techBoardDetail.do?ID=166014 웹 프론트엔드 개발자와 UI/UX 디자이너가 효과적으로 협업하는 방법 devocean.sk.com(웹 프론트엔드 개발자와 UI/UX 디자이너와의 협업)https://velog.io/@sopt_official/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%98%91%EC%97%85%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2.. 2024. 11. 13. 코딩실력보다 더 중요한 것. https://youtu.be/pkr48S22zH0?si=FQOOPSn4jMlVmvaj그건 바로 "허리"이다.허리뿐 아니라 전체적인 몸의 밸런스를 말한다. 원래 많이 앉을수록 허리 디스크 확률은 올라간다.디테일한 부분은 영상을 보자. 2024. 10. 14. 2의 보수란? (비트 연산) https://yiyj1030.tistory.com/83 2의 보수란?? 쉬운 설명으로 궁금증 해결.. (비트 연산)2의 보수: 컴퓨터가 음수를 저장하기 위해 사용하는 방법 중 하나. 예를 들어 4비트 머신을 생각해보자. 이 머신은 0000부터 1111부터 표현이 가능하다. 총 16개. 양수만을 저장하고싶다면 숫자 0부yiyj1030.tistory.com디테일한 설명은 위의 블로그를 참고하자.2의 보수는 심플하다. 양수를 음수로, 음수를 양수로 바꾸기 위함이다.정수 체계는 양수만 있는 것이 아니라 음수도 있기에, 이 2개의 범위를 "비트"로 표현하기 위함이다.보통 십진수를 이진수로 바꿀 때에는 쉽게 2의 0승부터 시작해서 2의 1승~~ 이런 식으로 커진다.이 점을 이용해서 not 연산에 1을 더하는 방식.. 2024. 10. 12. 이전 1 2 3 다음
