윤민상 블로그

컴포넌트 글을 보지 않았다면 먼저 봐주세요~~ https://ms3864.tistory.com/380 개요 저번에 만든 컴포넌트와 연동할 라우터를 만들어야 한다. 참고로 리액트 라우터와 유사하게(애초에 리액트 라우터는 context를 사용하기 때문에 다르게 만들 수 밖에 없다.) 만들 것이다. 구현할 것 무엇을 구현해야 할 지 생각해보자. 컴포넌트의 html을 string으로 구현했기 때문에 일단 리액트처럼 Link를 사용할 수는 없다. 그러면 그냥 a태그에 이벤트를 거는 방법도 있을것이고 새로운 태그에 이벤트를 걸어도 괜찮다. 그리고 /로 경로를 나눠서 상태로 가지고 있으면 좋겠다. 왜냐하면 params가 있는경우가 있기 때문이다. 그리고 리액트의 훅같은 함수가 있으면 더 편할것같다. 대충 pushst..

웹폰트는 무조건 사용하기 때문에 한번쯤 정리하고 싶었다. css 파일에서 @font-face로 옵션을 지정하고 font-familly에 지정한 웹폰트를 넣으면 끝이다. 예를 들면 아래와 같다. body { font-family: 'Noto Sans KR'; } @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url('../assets/fonts/noto-sans/noto-sans-kr-v21-korean-regular.woff2') format('woff2') } 조금더 상세히 말해보면 font-style, weight를 각각 적어줘야 한다. 그래서 사용하는 font-weight에 따라 필요한 파일의 ..

https://ms3864.tistory.com/381 github action으로 ec2에 자동배포하기1 우아한테크캠프 마지막 프로젝트 때 나는 자동배포부분을 맡지 않아서 꼭 혼자서 다시 해보고 싶었다. 그리고 삽집도 많이했는데 다시 삽질하지 않겠다는 의지(?)를 갖고 블로그에 글을 정리한 ms3864.tistory.com https://ms3864.tistory.com/382 github action으로 ec2에 자동배포하기2 지난 글에서는 깃헙액션, 워크플로우에 대해 알아보았다. 이번에는 aws 관련 설정들을 알아보겠다. 그전에 먼저 대략적인 흐름을 설명하겠다. 원래 배포를 할때는 ec2를 생성하고 기본 우분투 설 ms3864.tistory.com 서론은 생략하겠다 7. 키 등록 이제 받은 Acce..

지난 글에서는 깃헙액션, 워크플로우에 대해 알아보았다. 이번에는 aws 관련 설정들을 알아보겠다. 그전에 먼저 대략적인 흐름을 설명하겠다. 원래 배포를 할때는 ec2를 생성하고 기본 우분투 설정, npm, nodejs, db설치를 한 뒤, git clone을 하고 env파일 설정, npm install, npm start, service nginx start등의 명령어 몇개로 서비스를 배포하고 git pull을 통해 앞선 작업들을 비슷하게 반복하고 필요하다면 pm2 등을 이용해 무중단 배포를 한다. 이건 가장 기본적인 흐름이다. 그리고 조금더 발전된 것이 크론탭을 이용한 자동배포다. 크론탭을 이용한 자동배포는 어렵지 않으니 모른다면 한번쯤 보고 넘어가자. https://ms3864.tistory.com/..

우아한테크캠프 마지막 프로젝트 때 나는 자동배포부분을 맡지 않아서 꼭 혼자서 다시 해보고 싶었다. 그리고 삽집도 많이했는데 다시 삽질하지 않겠다는 의지(?)를 갖고 블로그에 글을 정리한다. GitHub Actions이란 GitHub Actions를 사용하면 이제 세계적 수준의 CI/CD로 모든 소프트웨어 워크플로를 쉽게 자동화할 수 있습니다. GitHub에서 바로 코드를 빌드, 테스트 및 배포하세요. 코드 검토, 분기 관리 및 문제 분류가 원하는 방식으로 작동하도록 합니다. -- by 공식문서 https://github.com/features/actions 쉽게 말해서 워크플로우를 자동화 시켜주는 도구다. 자동배포, 린트체크, 자동화 스크립트 처리 등을 할 수 있다. 가장 기본적인 방법은 크론탭을 이용한..

새롭게 글을 썼습니다. diff알고리즘을 적용해서 https://ms3864.tistory.com/409 바닐라자바스크립트(ts)에서 컴포넌트 만들기1(diff 알고리즘) 배경 사실 이전에도 글을 올렸었다. 그런데 많이 부족한 내용이였고 버그도 많이 있었다. 이번에 기회가 있어서 새롭게 간단한 프로젝트를 만들었는데 저번보다 훨씬 괜찮게 만들었다고 생각해 ms3864.tistory.com 배경 우아한테크캠프에서 바닐라 자바스크립트로 프로젝트를 했었다. 그때 아쉬웠던 부분들을 생각하며 조금 더 보완해보려고 한다. 그리고 황준일님의 블로그를 참고했다. 개요 나는 리액트, 리덕스를 사용한 경험이 있다. 이를 바탕으로 생각해보자. 리액트부터 생각을 해보면 리액트는 컴포넌트를 기반으로 동작하며 jsx를 바벨을 통해..

길고도 짧았던 우아한테크캠프가 끝이 났다. 그리고 바로 이어지는 1차 면접이 끝나고 카카오 1차 코딩테스트도 어제 끝났다. 이제 무엇을 해야할까?? 다가오는 금요일에 1차 면접결과가 나오고 코로나 2차 접종도 한다. 코로나 맞고 나왔는데 떨어지면 울어야겠다... 사실 지금 좀 지쳤다. 캠프기간동안 잠도안자고 밥 먹을 시간 아껴서 했으니... 당연한 결과다. 그렇다고 여행을 간다던가 아얘 공부를 놓을수는 없다. 아 카카오코테는 망했다. 카카오 안녕~~~ 어제는 친구들도 만나고 오늘은 자취방에 와서 필요한 짐도 챙기고 사람도 만나면서 좀 쉬고있다. 당장 내일부터 짬나는대로 공부를 조금씩 할 것이다. 사실 부족한 부분이 너~~~~~~~~~~~~~~~~~~~~~~~무 많다. 하나부터 열까지 다 부족하다. 단기간..

저번주에는 후기를 쓰지 못했다. 뭔가 바빠서 그랬던 것 같기도 하고 할게많아서 그냥 넘겼던 것 같다. 아직 모든 과정이 끝나진 않았지만 거의 다 끝났다. 그래서 일단 주말이니 후기를 쓰려고 한다. 우리팀은 주말에 코딩하지 않겠다는 마음가짐으로 프로젝트를 끝냈다.(물론 나는 할거다 ㅎㅎ) 다른팀들은 아직 완성되지 않은것같은데 우리팀은 내용을 줄여서 그런지는 몰라도 버그도 심한게 없었고 크게 문제되는 부분이 없었다. 그래서 나는 서버사이드렌더링이나 최적화, 반응형 ui 수정, 버그 수정 등을 주말에 하려고한다. 캠프후기를 사실 자세히 쓰고 싶은데 자소서를 제출해야되서 여기다가 큰 에너지를 쏟을 수는 없다. 간단하게 이번 프로젝트를 회고해보면 기술적으로도 도전이였고 협업에서도 도전이였다. 협업을 캠프내에서 계..