본문 바로가기

비전공자 얼레벌레 코딩공부하기

전체 글
66

01. 알고리즘의 효율 분석 1. 시간 복잡도란알고리즘을 선택하는 기준은 시간복잡도로 선택한다.시간복잡도란 알고리즘의 성능을 나타내는 지표로, 입력크기에 대한 연산 횟수의 상한을 의미하며시간복잡도는 낮으면 낮을수록 좋다 알고리즘 수행시간을 측정하는 방법에는 절대 시간을 측정하는 방법, 시간 복잡도를 측정하는 방법으로 총 두가지가 있다.절대 시간을 측정하는 방법말 그대로 시간을 측정하면 된다. ex) 실행결과가 나올 때까지의 시간을 측정하면된다.하지만 이 방법은 실행하는 환경에 따라 달라질 수 있어서 코딩테스트에는 잘 사용되지 않는다시간 복잡도를 측정하는 방법연산 횟수와 관련이 있다. 시간 복잡도는 알고리즘이 시작한 순간부터 결괏값이 나올 때까지의 연산횟수를 나타낸다.시간복잡도를 측정한 결과는 최선,보통,최악의 경우로 나눈다. 코딩 .. 2025. 1. 21.
왜 Vite 쓰셨어요? 프로젝트를 진행하면서 당연히 사용하던 vite 왜 쓰냐고 물었을때 나는 그냥 빌드 속도가 빠르니까요!로만 대답했는데cra랑 vite의 차이점을 제대로 알아보고자 작성합니다.  Create React APP(CRA)한번쯤은 create react app을 이용해서 리액트 프로젝트를 생성했을것이다. CRA는 리액트 팀이 추천하는 공식 보일러 플레이트이기도 하고 HMR (Hot Module Relacement)과 같은 유용한 기능을 제공하기 때문이다. CRA는 Webpack을 사용한다. Webpack은 자바스크립트 코드로 구성된 툴인데 자바스크립트는 interpreted언어이기 때문에 느림.처리 해야 할 코드 양이 많은 경우에 그 단점이 확실히 느껴질것!! 그래서 개발자들은 Go와 같은 저급언어를 활용하여 자.. 2024. 12. 16.
리액트 suspense 왜 쓸까?? 프로젝트 진행 하면서 사용해본 suspense가 무엇인지, 왜 사용해야하는지 작성해보고자 한다!! Suspense? 이것.. 뭐예요?ReactSuspense는 컴포넌트의 렌더링을 일시중지하고 데이터 로딩을 기다릴 수 있게 해주는 React의 기능이다.React16.6부터 도입된 기능으로, 컴포넌트가 렌더링 되기 전에 데이터 로딩을 기다릴 수 있게 해줌으로써 데이터 로딩중에도 자연스러운 사용자 경험을 유도할 수 있다.ReactSuspense를 사용하면 로딩 상태를 선언적으로 처리할 수 있어 코드의 가독성과 유지보수정을 높이고, 사용자 경험을 개선하는 효과를 얻을 수 있다!  lazy, SuspenseSuspense의 핵심 개념으론 lazy와 fallback이 있다 lazy는 동적 임포트를 통해 컴포넌트를 .. 2024. 12. 13.
next js 14 + tailwindCSS폰트적용하기 2 이번에 포트폴리오 사이트를 만들면서 로컬 폰트가 아닌 눈누에서 제공하는 폰트는 어떻게 사용해야되나하면서 여기저기 찾아보다가 방법을 터득해서 까먹을까봐 작성합니다.  globals.css@tailwind base;@tailwind components;@tailwind utilities;@font-face { font-family: "PretendardVariable"; src: url(/src/app/_fonts/PretendardVariable.woff2);}@font-face { font-family: "LOTTERIACHAB"; src: url(/src/app/_fonts/chab.otf);}@font-face { font-family: "LeferiPoint-BlackA"; src: ur.. 2024. 11. 4.
기업프로젝트 회고 24.08.27 ~ 24.09.27 기업프로젝트 회고 펄핏이라는 기업인데 ai를 이용해서 신발을 추천해주는게 주제였어서ai를 이용한 프로젝트를 어디가서 해보나싶어 좋은 기회가 되었다. 브랜치 전략은 gitflow 기준으로 하되 pr과 코드리뷰는 github flow전략을 사용했다. 1주차이미 기획과 디자인은 다 나와있는 상태로 요구사항 정리, style 작업을 진행했다.내 목표는 api가 이미 나와있다는 가정하에 스타일 작업을 수요일까지 끝내고 목요일부터 api 연결이였으나기업에서 아직 api가 다 완성되지 않아 금요일까지.. 스타일 작업 수정만 했었다...중간중간 빠진 디자인과 간격이 조금씩 다르고 폰트 컬러들도 죄다 달라서팀원들끼리 굉장히.. 혼란스러웠던 기억이 있다2주차순조롭게 api 연결 및 각자.. 2024. 10. 7.
Github Action을 이용한 AWS S3로 자동 배포하기 항상 버셀이나 네트리파이로 프론트 배포를 진행했었는데 aws s3로 배포해보는 경험도 필요하다 생각이 들어서이렇게 기록용으로 하나씩 써봅니다..  1. Github Action 이용하기배포할 레포지토리에 접속후액션을 클릭하고 node.js configure 클릭을 해준다. 누르게 되면 아래와 같은 화면이 뜨게 된다.on: push: branches: [ "develop" ] pull_request: branches: [ "develop" ]develop 브랜치에다 push를 해주면jobs 아래의 작업들을 실행하겠다는 뜻임  strategy: matrix: node-version: [18.x, 20.x, 22.x] # See supported Node.js .. 2024. 10. 7.
[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 - 사전직무교육 1주차 ✅ 이번주  배운 내용자바스크립트 기본문법, 타입스크립트 기초, 리액트 기초  자바스크립트 기본 문법템플릿 문자열const name = '철수';const helloTemplate = `${name}야, 머해`;console.log(helloTemplate); 템플릿 문자열은 기존의 큰 따옴표나 작은 따옴표 대신에 백틱 기호로 문자열을 정의하는 방법을 말한다.템플릿 문자열은 변수를 대입할 수 있다는게 가장 큰 장점이다. 화살표 함수es6에서 새롭게 등장한 함수 선언 방법이다.1.일반함수function printHello() { retrun 'hello'; } console.log(printHello()); //hello 2.화살표 함수매개변수가 없을 때const printHello = () => { re.. 2024. 8. 25.
RESTful API란 🤔 RESTful API이란?RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안정하게 교환하기 위해 사용하는인터페이스이다.RESTful API는 안전하고 신뢰할 수 있으며 효율적인 소프트웨어 통신 표준을 따르므로 정보 교환을 지원한다! 🧐 REST의 정의REST(REpresentational State Transfer)는 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이다. 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미한다. 즉, 자원(resource)의 표현(representation)에 의한 상태 전달(state transfer)을 뜻한다.REST는 기존의 웹 기술과 HTTP 프로토콜을 그대로 활용하여 웹의 장점을 최대한 활용할 .. 2024. 8. 14.
React websocket을 이용한 1:1 채팅 만들기 엉엉 울면서 구현한 채팅 레지고. WebSocket이란??웹소켓은 웹 앱과 서버 간의 지속적인 연결을 제공하는 프로토콜이다. 이를 통해 서버와 클라이언트간에 양방향 통신이 가능해진다.HTTP와는 달리, 웹소켓 연결은 한 번 열린 후 계속 유지되므로, 서버나 클라이언트에서 언제든지 데이터를 전송할 수 있다. 이때 데이터는 패킷(packet) 형태로 전달되며, 전송은 커넥션 중간과 추가 HTTP 요청 없이 양방향으로 이뤄진다!이런 특징 때문에 웹소켓은 온라인 게임이나 주식트레이딩 시스템 같이 데이터 교환이 지속적으로 이뤄져야 하는 서비스에 적합하다 사용하기webSocket 연결 const [messages, setMessages] = useState([]);const webSocket = useRef(nul.. 2024. 7. 10.
React 파일 이미지 최적화 하기 react-image-file-resizer 메인프로젝트를 통해서 이것저것 참 많이 써본것 같다.이번엔 이미지 파일 리사이저를 통해 이미지 최적화를 해보겠따. 이미지 리사이징이 왜 필요한가? 🤔이미지 용량이 큰 경우엔 서버와 DB에 부담을 줄 수 있고 프론트에서 이미지를 느리게 불러오기 때문에 이미지 용량이 크다면 서버와 DB에 부담을 줄이며 프론트에서 이미지를 빠르게 보여줄 수 있게 리사이징이 필수라고 나는 생각한다! 메인 프로젝트에서는 사진업로드가 많은 서비스이다 보니채팅에서는 굳이 용량이 크고 사이즈가 클 필요가없다는 생각이 들어 리사이징을 진행하기로 했다 react-image-file-resizer는 이미지 리사이징, 인코딩을 위해 사용한다. base64 혹은 blob으로 변환이 가능함base64 인코딩이 뭐유..?진짜 말 그대로 풀면 6.. 2024. 7. 10.
CSRF토큰이뭔데이렇게저를괴롭히는건가요 메인프로젝트를 진행하면서 나를 힘들게하던 CSRF토큰에 대해 알아보자. 쿠키에 대한 아주 기본적인 개념은쿠키🍪여기에 작성해두었다. 쿠키와!!! CSRF쿠키에 별도로 설정을 하지않는다면, 크롬을 제외한 브라우저들은 모든 HTTP요청에 대해서 쿠리를 전송하게 된다. 그 요청에는 HTML문서 요청, HTML 문서에 포함된 이미지 요청, XHR 혹은 Form을 이용한 HTTP 요청등 모든 요청이 포함된다. CSRF(Cross Site Request Forgery)는 다른 사이트에서 유저가 보내는 요청을 조작하는 공격이다예) 이메일에 첨부된 링크를 누르면 내 은행계좌의 돈이 빠져나가는 방식의 해킹클라이언트가 자신이 하고싶은 행동에 대한 명령을 내렸는데, 해커가 페이지를 바꿔치기 하는등의 방법으로 해킹을 시도하기.. 2024. 7. 10.
메인프로젝트 개발회고 드디어 메인프로젝트 개발 회고를 작성한다! 24.05.02 ~ 24.06.04 메인 프로젝트 회고  합동 프로젝트 이후 바로 시작한 메인프로젝트다 옷장공유 서비스라는 취지로 만들게 된 coatycloset왜 coatycloset이냐 물으면 그냥입니다. 처음엔 결제도 넣고 커뮤니티도 넣어서 하자!였다. 하지만 프로젝트 기간은 4주.. 페이지도 많고 구현해야할 기능도 많았음 1주차기획 + 디자인2주차백엔드에서 api를 만들때까지 시간이 있으니 css를 후딱 만들고 msw를 이용해서 목 데이터를 만들어 api 통신이 되는지 테스트 하는 기간이였다.3주차 - 4주차백엔드에서 만들어낸 api로 갈아끼우고 테스트 하고 4주차에 마무리였음 하지만... 예상대로 되면 좋았겠지만생각보다 api는 더뎠고 csrf 토큰과 .. 2024. 7. 9.
728x90

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바