왜 쓰는 거야? React 에서 JSX 를 사용할 때 return 문에는 무조건 최상위 태그가 존재해야한다. React 는 하나의 컴포넌트만을 return 할 수 있기 때문이다. 이때, Fragment 라는 걸 사용할 수 있는데 이는 불필요한 div, span 등의 HTML 요소 없이 여러 개의 자식 요소를 렌더링 할 수 있도록 하는 기능이다. Fragment 를 사용하면 컴포넌트의 여러 요소를 그룹화할 수 있다. 예시 예를 들어 App() 에 Table() 이라는 컴포넌트를 넣어서 사용하고 싶은 경우를 생각해보자. Table 컴포넌트는 다음과 같다. function Table() { return ( Hello World ); } 여기서 Table 컴포넌트 내의 태그들을 묶기 위해 최상위 태그로 div ..
2023 월드 IT 쇼를 다녀왔습니다! 온라인 사전등록을 하면 무료이고, 현장 등록을 하면 1만원을 결제해야하더라구요. 저는 온라인 사전등록을 했기에 결제할 필요없이 바로 등록을 하고, 이름표를 받아 입장할 수 있었습니다. 사람이 정말정말 많았어요. 사전등록을 했더라도 등록/이름표를 받으려면 이 긴 줄을 서야했답니다. 근데 회전율이 빨라서 5분도 안 기다린 것 같아요. 들어가기 전에 볼 수 있었던 부스 안내도입니다. 2층에는 주로 스타트업, 3층에는 대기업 부스가 있었어요. 들어가자마자 처음으로 구경했던 부스는 읽기 능력을 검사할 수 있는 서비스가 있었는데요. 글을 읽을 때 눈이 바라보는 걸 인식해서 읽기 능력을 측정할 수 있는 서비스였어요. 거의 대부분의 서비스들이 AI에 관련되었다고해도 과언이 아닐 ..
이번에 언어학과 심리실험이라는 교양을 듣게 되었는데요. 수업에서 쓰는 프로그램인 OpenSesame 를 설치해야 실습을 진행할 수 있더라구요! MacOS에서 OpenSesame 앱을 설치하고, 여는 법에 대해서 포스팅해보려합니다. OpenSesame 란? "OpenSesame"는 실험실 연구자를 위한 무료 오픈 소스 실험 설계 및 데이터 수집 소프트웨어입니다. 이 소프트웨어는 행동 실험, 뇌 영상 실험 및 통제 실험 등 다양한 실험 유형을 지원하며, 실험 설계, 시각적 자극 제시, 반응 및 데이터 수집을위한 사용자 정의 스크립트를 만들 수 있습니다. OpenSesame는 Python 기반으로 작성되었으며, 그래픽 사용자 인터페이스를 통해 쉽게 사용할 수 있습니다. 설치 저는 homebrew 를 이용해서 ..
안녕하세요!오늘은 티스토리 스킨을 새로 바꿔보고, 바꾸면서 헤맸던 부분을 공유해드리려고해요. hELLO 스킨일단 저는 hELLO 라고 하는 스킨을 적용했습니다.개발자들에게 아주 인기 있는 스킨이라고 하더라구요!정상우 개발자 님이 제작하셨으며, 아래 포스팅에서 다운로드 받을 수 있습니다.https://pronist.tistory.com/5?category=844785 hELLO 티스토리 스킨을 소개합니다.hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기pronist.dev 스킨 적용하기관리자 페이지에 들어가서 스킨 변경 > 스킨 등록 을 눌러줍니다.추가..
요소들을 리스트로 보여주는데, 제목이 너무 길어서 넘어가는 문제가 생겼다. 줄을 넘어가면 grid 가 흐트러지기도하고, 보기에도 통일성이 없어보여서 너무 길면 적당히 자르고 끝에 ... 을 붙이도록 해봤다. 현재는 위와 같은 상태이다. 맨 오른쪽 요소를 보면 제목이 너무 길어서 아래줄까지 침범했다. 저 제목 데이터는 name 이라는 변수에 들어있었는데, processedName 이라는 이름의 변수로 새로 만들어줬다. const processedName = name.length > 15 ? `${name.slice(0, 15)}...` : name; 나는 15자가 넘어갈 경우 문자열을 자르고, 끝에 ... 이 붙도록 코드를 작성해봤다. processedName 변수를 적용해서 다시 화면을 구성해보겠다. 원..
맥북으로 바꾸면서 설정할 것들이 이것저것 많아졌는데, 그 중에서도 폴더 현재위치에서 바로 터미널을 여는 단축키가 있으면 좋을 것 같아 설정해보았는데요. 방법을 공유합니다! 설정 방법 먼저 Finder를 열고 상단에 Finder > 서비스 설정을 들어가줍니다. 앱 단축키 메뉴에 들어가서 새로운 단축키를 추가해주기위해 + 를 눌러줍니다. (저는 이미 추가해둬서 이미 만들어져있지만 무시해주세요!) 응용 프로그램은 Finder 로, 메뉴 제목을 작성하고 (저는 '폴더에서 새로운 터미널 열기' 라고 했습니다) 키보드 단축키도 원하는대로 설정해줍니다. (저는 command + O 로 했어요) 작성해준다음 완료 버튼을 누릅니다. 이렇게 추가되어져있으면 일단 완료! 다음 단계로 넘어갑시다. 이번에는 '앱 단축키' 메뉴..
UMC 라는 동아리를 다들 아실지 모르겠다. University Makeus Challenge 라는 IT 대학생 연합동아리인데, 나는 작년에 3기에 Node.js 파트장으로 참여했었고 올해는 4기의 Web 파트장으로 참여한다. 아직 만들어지지 얼마 안된 따끈따끈한 연합동아리인데, 그래도 점점 성장해가는데 눈에 보이는 동아리이기도하고 주변에서 누군가 고민한다면 한번 해보라고 추천해보고 싶은 동아리여서 글을 포스팅해본다. 간단 소개 간단히 동아리에 대한 소개부터 해보겠다. UMC는 대학생 연합 동아리로 전국에 많은 학교들마다 각각 챕터가 있다. 그리고 지부단위로 활동이 진행되는데, 한 지부에 4-5개의 학교가 있다. 이렇게 지부단위로 네트워킹 활동이나 아이디어톤, 프로젝트 팀매칭 등이 진행된다. 3기 기준,..
얼마전 건국대학교에서 열린 Flutter Forward Extended Korea 행사를 다녀왔다. Flutter 에 대한 관심은 항상 열어두고 있었기도 했고, Flutter로 개발을 하고 있는 동기가 같이 가자고 제안을 했기도해서 가벼운 마음으로 가봤다. 작년 여름방학 때 Flutter 를 접하고, 개발도 경험해본 이후 쉽고 재밌는 매력에 푹 빠져버렸었다. (물론 여기서 쉽고 재밌다는 건 내가 딥하게 들어가지 않았기 때문일 수 있다) 아무튼, 봄바람 살랑살랑 부는 날에 기분좋은 마음으로 건대로 갔다. 나는 첫 세션부터 What's new in Dart 3.0 세션까지 보고왔다. Flutter Web 베스트 사용하기 Flutter 로 웹을 개발할 수 있다는 정보는 전에 들은 적이 있지만, 아직 불안정해서..
다시 초심(?)으로 돌아가 html과 css 만을 이용해서 당근마켓 사이트를 클론코딩해보는 미니 과제! 일단 내가 구현하고자 한 사이트는 아래와 같다. https://www.daangn.com/ 당신 근처의 당근마켓 중고 거래부터 동네 정보까지, 이웃과 함께해요. 가깝고 따뜻한 당신의 근처를 만들어요. www.daangn.com 일단 여러 탭 메뉴 중에 '중고거래'에 해당하는 페이지만 클론코딩해보았다. Javascript 를 활용한 기능은 한가지만 넣었는데, 검색창에 무언가를 입력하고 채팅하기 버튼을 눌렀을 때 alert 으로 무슨 input 을 넣었는지 띄워주는 기능이다(정말 별거 아니지만 넣어보았다) 코드 코드는 아래와 같다. 파일을 따로 분리하지는 않았고 index.html, index.css 에 ..
A계정에 있던 내용을 복사해서 B계정의 페이지에 붙여넣기를 하려고 보니 이런 오류가 떴다. 해결법! 웹에서 공유를 켜주고 '템플릿 복제 허용'을 켜준다. 그리고 아까처럼 다시 A페이지에서 복사, B 계정 페이지에 가서 붙여넣기를 해주면 오류 없이 잘 되는 것을 확인할 수 있다! 저처럼 헤매는 분이 없기를 바라며...😏
리액트 스터디를 진행하다가 CommonJS module 과 ES module 이 언급이 되었는데 정리해볼겸 포스팅한다. 자바스크립트는 파일마다 독립적인 Scope(범위)를 가지지 않고 하나의 전역객체를 공유해서 사용한다. 대신 이렇게 되면 전역변수가 중복이 되는 문제가 생길 수 있다. 이러한 문제점을 해결하기 위해서 Node.js 에서는 사실상 표준이라고 할 수 있는 CommonJS를 채택하였다. 따라서 각각의 모듈들은 각자의 Scope를 가질 수 있게 되었다. 하지만 브라우저에서는 이를 지원하지 않았다. 그래서 ES6에서 이를 해결하기 위해 모듈 기능을 추가하게 되었다. 비교 ES Modules - module loader 를 비동기 환경에서 실행, import / export 구문을 찾아서 파싱 - ..
DevOps, 요즘 이리저리 많이 들리는 단어이다. 많이 들리다보니 개념이 정확이 무엇인지 궁금해졌고, 관련 영상과 글을 찾아보다가 이참에 정리해서 포스팅을 하면 좋겠다 생각했다.오늘날의 작업방식디지털 트랜스포메이션 시대의 기업들은 기술 혁신에 대한 도전에 직면하고 있다.2000년대 포춘 500대 기업의 절반이 디지털 트랜스포메이션이라는 거대한 도전앞에 새로운 기술기반 기업들에게 자리를 내주어야 했다.고객 가치를 빠르고 개선된 형태로 전달해주는 문제는 이제 단순히 매출을 조금더 올리는 문제가 아니라기업 생존의 문제가 되었다. 새로운 기술을 통해 서비스를 빠르게 개선하고, 가치있는 고객 경험을 전달함으로써 지속적인 혁신을 할 수 있는 환경을 만들어야하는 것이다. 소프트웨어 개발환경, 어떻게 혁신해야할까?D..
안녕하세요. 이번 포스팅에서는 3월 23일 DEVOCEAN 테크 세미나에 참여해본 후기를 공유해보려합니다! 테크세미나의 주제였던 ‘Datadog’은 사실 처음 들어보는 서비스이기도했고, 아직 학생 신분인 탓에 서비스를 모니터링 해볼일이 없어서 세미나의 내용을 온전히 이해할 수 있을까 하는 걱정이 앞섰습니다. 하지만 어려운 부분은 찾아보며 듣고, 세미나가 끝나고 다시 세미나 자료를 찬찬히 보니 Datadog이 굉장히 좋은 기술이라는 것이 와닿는 것 같았습니다! 정말 ‘Front-End 부터 Back-End 까지의 여정’ 이라는 제목을 충족시켜주시는 세미나였어요. 🌊 Datadog 이 뭐야? Datadog는 클라우드 환경에서의 모니터링, 로그 분석, 인프라스트럭처 및 애플리케이션 성능 관리 등을 위한 모니터..
작은 프로젝트를 개발하다가 사진 슬라이드를 구현해야할 일이 있어 Swiper 를 선택하게 되었다. https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 공식 문서에 들어가서 찬찬히 보면 된다. npm i swiper 일단 터미널에서 설치부터하고, 아래와 같이 사용하면 된다.(공식문서 예제다) // import Swiper core and required modules import { Navigation, Pagination, Scroll..
styled component 를 써오던 나였는데, 이번에 동기와 작은 프로젝트 개발을 하나 하면서 동기가 tailwind css 에 대해서 알려줬다. 일단 공식은 여기다 https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com 사용 방법 일단 터미널에서 설치부터 npm install -D tailwindcss npx tailwindcss init 그리고 tailwind.config.js 파일에다가 module..
저번에 개발을 하다가 알게된 새로운 git 명령어가 있어서 정리한다. git stash 란? 만약에 내가 작업을 하다가 브랜치를 변경해야할 일이 생긴다면 하던 작업물들을 커밋하기는 그렇고... 어떻게 해결해야할까? git stash 를 이용하면 된다 git stash 란 하던 작업을 임시로 저장해두고 싶을 때 사용하는 명령어이다. 변경사항을 스택에 잠시저장을 하고, 나중에 다시 꺼내올 수 있다. 이때 git stash 명령을 사용하면 워킹 디렉토리에서 수정한 파일만 저장을 한다. 명령어 정리 ⭐git stash : 스택에 새로운 stash가 만들어진다. 이 명령을 하면 워킹 디렉토리는 깨끗해진다. git stash list : 여러번 stash 한 경우 저장한 stash 목록을 확인할 수 있다. git ..
어제가 발대식이었는데, 이참에 합격하고 발대식 다녀온 후기를 포스팅해본다. 지원 계기 활동하고있는 GDSC 슬랙 채널에 다음과 같은 정보가 올라왔다. 항상 대외활동스러운 것은 공대생들과는 거리가 먼 것이라고 생각하고 지내왔는데 처음 보는 활동이라 신기했다. 개발자 대외활동은 본 적이 없는데! SK 텔레콤이라는 (대)기업에서 진행하는 것도 그런데, 개발과 관련된 이야기 쓰는 걸 좋아하고, 블로그를 한다고 하니 눈이 갔다. (이런거 좋아하는데) 심지어 SK 그룹의 서비스 및 기술 체험 기회도 제공하고 실무 위주 개발경험을 해볼 수 있다니. 이런건 항상 선지원 후고민이지. 바로 지원서를 작성하기 시작했다. 지원서 제출하고나서는 구글에 올라와있는 1기 후기를 엄청 찾아봤던 것 같다. 겉으로는 떨어져도 아쉽고 말..
이번에 숭실대에서 GDSC 세미나가 열렸다. 집에서 가깝기도 하고 좋은 기회다 싶어서 선착순 신청 성공하고 다녀온 후기! 참여계기 GDSC Korea에 세미나 홍보글이 올라와서 알게되었다. 원래 항상 이런 세미나 보면 내 관심사 주제가 많은가 보게 되는데, Web frontend 도 있고, Flutter, Server 모두 있고 익숙한(?) 기업 이름들이 많이 보이길래 궁금해졌다. 멀지 않은 곳이라 금방 도착했다! 진행 순서는 다음과 같았다. - Web frontend: 조현영 연사님(제로초), 카카오 모빌리티 개발 파트장 - Server: 이동욱님(조졸두), 인프랩 CTO - ML: 박정현님, SSG.COM, Keras Korea Organizer - Flutter: 송승현님, (주)키니코스 CEO, ..
문제 프로젝트를 개발하는데 overflow 시에 저렇게 스크롤바가 보이는게 싫어서 해결하고 싶었다. 해결 - 크롬 브라우저를 사용 - styled components 를 사용 ::-webkit-scrollbar { display: none; } 위와 같이 속성을 추가해주었다. 스크롤바가 사라진 모습.
혼자 강의를 듣다가 강사님이 function을 만들때 단축키를 사용하셔서 금방금방 만드시길래 찾아봤다. 이렇게 rfce를 치고 엔터를 치면 이렇게 바로 파일이름이랑 똑같은 Component 틀을 만들어준다. (이런거 너무 좋아...😆) 방법 vscode에서 익스텐션을 하나 설치하면 사용할 수 있다. ES7 이라고 치면 저런 익스텐션을 찾을 수 있는데, 설치하면 단축어 사용가능하다.
현재 서버 Node.js, 프론트 React.js 환경으로 프로젝트를 진행하는 강의를 듣고 있다. 서버랑 클라이언트를 원래는 따로 npm run을 해줘야하지만 concurrently 라는 라이브러리를 설치하면 동시에 실행시킬 수 있다고한다. 아는 게 많아지면... 손이 더 편하니까?! 한번 알아봤다. 설치 npm install concurrently --save 설치는 위와같이 터미널에서 해주고 루트 디렉토리에 있는 package.json에 scripts 부분을 보면 dev 부분이 있다. 저 부분을 아래처럼 작성해주면 원하는 명령어를 순차적으로 실행한다.
결론부터 결론 : 몽고디비 클러스터는 아틀라스 프로젝트 당 하나씩 무료로 생성해서 이용가능. 하나 더 만들려고 하면 막힘. 왜 알게되었냐면... 리액트+노드로 프로젝트 만드는 강의를 들어보는 중인데, MongoDB를 이용한다고 한다고 하길래 새로운 클러스터를 생성하려고 했다. 클러스터를 생성할 때에 Shared로 설정하고 Cluster Tier 를 M0 으로 설정해주면 무료 클러스터를 만들 수 있다. 그런데 생성하려고 하니... 이미 무료 클러스터가 하나 있기 때문에 새로운 무료 클러스터를 생성할 수 없다고 떴다. 그래서 구글링해봤다. 결론은 시작할때 무료 shared tier를 이용할 수 있고, 대신 무료 클러스터는 Atlas 프로젝트 당 하나씩만 가능하다는 것이었다. 전에 노드 강의를 들었을 때 몽고..
js 는 일반적인 코드를 작성하면 synchronous(동기방식) 하게 처리된다 -> 코드 작성한 윗줄부터 차례로 코드가 실행되는 것 하지만 어떤 함수들을 사용하면 asynchronous(비동기적) 하게 코드 실행이 가능하다. 예를 들어 ajax, 이벤트리스너, setTimeout 이런 함수들이다. 이런 함수들은 처리시간이 오래 걸린다. 그래서 ajax 요청하는 코드들은 순차적으로 실행되지 않고 다른 코드가 완료되면 실행된다. React 의 setState 함수 특징 리액트로 state를 만들때 function App(){ let [name, setName] = useState('kim') } 이런식으로 하는데, setName 이라는 state 변경함수들은 전부 asynchronous(비동기적) 으로 처..
지나가다가 요즘 챗 GPT 라는 것에 대해서 많이 보였다. 제대로 글을 읽게 된 것은 오늘이 처음이었는데 혼자 사용해보고 신기하고 재밌어서 후기를 써볼겸 포스팅한다! 챗 GPT 가 뭔데? https://openai.com/blog/chatgpt/ ChatGPT: Optimizing Language Models for Dialogue We’ve trained a model called ChatGPT which interacts in a conversational way. The dialogue format makes it possible for ChatGPT to answer followup questions, admit its mistakes, challenge incorrect premises, and..
ref: https://alkhwa-113.tistory.com/entry/AWS-EC2%EC%97%90-MySQL-%EC%84%A4%EC%B9%98%ED%95%98%EA%B3%A0-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0 AWS EC2에 MySQL 설치하고 개발환경 구성하기 1. MySQL 설치 $ sudo apt-get update $ sudo apt-get install mysql-server 2. MySQL 실행 $ /etc/init.d/mysqld start // MySQL 서버시작 $ ps -ef | grep mysql // 실행확인 $ sudo /usr/bin/mysql -u root -p // MyS..
PWA 라는 걸 구글이 밀고 있다. Progressive Web App 이라는건데 웹사이트를 Android/iOS 모바일 앱처럼 사용할 수 있게 하는 웹개발 기술이다. 내가 만든 웹사이트를 모바일 앱으로 발행해서 쓸 수 있는 법을 알아보자 여기서 모바일 앱으로 발행한다는게, iOS/Android 앱으로 발행하는게 아니라 웹사이트자체를 스마트폰 홈화면에 설치하는 방식이다. PWA 의 장점 1. 스마트폰이나 태블릿의 홈화면(바탕화면)에 웹사이트를 설치할 수 있다. 앱을 누르면 상단 URL 바가 제거된 크롬 브라우저가 뜬다. 사실 웹이지만 유저가 봤을때는 그냥 앱같다. 2. 오프라인에서도 동작이 가능하다. service-worker.js 라는 파일과 브라우저의 Cache storage 덕분이다. (게임 만들 ..
이미지 업로드 하는 방법에 대해서 배워보자 이미지 업로드 할 수 있는 페이지 만들기 upload.ejs 라는 파일명으로 view 를 하나 만들어줬다. enctype은 서버로 폼 전송하는 방식이다. enctype을 multipart/form-data 로 설정할 경우 인코딩하지 않고 그대로 전송한다는 의미이다. application/x-www-form-urlencoded 으로 설정하는 경우 base64라는 인코딩형식으로 인코딩되어서 전달됨. 일단 업로드 페이지는 위와같이 마련했다. upload페이지를 렌더링해주는 GET api를 만들어봤다. /upload 경로로 get 요청을 보내면 upload.ejs 를 렌더링 해줄거다. 업로드한 이미지를 하드에 저장 라이브러리를 하나 설치해준다. npm install m..
두 route 들을 다른 파일에서 관리하려고 한다. routes 라는 폴더를 만들고 shop.js 라는 파일을 만들어줬다. 아래와 같이 작성한다. 기존에 app 으로 사용했던걸 router 로만 바꾸어주면된다. module.exports 란? module.exports = 변수명; 이런식으로 쓰면 다른 곳에서 쓸 수 있게 저 변수를 내보내준다. 그리고 require('./파일경로'); 이런식으로 쓰면 다른 파일을 불러올 수 있다. 여기서 불러온 파일이 내보내는 변수가 있을 것이다. 그걸 가져다 쓸 수 있다. import 나 export 문법으로 대체 가능하다. 그러면 기존에 server.js 에 있던 route 대신에 아래와 같이 적어줄 수 있다 app.use() 는 미들웨어를 사용하고 싶을 때 쓰는 함..
지금은 삭제버튼을 누구나 누를 수 있다. 하지만 회원가입기능이 있으니까 내가 썼던 글만 삭제가능하도록 해보자 /register 로 POST 요청이 들어오면 서버는 DB에 저장하면 될 듯하다. /register 경로로 POST 요청이 오면 login 이라는 collection 에 insertOne 함수로 데이터를 삽입한다. 콜백함수로 / (홈 경로)로 redirect 해서 돌아가도록 해줬다. 글 작성자만 삭제가 가능하도록 하기 일단 회원가입을 해서 계정을 하나 만들어준다. 지금을 글을 발행할 때에 글작성자가 따로 추가되지 않는다. 그래서 writer 라는 속성을 따로 만들어줬다. req.user._id 에는 현재 로그인한 유저의 정보가 들어있을 것이다. 따라서 writer 의 값을 이걸로 넣어줬다 post..
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client 이런 오류가 떠서 해결하기위해 아래와 같은 명령어를 mysql에 접속해서 입력해준다. ALTER USER '[계정]'@'[호스트]' IDENTIFIED WITH mysql_native_password BY '[비밀번호]'; ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'mysql비밀번호'; 다시 노드를 실행해보면 오류없이 잘 작동한다.
